, obrázkem
a políčkem. Zobrazuje se jen podle nastavení v administraci
(Nastavení → Administrace → Zabezpečení obchodu → Captcha).
Nadpis se tu chová jako malý popisek nad obrázkem a políčkem, box
bez vlastního pozadí/paddingu, ať splyne s pásem. */
.footer-newsletter .subscribe-form fieldset.box{
flex:1 1 100%;
align-items:flex-end;
gap:var(--sh-space-sm) var(--sh-space-md);
margin:0;
padding:0;
background:transparent !important;
box-shadow:none !important;
}
.footer-newsletter .subscribe-form fieldset.box > h2{
flex:0 0 100%;
margin:0;
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-sm);
font-weight:var(--sh-font-weight-medium);
line-height:var(--sh-line-height-body);
color:var(--sh-color-text);
}
.footer-newsletter .subscribe-form fieldset.box .form-group{
flex:0 0 auto;
min-width:0;
}
/* input */
.footer-newsletter .form-group{
flex:1 1 auto;
min-width:220px;
margin:0;
}
/* tlačítko drženo v prvním řádku vedle e-mailu, souhlas se zalomí pod něj */
.footer-newsletter .btn{
order:1;
}
.footer-newsletter .consents{
order:2;
flex-basis:100%;
}
.footer-newsletter .form-control{
height:60px !important;
padding:0 !important;
background:transparent !important;
border:none !important;
border-bottom:1px solid var(--sh-color-text) !important;
border-radius:0 !important;
box-shadow:none !important;
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-base);
color:var(--sh-color-text);
transition:var(--sh-transition);
}
.footer-newsletter .form-control::placeholder{
color:var(--sh-color-text-muted);
}
.footer-newsletter .form-control:focus,
.footer-newsletter .form-control:focus-visible{
border-bottom-color:var(--sh-color-accent) !important;
outline:none !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
}
/* tlačítko */
.footer-newsletter .btn{
padding:0 28px !important;
border:none !important;
border-radius:var(--sh-radius-btn) !important;
height: 60px !important;
background:var(--sh-color-cta) !important;
color:var(--sh-color-text-inverse) !important;
font-family:var(--sh-font-family-headings);
font-size:var(--sh-text-base);
font-weight:var(--sh-font-weight-heading);
transition:var(--sh-transition);
}
.footer-newsletter .subscribe-form .sr-only{
overflow: visible !important;
}
.footer-newsletter .btn:hover{
background:var(--sh-color-cta-hover) !important;
color:var(--sh-color-text-inverse) !important;
transform: var(--sh-btn-hover-transform);
box-shadow: var(--sh-btn-hover-shadow);
}
/* souhlas */
.footer-newsletter .consents{
margin-top:18px !important;
text-align:left !important;
}
.footer-newsletter .consents label{
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-xs);
line-height:var(--sh-line-height-body);
font-weight:var(--sh-font-weight-body);
color:var(--sh-color-text);
}
.footer-newsletter .consents a{
font-weight:var(--sh-font-weight-medium);
}
/* ==========================================================
CUSTOM FOOTER – SHOPTET RESET
========================================================== */
#footer .footer-rows > .custom-footer > div,
.footer-rows .custom-footer > div{
width:100% !important;
max-width:none !important;
flex:0 0 100% !important;
flex-basis:100% !important;
margin:0 !important;
padding:0 !important;
}
#footer.footer{
width:100%;
max-width:none;
background:var(--sh-color-cool-dark);
color:var(--sh-color-text-inverse);
}
/* Shoptet container přes celou dostupnou šířku */
#footer .footer-rows{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-top:var(--sh-space-section) !important;
padding-right:var(--sh-space-page) !important;
padding-bottom:var(--sh-space-xs) !important;
padding-left:var(--sh-space-page) !important;
box-sizing:border-box;
}
/* nativní Shoptet lišta pod naším footerem – stejná barva a boční
padding jako .footer-rows výše, ať "Vytvořil Shoptet" navazuje na
stejné okraje jako náš obsah nad ním. margin-top (ne padding na
.footer-rows výš) - #footer.footer má tmavě zelené pozadí na celou
patičku, takže mezera mezi sloupci a touhle lištou zůstane zelená,
ne bílá/krémová. */
.full-width.footer-bottom-full-width{
background-color:var(--sh-color-cool-dark);
position:relative;
margin-top:var(--sh-space-section);
}
/* Skřítkové nemají sloupce patičky (.footer-rows), jen tuhle lištu — její
margin-top by pak neměl co oddělovat a "propadl" by přes prázdnou
patičku ven jako světlý pruh (~85 px) mezi obsahem a patičkou. Bez
sloupců tedy žádné odsazení, patička naváže hned; s přidanými sloupci
se výchozí odsazení vrátí samo. */
#footer:not(:has(.footer-rows)) .full-width.footer-bottom-full-width{
margin-top:0;
}
/* čára nad nativní lištou (copyright + signature) - odsazená stejně
jako zbytek obsahu (--sh-space-page), ne přes celou šířku obrazovky
jako by dal border-top přímo na .full-width wrapper (ten je edge-to-
edge, ignoroval by boční padding). */
.full-width.footer-bottom-full-width::before{
content:"";
position:absolute;
top:0;
left:var(--sh-space-page);
right:var(--sh-space-page);
border-top:1px solid rgba(255,255,255,.15);
}
/* ID + třída (#footer), stejný recept jako #content-wrapper.container
v homepage.css - to je prokazatelně funkční vzor pro přebití
main-14's .container{max-width/padding} na jeho vlastních @media
breakpointech. Bez ID prefixu (jen .full-width... .container...)
to i s !important tiše prohrávalo. */
#footer .full-width.footer-bottom-full-width .container.footer-bottom,
.full-width.footer-bottom-full-width .container.footer-bottom{
background:transparent;
box-sizing:border-box;
padding-top:var(--sh-space-xs) !important;
padding-bottom:var(--sh-space-xs) !important;
/* main-14 dává generické .container třídě vlastní padding-left/right:
16px (main-14.css:2) na všech šířkách - nulujeme přes vlastní
hodnotu, ať lišta drží stejné boční okraje jako zbytek footeru
(--sh-space-page) a ne nativní pevných 16px. */
padding-left:var(--sh-space-page) !important;
padding-right:var(--sh-space-page) !important;
/* main-14 dává generické .container třídě i vlastní max-width +
margin:auto (klasický "container" pattern), který ho centruje na
jinou šířku, než má zbytek layoutu (ten jede na 100% šířku +
padding) - a to na více než jednom breakpointu (ne jen od 768px,
jak se zdálo dřív), proto teď platí na všech šířkách. */
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
}
/* reset Shoptet row záporných marginů */
#footer .footer-rows .custom-footer{
display:block !important;
width:100% !important;
margin-right:0 !important;
margin-left:0 !important;
padding:0 !important;
}
/* vnitřní Shoptet wrapper banneru */
#footer .footer-rows .custom-footer .banner-wrapper,
#footer .footer-rows .custom-footer span[data-ec-promo-id]{
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
CUSTOM FOOTER – BASE
========================================================== */
.sh-footer-content{
width:100%;
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-base);
font-weight:var(--sh-font-weight-body);
line-height:var(--sh-line-height-body);
color:var(--sh-color-text-inverse);
text-align:left;
}
.sh-footer-content,
.sh-footer-content *{
box-sizing:border-box;
}
/* ==========================================================
FOOTER GRID
========================================================== */
.sh-footer-content__navigation{
display:grid;
grid-template-columns:minmax(0, 2fr) repeat(3, minmax(0, 1fr));
gap:var(--sh-space-box);
width:100%;
margin:0;
padding:0;
border:none;
align-items:start;
}
/* ==========================================================
INTRO – 40 %
========================================================== */
.sh-footer-content__intro{
min-width:0;
max-width:480px;
text-align:left;
}
.sh-footer-content__intro-title{
margin:0 0 var(--sh-space-sm);
font-family:var(--sh-font-family-headings);
font-size:var(--sh-heading-sm);
font-weight:var(--sh-font-weight-heading);
line-height:var(--sh-line-height-heading);
letter-spacing:0;
color:var(--sh-color-text-inverse);
text-align:left;
}
/* bílé logo (multipack-logo-bile.png, průhledné pozadí) místo nadpisu */
.sh-footer-content__logo{
display:inline-block;
margin:0 0 var(--sh-space-sm);
}
.sh-footer-content__logo img{
display:block;
width:clamp(160px, 14vw, 220px);
height:auto;
}
/* slogan pod logem nadpisovým písmem */
.sh-footer-content__intro-text{
margin:0 0 var(--sh-space-md);
font-family:var(--sh-font-family-headings);
font-size:clamp(1.7rem, 1.5rem + .5vw, 2rem);
font-weight:var(--sh-font-weight-body);
line-height:var(--sh-line-height-body);
color:var(--sh-color-text-inverse);
text-align:left;
}
/* ==========================================================
KONTAKTY
========================================================== */
.sh-footer-content__contact-links{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--sh-space-xs);
}
.sh-footer-content__contact-links a{
display:inline-block;
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-base);
font-weight:var(--sh-font-weight-body);
line-height:var(--sh-line-height-body);
}
.sh-footer-content__contact-links a:hover,
.sh-footer-content__contact-links a:focus-visible{
color:var(--sh-color-text-inverse);
text-decoration:underline;
text-underline-offset:0.3em;
}
/* ==========================================================
NAVIGAČNÍ SLOUPCE – 20 % + 20 % + 20 %
========================================================== */
.sh-footer-content__column{
min-width:0;
text-align:left;
}
.sh-footer-content__column-title{
margin:0 0 var(--sh-space-sm);
font-family:var(--sh-font-family-headings);
font-size:clamp(2rem, 1.7rem + .6vw, 2.4rem);
font-weight:var(--sh-font-weight-heading);
line-height:var(--sh-line-height-heading-sm);
letter-spacing:0;
text-transform:none;
color:var(--sh-color-text-inverse);
text-align:left;
}
.sh-footer-content__links{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--sh-space-xs);
margin:0;
padding:0;
list-style:none;
}
.sh-footer-content__links li{
margin:0;
padding:0;
}
.sh-footer-content__links a{
display:inline-block;
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-base);
font-weight:var(--sh-font-weight-body);
line-height:var(--sh-line-height-body);
}
.sh-footer-content__links a:hover,
.sh-footer-content__links a:focus-visible{
color:var(--sh-color-text-inverse);
}
/* provozovatel pod kontakty — malý tlumený řádek; plné údaje (sídlo,
DIČ, spisová značka) patří na stránku Kontakty a do obchodních podmínek */
#footer .sh-footer-content__address{
margin:var(--sh-space-sm) 0 0;
font-size:var(--sh-text-sm);
line-height:1.7;
color:var(--sh-color-text-inverse-muted);
}
/* ==========================================================
ODSTRANĚNÍ PŮVODNÍHO SHOPTET STYLOVÁNÍ
========================================================== */
#footer .sh-footer-content h2,
#footer .sh-footer-content h3,
#footer .sh-footer-content p,
#footer .sh-footer-content ul,
#footer .sh-footer-content li{
text-align:left;
}
#footer .sh-footer-content a{
color:var(--sh-color-text-inverse-muted);
text-decoration:none;
border:none;
box-shadow:none;
transition:var(--sh-transition);
}
/* #footer prefix nutný, aby to přebilo pravidlo výše (jinak hover nikdy
nenaskočí, protože #footer .sh-footer-content a má vyšší specificitu
než .sh-footer-content__links a:hover) */
#footer .sh-footer-content a:hover,
#footer .sh-footer-content a:focus-visible{
color:var(--sh-color-text-inverse);
}
/* Shoptetův výchozí copyright text ("Copyright 2026 Ze zápraží...")
nahrazujeme JS-em (viz JS níže) třemi vlastními odkazy - Obchodní
podmínky / Ochrana osobních údajů / Cookies - takže .copyright teď
funguje jako malý flex řádek, ne jako věta. Zůstává na svém původním
místě vlevo, #signature napravo díky justify-content:space-between
na .footer-bottom. */
/* main-14 dává .footer-bottom (od 768px, kdy jede jako řádek)
align-items:center - v pořádku, dokud jsou copyright i signature na
jeden řádek. Jakmile se copyright zalomí na 2 řádky (užší okno),
"center" by signature vycentrovalo doprostřed obou řádků; flex-end
ho drží na spodní hraně, na úrovni posledního řádku copyrightu.
Scoped jen na 768px+ - pod tím .footer-bottom jede jako sloupec a
align-items tam řeší levé/pravé zarovnání (viz mobilní media query
níž s vlastním align-items:flex-start), ne nahoře/dole. */
@media (min-width:768px){
#footer .footer-bottom{
align-items:flex-end !important;
}
}
#footer .footer-bottom .copyright{
display:inline-flex;
flex-wrap:wrap;
align-items:center;
/* menší mezera MEZI ŘÁDKY, když se "Cookies" zalomí pod "Obchodní
podmínky"/"Ochrana osobních údajů" (row-gap), než mezi odkazy
na stejném řádku (column-gap) */
row-gap:var(--sh-space-xs);
column-gap:var(--sh-space-md);
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-xs);
font-weight:var(--sh-font-weight-body);
color:var(--sh-color-text-inverse-muted);
}
#footer .footer-bottom .copyright a{
color:var(--sh-color-text-inverse-muted);
}
#footer .footer-bottom .copyright a:hover{
color:var(--sh-color-text-inverse);
}
/* náš podpis vložený JS-em jako PRVNÍ potomek dovnitř #signature (ne
jako sourozenec vedle něj!) – #signature je flex položka .footer-bottom
(justify-content:space-between), takže cokoliv vedle něj by bylo
roztahováno/rozhazováno stejně jako copyright a #signature samotné.
Uvnitř #signature žádný flex kontext není, takže se náš text prostě
napojí hned před ikonku + "Vytvořil Shoptet". */
/* teď za nativním obsahem #signature (JS appendChild, ne insertBefore),
proto margin-left místo margin-right a "/" přes ::before místo
border-right dělítka */
#footer .footer-bottom #signature .sh-footer-content__our-signature{
display:inline-block;
vertical-align:middle;
margin-left:var(--sh-space-xs);
font-family:var(--sh-font-family-body);
font-size:var(--sh-text-xs);
font-weight:var(--sh-font-weight-body);
color:var(--sh-color-text-inverse-muted);
}
/* odkaz je uvnitř spanu, ne na něm - oddělovač "|" (::before níž) tak
zůstává mimo odkaz (nepodtrhává se, neklikne se na něj) */
#footer .footer-bottom #signature .sh-footer-content__our-signature a{
color:var(--sh-color-text-inverse-muted);
text-decoration:none;
}
#footer .footer-bottom #signature .sh-footer-content__our-signature a:hover{
color:var(--sh-color-text-inverse);
}
#footer .footer-bottom #signature .sh-footer-content__our-signature::before{
content:"|";
margin-right:var(--sh-space-xs);
color:var(--sh-color-text-inverse-muted);
}
#footer .footer-bottom #signature .image,
#footer .footer-bottom #signature .title{
vertical-align:middle;
}
/* "Vytvořil Shoptet" – main-14 chrání inline stylem jen "display" a
"visibility" (display:inline-block !important; visibility:visible
!important), nic víc. Barvu/velikost/průhlednost stylovat jde. */
#footer .footer-bottom #signature .title{
font-size:var(--sh-text-xs);
font-weight:var(--sh-font-weight-body);
color:var(--sh-color-text-inverse-muted) !important;
}
#footer .footer-bottom #signature .title:hover{
color:var(--sh-color-text-inverse) !important;
}
#footer .footer-bottom #signature .image{
opacity:.6;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width:991px){
.sh-footer-content__navigation{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:var(--sh-space-lg);
}
.sh-footer-content__intro{
grid-column:1 / -1;
max-width:100%;
}
/* na tabletu je 680px moc úzké na e-mail + tlačítko vedle sebe */
.footer-newsletter .subscribe-form{
max-width:100%;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:767px){
#footer .footer-rows{
padding-top:var(--sh-space-section-mobile) !important;
padding-bottom:var(--sh-space-section-mobile) !important;
}
.sh-footer-content__navigation{
grid-template-columns:1fr;
gap:var(--sh-space-md);
}
.sh-footer-content__intro{
grid-column:auto;
}
/* "Co nakupovat" na mobilu hned pod kontakty (email/telefon z
.sh-footer-content__intro) - jen gap mezi nimi nestačil opticky
oddělit. Dřívější :first-of-type pravidlo mířilo na špatný prvek
(první
v gridu je samotné intro, ne sloupec "Co nakupovat"),
proto margin-bottom přímo na intru. */
.sh-footer-content__intro{
margin-bottom:var(--sh-space-md);
}
/* na mobilu Shoptet centruje .footer-bottom (align-items na flex
column layoutu) - my chceme copyright i signature zarovnané
doleva, stejně jako zbytek footeru */
#footer .footer-bottom{
align-items:flex-start;
text-align:left;
}
#footer .footer-bottom .copyright,
#footer .footer-bottom #signature{
text-align:left;
}
/* stejná příčina jako u .container-full-width (homepage.css) a
.sh-category-usp (category.css) - width:100% + padding-left/
right:var(--sh-space-page) přetékalo přes rodiče na mobilu,
potvrzeno živě, že nulování paddingu to řeší */
#footer .full-width.footer-bottom-full-width .container.footer-bottom{
padding-left:0 !important;
padding-right:0 !important;
}
/* čára nad lištou (::before na .full-width.footer-bottom-full-width)
má vlastní inset (left/right:var(--sh-space-page)) nezávislý na
paddingu obsahu výš - po jeho vynulování už spolu nelícují,
tak nulujeme i tady */
.full-width.footer-bottom-full-width::before{
left:0;
right:0;
}
}
/* MOBIL: spodní lišta patičky (Obchodní podmínky / Ochrana údajů /
Cookies + „Vytvořil Shoptet“). Kontejner .footer-bottom má na mobilu
záměrně padding 0 (jinak přetékal přes rodiče, viz výš), takže odkazy
byly u okraje obrazovky. Boční odsazení (--sh-space-page jako zbytek
patičky) proto dostávají samotné řádky uvnitř. */
@media (max-width: 767px) {
#footer .footer-bottom .copyright,
#footer .footer-bottom #signature {
box-sizing: border-box;
padding-left: var(--sh-space-page);
padding-right: var(--sh-space-page);
flex-wrap: wrap;
gap: 8px 24px;
}
}
/* MOBIL: menší mezera pod posledním odkazem patičky a čárou nad lištou
(Obchodní podmínky…). Bylo ~117 px: 48 px padding pod .footer-rows
+ 56 px margin nad .footer-bottom-full-width. */
@media (max-width: 767px) {
#footer .footer-rows {
padding-bottom: var(--sh-space-sm) !important;
}
#footer .footer-bottom-full-width,
.full-width.footer-bottom-full-width {
margin-top: var(--sh-space-sm) !important;
}
}