/* =============================================================================
   staera e-shop - vlastní styly
   Soubor:  staera-eshop.css
   E-shop:  https://eshop.staera.cz (Shoptet, projekt 753877)
   Verze:   1.2.0
   -----------------------------------------------------------------------------
   Obsah:
     1. Proměnné
     2. Horní navigační lišta (fotopodkres + modrý overlay)
     3. Záhlaví - kontakty vedle loga
     4. Hlavní menu
     5. Postranní menu kategorií
     6. Tlačítka
     7. Zápatí (fotopodkres + tmavý overlay)
     8. Tabulky v obsahových stránkách (+ responzivní varianta)
     9. Cena na dotaz (katalogové produkty)
   ========================================================================== */


/* 1. Proměnné ============================================================== */

:root {
    --staera-blue: #3776BE;
    --staera-blue-dark: #24537F;
    --staera-blue-soft: #EFF5FB;
    --staera-text: #1F1F1F;
    --staera-muted: #8A8F96;
    --staera-border: #E1E5EA;
    --staera-bg-soft: #F8F9FA;
    --staera-photo: url("https://eshop.staera.cz/user/documents/upload/pozadi-blurred.jpg");
    --staera-overlay-header: rgba(55, 118, 190, 0.80);
    --staera-overlay-footer: rgba(0, 0, 0, 0.45);
}


/* 2. Horní navigační lišta ================================================= */

.top-navigation-bar {
    position: relative;
    background-color: var(--staera-blue);
    background-image: var(--staera-photo);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-color: var(--staera-blue);
}

.top-navigation-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--staera-overlay-header);
    z-index: 0;
    pointer-events: none;
}

.top-navigation-bar > * {
    position: relative;
    z-index: 1;
}

.top-navigation-bar a,
.top-navigation-bar .top-navigation-tools button {
    color: #fff !important;
}

.top-navigation-bar a:hover,
.top-navigation-bar a:focus {
    color: #fff !important;
    text-decoration: underline;
}


/* 3. Záhlaví - kontakty vedle loga ========================================= */
/* HTML kontaktů vkládá staera-eshop.js před vyhledávací pole. */

.header-top .header-top-wrapper {
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
}

.header-top .site-name {
    flex: 0 0 auto;
    width: auto;
}

.header-top .search {
    flex: 1 1 auto;
    width: auto;
    min-width: 170px;
}

.header-top .navigation-buttons {
    flex: 0 0 auto;
    width: auto;
}

.staera-headbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.staera-headbar__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--staera-text) !important;
    text-decoration: none !important;
}

.staera-headbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--staera-border);
    border-radius: 50%;
    color: var(--staera-blue);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.staera-headbar__item:hover .staera-headbar__icon,
.staera-headbar__item:focus .staera-headbar__icon {
    border-color: var(--staera-blue);
    background: var(--staera-blue-soft);
}

.staera-headbar__body { display: block; line-height: 1.25; }

.staera-headbar__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--staera-muted);
}

.staera-headbar__value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--staera-text);
}

/* Na užších obrazovkách zůstanou jen ikony s hodnotou, pak kontakty mizí
   úplně - jsou dostupné v horní liště, v patičce a na stránce Kontakty. */
@media (max-width: 1439px) {
    .staera-headbar { gap: 10px; }
    .staera-headbar__label { display: none; }
    .staera-headbar__icon { width: 30px; height: 30px; flex: 0 0 30px; }
}

@media (max-width: 1279px) {
    .staera-headbar { display: none; }
}


/* 4. Hlavní menu =========================================================== */

.header-bottom {
    border: none !important;
}

#navigation .menu-level-1 > li > a {
    font-size: 15px;
    padding: 20px 14px;
}


/* 5. Postranní menu kategorií ============================================== */
/* Sbalení neaktivních větví řeší staera-eshop.js. */

.sidebar .box-categories {
    background: var(--staera-bg-soft);
    padding: 12px 16px 16px;
    margin-top: 0;
}

#categories a {
    font-size: 15px;
    line-height: 1.4;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
}

#categories .topic > a {
    font-size: 15px;
    font-weight: 700;
    padding-left: 22px;
}

#categories ul a {
    font-size: 15px;
    font-weight: 600;
    padding-left: 36px;
}

#categories ul ul a {
    font-size: 15px;
    font-weight: 400;
    padding-left: 50px;
}

#categories .topic.active > a,
#categories a.active {
    color: var(--staera-blue);
}


/* 6. Tlačítka ============================================================== */

.add-to-cart-button {
    color: #fff !important;
}


/* 7. Zápatí ================================================================ */

#footer {
    position: relative;
    background-image: var(--staera-photo);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--staera-overlay-footer);
    z-index: 0;
    pointer-events: none;
}

#footer .in,
#footer .footerContent,
#footer > * {
    position: relative;
    z-index: 1;
}

#footer,
#footer a,
#footer p,
#footer span,
#footer li,
#footer td,
#footer strong,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer .footer-item,
#footer .footerLinks a {
    color: #ffffff !important;
}

#footer a:hover,
#footer a:focus {
    color: #ffffff !important;
    text-decoration: underline;
}

#footer svg,
#footer .icon svg {
    fill: #ffffff !important;
}


/* 8. Tabulky v obsahových stránkách ======================================== */

.content-inner article table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.content-inner article table th,
.content-inner article table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.content-inner article table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

/* Na mobilu se tabulka rozpadne do karet, hlavička se nahradí atributem
   data-label u jednotlivých buněk. */
@media (max-width: 768px) {
    .content-inner article table,
    .content-inner article table thead,
    .content-inner article table tbody,
    .content-inner article table th,
    .content-inner article table td,
    .content-inner article table tr {
        display: block;
    }

    .content-inner article table thead {
        display: none;
    }

    .content-inner article table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .content-inner article table td {
        border: none;
        padding: 6px 0;
    }

    .content-inner article table td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 2px;
    }
}


/* 9. Cena na dotaz (katalogové produkty) =================================== */
/* Produkt s cenou 1 Kč se chová jako katalogová položka: skryje se cena
   i nákupní blok a místo nich se nabídne poptávka.
   Přepínání tříd řeší staera-eshop.js. */

/* 9.1 Detail produktu */

html.staera-na-dotaz .p-detail .p-final-price-wrapper,
html.staera-na-dotaz .p-detail .price-without-vat-custom,
html.staera-na-dotaz .p-detail .p-to-cart-block,
html.staera-na-dotaz .p-detail .add-to-cart,
html.staera-na-dotaz .p-detail .quantity,
html.staera-na-dotaz .p-detail .link-icon.watchdog,
html.staera-na-dotaz .p-detail .watchdog-link,
html.staera-na-dotaz .p-detail .cart-price {
    display: none !important;
}

.staera-dotaz-popis {
    display: block;
    font-size: 14px;
    color: var(--staera-muted);
    margin: 0 0 12px;
}

.staera-dotaz-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 15px;
    padding: 15px 30px;
    border: 0;
    border-radius: 3px;
    background: var(--staera-blue);
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.staera-dotaz-btn:hover,
.staera-dotaz-btn:focus {
    background: var(--staera-blue-dark);
    color: #fff !important;
}

.staera-dotaz-btn svg { width: 19px; height: 19px; flex: 0 0 19px; }

/* 9.2 Výpisy produktů (kategorie, vyhledávání, novinky, nejprodávanější) */

.staera-karta-na-dotaz .prices,
.staera-karta-na-dotaz .p-tools,
.staera-karta-na-dotaz .btn-cart,
.staera-karta-na-dotaz form.pr-action {
    display: none !important;
}

/* Obrysové tlačítko, aby se nepletlo s modrým Do košíku u prodejných produktů */
.staera-dotaz-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    margin: 8px 0 4px;
    padding: 10px 22px;
    border: 2px solid var(--staera-blue);
    border-radius: 3px;
    background: #fff;
    color: var(--staera-blue) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.staera-dotaz-tlacitko:hover,
.staera-dotaz-tlacitko:focus {
    background: var(--staera-blue);
    color: #fff !important;
    text-decoration: none !important;
}

.staera-dotaz-tlacitko svg { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 767px) {
    .staera-dotaz-tlacitko { width: 100%; padding: 10px 12px; }
}

/* V karuselu jen kompaktní odkaz, aby se nerozbila výška karet */
.staera-dotaz-odkaz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 6px 0 2px;
    color: var(--staera-blue) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

.staera-dotaz-odkaz:hover,
.staera-dotaz-odkaz:focus {
    color: var(--staera-blue-dark) !important;
    text-decoration: underline !important;
}

.staera-dotaz-odkaz svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* 9.3 Našeptávač vyhledávání - místo ceny jen text */

.staera-dotaz-vypis {
    display: inline-block;
    padding: 4px 0;
    color: var(--staera-blue) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
}

/* 9.4 Modální okno s formulářem Dotaz na prodejce */

.staera-dotaz-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.55);
}

.staera-dotaz-okno {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.staera-dotaz-hlavicka {
    padding: 15px 55px 15px 20px;
    border-radius: 4px 4px 0 0;
    background: var(--staera-blue);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.staera-dotaz-produkt {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.staera-dotaz-zavrit {
    position: absolute;
    top: 9px;
    right: 12px;
    padding: 2px 8px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.staera-dotaz-zavrit:hover { opacity: 0.75; }

.staera-dotaz-telo { padding: 20px; }

.staera-dotaz-telo h1,
.staera-dotaz-telo h2,
.staera-dotaz-telo h3 { display: none; }

.staera-dotaz-telo input[type="text"],
.staera-dotaz-telo input[type="email"],
.staera-dotaz-telo input[type="tel"],
.staera-dotaz-telo textarea { width: 100%; }

body.staera-dotaz-otevreno { overflow: hidden; }