
/* ==========================================================
   NEWSLETTER
========================================================== */

.footer-newsletter-full-width{
    left:auto !important;
    right:auto !important;
    width:100% !important;
    margin:0 !important;
    background:var(--sh-color-cta-subtle);
}

.footer-newsletter-full-width .container-full-width{
    width:100% !important;
    max-width:none !important;
    padding-left:var(--sh-space-page) !important;
    padding-right:var(--sh-space-page) !important;
    box-sizing:border-box;
}

/* blok */

.footer-newsletter{
    /* Shoptet formuláře redesign čte tuto proměnnou přímo na spoustě
       míst (width na .subscribe-form, select, atd.) — přepsání
       proměnné samotné je spolehlivější než honit každé jednotlivé
       pravidlo, které ji používá. Platí jen uvnitř patičky. */
    --form-fields-width-lg: 680px;

    width:100%;
    max-width:none !important;

    margin:0 !important;
    padding:var(--sh-space-section) 0 !important;

    text-align:left !important;
}

.footer-newsletter form,
.footer-newsletter fieldset{
    margin:0;
    padding:0;
    border:0;
}

/* ==========================================================
   HEADING
========================================================== */

.footer-newsletter h2{
    font-size:0;
    margin:0;
}

.footer-newsletter h2::before{

    content:"Novinky do e-mailu";

    display:block;

    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-sm);

    color:var(--sh-color-text);
}

.footer-newsletter h2::after{

    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jednou za čas pošleme jen to opravdu důležité.";

    display:block;

    max-width:680px;

    margin:14px 0 28px;

    color:var(--sh-color-text);

    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);
    letter-spacing:0;
}

/* ==========================================================
   NEWSLETTER FORM
========================================================== */

/* formulář
   Pozn.: skutečný formulář má třídu "subscribe-form", ne "compact-form"
   (ta na živém DOMu nikdy neexistovala) — proto se řádek e-mail+tlačítko
   nikdy nezobrazoval vedle sebe. */

/* width je teď var(--form-fields-width-lg), přepsané výše na 680px —
   width:100%+max-width jako pojistka, kdyby proměnná z main.css
   nedoběhla (např. při budoucí aktualizaci Shoptetu). */
.footer-newsletter .subscribe-form{
    width:100%;
    max-width:680px;
}

/* skutečné pole (e-mail, souhlas, tlačítko) jsou potomci <fieldset>,
   ne přímo formuláře — flex musí být tady, jinak se jen samotný
   fieldset stane (jediným) flex itemem formuláře a uvnitř sebe dál
   normálně zalamuje bloky pod sebe */
.footer-newsletter .subscribe-form fieldset{
    display:flex !important;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:var(--sh-space-sm) 24px;

    width:100%;
}


/* 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-section) !important;
    padding-left:var(--sh-space-page) !important;

    box-sizing:border-box;
}


/* 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;
}

.sh-footer-content__intro-text{
    margin:0 0 var(--sh-space-md);

    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-muted);
    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:var(--sh-text-lg);
    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);
}


/* ==========================================================
   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);
}

/* ==========================================================
   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;
    }

}