/* ===================================================================
   Oheň v zahradě - vlastní CSS (BEZ sekce hlavičky/loga - ta je bokem)
   Nasazení: FTP /user/documents/ohen-vlastni-h.css + zvednout ?v= v <link>
   Aktualizováno: 2026-08-14 | Testováno živě (detail produktu + objednávka)
   =================================================================== */

/* Oheň v zahradě — desktop hlavička */
@media (min-width: 992px) {
  #header .navigation-wrapper { display: flex; flex-wrap: wrap; align-items: center; }
  #header .top-nav { flex: 0 0 100%; }
  #header .site-name { flex: 0 0 259px; margin: 0; padding: 6px 24px 6px 0; text-align: left; }
  #header .site-name img { max-height: 96px; width: auto; }
  #header #navigation { flex: 1 1 0; width: auto; min-width: 0; }
  #header .menu-helper { position: static; flex: 0 0 auto; margin: 0 0 0 12px; }
  #header #navigation, #header .menu-helper { transform: translateY(20px); }
  #header {padding-bottom: 0;} 
}

/* ============ DETAIL PRODUKTU ============ */

/* Počítadlo kusů: rámeček (šablona má jen border-color bez width/style),
   číslo na střed, oddělené šipky */
#product-detail-form .quantity {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
}
#product-detail-form .quantity input.amount {
    text-align: center;
}
#product-detail-form .quantity .increase,
#product-detail-form .quantity .decrease {
    border-left: 1px solid #d9d9d9;
}

/* Mezera mezi počítadlem a tlačítkem (kontejner je flex) */
#product-detail-form .add-to-cart {
    gap: 12px;
}

/* DO KOŠÍKU (desktop): plná žlutá v klidu, hover inverzní tmavý */
#product-detail-form .btn-conversion {
    background-color: #edb128;
    border-color: #edb128;
    color: #2d2d2d;
    font-weight: 700;
}
#product-detail-form .btn-conversion:hover {
    background-color: #2d2d2d;
    border-color: #2d2d2d;
    color: #fff;
}

/* DO KOŠÍKU (mobil): šablona má jen šedou ikonu (text v .sr-only) -
   plné tlačítko 48 px, zviditelněný text, ikona oddělená od textu */
#product-detail-form .add-to-cart-button.btn-cart {
    background-color: #edb128;
    color: #2d2d2d;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    height: 48px;
}
#product-detail-form .add-to-cart-button.btn-cart:before {
    margin-right: 10px;
}
#product-detail-form .add-to-cart-button.btn-cart .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    text-transform: uppercase;
}

/* "Můžeme doručit do" žlutě, "Skladem" větší (šablona má obojí 12px) */
#product-detail-form .delivery-time-label {
    color: #edb128;
    font-size: 14px;
    font-weight: 700;
}
#product-detail-form .availability {
    font-size: 15px;
    font-weight: 700;
}

/* Mobil: stažení mezer v nákupním bloku (šablona: popisek mB 40,
   doručení 18+18, cena mT 40, košík mT 40 = ~150px prázdna) */
@media (max-width: 767px) {
    /* .p-detail kvůli specificitě - šablona přebíjí samotnou .p-short-description */
    .p-detail .p-short-description { margin-bottom: 16px; }
    #product-detail-form .shipping-availability { margin: 6px 0; padding-top: 0; }
    #product-detail-form .p-final-price-wrapper { margin-top: 6px; padding-top: 0; }
    #product-detail-form .order-availability { padding-top: 4px; }
    #product-detail-form .add-to-cart { margin-top: 14px; }
}

/* Mezera mezi koncem popisu (taby) a patičkou - šablona má 0 px */
.shp-tabs-wrapper {
    margin-bottom: 48px;
}

/* Výhody s ikonami na detailu produktu: na desktopu jeden řádek
   (šablona: 4 položky á ~338px se do 1015px nevejdou → čtvrtá padala dolů).
   .position--benefitProduct = jen detail produktu, HP blok nedotčen. */
@media (min-width: 992px) {
    .benefitBanner.position--benefitProduct { flex-wrap: nowrap; }
    .benefitBanner.position--benefitProduct .benefitBanner__item {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* Mobil pod 480 px: šablona dává výhody 1 na řádek a položkám nastavuje
   display:contents (obal zmizí z layoutu, samotné flex:50% nefunguje).
   Fix: obnovit položky jako flex karty (ikona nahoře, text pod ní), 2×2.
   Platí pro detail produktu I úvodku (obě position-- varianty). */
@media (max-width: 479px) {
    .benefitBanner.position--benefitProduct,
    .benefitBanner.position--benefitHomepage {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .benefitBanner.position--benefitProduct .benefitBanner__item,
    .benefitBanner.position--benefitHomepage .benefitBanner__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 0 0 50%;
        width: 50%;
        margin-bottom: 16px;
    }
    .benefitBanner.position--benefitProduct .benefitBanner__picture,
    .benefitBanner.position--benefitHomepage .benefitBanner__picture { width: auto; }
    .benefitBanner.position--benefitProduct .benefitBanner__img,
    .benefitBanner.position--benefitHomepage .benefitBanner__img { width: 56px; height: auto; }
}

/* Výhody na úvodce: po JS přesunu (patička adminu) sedí mezi hlavním
   banerem a dlaždicemi kategorií; usazení + mezery nad/pod */
.wide-carousel .benefitBanner.position--benefitHomepage {
    max-width: 1170px;
    margin: 40px auto;
    padding: 0 15px;
}
@media (max-width: 767px) {
    .wide-carousel .benefitBanner.position--benefitHomepage { margin: 24px auto; }
}
/* Úvodka desktop: mírné zvětšení ikon a textu výhod */
@media (min-width: 768px) {
    .benefitBanner.position--benefitHomepage .benefitBanner__img {
        width: 90px;
        height: auto;
    }
    .benefitBanner.position--benefitHomepage .benefitBanner__title {
        font-size: 15px;
    }
}

/* ============ TYPOGRAFIE - čitelnost popisů (12-13px → 16px) ============ */
/* Cíleně jen 4 místa, nic globálního. Nadpisy (h2 24px) nedotčeny. */

/* Detail produktu: krátký popis (byl 13px) */
.p-detail .p-short-description {
    font-size: 16px;
    line-height: 1.6;
}
/* Detail produktu: dlouhý popis - odstavce, odrážky, tabulky (byl 12px) */
.p-detail #description,
.p-detail #description p,
.p-detail #description li,
.p-detail #description td {
    font-size: 16px;
    line-height: 1.6;
}
/* Odrážky v popisu: mezera mezi položkami (šablona má 0) */
.p-detail #description li {
    margin-bottom: 8px;
}
.p-detail #description li:last-child {
    margin-bottom: 0;
}
/* Kategorie: popis pod názvem (byl 12px) - platí pro všechny kategorie */
.category-perex,
.category-perex p {
    font-size: 16px;
    line-height: 1.6;
}
/* Blok "S láskou k poctivému řemeslu" - je na konci VŠECH stránek
   (HP, kategorie, blog, statické; na detailu produktu je skrytý).
   16px text (byl 12px), zúžení na 760px pro čitelnost řádků,
   mezera před patičkou. */
.welcome-wrapper,
.welcome-wrapper p {
    font-size: 16px;
    line-height: 1.6;
}
.welcome-wrapper {
    margin-bottom: 48px;
}
.welcome-wrapper .welcome {
    max-width: 760px;
    margin: 0 auto;
}
/* !important kvůli starému pravidlu ".welcome { text-align: center !important }"
   ve vlastních stylech v adminu (záhlaví) - až se odtamtud smaže,
   může !important pryč. Pozn.: "order: 4" u .welcome-wrapper v adminu NECHAT. */
.welcome-wrapper .welcome,
.welcome-wrapper .welcome .h1 {
    text-align: left !important;
}

/* Popisy z WYSIWYG editoru mají v HTML inline style="font-size: 10pt"
   (≈13px) přímo na spanech - inline styl přebije stylesheet, proto
   !important. Normalizuje VŠECHNY inline velikosti v popisech na 16px
   (vyjma skutečných nadpisů h1-h4). */
.p-detail #description [style*="font-size"]:not(h1, h2, h3, h4),
.p-detail .p-short-description [style*="font-size"]:not(h1, h2, h3, h4),
.category-perex [style*="font-size"]:not(h1, h2, h3, h4),
.welcome-wrapper [style*="font-size"]:not(h1, h2, h3, h4) {
    font-size: 16px !important;
}

/* Odkazy v popisech produktu a kategorie: podtržené (šablona je má bez
   podtržení - žlutá na bílé bez podtržení splývá s okolním textem) */
.p-detail #description a,
.p-detail .p-short-description a,
.category-perex a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============ OBJEDNÁVKA (krok 1 + 2) ============ */

/* POKRAČOVAT a OBJEDNAT s povinností platby: plné místo obrysu,
   hover inverzní tmavý (stejný vzor jako DO KOŠÍKU) */
body.ordering-process .btn-conversion {
    background-color: #edb128;
    border-color: #edb128;
    color: #2d2d2d;
    font-weight: 700;
}
body.ordering-process .btn-conversion:hover {
    background-color: #2d2d2d;
    border-color: #2d2d2d;
    color: #fff;
}