/* ==========================================================
   PRODUCT HEADER
========================================================== */

.blank-mode .p-detail-inner h1,
.p-detail-inner h1,
.p-detail-inner .h1{

    font-family:var(--sh-font-family-headings);

    /* stejná velikost jako H1 hera na homepage (--sh-heading-hero);
       dřív víc (clamp 4.4–7.2rem z Multipacku) a dlouhý název
       „Skřítkové z Adršpašských skal“ zabíral na mobilu tři řádky */
    font-size:var(--sh-heading-hero);
    /* main-14 dává ".p-detail-inner h1" letter-spacing .8px — přebíjí
       obecné h1 z typography.css, ve velkém písmu jsou mezery vidět */
    letter-spacing:var(--sh-letter-spacing-heading);
    font-weight:var(--sh-font-weight-heading);
    line-height:var(--sh-line-height-heading);

    color:var(--sh-color-text);

    margin-top:0;
    margin-bottom:var(--sh-space-sm);

}


/* ==========================================================
   PRODUCT MOBILE HEADER
========================================================== */

.p-detail-inner .p-detail-inner-header-mobile {

    text-align: left !important;

}



/* ==========================================================
   BRAND
========================================================== */

.p-detail-inner .brand-wrapper {

    font-family: var(--sh-font-family-headings);

    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-medium);
    line-height: var(--sh-line-height-heading);

    letter-spacing: .08em;

}

/* výrobce nad názvem produktu — vždy akcentová barva, nezávisle na
   tom, odkud by si ji jinak Shoptetův výchozí styl odkazu bral */
.p-detail-inner .brand-wrapper,
.p-detail-inner .brand-wrapper a,
.p-detail-inner .brand-wrapper-manufacturer-name {
    color: var(--sh-color-accent) !important;
}

/* ==========================================================
   RATING
========================================================== */

.p-detail-inner .stars-wrapper {

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

}

/* hvězdičky */

.p-detail-inner .stars-wrapper .stars,
.p-detail-inner .stars-wrapper .star-list {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    height: 12px !important;

}

/* počet hodnocení */

.p-detail-inner .stars-wrapper .stars-label {

    display: inline-flex;
    align-items: center;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-body);

    line-height: 1.4;
    margin: 0;
    padding-top: 3px !important;

}

/* button */

.p-detail-inner .stars-wrapper .js-ratingDialogTrigger {

    display: inline-flex;
    align-items: left;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 1.4;
    padding-top: 3px !important;
    background: transparent;

}

/* nový text */

.p-detail-inner .stars-wrapper .js-ratingDialogTrigger::after {

    content: "Ohodnotit produkt";

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-medium);
    background: transparent !important;
    color: var(--sh-color-accent);

}


/* ==========================================================
   PRODUCT DETAIL – MOBILE HEADER
========================================================== */

@media (max-width: 767px){

    .p-detail-inner .h1{
        font-family:var(--sh-font-family-headings);
        font-size:var(--sh-heading-hero-mobile);
        font-weight:var(--sh-font-weight-heading);
        line-height:1.15;
        margin:0 0 var(--sh-space-sm);
    }

        .p-detail-inner .p-detail-inner-header-mobile .brand-wrapper{
        margin-top:24px;
        margin-bottom:8px;
        padding-bottom:0;
    }

    .p-detail-inner .brand-wrapper-manufacturer-name{
        font-size:var(--sh-text-sm);
        font-weight:var(--sh-font-weight-body);
        text-transform:uppercase;
        letter-spacing:.08em;
    }
    }


    .p-detail-inner .p-detail-inner-header-mobile .stars-wrapper{

    justify-content:flex-start !important;

    align-items:center;

    text-align:left;

    padding-bottom:var(--sh-space-sm);

}

/* pokud se stars-wrapper zalomí (velmi úzké obrazovky), tlačítko
   "Ohodnotit produkt" musí zůstat zarovnané k levému okraji, ne
   odsazené podle toho, kde se zalomilo */
.p-detail-inner .p-detail-inner-header-mobile .stars-wrapper .js-ratingDialogTrigger{
    margin-left: 0;
    align-self: flex-start;
}

/* ==========================================================
  MNOŽSTVÍ
========================================================== */

.quantity {
    border-width: 0px;
    background: var(--sh-color-surface);
    display: inline-block;
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    line-height: 1;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
    vertical-align: middle;
    }

.quantity {
    border-radius: var(--sh-radius-btn) !important;
     }

.quantity input {
    font-family: inherit;
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
}

.p-detail .add-to-cart .quantity {
    border-width: 0px;
    border-radius: var(--sh-radius-btn);
}

.quantity .decrease__sign, .quantity .increase__sign {
    display: block;
    font-family: inherit;
     font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    border:none;
    outline: none;
}

.quantity .decrease, .quantity .increase {
    background-color: var(--sh-color-surface);
    border-style:none;
    border:none;
   }

@media (min-width: 768px) {
    .p-detail-inner .p-to-cart-block .quantity {
     margin-right: 24px;
        }
         }

   .quantity .decrease {
    border-bottom-left-radius: var(--sh-radius-btn) !important;
    border-top-left-radius: var(--sh-radius-btn) !important;
    left: 4px;
}

.quantity .increase {
     border-bottom-right-radius: var(--sh-radius-btn) !important;
    border-top-right-radius: var(--sh-radius-btn) !important;
right: 4px;
} 

.quantity input::selection { 
    background: transparent; 
    color: var(--sh-color-accent);
    outline:none;
    }

    
.quantity input:focus {
    background: transparent;
    color: var(--sh-color-accent);
    outline:none;
    border-color: transparent !important;
    box-shadow: none !important;
    }

.quantity .increase:hover, .quantity .decrease:hover { 
     background:transparent; 
    color: var(--sh-color-accent); 
}

 .quantity .increase:active, .quantity .decrease:active { 
    background:transparent; 
    color: var(--sh-color-accent); 
}

.quantity .increase:focus, .quantity .increase:focus-visible, .quantity .decrease:focus, .quantity .decrease:focus-visible { 
    outline: none; 
    box-shadow: none; 
}

/* ==========================================================
   TLAČÍTKO DO KOŠÍKU
========================================================== */

.add-to-cart-button > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    font-family:var(--sh-font-family-headings);
    font-size:var(--sh-text-base);
    font-weight:var(--sh-font-weight-heading);
}


.add-to-cart-button .icon-cart{
    font-size:15px;
    line-height:1;
    }

/* ==========================================================
   PRICE
========================================================== */

.p-detail-inner .p-price-wrapper .price-final,
.p-detail-inner .p-price-wrapper .price-final-holder {

    font-family: var(--sh-font-family-headings) !important;
    font-size: var(--sh-heading-md) !important;
    font-weight: var(--sh-font-weight-heading) !important;

    /* main-14 dává ceně padding 8px nahoře/dole a line-height 56px
       (pro menší písmo než naše) — cena pak visí daleko od dostupnosti
       pod ní. Padding pryč, řádkování podle velikosti písma. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--sh-line-height-heading) !important;
}

/* ==========================================================
   PRODUCT CODE
========================================================== */

.p-detail-inner .detail-parameter-product-code,
.p-detail-inner .detail-parameter-product-code span {

    font-family: var(--sh-font-family-body);

    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);

    text-transform: uppercase;
    letter-spacing: .08em;

}

.p-detail-inner .detail-parameter-product-code .p-code-label {

    font-weight: var(--sh-font-weight-medium);

}

/* ==========================================================
   VARIANTS
========================================================== */

/* label "VELIKOST" nad selectem – main-14 mu dává font-weight:700,
   letter-spacing:.8px (pevný px, ne em) a system font; sjednoceno se
   stejným vzorem jako .detail-parameter-product-code o kus výš */
.p-detail-inner .variant-list .variant-label,
.p-detail-inner .surcharge-list .surcharge-label {

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .08em;

    /* accent + bold - zákazník si tu MUSÍ vybrat
       variantu, label proto nemá působit jako vedlejší text */
    color: var(--sh-color-accent);

}

.p-detail-inner .variant-list select,
.p-detail-inner .surcharge-list select,
.p-detail-inner .variant-list .form-control {

    /* jen spodní linka a šipka — bez podkladu a rámečku, ať výběr
       nepůsobí jako další box vedle karet vlastností; text začíná
       zarovno s popiskem BALENÍ nad ním (bez levého paddingu).
       !important kvůli main-14 (.form-control má vlastní rámeček a pozadí) */
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sh-color-text) !important;
    background-color: transparent !important;
    padding-left: 0 !important;

    font-family: var(--sh-font-family-body);
    /* dokud je vybraná jen placeholder možnost ("Zvolte variantu"),
       text je tlumený (stejná barva jako neaktivní záložky Diskuze/
       Parametry - viz .shp-tabs níž) - jakmile je vybraná skutečná
       varianta, select je :valid a zčerná (viz pravidlo pod tímhle) */
    color: var(--sh-color-text-muted);

    /* --selects-bg-image se ukázalo nespolehlivé (proměnnou čte jen
       pravidlo main-14 podmíněné :where(.ums_forms_redesign--on), které
       tady zjevně není aktivní - proto se místo naší šipky ukazovala
       obří nativní OS šipka). appearance:none + vlastní background-image
       natvrdo obchází celý tenhle mechanismus. Barva šipky = accent
       (mech, --sh-moss-600 / #4E6B2F) — v data URI nejde var(). */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234E6B2F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 18px !important;
    padding-right: var(--sh-space-lg) !important;

    transition: var(--sh-transition);

}

.p-detail-inner .variant-list select:hover,
.p-detail-inner .surcharge-list select:hover,
.p-detail-inner .variant-list .form-control:hover {

    border-bottom-color: var(--sh-color-accent) !important;

}

/* Rozbalené varianty (js/variant-preselect.js): seznam zůstává ve
   formuláři, jen skrytý; místo něj tlačítka vedle sebe. Obrysová
   „pilulka", vybraná plná CTA — stejný tvar jako tlačítko Do košíku */
.p-detail-inner .variant-list select.sh-variant-select--hidden {
    display: none !important;
}

.sh-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
}

.sh-variant-options__item {
    padding: clamp(10px, 1vw, 12px) clamp(18px, 1.8vw, 24px);
    border: 1.5px solid var(--sh-color-border);
    border-radius: var(--sh-radius-btn);
    background: transparent;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    line-height: 1.4;
    color: var(--sh-color-text);
    cursor: pointer;
    transition: var(--sh-transition);
}

.sh-variant-options__item:hover {
    border-color: var(--sh-color-cta);
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

.sh-variant-options__item.is-active {
    border-color: var(--sh-color-cta);
    background: var(--sh-color-cta);
    color: var(--sh-color-on-cta);
}

.sh-variant-options__item:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.sh-variant-options__item:focus-visible {
    outline: 2px solid var(--sh-color-accent);
    outline-offset: 2px;
}

/* focus z base.css (rámeček + mátový „prstenec") by vrátil box —
   tady jen zelená spodní linka */
.p-detail-inner .variant-list select:focus,
.p-detail-inner .surcharge-list select:focus,
.p-detail-inner .variant-list .form-control:focus {

    border-color: transparent !important;
    border-bottom-color: var(--sh-color-accent) !important;
    box-shadow: 0 1px 0 0 var(--sh-color-accent) !important;

}

/* select je :valid, jakmile má vybranou možnost s neprázdnou hodnotou
   (placeholder "Zvolte variantu" má value="") - funguje jen pokud má
   select atribut required (běžné u Shoptet variant selectů kvůli
   validaci před přidáním do košíku); pokud by se text po výběru
   nezčernal, bude potřeba místo :valid JS třída. */
.p-detail-inner .variant-list select:valid,
.p-detail-inner .surcharge-list select:valid,
.p-detail-inner .variant-list .form-control:valid {

    color: var(--sh-color-text);

}

/* zvýraznění možnosti v otevřeném seznamu - nativní modrou nahrazuje
   naše světlá "šípková" (--sh-color-cta-subtle); podpora se liší podle
   prohlížeče/OS (Windows Chrome/Edge to respektuje, jinde se může
   pořád ukázat systémová modrá). */
.p-detail-inner .variant-list select option:checked,
.p-detail-inner .variant-list select option:hover,
.p-detail-inner .surcharge-list select option:checked,
.p-detail-inner .surcharge-list select option:hover {

    background-color: var(--sh-color-cta-subtle) !important;
    color: var(--sh-color-text) !important;

}

/* ==========================================================
   PRODUCT GALLERY
========================================================== */

.p-detail-inner .p-image-wrapper .p-image,
.p-detail-inner .p-image-wrapper .p-image img,
.p-detail-inner .p-image-wrapper .p-main-image {

    border-radius: var(--sh-radius-md);
    overflow: hidden;

}

/* main-14 (.image360, .p-image) dává hlavnímu obrázku produktu
   border-color z --colors-foregrounds-borders-secondary, takže má
   vždy tenkou linku zleva/zprava (u fotek se světlým pozadím na
   krémovém webu to vypadá jako rámeček). Žádný rámeček nechceme. */
.p-detail-inner .p-image-wrapper .p-image,
.p-detail-inner .p-image-wrapper .image360 {
    border: 0 !important;
}

/* ---------- slevový štítek na obrázku (.flag-discount) ----------
   Shoptet dává .flags-extra "top:-55px; bottom:0" (box vyšší než
   obrázek) a vycentruje štítek uvnitř přes align-items:center — proto
   vizuálně "levituje" nad spodním okrajem místo aby na něm ležel.
   align-items:flex-end ho přisune přímo na spodní hranu obrázku. */
.p-detail-inner .p-image .flags-extra {
    align-items: flex-end;
}

/* Shoptet renderuje .flag-discount jako svislou "stužku"
   (flex-direction:column, pevná šířka/výška) — cena a sleva pod sebou.
   Přepnuto na řádek, ať jsou "42 Kč" a "-20 %" vedle sebe. main-14 má
   navíc od 768px min-width/min-height:100px + border-radius:50% (aby
   ze štítku byl kruh) – s obsahem vedle sebe to text jen mačkalo do
   kruhu; zrušeno a nahrazeno pilulkovým tvarem podle zbytku webu. */
.p-detail-inner .p-image .flag-discount {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--sh-space-xs);

    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--sh-space-xs) var(--sh-space-sm);

    border-radius: var(--sh-radius-btn);
}

/* Zdrojové náhledy (varianty i tahle galerie) jedou přes Shoptetem
   generovanou "related" velikost, která je pevně 1:1 (100×100px) bez
   ohledu na nastavení poměru stran v administraci – to nastavení řídí
   jen hlavní galerii/výpisy, ne tenhle typ náhledu. Stejný trik, co už
   funguje u vyhledávacího widgetu (header.css .searchWhisperer__product_image):
   wrapperu vynutíme poměr 4:3 a obrázek uvnitř ořízneme přes object-fit,
   místo abychom se spoléhali na přirozený poměr zdroje. */
/* .p-thumbnails-inner obsahuje mezi viditelnými náhledy i skrytý
   .cbox-gal (spouštěč lightboxu, main-14 ho schovává přes
   ".p-thumbnails a.cbox-gal{display:none}"). Cílili jsme na obecné
   "a", což mělo vyšší specificitu a display:block ho omylem odkrylo –
   proto ta mezera navíc. Teď cílíme jen na .p-thumbnail. */
.p-thumbnails-wrapper .p-thumbnails .p-thumbnails-inner a.p-thumbnail {
    display: block;
    aspect-ratio: 4 / 3;
    height: 100px;
    width: auto;
    overflow: hidden;

    margin-right: var(--sh-space-sm);
}

.p-thumbnails-wrapper .p-thumbnails .p-thumbnails-inner a.p-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* main-14 dává za poslední viditelný náhled bílý gradient (aby byla
   čitelná šipka "další"), napevno #fff – na naší krémové stránce byl
   vidět jako bílá skvrna. Přebarveno na skutečné pozadí stránky. */
.p-thumbnails.overflow-next:after {
    background-image: linear-gradient(90deg, rgba(244, 240, 230, 0) 0, var(--sh-color-bg) 50%);
}

@media (max-width: 767px){

    .p-thumbnails-wrapper .p-thumbnails .p-thumbnails-inner a.p-thumbnail {
        height: 48px;
        width: auto;
    }

}

/* náhledy u variant (VARIANTA: ...) – main-14 dává pevných 100×100px
   a border-radius:8px. Stejný aspect-ratio + object-fit:cover trik
   jako u galerie výše, border-radius sjednocený s designem. */
/* main-14 dává na .advanced-parameter (obalový label) 8px mezeru
   vpravo/dole – zmenšeno na menší token */
.p-detail-inner .advanced-parameter.has-image {
    margin: 0 var(--sh-space-xs) var(--sh-space-xs) 0;
}

.p-detail-inner .advanced-parameter.has-image .advanced-parameter-inner {
    width: auto;
    height: 64px;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    border-width: 0;
    border-radius: var(--sh-radius-md);
    background-color: var(--sh-color-surface);
}

.p-detail-inner .advanced-parameter.has-image .advanced-parameter-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-thumbnail,
.p-thumbnail img,
.box-gal,
.box-gal img {

    border-radius: var(--sh-radius-md) !important;

}

/* sjednocení stylu šipek v lightboxu galerie – jiná sada ikon
   (\e90b/\e90c) než zbytek webu (\e90e-\e911, "chevron" styl) */
#cboxPrevious:before {
    content: "\e90f" !important;
}

#cboxNext:before {
    content: "\e910" !important;
}

/* radius sjednocený s naší proměnnou na všech colorbox oknech
   (popup "Přidáno do košíku", výběr výdejního místa Balíkovny...) –
   #cboxLoadedContent je jen vnitřní scroll wrapper, samotné viditelné
   pozadí okna má #cboxContent (main-14: #cboxContent{background-color:
   var(--colors-surface-primary)}), proto radius na obou; pozadí
   explicitně naší proměnnou, ať to není závislé na tom, že Shoptetova
   proměnná zrovna vede na stejnou barvu */
#cboxContent,
#cboxLoadedContent {
    border-radius: var(--sh-radius-md) !important;
}

#cboxContent {
    background-color: var(--sh-color-bg) !important;
}

/* zavírací "x" – main-14 mu dává napevno bílé pozadí (#cboxClose{
   background-color:#fff !important}), na naší krémové ploše okna
   vytvářelo bílý čtvereček */
#cboxClose {
    background-color: var(--sh-color-bg) !important;
}

/* main-14 dává obsahu popupu napevno 16px padding na všechny strany */
.colorbox-html-content {
    padding: var(--sh-space-box);
}

/* ==========================================================
   POPUP "PŘIDÁNO DO KOŠÍKU"
========================================================== */

.advanced-order {
    text-align: left !important;
}

/* nadpis "Přidáno do košíku" – main-14 na něj dává obecné .h1
   rozměry (stejné jako třeba nadpis stránky), v malém popupu
   zbytečně velké, ale úplně nejmenší velikost (--sh-text-xl) zase
   pro nadpis moc drobná */
.advanced-order .h1 {
    font-size: var(--sh-heading-sm) !important;
}

/* název produktu – vlastní data-testid, ať necílí zároveň na
   ".advanced-order-suggestion" níže (obojí sdílí třídu "h2") */
.advanced-order .h2[data-testid="textPopupProductName"] {
    font-size: var(--sh-text-xl) !important;
}

/* main-14 dává ikoně dodávky 48px — mnohem menší, stejně jako je
   zmenšená (schovaná) v .extras-wrapper na stránce košíku */
.advanced-order .icon-van {
    font-size: 20px !important;
}

/* mezera nad pruhem dopravy zdarma – stejný vzor jako u kroků
   v košíku (cart.css / header.css .cart-free-shipping) */
.advanced-order .extras-wrap {
    padding-top: var(--sh-space-sm);
}

/* main-14 řádek i ikonu+text uvnitř centruje (justify-content:center
   na .extras-wrap i na .extra) – zarovnáno doleva ke zbytku popupu */
.advanced-order .extras-wrap,
.advanced-order .extras-wrap .extra {
    justify-content: flex-start !important;
}

/* main-14 dává ".extra" navíc vlastní boční margin (16px) – s textem
   teď zarovnaným doleva zbytečně odsazuje ikonu dodávky od levého
   okraje popupu */
.advanced-order .extras-wrap .extra {
    margin-left: 0 !important;
}

/* malý odstup nad ukazatelem do dopravy zdarma – main-14 dává
   .price-range margin-top:0, lepilo se to hned pod text */
.advanced-order .price-range {
    margin-top: var(--sh-space-xs) !important;
}

/* "Objednejte ještě za X Kč a budete mít dopravu ZDARMA" – stejný
   styl jako na stránce košíku (cart.css: .extras-wrapper .extra span
   / span strong), main-14 tu dává jen 12px/letter-spacing */
.advanced-order .extras-wrap .extra span {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);
    letter-spacing: normal;
    color: var(--sh-color-text);
}

.advanced-order .extras-wrap .extra span strong {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: normal;
    color: var(--sh-color-text);
}

/* tlačítka "Zpět do obchodu" / "Nákupní košík" – main-14 je centruje
   a dává mezi ně 16px (.advancedOrder__buttons{justify-content:center;
   gap:8px 16px}) */
.advancedOrder__buttons {
    justify-content: flex-start !important;
    gap: 8px var(--sh-space-xs) !important;
}

/* "Ostatní zákazníci také nakoupili" – stejná třída "h2" jako název
   produktu výše, ale main-14 pro ni nemá vlastní velikost o nic menší
   (obě dědí generický .h2 ~20–24px); vypadá to spíš jako popisek než
   nadpis sekce, proto vlastní, výraznější styl */
.advanced-order .h2.advanced-order-suggestion {
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm) !important;
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* "Zpět do obchodu" – outline tlačítko ve stejném stylu jako
   .sh-btn--outline v sekci "Náš příběh" na homepage (homepage.css:
   .sh-origin-social__actions .sh-btn--outline).
   !important nutné — cart.css má ".next-step-back" (krokování v
   košíku, jiný kontext, stejná třída) s border/padding na !important,
   které by jinak vyhrálo bez ohledu na vyšší specificitu tady. */
.advancedOrder__buttons .next-step-back {
    display: inline-block !important;
    padding: 14px 40px !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);

    background: transparent !important;
    color: var(--sh-color-accent) !important;
    border: 1.5px solid var(--sh-color-cta) !important;
    border-radius: var(--sh-radius-btn) !important;

    cursor: pointer;
    transition: var(--sh-transition);
}

.advancedOrder__buttons .next-step-back:hover {
    background: var(--sh-color-cta) !important;
    color: var(--sh-color-on-cta) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* ==========================================================
   O PRODUKTU (Multipack)
   Sekce je na začátku dlouhého popisu každého produktu (import),
   js/product-about.js ji přesune nad záložky Popis / Diskuze. Bez
   skriptu zůstane v záložce Popis — vypadá stejně, jen s menším
   odsazením (pravidla níž platí v obou místech).
   Pás přes celou šířku, obsah zarovnaný na stránkové odsazení; bílé
   pozadí, karty mátové (jako na webu klienta).
========================================================== */

/* 50 : 50 a stejné okraje jako fotka + krátký popis nahoře: .p-detail-inner
   leží v #content-wrapper (padding = --sh-space-page) a v .content
   (main-14 dalších 16px), sloupce nemají mezeru — odstup dělá
   padding-right 64px na .p-image-wrapper, proto podobný u levého
   sloupce (--sh-pd-gutter, na desktopu 64 px, na menších šířkách míň) */
.sh-pd-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sh-space-md) 0;
    padding: var(--sh-space-section) calc(var(--sh-space-page) + 16px);
    /* bílá jako horní část detailu — navazuje na fotku a krátký popis,
       tmavě zelený pás Informace o výrobku pod ní ji ohraničí */
    background: var(--sh-color-bg);
}

/* uvnitř záložky (bez skriptu) už odsazení dává .tab-content */
#description .sh-pd-about {
    padding: 0 0 var(--sh-space-lg);
    margin-bottom: 0;
}

.sh-pd-about__intro {
    padding-right: var(--sh-pd-gutter);
}

.sh-pd-about__label {
    margin: 0 0 var(--sh-space-xs) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

/* h2 má od main-14 margin-top 40px a vlastní velikost */
.sh-pd-about .sh-pd-about__title {
    margin: 0 !important;
    font-size: var(--sh-heading-xl);
    line-height: var(--sh-line-height-heading);
}

.sh-pd-about__text {
    margin: 0 0 var(--sh-space-md) !important;
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem) !important;
    line-height: 1.7 !important;
    color: var(--sh-color-text-muted);
}

.sh-pd-about .sh-pd-about__subtitle {
    margin: 0 0 var(--sh-space-sm) !important;
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
}

.sh-pd-about__uses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sh-space-xs);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.sh-pd-about__uses li {
    margin: 0;
    padding: calc(var(--sh-space-xs) * 2);
    border-radius: var(--sh-radius-card);
    background: var(--sh-color-surface);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    line-height: 1.5;
    color: var(--sh-color-text);
}

/* main-14 dává li v popisu odrážku přes ::before */
.sh-pd-about__uses li::before {
    content: none !important;
}

/* Pás fotek pod textem — třetí řádek mřížky přes oba sloupce. Počet
   fotek je libovolný: sloupce se dělí rovnoměrně a na úzké obrazovce
   zalomí po dvou/třech podle šířky. Všechny mají stejný poměr 4:3,
   ať je pás vyrovnaný, i když mají fotky různé formáty. */
.sh-pd-about__strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 20vw, 260px), 1fr));
    gap: var(--sh-space-xs);
    margin-top: var(--sh-space-sm);
}

.sh-pd-about__strip img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--sh-radius-md);
}

/* fotky na výšku (domeček): 3:4. Sloupce o něco užší, ať pás z 3–4
   fotek na výšku nezabere víc než pár set px výšky; poměr se nastavuje
   u produktu v import/zdroj/produkty.json (stripLayout) */
.sh-pd-about__strip--portrait {
    grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 16vw, 210px), 1fr));
}

.sh-pd-about__strip--portrait img {
    aspect-ratio: 3 / 4;
}

/* čtvrtá fotka jen na mobilu a tabletu: na desktopu má pás 3 fotky,
   na mobilu a tabletu jsou dva sloupce a lichá fotka by zůstala sama
   na řádku */
@media (min-width: 992px) {
    .sh-pd-about__strip-mobile {
        display: none;
    }
}

/* mobil a tablet: vždy dva sloupce (u knihy 4 fotky, u domečku 4 na výšku)
   a pás blíž k popisu nad ním — je to jedna sekce, ne dvě */
@media (max-width: 991px) {
    .sh-pd-about__strip,
    .sh-pd-about__strip--portrait {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Recenze pod pásem fotek — stejná stavba jako .sh-pd-brand (vlevo
   štítek + nadpis, vpravo dvě barevné karty), ale uvnitř sekce O produktu
   jako další řádek přes oba sloupce, takže se přesouvá spolu s ní
   (js/product-about.js). Karty mají stejnou dvojici barev jako značka
   (světlo lucerny + lucerna); text v kartách tmavý. Recenze jsou u
   každého produktu jiné (import/zdroj/produkty.json → reviews). */
.sh-pd-reviews {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sh-space-md) 0;
    align-items: start;
    margin-top: var(--sh-space-lg);
}

.sh-pd-reviews__intro {
    padding-right: var(--sh-pd-gutter);
}

.sh-pd-reviews__label {
    margin: 0 0 var(--sh-space-xs) !important;
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

.sh-pd-reviews .sh-pd-reviews__title {
    margin: 0 !important;
    font-size: var(--sh-heading-xl);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text) !important;
}

.sh-pd-reviews__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* stejná mezera jako mezi fotkami v pásu (.sh-pd-about__strip) */
    gap: var(--sh-space-xs);
}

.sh-pd-reviews__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sh-space-sm);
    padding: clamp(24px, 2.8vw, 40px);
    border-radius: var(--sh-radius-card);
    background: var(--sh-color-cta-on-dark);
}

.sh-pd-reviews__card:nth-child(2) {
    background: var(--sh-color-forest);
    color: var(--sh-color-text-inverse);
}

/* na tmavě zelené kartě světlý text (citát, jméno i role mají vlastní barvu výš) */
.sh-pd-reviews__card:nth-child(2) p,
.sh-pd-reviews .sh-pd-reviews__card:nth-child(2) .sh-pd-reviews__role {
    color: var(--sh-color-text-inverse);
}

/* citát: písmo nadpisů, o stupeň větší než text — je to to, co si
   návštěvník z karty přečte */
.sh-pd-reviews__card p {
    margin: 0 !important;
    color: var(--sh-color-text);
}

.sh-pd-reviews .sh-pd-reviews__quote {
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem) !important;
    line-height: 1.55 !important;
}

.sh-pd-reviews .sh-pd-reviews__author {
    font-size: var(--sh-text-sm) !important;
    font-weight: var(--sh-font-weight-bold);
    line-height: 1.4 !important;
}

.sh-pd-reviews .sh-pd-reviews__role {
    display: block;
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text);
}

@media (max-width: 991px) {
    .sh-pd-reviews {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-pd-reviews__intro {
        padding-right: 0;
    }
}

@media (max-width: 479px) {
    .sh-pd-reviews__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* tablet i mobil: nadpis nad textem místo dvou sloupců */
@media (max-width: 991px) {
    .sh-pd-about {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-pd-about__intro {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .sh-pd-about {
        padding-top: var(--sh-space-section-mobile);
        padding-bottom: var(--sh-space-section-mobile);
    }

    /* menší mezery mezi úvodem, textem a pásem fotek; poslední odstavec
       textu nemá další spodní margin (ten se přičítal k mezeře mřížky) */
    .sh-pd-about {
        row-gap: var(--sh-space-sm);
    }

    .sh-pd-about__body > :last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 479px) {
    .sh-pd-about__uses {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================
   INFORMACE O VÝROBKU (Multipack) — zbytek dlouhého popisu
   Stejné rozložení 50 : 50 jako .sh-pd-about. Složení a výživové
   údaje vždy vidět, „Další údaje" v <details> — rozbalí se kliknutím
   bez JS (návrh klienta byl moc dlouhý). Tmavě zelený pás jako na
   webu klienta: barví se celý obsah záložky (lišta záložek je
   skrytá, viz PRODUCT TABS), proto světlý text a limetkové akcenty.
========================================================== */

/* :has — jen u produktů s naším popisem; jiný obsah záložky zůstane
   na světlém pozadí */
.p-detail-full-width .tab-content:has(.sh-pd-info),
.p-detail-full-width #tab-content:has(.sh-pd-info) {
    background: var(--sh-color-info-band) !important;
}

.sh-pd-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sh-space-md) 0;
    color: var(--sh-color-text-inverse);
}

.sh-pd-info__intro {
    padding-right: var(--sh-pd-gutter);
}

/* štítek a nadpis jako v sekci O produktu, jen ve světlých barvách —
   limetka je na tmavě zelené čitelná */
.sh-pd-info__label {
    margin: 0 0 var(--sh-space-xs) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--sh-color-cta-on-dark);
}

/* nadpisy berou barvu z Shoptetí proměnné, proto !important */
.sh-pd-info .sh-pd-info__title {
    margin: 0 !important;
    font-size: var(--sh-heading-xl);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text-inverse) !important;
}

/* nadpisy částí (Složení, Výživové údaje, Další údaje) a mezera mezi
   částmi podle webu klienta: 26 px, mezi částmi ~75 px. Proměnné, ať
   je sdílí i rozbalovací „Další údaje" níž. */
.sh-pd-info {
    --sh-pd-info-heading: clamp(2.1rem, 1.7rem + .8vw, 2.6rem);
    --sh-pd-info-gap: clamp(48px, 5vw, 75px);
}

/* h3 má od main-14 margin-top 40px — první nadpis by odskočil od
   nadpisu vlevo */
.sh-pd-info .sh-pd-info__heading {
    margin: var(--sh-pd-info-gap) 0 clamp(12px, 1.3vw, 18px) !important;
    font-size: var(--sh-pd-info-heading);
    line-height: var(--sh-line-height-heading-sm);
    color: var(--sh-color-text-inverse) !important;
}

.sh-pd-info .sh-pd-info__heading:first-child {
    margin-top: 0 !important;
}

.sh-pd-info__body p {
    color: var(--sh-color-text-inverse);
}

/* složení hned pod nadpisem — patkové písmo větší, jako na webu klienta */
.sh-pd-info .sh-pd-info__heading + p {
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem) !important;
    line-height: 1.7 !important;
}

/* seznam pod nadpisem (Obsah sady u domečku) — stejné větší patkové
   písmo jako odstavec pod nadpisem, místo odrážek tečky v barvě CTA
   na tmavé ploše (main-14 dává ul vlastní odsazení a odrážky) */
.sh-pd-info .sh-pd-info__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sh-pd-info .sh-pd-info__list li {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 1.2em !important;
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem);
    line-height: 1.7;
    color: var(--sh-color-text-inverse);
}

.sh-pd-info .sh-pd-info__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75em;
    width: .35em;
    height: .35em;
    border-radius: 50%;
    background: var(--sh-color-cta-on-dark);
}

/* věta hned pod seznamem (např. poznámka k sadě) — stejné serifové
   písmo jako položky seznamu, od nich odsazená */
.sh-pd-info .sh-pd-info__list + p {
    margin: var(--sh-space-sm) 0 0 !important;
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem) !important;
    line-height: 1.7 !important;
}

/* tabulky jako seznam řádků s linkou — popisek verzálkami vlevo,
   hodnota tučně vpravo (vzor webu klienta) */
.sh-pd-info__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.sh-pd-info__table th,
.sh-pd-info__table td {
    padding: clamp(10px, 1vw, 14px) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sh-color-text-inverse) 18%, transparent);
    vertical-align: top;
    text-align: left;
}

/* linka i nad prvním řádkem — tabulka tak má jasný začátek pod nadpisem */
.sh-pd-info__table tr:first-child th,
.sh-pd-info__table tr:first-child td {
    border-top: 1px solid color-mix(in srgb, var(--sh-color-text-inverse) 18%, transparent);
}

.sh-pd-info__table th {
    width: 45%;
    padding-right: var(--sh-space-sm);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sh-color-text-inverse);
}

.sh-pd-info__table td {
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text-inverse);
}

/* rozbalovací části — bez vlastní linky nahoře, oddělí je spodní
   linka posledního řádku tabulky nad nimi */
.sh-pd-info__more {
    margin-top: calc(var(--sh-pd-info-gap) - var(--sh-space-s));
}

/* „Další údaje" vypadá jako ostatní nadpisy částí, jen s šipkou */
.sh-pd-info__more summary {
    position: relative;
    padding: var(--sh-space-s) 32px var(--sh-space-s) 0;
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-pd-info-heading);
    line-height: var(--sh-line-height-heading-sm);
    color: var(--sh-color-text-inverse);
    list-style: none;
    cursor: pointer;
}

/* výchozí trojúhelník prohlížeče pryč, místo něj šipka vpravo */
.sh-pd-info__more summary::-webkit-details-marker {
    display: none;
}

.sh-pd-info__more summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sh-color-cta-on-dark);
    border-bottom: 2px solid var(--sh-color-cta-on-dark);
    transform: translateY(-75%) rotate(45deg);
    transition: var(--sh-transition);
}

.sh-pd-info__more[open] summary::after {
    transform: translateY(-25%) rotate(-135deg);
}

.sh-pd-info__more summary:hover {
    color: var(--sh-color-cta-on-dark-hover);
}

.sh-pd-info__more summary:hover::after {
    border-color: var(--sh-color-cta-on-dark-hover);
}

.sh-pd-info__more > :not(summary) {
    margin-bottom: var(--sh-space-sm);
}

@media (max-width: 767px) {
    .sh-pd-info {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-pd-info__intro {
        padding-right: 0;
    }
}


/* ==========================================================
   ZNAČKA A DISTRIBUCE (Multipack)
   Jeden HTML blok pro všechny produkty v rozvržení Detailu produktu
   (Návrhář; HTML z produkt-znacka.html) — údaje jsou u všech
   produktů stejné. js/product-about.js ho přesune pod popis.
   Mátový pás (modrá z webu klienta je vypuštěná z palety, tmavě
   zelená patří Informacím o výrobku nad ním), bílé karty.
   TODO doladit barvu s paletou.
========================================================== */

.sh-pd-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sh-space-md) 0;
    align-items: start;
    padding: var(--sh-space-section) calc(var(--sh-space-page) + 16px);
    background: var(--sh-color-bg);
}

.sh-pd-brand__intro {
    padding-right: var(--sh-pd-gutter);
}

.sh-pd-brand__label {
    margin: 0 0 var(--sh-space-xs) !important;
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

.sh-pd-brand .sh-pd-brand__title {
    margin: 0 !important;
    font-size: var(--sh-heading-xl);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text) !important;
}

.sh-pd-brand__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--sh-space-xs) * 2);
}

/* karta: štítek → název firmy → adresa/údaje. Rytmus po 8 px:
   štítek 16 název 16 text, odstavce textu 8. Text v barvě textu
   (ne tlumený) a větší — jsou to kontakty, mají jít dobře číst. */
.sh-pd-brand__card {
    padding: clamp(24px, 2.8vw, 40px);
    border-radius: var(--sh-radius-card);
    background: var(--sh-color-highlight);
}

/* druhá karta limetková — stejná dvojice jako na stránce Kontakty */
.sh-pd-brand__card:nth-child(2) {
    background: var(--sh-color-cta-on-dark);
}

.sh-pd-brand__card p {
    margin: 0 0 var(--sh-space-xs) !important;
    font-size: var(--sh-text-base) !important;
    line-height: 1.6 !important;
    color: var(--sh-color-text);
}

.sh-pd-brand__card p:last-child {
    margin-bottom: 0 !important;
}

.sh-pd-brand .sh-pd-brand__card-label {
    margin-bottom: calc(var(--sh-space-xs) * 2) !important;
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sh-color-cta-dark);
}

.sh-pd-brand .sh-pd-brand__card-name {
    margin-bottom: calc(var(--sh-space-xs) * 2) !important;
    font-family: var(--sh-font-family-headings);
    font-size: clamp(2.2rem, 1.8rem + .8vw, 2.8rem) !important;
    line-height: var(--sh-line-height-heading-sm) !important;
    color: var(--sh-color-text);
}

/* odkazy stejně jako v kartách na stránkách (Kontakty): telefon
   a e-mail bez podtržení v barvě textu, odkaz na web podtržený */
.sh-pd-brand__card a {
    color: var(--sh-color-text) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.sh-pd-brand__card a[href^="http"] {
    text-decoration: underline !important;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

.sh-pd-brand__card a[href^="http"]:hover {
    text-decoration-thickness: 2px;
}

/* tablet: karty vedle sebe by byly moc úzké — nadpis nad nimi */
@media (max-width: 991px) {
    .sh-pd-brand {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-pd-brand__intro {
        padding-right: 0;
    }
}

@media (max-width: 479px) {
    .sh-pd-brand__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================
   O AUTORCE (Skřítkové)
   Jeden HTML blok pro oba produkty (produkt-autorka.html, v rozvržení
   Detailu produktu místo Konkurenčních výhod); js/product-about.js ho
   přesune pod záložky (pod tmavou sekci Informace o výrobku).
   Stejná mřížka 50 : 50 a stejné okraje jako .sh-pd-about, -info a
   -brand: vlevo fotka 4:5, vpravo štítek, jméno a text.
========================================================== */

.sh-pd-author {
    display: grid;
    /* 1/3 fotka : 2/3 text; mezeru mezi sloupci dělá padding fotky
       (--sh-pd-gutter) stejně jako v ostatních sekcích */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sh-space-md) 0;
    /* text zarovnaný na spodní hranu fotky (ne na střed) */
    align-items: end;
    padding: var(--sh-space-section) calc(var(--sh-space-page) + 16px);
    background: var(--sh-color-bg);
}

/* odstup od textu stejně jako u ostatních sekcí (--sh-pd-gutter) */
.sh-pd-author__image {
    padding-right: var(--sh-pd-gutter);
}

.sh-pd-author__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: var(--sh-radius-md);
}

.sh-pd-author__label {
    margin: 0 0 var(--sh-space-xs) !important;
    font-size: var(--sh-text-xs) !important;
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

.sh-pd-author .sh-pd-author__title {
    margin: 0 0 var(--sh-space-md) !important;
    font-size: var(--sh-heading-xl);
    line-height: var(--sh-line-height-heading);
    color: var(--sh-color-text) !important;
}

/* text jako v sekci O produktu (.sh-pd-about__text) */
.sh-pd-author__text {
    margin: 0 0 var(--sh-space-sm) !important;
    font-family: var(--sh-font-family-headings);
    font-size: clamp(1.7rem, 1.5rem + .5vw, 2rem) !important;
    line-height: 1.7 !important;
    color: var(--sh-color-text-muted);
}

.sh-pd-author__text:last-child {
    margin-bottom: 0 !important;
}

/* tablet (768–991 px): malá fotka vlevo, text vedle ní. Text je tu vyšší
   než fotka, proto se zarovnává nahoru (na desktopu dolů) */
@media (max-width: 991px) {
    .sh-pd-author {
        align-items: start;
    }
}

/* mobil: fotka nad textem, ne na celou šířku — max. 480 px,
   ať nezabere celou obrazovku */
@media (max-width: 767px) {
    .sh-pd-author {
        grid-template-columns: minmax(0, 1fr);
        padding-top: var(--sh-space-section-mobile);
        padding-bottom: var(--sh-space-section-mobile);
    }

    .sh-pd-author__image {
        padding-right: 0;
        max-width: 480px;
    }
}

/* ==========================================================
   PŘEDCHOZÍ / DALŠÍ PRODUKT (Multipack)
   Ve stejném HTML bloku jako značka; odkazy a názvy doplní
   js/product-about.js z výpisu kategorie. Dvě poloviny přes celou
   šířku, celá řada jednou světle zelenou (--sh-color-surface),
   hover o odstín tmavší.
========================================================== */

.sh-pd-nav {
    display: grid;
    /* jeden odkaz (jen Další produkt) zabere celou šířku, dva se
       rozdělí napůl — počet odkazů určuje HTML bloku */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--sh-color-surface);
}

/* display:grid výš by přebil výchozí skrytí atributem hidden —
   bez skriptu (nebo když se kategorii nepodaří načíst) zůstane pryč */
.sh-pd-nav[hidden] {
    display: none;
}

.sh-pd-nav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sh-space-lg) calc(var(--sh-space-page) + 16px);
    background: transparent;
    color: var(--sh-color-text) !important;
    text-decoration: none !important;
    transition: var(--sh-transition);
}

.sh-pd-nav__link--next {
    align-items: flex-end;
    text-align: right;
}

/* hover mění barvu písma, ne pozadí celého pruhu; !important kvůli
   barvě odkazu výš (přebíjí Shoptetí barvu odkazů) */
.sh-pd-nav__link:hover,
.sh-pd-nav__link:focus-visible {
    color: var(--sh-color-accent) !important;
}

.sh-pd-nav__label {
    font-size: var(--sh-text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sh-pd-nav__name {
    font-family: var(--sh-font-family-headings);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
    line-height: var(--sh-line-height-heading-sm);
}

@media (max-width: 479px) {
    .sh-pd-nav__link {
        padding-top: var(--sh-space-md);
        padding-bottom: var(--sh-space-md);
    }

    .sh-pd-nav__name {
        font-size: var(--sh-text-xl);
    }
}

/* Doplňkové parametry (Kategorie, EAN) — EAN je u varianty, kategorii
   zákazník nepotřebuje; bez nich se popis roztáhne na celou šířku
   (main-14 mu od 1200px dává 66 % + padding vpravo) */
.description-inner .extended-description {
    display: none;
}

.description-inner .basic-description {
    width: 100% !important;
    padding-right: 0 !important;
}

/* Shoptetí nadpis „Detailní popis produktu" nad dlouhým popisem —
   záložka už se jmenuje „Popis", nadpis je navíc */
#description .basic-description > h4:first-child {
    display: none;
}


/* ==========================================================
   PRODUCT TABS
========================================================== */

/* lišta záložek pryč — Diskuze je vypnutá, zůstal by jen „Popis";
   obsah záložky Popis se ukáže sám (je výchozí aktivní). Kdyby se
   později přidala další záložka (Parametry, Diskuze), smazat. */
.p-detail-full-width .shp-tabs-row {
    display: none !important;
}

.p-detail-full-width {

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: var(--sh-color-bg) !important;

}

/* #content-wrapper prefix nutný — homepage.css má obecné
   "#content-wrapper .container-full-width" s bočním paddingem na
   !important; bez ID by ho tohle pravidlo (jen třídy) nepřebilo */
#content-wrapper .p-detail-full-width > .container-full-width,
#content-wrapper .p-detail-full-width .container-full-width {

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: var(--sh-space-md);
padding-bottom: var(--sh-space-md);
}

/* držák záložek */

.p-detail-full-width .shp-tabs-holder,
.p-detail-full-width .shp-tabs {

    background: var(--sh-color-bg) !important;

    border: none !important;
    box-shadow: none !important;

}

/* neaktivní záložky */

.p-detail-full-width .shp-tabs-holder ul.shp-tabs li.shp-tab a,
.p-detail-full-width .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab a {

    border: none !important;
    border-radius: var(--sh-radius-md) var(--sh-radius-md) 0 0 !important;

    box-shadow: none !important;

    color: var(--sh-color-text-muted) !important;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);

}

/* hover neaktivní záložky – stejná barva jako aktivní stav */
.p-detail-full-width .shp-tabs-holder ul.shp-tabs li.shp-tab:not(.active) a:hover,
.p-detail-full-width .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab:not(.active) a:hover {

    color: var(--sh-color-accent) !important;

    background-color: var(--sh-color-surface) !important;
    border-color: transparent !important;

}

/* aktivní záložka */

.p-detail-full-width .shp-tabs-holder ul.shp-tabs li.shp-tab.active a,
.p-detail-full-width .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab.active a {

    background: var(--sh-color-surface) !important;

    color: var(--sh-color-accent) !important;

    box-shadow: none !important;

}

/* obsah */

.p-detail-full-width .tab-content,
.p-detail-full-width #tab-content {

    background: var(--sh-color-surface) !important;

    border: none !important;

    border-radius: 0 var(--sh-radius-md) var(--sh-radius-md) var(--sh-radius-md) !important;

    /* do stran stejně jako fotka a krátký popis nahoře (viz .sh-pd-about),
       ať sloupce v popisu sedí pod sloupci detailu */
    padding: var(--sh-space-section) calc(var(--sh-space-page) + 16px) !important;

    box-shadow: none !important;


}

/* formulář diskuze – main-14 dává ".discussion-form" napevno
   padding:16px + kompenzující margin-left/right:-16px (bleed technika
   – "vykrvácí" přes okraj rodiče, který má vlastní 16px padding).
   Boční padding nechceme, ale bez vynulování i té záporné marže by se
   formulář posunul o 16px mimo zarovnání se zbytkem obsahu tabu. */
.p-detail .discussion-form {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* tabulka parametrů */

.p-detail-full-width .tab-pane .detail-parameters {

    border-radius: var(--sh-radius-md);

}

/* typography */
.p-detail-full-width .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab a {

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-medium);

}

.p-detail-full-width .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab.active a {

    font-weight: var(--sh-font-weight-heading) !important;

}

#customInfoTab .shp-tab-number {
    color: var(--sh-color-accent);
}

#customInfoTab h4 {
    margin-bottom: var(--sh-space-xs);
}

/* ==========================================================
   PRODUCT DETAIL SPACING
========================================================== */

/* výrobce */

.p-detail-inner .brand-wrapper{

    margin-bottom: var(--sh-space-xs);

}

/* nadpis — podtitulek z krátkého popisu („Hnědý třtinový cukr") patří
   k názvu jako jeho druhý řádek, proto skoro bez mezery: malý
   margin pod h1, bez marginu hlavičky a horního marginu krátkého popisu */

.p-detail-inner h1{

    margin-bottom: var(--sh-space-xs);

}

.p-detail-inner .p-detail-inner-header{

    margin-bottom: 0;

}

/* rating */

.p-detail-inner .stars-wrapper{

    margin-bottom: var(--sh-space-md);

}

/* krátký popis */

.p-detail-inner .p-short-description{

    margin-top: 0;
    margin-bottom: var(--sh-space-sm);

}

/* ----------------------------------------------------------
   Rytmus od názvu po výběr balení drží 8px mřížku (krajní hodnoty
   clampů jsou násobky 8; v závorce desktop): název 8 → podtitulek
   24–32 (32) → popisek 16–24 (24) → karty (mezera 8, vnitřek 16)
   32–48 (48) → BALENÍ. Čím víc k sobě obsah patří, tím menší mezera.
---------------------------------------------------------- */

/* ----------------------------------------------------------
   KRÁTKÝ POPIS — vlastní HTML (Multipack)
   Celý obsah krátkého popisu jde z importu jako HTML s třídami
   .sh-pd__* (podtitulek, , vlastnosti) — vzor podle webu
   klienta. Selektory přes .p-short-description, ať přebijí obecná
   pravidla z typography.css (.p-short-description p).
---------------------------------------------------------- */

/* „Hnědý třtinový cukr" — druhý řádek názvu, menší a zelený */
.p-short-description .sh-pd__subtitle {
    margin: 0 0 clamp(24px, 2.5vw, 32px);
    font-family: var(--sh-font-family-headings);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.7rem);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading-sm);
    color: var(--sh-color-accent);
}

/* úvod obyčejným písmem, ale větším — patkové písmo patří nadpisům
   a vlastnostem pod ním */
.p-short-description .sh-pd__lead {
    margin: 0 0 var(--sh-space-sm); /* 16–24 */
    font-family: var(--sh-font-family-body);
    font-size: clamp(1.6rem, 1.4rem + .5vw, 1.9rem);
    line-height: 1.6;
    color: var(--sh-color-text-muted);
}

/* 4 vlastnosti 2 × 2 jako karty — úplně stejné jako karty
   „Doporučené použití" v sekci O produktu (.sh-pd-about__uses):
   mátové, zaoblené, tučný Arial, bez odrážky */
.p-short-description .sh-pd__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sh-space-xs);
    margin: 0 0 clamp(32px, 3.4vw, 48px);
    padding: 0;
    list-style: none;
}

.p-short-description .sh-pd__benefits li {
    margin: 0;
    padding: calc(var(--sh-space-xs) * 2);
    border-radius: var(--sh-radius-card);
    background: var(--sh-color-surface);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    line-height: 1.5;
    color: var(--sh-color-text);
}

.p-short-description .sh-pd__benefits li::before {
    content: none;
}

/* úzký mobil: vlastnosti pod sebou, 2 sloupce by zalamovaly text po slovech */
@media (max-width: 479px) {
    .p-short-description .sh-pd__benefits {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* cena */

.p-detail-inner .p-price-wrapper{

    /* dostupnost („Skladem") hned pod cenou — patří k ní */
    margin-bottom: var(--sh-space-xs);

}

/* sklad + kód */

.p-detail-inner .detail-parameters{

    margin-bottom: var(--sh-space-sm);

}

/* přidání do košíku */

.p-detail-inner .p-to-cart-block{

    margin-bottom: var(--sh-space-md);

}

/* ==========================================================
   obrázek - mobil tablet
========================================================== */

/* na tabletu/mobilu je popis příliš blízko obrázkům, přidán větší
   odstup pod miniaturami (na desktopu je vedle sebe s popisem,
   takže tam navíc mezera potřeba není) */
@media (max-width: 991px){

    .p-thumbnails{
        margin-bottom: var(--sh-space-md);
    }

}

/* ==========================================================
   PRODUCT CTA – MÁTE DOTAZ?
========================================================== */

/* schovat tisk a sdílení */
.p-detail-inner .link-icon.print,
.p-detail-inner .link-icon.share {
    display: none;
}

/* wrapper — dole bez marginu: mezeru k další sekci dělá jen její
   horní padding (--sh-space-section), stejně jako mezi ostatními
   sekcemi detailu; margin by se k němu přičetl (dřív 96 + 96 px) */
.p-detail-inner .social-buttons-wrapper {
    margin-top: var(--sh-space-md);
    margin-bottom: 0;
}

.p-detail-inner .social-buttons-wrapper .link-icons {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* samotný odkaz */
.p-detail-inner .link-icon.chat {

    display: flex;
    align-items: flex-start;

    margin: 0;
    padding: 0;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-body);

    text-transform: none;
    text-align: left;

    color: var(--sh-color-text);

}

/* schovat ikonku */
.p-detail-inner .link-icon.chat i {
    display: none;
}

/* schovat původní text */
.p-detail-inner .link-icon.chat span {
    font-size: 0;
    line-height: 0;
}

/* nový dvouřádkový obsah */
.p-detail-inner .link-icon.chat span::before {

    content: "Máte dotaz k produktu?";
    display: block;

    margin-bottom: .25rem;

    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);

}

.p-detail-inner .link-icon.chat span::after {

    content: "Napište nám →";
    display: block;
    margin-top: 4px;

    /* jako tlačítka (Arial tučně, verzálky) — Georgia tučná v malé
       velikosti působí sevřeně, patkové písmo jen v normálním řezu */
    font-family: var(--sh-btn-font-family);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-btn-font-weight);
    text-transform: var(--sh-btn-text-transform);
    letter-spacing: var(--sh-btn-letter-spacing);
    line-height: var(--sh-line-height-body);

    color: var(--sh-color-accent);

}

/* zrušit defaultní hover Shoptetu */
.p-detail-inner .link-icon.chat:hover,
.p-detail-inner .link-icon.chat:focus {

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

}

/* zachovat pouze podtržení odkazu */
.p-detail-inner .link-icon.chat:hover span::after {

    text-decoration: underline;

}

/* ==========================================================
   PRODUCT SLIDERS – SPOLEČNÉ NASTAVENÍ
========================================================== */

/* odsazení celého slideru */
.product-slider-holder.has-navigation {
    padding-top: var(--sh-space-sm) !important;
    padding-bottom: var(--sh-space-md) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* odsazení jednotlivých karet */
.product-slider .products-block > .product,
.products-related-wrapper .products-block > div {
    padding-left: 0 !important;
    padding-right: var(--sh-space-sm) !important;
}

/* zjednodušení karet */
.products-wrapper .ratings-wrapper,
.products-wrapper .p-desc,
.products-wrapper .p-code {
    display: none !important;
}


/* ==========================================================
   RELATED PRODUCTS – HEADER
========================================================== */

.p-detail .products-related-header {

    margin-top: var(--sh-space-section);
    margin-bottom: var(--sh-space-sm);

    font-size: 0;
    text-align: left !important;

}

.p-detail .products-related-header::before {

    content: "Co by se mohlo hodit?";

    display: block;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    font-weight: var(--sh-font-weight-heading);
    line-height: var(--sh-line-height-heading);

    color: var(--sh-color-text);

}


/* ==========================================================
   HEADERS SE ŠIPKAMI
========================================================== */

/* zarovnání doleva vždy – i pro nadpisy sliderů, u kterých se nakonec
   šipky nepřidávají (4 nebo míň produktů), aby nespadly zpátky na
   Shoptetovo výchozí text-align:center. main-14 má i variantu
   ".products-header{text-align:center}" se stejnou specificitou jako
   naše třída – !important pro jistotu. */
.related-products-heading-left {
    text-align: left !important;
}

.related-products-heading-with-navigation {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--sh-space-sm);

    text-align: left;

}

.related-products-heading-navigation {

    display: flex;
    align-items: center;

    gap: var(--sh-space-sm);

    margin-right: var(--sh-space-sm);

    flex-shrink: 0;

}


/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

/* originální šipky (JS je teď klonuje místo přesouvání, viz komentář
   u skriptu) necháme na jejich původním místě ve slideru – Shoptet na
   ně váže přepočet layoutu při resize. Jen je vizuálně schováme, ale
   nechají se dál interaktivní/měřitelné pro Shoptetův vlastní kód. */
.is-heading-nav-original {
    opacity: 0 !important;
    pointer-events: none !important;
}

.related-products-heading-navigation
.product-slider-navigation {

    position: static;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--sh-color-cta-subtle);

    border: none;
    border-radius: 999px;

    color: var(--sh-color-text);

    opacity: 1;
    transform: none;

    transition: var(--sh-transition);

}

.related-products-heading-navigation
.product-slider-navigation:hover {

    background: var(--sh-color-cta);
    color: var(--sh-color-on-cta);

}

.related-products-heading-navigation
.product-slider-navigation::before {

    font-family: "shoptet" !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    line-height: 1;

}

.related-products-heading-navigation
.navigation-prev::before {

    content: "\e90f";

}

.related-products-heading-navigation
.navigation-next::before {

    content: "\e910";

}


/* ==========================================================
   SCHOVAT PŮVODNÍ ŠIPKY
========================================================== */

.products-wrapper > .product-slider-navigation {

    visibility: hidden !important;
    pointer-events: none !important;

}

/* ==========================================================
   PRODUCT SLIDERS – MOBILE
========================================================== */

@media (max-width: 767px){

    .related-products-heading-navigation{
        gap:12px;
        margin-right:0;
    }

    .related-products-heading-navigation
    .product-slider-navigation{

        width:40px;
        height:40px;
    }

    .related-products-heading-navigation
    .product-slider-navigation::before{

        font-size:12px;
    }

}

/* ==========================================================
   PRODUKTOVÁ KARTA (kategorie, homepage slidery, related products)
========================================================== */

/* přeškrtnutá původní cena – main-14 margin:0 5px ji posouvá mimo
   levý okraj, kde sedí .price-final nad ní */
.prices {
    justify-content: flex-start !important;
}

.price-standard {
    margin-left: 0;
    margin-right: auto;

    font-family: var(--sh-font-family-body);
    color: var(--sh-color-text-muted);
}

/* dostupnost ("Skladem", "Vyprodáno"...) – main-14 na ni dává jen
   font-size:12px bez rodiny/řádkování */
.availability {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
}

/* pod pásem Předchozí / Další produkt zůstával bílý pruh před patičkou
   (~104 px: padding-bottom 32 px na .container-full-width, margin-bottom
   16 px na .p-detail-full-width a padding-bottom 56 px na #content-wrapper,
   změřeno 2026-10-15) — pás je poslední prvek stránky, patička má
   navázat hned */
#content-wrapper:has(.sh-pd-nav:not([hidden])),
#content-wrapper .p-detail-full-width > .container-full-width:has(.sh-pd-nav:not([hidden])),
#content-wrapper .p-detail-full-width .container-full-width:has(.sh-pd-nav:not([hidden])),
.p-detail-full-width:has(.sh-pd-nav:not([hidden])),
.p-detail:has(.sh-pd-nav:not([hidden])) {
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ==========================================================
   MOBIL A TABLET: NÁZEV PRODUKTU POD FOTKOU
   Shoptet do 991 px vkládá nadpis (.p-detail-inner-header-mobile) do
   .p-image-wrapper před fotku (od 992 px se místo něj zobrazí
   .p-detail-inner-header v pravém sloupci). Bez skriptu ho přesuneme jen
   pořadím ve flexu: fotka, náhledy, pak nadpis — a hned za ním podnadpis
   a popis z .p-data-wrapper. Na tabletu (768–991 px) je detail pořád
   jednosloupcový, proto stejné řešení jako na mobilu.
========================================================== */

@media (max-width: 991px) {
  .p-image-wrapper {
    display: flex;
    flex-direction: column;
  }

  .p-image-wrapper > .p-image {
    order: 1;
  }

  .p-image-wrapper > .row {
    order: 2;
  }

  .p-image-wrapper > .p-detail-inner-header-mobile {
    order: 3;
    margin-top: var(--sh-space-sm);
  }
}


/* ==========================================================
   MOBIL: SJEDNOCENÍ ODSAZENÍ DLOUHÉHO POPISU
   Sekce pod detailem (O produktu, záložky, značka, další produkty)
   měly mobilní boxy 12 px od okraje + 36 px vnitřní padding (desktopové
   „--sh-space-page + 16 px“ vyrovnávalo okraje Shoptetu), takže text
   byl na 48 px, zatímco zbytek webu má text na --sh-space-page (20 px).
   Teď: okraj sekce = okraj obsahu (20 px), text sekcí bez dalšího
   vnitřního odsazení, mátová karta záložek má 16 px.
========================================================== */

@media (max-width: 767px) {
  .p-detail-full-width {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .p-detail-full-width .sh-pd-about,
  .p-detail-full-width .sh-pd-author,
  .p-detail-full-width .sh-pd-brand {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-detail-full-width .tab-content,
  .p-detail-full-width #tab-content {
    padding-left: var(--sh-space-sm) !important;
    padding-right: var(--sh-space-sm) !important;
  }
}


/* MOBIL: zelená sekce „Informace o výrobku“ přes celou šířku obrazovky,
   text začíná na 20 px (--sh-space-page) jako jinde na webu */
@media (max-width: 767px) {
  .p-detail-full-width #tab-content:has(.sh-pd-info),
  .p-detail-full-width .tab-content:has(.sh-pd-info) {
    margin-left: calc(-1 * var(--sh-space-page)) !important;
    margin-right: calc(-1 * var(--sh-space-page)) !important;
    padding-left: var(--sh-space-page) !important;
    padding-right: var(--sh-space-page) !important;
    border-radius: 0 !important;
  }
}


/* MOBIL: pruh Předchozí / Další produkt přes celou šířku obrazovky,
   text začíná na 20 px (--sh-space-page) jako zbytek stránky */
@media (max-width: 767px) {
  .p-detail-full-width .sh-pd-nav {
    margin-left: calc(-1 * var(--sh-space-page)) !important;
    margin-right: calc(-1 * var(--sh-space-page)) !important;
  }

  .sh-pd-nav .sh-pd-nav__link {
    padding-left: var(--sh-space-page) !important;
    padding-right: var(--sh-space-page) !important;
  }
}


/* MOBIL: víc místa nad fotkou produktu pod hlavičkou a podnadpis
   („Hnědý třtinový cukr“) blíž k názvu produktu */
@media (max-width: 767px) {
  /* hlavička je na mobilu/tabletu pevná (72 px) a fotka by na ni
     doléhala; .p-image-wrapper má padding přebitý šablonou, proto
     odstup na rodiči .p-detail-inner (tablet viz níže) */
  .p-detail-inner {
    padding-top: var(--sh-space-md) !important;
  }
}

@media (max-width: 991px) {
  .p-image-wrapper > .p-detail-inner-header-mobile .h1 {
    margin-bottom: 4px !important;
  }
}


/* tablet (768–991 px): hlavička je pořád pevná, stejný odstup nad fotkou */
@media (min-width: 768px) and (max-width: 991px) {
  .p-detail-inner {
    padding-top: var(--sh-space-md) !important;
  }
}