/*  Generated: 2026-10-15 13:03:08 */
/* ============================================================
   Phase 99 / E19 — produktová karta na telefonu (Z3; návrh P. Beneše karta-1, rozhodnutí vlastníka 4. 10. D1–D4;
   docs/phase-99-mobilni-redesign/vyzkum-z3-karta.md). Šablona: Product/default.latte, větve $dsKarta (do D12 $dsMobile).

   Načítá se na detailu produktu v mobilním režimu (@layout.latte pod $dsBuyBar — telefon a od D0 tablet; dva sloupce
   na tabletu dělá legacy float) a od D12 (R29 B + C, vlastník 12. 10.) na NOVÉM DESKTOPU ($dsDesktop && $dsKarta —
   <html> má třídu ds-karta jen tam). Pravidla platná i pro desktop začínají `:is(html.ds-mobile, html.ds-karta)`
   (specificita jako dřív, 0,1,1); jen telefonu a tabletu zůstávají drobečky (desktop má celou cestu) a tlačítko lupy
   (desktop má lupu kliknutím na fotku — app.js). Desktopové rozvržení (název vpravo, lišta sekcí s cenou, sekce přes
   celou šířku) je v sekci D12 na konci, pod html.ds-desktop.ds-karta. Legacy prvky, které nový vzhled nahrazuje (.ikony,
   řádek Kód/Značka, výtah z popisu, 24h kolečko), zůstávají v HTML pro starý desktop a tady se schovají.
   ============================================================ */

/* ---------- drobečky: poslední dvě úrovně místo „< poslední" (responsive-stylesheet.css ukazuje jen .last_active) */
html.ds-mobile .productdetail #navBreadCrumb {
    margin: 10px 0 6px;
    padding: 0;
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
}
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(5),
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(5) span,
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(5) a,
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(4) {
    display: inline;
}
html.ds-mobile .productdetail #navBreadCrumb a {
    color: inherit;
    text-decoration: none;
}
html.ds-mobile .productdetail #navBreadCrumb .breadcrumb-separator {
    display: none;
}
/* oddělovač „>" (span s textem) jako „›" */
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(4) {
    font-size: 0;
}
html.ds-mobile .productdetail #navBreadCrumb > span:nth-last-child(4)::before {
    content: "›";
    margin: 0 6px;
    font-size: 14px;
}
html.ds-mobile .productdetail #navBreadCrumb span.last_active a::before {
    content: none;
}

/* ---------- název, shrnutí, štítky, značka · kód · hodnocení */
:is(html.ds-mobile, html.ds-karta) .productDetail .name_and_logo h1#productName {
    margin: 2px 0 6px;
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__subtitle {
    margin: 0 0 10px;
    color: var(--ds-text-primary);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__chip {
    padding: 5px 12px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-chip-bg);
    color: var(--ds-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__chip--accent {
    background: var(--ds-surface-muted);
    color: var(--ds-text-secondary);
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__chip--ok {
    background: var(--ds-chip-ok-bg);
    color: var(--ds-chip-ok-fg);
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 12px;
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta > * + *::before {
    content: "·";
    margin: 0 6px;
    color: var(--ds-text-secondary);
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta a {
    color: var(--ds-text-secondary);
    text-decoration: none;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta a[data-js] {
    color: var(--ds-link-accent);
    text-decoration: underline;
}
/* hodnocení: ★ průměr (počet) — vlastník 4. 10. podle výzkumu konkurence (alza, brainmarket). `a.` kvůli
   specificitě: obecné `a[data-js]` výš by jinak podtrhlo celý odkaz i s oddělovačem „·“ */
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta a.ds-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ds-text-secondary);
    text-decoration: none;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__meta a.ds-pdp__rating strong {
    color: var(--ds-text-primary);
    font-weight: 700;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__star {
    flex: none;
    fill: var(--ds-rating-star);
}
:is(html.ds-mobile, html.ds-karta) .productDetail .product-info-detail-row.kod,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ikony,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .right-description,
:is(html.ds-mobile, html.ds-karta) #productImagesBox > .product-list-24h {
    display: none;
}

/* ---------- galerie: šedá zaoblená karta, sleva vlevo nahoře, lupa vpravo nahoře, náhledy pod ní */
:is(html.ds-mobile, html.ds-karta) #productImagesBox {
    position: relative;
    height: auto;
    margin: 0 0 12px;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productMainImage {
    position: relative;
    float: none;
    width: auto;
    border-radius: var(--ds-radius-card);
    background: var(--ds-gallery-bg);
    overflow: hidden;
}
/* karusel má vlastní vrstvu (transform) — podklad proto na položce, jinak by `multiply` neměl s čím míchat */
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productMainImage .owl-item {
    background: var(--ds-gallery-bg);
}
/* bílý podklad fotek splyne se šedou kartou */
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productMainImage img,
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages img {
    mix-blend-mode: multiply;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox .owl-pagination {
    display: none;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox .sleva_big {
    top: 12px;
    right: auto;
    left: 12px;
    margin: 0;
    transform: none;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox .doprava_big {
    top: 72px;
    right: auto;
    left: 12px;
}
/* Fotky přes celou obrazovku (lupa, magnific-popup): legacy vrstva 1042/1043 ležela POD připnutou hlavičkou
   (11000) — křížek nad fotkou zakrytý hlavičkou, fotka nešla zavřít (nahlásil vlastník z iPhonu 4. 10.). Nad lištou
   s cenou (1000) a spodní navigací (1001) ležela už dřív. Nad hlavičku, pod nic dalšího. */
:is(html.ds-mobile, html.ds-karta) .mfp-bg {
    z-index: 11500;
}
:is(html.ds-mobile, html.ds-karta) .mfp-wrap {
    z-index: 11501;
}
/* Chat a teaser Leadhubu mají vlastní vyšší vrstvu a pozici si píší samy (Smartsupp inline) — `!important` je tatáž
   výjimka jako u otevřeného menu (menu.css) a vyhledávání (search.css); třídu dává ds-pdp.js při otevření. */
:is(html.ds-mobile, html.ds-karta).ds-lupa-open #smartsupp-widget-container,
:is(html.ds-mobile, html.ds-karta).ds-lupa-open #lh-go-to-popup-page {
    visibility: hidden !important;
}
html.ds-mobile #productImagesBox .ds-pdp__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
    color: var(--ds-text-primary);
    cursor: pointer;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages-obal {
    display: block;
    clear: both;
    margin: 8px 0 0;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages {
    position: static;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li {
    position: relative;
    /* 4,4 náhledu na šířku: pátý je vidět napůl, takže je poznat, že jich je víc (vlastník 4. 10. podle
       výzkumu — Baymard „signpost hidden thumbnails"); 4 mezery po 8 px */
    flex: 0 0 calc((100% - 32px) / 4.4);
    box-sizing: border-box;
    width: auto;
    height: 78px;
    margin: 0;
    padding: 0;
    float: none;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--ds-gallery-bg);
    overflow: hidden;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li.current {
    border-color: var(--ds-accent);
}
/* legacy linka pod aktivním náhledem (stylesheet.css .productMainImage.current a:before) — tady rámeček */
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li a::before {
    content: none;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li a {
    display: block;
    width: 100%;
    height: 100%;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
:is(html.ds-mobile, html.ds-karta) #productImagesBox #productAdditionalImages li.ds-pdp__video-thumb a::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 34px;
    height: 34px;
    margin: auto;
    border-radius: 50%;
    background: var(--ds-menu-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center / 20px no-repeat;
    opacity: .85;
}

/* ---------- nákupní box: dostupnost → cena → kód / VIP → varianty → − 1 + Do košíku → doprava a odběr */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in {
    margin: 0 0 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface-muted);
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .ceny-obal-out,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .ceny-obal {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__stock {
    margin: 0 0 10px;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__stock-main {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-stock-ok);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__stock-main::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__stock-main--mimo {
    color: var(--ds-text-secondary);
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__stock-note {
    margin: 2px 0 0;
    color: var(--ds-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__delivery-link {
    display: inline-block;
    margin: 4px 0 0;
    color: var(--ds-link-accent);
    font-size: 14px;
    text-decoration: underline;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .ceny {
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .nase-cena-hodnota,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .nase-cena-hodnota.coupon {
    color: var(--ds-text-primary);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .nase-cena-hodnota strong {
    margin-left: 8px;
    color: var(--ds-text-secondary);
    font-size: 15px;
    font-weight: 400;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--ds-accent);
    border-radius: 12px;
    background: var(--ds-surface);
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon-icon {
    flex: none;
    color: var(--ds-link-accent);
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon-text {
    flex: 1 1 auto;
    min-width: 0;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon-label {
    display: block;
    color: var(--ds-text-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon-price {
    display: block;
    color: var(--ds-price-discount);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon-note,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__akce {
    display: block;
    margin-top: 2px;
    color: var(--ds-text-secondary);
    font-size: 12px;
    line-height: 1.3;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__akce {
    margin: 0 0 10px;
}
/* legacy .coupon-buy-link je černé tlačítko — tady odkaz */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__coupon a.ds-pdp__coupon-buy {
    flex: none;
    /* hlavní akce boxu: dotyková plocha 44 px na výšku, i když text je jeden řádek (nález Phase 7B: 18 px) */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-link-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
    white-space: nowrap;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .detail-blok-in .product-card__vip-price--detail {
    margin: 0 0 12px;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .barevne_varianty a.model01variant.active,
:is(html.ds-mobile, html.ds-karta) #productDetailRight .barevne_varianty a.model01variant.active img {
    border-color: var(--ds-accent);
}
/* Vlastník 14. 10.: náhledy barevných variant se zaoblenými rohy jako zbytek nového vzhledu (menší prvky 8 px);
   obrázek uvnitř rámečku (odsazení 4 px, stylesheet.css) o to menší poloměr, aby roh fotky kopíroval rámeček. */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .barevne_varianty a.model01variant {
    border-radius: var(--ds-radius-sm);
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .barevne_varianty a.model01variant img {
    border-radius: calc(var(--ds-radius-sm) - 4px);
}
/* goldex: výběry atributů přes celou šířku, 16 px (iOS jinak při ťuknutí zoomuje — mobile-touch-discipline facet 2) */
:is(html.ds-mobile, html.ds-karta) #productAttributes .wrapperAttribsOptions {
    display: block;
    margin: 0 0 10px;
}
:is(html.ds-mobile, html.ds-karta) #productAttributes .optionName,
:is(html.ds-mobile, html.ds-karta) #productAttributes .optionSelect {
    display: block;
    position: static;   /* legacy responsive-stylesheet.css 768–940 px: absolute → select ležel přes „+ Přidat:
                           speciální požadavky" a bral mu ťuknutí (tablet 820 px, 2. kolo 7B S4–S7) */
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #productAttributes .optionName label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}
:is(html.ds-mobile, html.ds-karta) #productAttributes select,
:is(html.ds-mobile, html.ds-karta) #productAttributes textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.3;
    border: 1px solid var(--ds-field-border);
    border-radius: 10px;
    background: var(--ds-surface);
    font-size: 16px;
}
:is(html.ds-mobile, html.ds-karta) #productAttributes textarea {
    min-height: 72px;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__delivery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    color: var(--ds-text-primary);
    font-size: 13px;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__delivery-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- pod nákupem: všechny varianty, pomoc s výběrem */
/* `color` je nutný: legacy `button.show-all-variants:hover` (stylesheet.css) dává bílý text a iPhone po ťuknutí
   :hover DRŽÍ — na našem bílém pozadí tlačítko po rozbalení zmizelo (nahlásil vlastník z iPhonu 4. 10.). Tohle
   pravidlo legacy :hover přebíjí specificitou (id + třídy), takže platí i při :hover; vlastní :hover netřeba
   (mutace „bez :hover“ přežila, „bez color“ ne). */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .show-all-variants-out .show-all-variants {
    border: 1px solid var(--ds-divider);
    border-radius: 14px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid var(--ds-divider);
    border-radius: 14px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    text-align: left;
    text-decoration: none;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-icon {
    flex: none;
}
/* P2-4 (vlastník 14. 10.): fotka poradce místo sluchátek (dsMenuHub.helpPhoto) — kruh jako v patičce */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-foto {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-hours {
    display: block;
    color: var(--ds-text-secondary);
    font-size: 13px;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__help-arrow {
    flex: none;
    font-size: 24px;
    line-height: 1;
}

/* ---------- E20c: jednotná sada nad boxem pomoci — dotaz ke zboží a lepší cena. Každá akce je samostatná karta jako
   box „Pomůžeme s výběrem" (rámeček, poloměr, odsazení, ikona 30 px a šipka jako sluchátko — vlastník 5. 10.).
   Mezi všemi kartami pod nákupem jednotně 12 px („Všechny varianty" → akce → box pomoci, vlastník 5. 10.); dřív sada
   jako jedna karta stála 10 px pod „Všechny varianty" a rámečky se slily do zdvojené čáry.
   Barva textu přímo na kartě = černá jako box pomoci (bez ní se zdědí #1a1a1a) A ZÁROVEŇ obrana proti :hover: iOS ho po
   ťuknutí drží (facet 6) a bez tohoto pravidla globální a:hover text zbarví na tyrkysovou (#00c4ed) — přeměřeno
   6. 10. (E23) v acceptance-e20 po opravě měřidla. Dřívější „mutace ukázala, že nepřebarví" stálo na kontrole, která
   četla barvu dřív, než doběhl legacy přechod `a { transition: all .35s }`. */
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__moznosti {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__moznost {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--ds-divider);
    border-radius: 14px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__moznost-ikona {
    flex: none;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__moznost-text {
    flex: 1 1 auto;
    min-width: 0;
}
:is(html.ds-mobile, html.ds-karta) #productDetailRight .ds-pdp__moznost-sipka {
    flex: none;
    font-size: 24px;
    line-height: 1;
}
/* Okna dotazu a lepší ceny (otevírá je sada výš): pole 16 px — pod 16 px iOS při ťuknutí stránku zoomuje (facet 2);
   jméno, e-mail a telefon měly 14 px (změřeno 5. 10.). Jen telefon a tablet: zoom se desktopu netýká (nález 7B D12);
   nová okna mají na desktopu vlastní písmo z form.css (D12b). */
html.ds-mobile #products-detail-modals input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.ds-mobile #products-detail-modals textarea,
html.ds-mobile #products-detail-modals select {
    font-size: 16px;
}

/* ---------- E23 — sekce pod sebou místo záložek s lištou odkazů přilepenou pod hlavičkou (rozhodnutí vlastníka 5. 10.:
   V1 vše rozbalené; vyzkum-e23-sekce.md). Šablona components/zalozky/default.latte blok dsSekce, chování ds-pdp.js
   initDsSekce (výška sbalené hlavičky do --ds-sekce-top, zvýraznění sekce, dotažení Foto a příslušenství). Řada záložek
   se na telefonu už nevykresluje — její pravidla (E19) odsud zmizela. */
:is(html.ds-mobile, html.ds-karta) .ds-sekce {
    clear: both;
    margin: 12px 0 0;
}
/* lišta přes celou šířku obsahu (#zalozky_main má 8 px od okraje displeje), vodorovně rolovatelná */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__lista {
    display: flex;
    gap: 8px;
    margin: 0 -8px 4px;
    padding: 8px;
    border-bottom: 1px solid var(--ds-divider);
    background: var(--ds-surface);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__lista::-webkit-scrollbar {
    display: none;
}
/* Lepí se jen s JS (třída ds-sekce--js z ds-pdp.js): bez JS se hlavička nesbalí a výška pro lištu chybí — lišta by
   visela schovaná pod hlavičkou (nález 7B). Lepí se jen uvnitř .ds-sekce__obal, takže nad doporučenými produkty už ne.
   z-index v pásmu 10000–10999 jako lišta výpisu (listing.css): nad obsahem, pod hlavičkou (11000) a modály (11500). */
:is(html.ds-mobile, html.ds-karta) .ds-sekce--js .ds-sekce__lista {
    position: sticky;
    top: var(--ds-sekce-top, 0px);
    z-index: 10400;
}
/* Vlastní :hover netřeba: iOS ho po ťuknutí drží (mobile-touch-discipline 6), ale legacy `a:hover` (stylesheet.css,
   13 tenantů) má specifičnost 0,1,1 a tohle pravidlo 0,2,1 — barva se nezmění. Ověřeno mutací (varianty :hover
   přežily) a vynuceným :hover v akceptaci E23; oslabený selektor akceptace zachytí. Totéž platí pro odkazy níž. */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__odkaz {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-muted);
    color: var(--ds-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    /* pilulky jako podkategorie E16 (40 px); core `a { transition: all .35s }` by zvýraznění animoval — netřeba */
    transition: none;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__odkaz[aria-current="true"] {
    background: var(--ds-text-primary);
    color: var(--ds-surface);
}
/* sekce, jejíž obsah nepřišel (ds-pdp.js), zmizí i s odkazem — inline-flex výš by atribut hidden přebil */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__odkaz[hidden] {
    display: none;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__odkaz:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
/* Okraj pro kotvu (příchod s #box-… v adrese, stránka bez JS). S JS: sbalená hlavička (--ds-sekce-top, ~106 px) + lišta
   (57 px) + 8 px. Bez JS proměnná chybí, lišta se nelepí a hlavička zůstane rozbalená (~160 px) — výchozí 106 + 66 =
   172 px stačí na obojí (ověřuje akceptace bezjs). Ťuknutí na lištu posouvá ds-pdp.js sám. */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__sekce,
:is(html.ds-mobile, html.ds-karta) .ds-sekce__bez-hodnoceni {
    scroll-margin-top: calc(var(--ds-sekce-top, 106px) + 66px);
}
/* fokus po ťuknutí na lištu (ds-pdp.js) — cíl kotvy, ne ovládací prvek; obrys by obtáhl celou sekci */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__sekce:focus,
:is(html.ds-mobile, html.ds-karta) .ds-sekce__bez-hodnoceni:focus {
    outline: none;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__sekce {
    margin: 0 0 8px;
}
/* nadpis sekce jako nadpis popisu (E22): 18 px, vlevo — legacy h2 v obsahu stránky je na střed */
:is(html.ds-mobile, html.ds-karta) .ds-sekce .ds-sekce__nadpis {
    margin: 28px 0 10px;
    color: var(--ds-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}
/* produkt bez hodnocení (99 %): krátký řádek místo sekce (vlastník 5. 10.) */
:is(html.ds-mobile, html.ds-karta) .ds-sekce__bez-hodnoceni {
    margin: 20px 0 0;
    padding: 2px 0;
    border-top: 1px solid var(--ds-divider);
    border-bottom: 1px solid var(--ds-divider);
    color: var(--ds-text-secondary);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__bez-hodnoceni a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ds-link-accent);
    font-weight: 600;
    text-decoration: none;
}
/* Parametry: název šedě vlevo, hodnota tučně (legacy tabulka měla text na střed a šedé pozadí názvu) */
:is(html.ds-mobile, html.ds-karta) #box-parametry table.parametry {
    width: 100%;
    border-top: 1px solid var(--ds-divider);
    border-collapse: collapse;
    background: none;
}
:is(html.ds-mobile, html.ds-karta) #box-parametry .parametry td {
    padding: 10px 8px 10px 0;
    border-bottom: 1px solid var(--ds-divider);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
}
:is(html.ds-mobile, html.ds-karta) #box-parametry .parametry .parametry_nazev {
    width: 45%;
    background: none;
    color: var(--ds-text-secondary);
}
:is(html.ds-mobile, html.ds-karta) #box-parametry .parametry .parametry_hodnota {
    color: var(--ds-text-primary);
    font-weight: 600;
}
/* Video na šířku obsahu v poměru 16 : 9 (iframe má width="515" — přetékal displej, stránka byla 523 px široká) */
:is(html.ds-mobile, html.ds-karta) #box-video .video-vypis {
    margin: 0 0 12px;
}
:is(html.ds-mobile, html.ds-karta) #box-video .video-vypis iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}
/* Hodnocení (produkt s hodnoceními): počet, hvězdičky a „Přidat hodnocení" vlevo pod nadpisem (legacy 50 px mezera
   nahoře a vše na střed); výpis jednotlivých hodnocení legacy na telefonu skrývá (no-767) — beze změny */
:is(html.ds-mobile, html.ds-karta) #box-hodnoceni .hodnoceni-total {
    padding: 0;
    font-size: 15px;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #box-hodnoceni .product-info-detail-hodnota {
    font-size: 15px;
}
:is(html.ds-mobile, html.ds-karta) #box-hodnoceni .button-obal {
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #box-hodnoceni .hodnoceni_button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ds-link-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
/* Foto: mřížka náhledů po třech (vlastník 6. 10., varianta A — tytéž fotky jako galerie nahoře, v plné velikosti by
   přidaly 789–5 703 px); ťuknutí otevře lupu na té fotce (ds-pdp.js). Legacy `.detail-box-folder #box-foto img`
   (padding 25 px) sem nedosáhne — sekce v .detail-box-folder není. */
:is(html.ds-mobile, html.ds-karta) #box-foto [data-js="ds-sekce-obsah"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
:is(html.ds-mobile, html.ds-karta) #box-foto .centeredContent {
    display: block;
}
:is(html.ds-mobile, html.ds-karta) #box-foto [data-js="ds-sekce-obsah"] img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
    object-fit: contain;
    cursor: zoom-in;
}
/* text „Načítání…" přes celou šířku mřížky, ne v jejím prvním sloupci */
:is(html.ds-mobile, html.ds-karta) #box-foto .ds-sekce__nacitani {
    grid-column: 1 / -1;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__nacitani {
    display: block;
    padding: 8px 0;
    color: var(--ds-text-secondary);
    font-size: 14px;
}
:is(html.ds-mobile, html.ds-karta) .ds-sekce__doporuceni {
    clear: both;
    margin: 24px 0 0;
}
/* Cena dopravy: legacy `#box-doprava { background: #f4f4f4; padding; text-align: center }` a `#box-doprava h2
   { margin-top: 0 }` (stylesheet.css, specifičnost 1,0,x) by daly nadpis do šedého boxu bez okraje — nadpis jako
   u ostatních sekcí; obsah pod ním od E25 seznam dopravců (blok níž) */
:is(html.ds-mobile, html.ds-karta) #box-doprava.ds-sekce__sekce {
    padding: 0;
    background: none;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #box-doprava > .ds-sekce__nadpis {
    margin: 28px 0 10px;
}
:is(html.ds-mobile, html.ds-karta) .productDetail .ds-pdp__po-zalozkach {
    clear: both;
    margin: 16px 0 0;
}

/* ---------- E25 — Cena dopravy na telefonu (rozhodnutí vlastníka 6. 10., varianta V1; vyzkum-e25-doprava.md).
   Šablona components/zalozky/default.latte blok dopravaMobil (tablet a desktop dál dopravaObsah s legacy vzhledem
   a mřížkou #zalozka-doprava). Seznam jako krok 2 pokladny: ikona · název · cena vpravo; popis jen u skupin, které
   ho ukazují i v pokladně. Ikona v pevném rámečku — gls.png má 150 × 50 px a v legacy mřížce ležel přes text
   (nahlásil vlastník z iPhonu 5. 10., opraveno v E19 pravidlem pro starý ceník, které tímto odpadá). */
:is(html.ds-mobile, html.ds-karta) .ds-doprava {
    text-align: left;
    color: var(--ds-text-primary);
}
/* <p>: legacy `.columnCenter p { text-align: justify }` (0,1,1) dělal v delší maďarské větě díry mezi slovy */
:is(html.ds-mobile, html.ds-karta) .ds-doprava__zdarma {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--ds-radius-card);
    background: var(--ds-chip-ok-bg);
    color: var(--ds-chip-ok-fg);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__zdarma svg {
    flex: 0 0 auto;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__seznam {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
    overflow: hidden;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__radek {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--ds-divider);
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__radek:first-child {
    border-top: 0;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__ikona {
    flex: 0 0 44px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__ikona img {
    display: block;
    max-width: 44px;
    max-height: 30px;
    width: auto;
    height: auto;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__text {
    flex: 1 1 auto;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__nazev {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}
:is(html.ds-mobile, html.ds-karta) .ds-doprava__popis {
    display: block;
    margin-top: 2px;
    color: var(--ds-text-secondary);
    font-size: 13px;
    line-height: 1.35;
}
/* cena se nezmenšuje (flex-shrink 0 a šířka podle obsahu) — „119 Kč" ani „2 028 Ft" se nezalomí ani pod název */
:is(html.ds-mobile, html.ds-karta) .ds-doprava__cena {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
}
/* zdarma odstínem štítku „Doprava zdarma" z nákupního boxu (E19); kontrast 3,9 : 1 = otevřená otázka O2 */
:is(html.ds-mobile, html.ds-karta) .ds-doprava__cena--zdarma {
    color: var(--ds-chip-ok-fg);
}
/* barvu po ťuknutí (iOS drží :hover) drží specifičnost 0,2,1 proti legacy a:hover 0,1,1 — hlídá akceptace (hover) */
:is(html.ds-mobile, html.ds-karta) .ds-doprava__baleni {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 8px;
    color: var(--ds-link-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- E22 — zkrácený popis produktu a řádek „O značce" (rozhodnutí vlastníka 5. 10.; vyzkum-e22-popis.md).
   Šablona components/zalozky/default.latte (větve $dsMobile), chování ds-pdp.js initDsPopis. Text popisu 15 px,
   zarovnaný vlevo (legacy `#productDescription1 { text-align: justify }` dělá na úzkém displeji díry mezi slovy — jako
   E14 u popisu kategorie). Velikost písma NE na vnějším obalu: ten je sám `div.description-wide` a legacy !important
   mu nechá 14 px (nález 7B — odrážky a holý text dědily 14 px); text je ve vnitřním div.ds-popis__obsah níž. */
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] {
    line-height: 1.55;
    text-align: left;
}
/* Vnitřní obal uzavírá plovoucí obsah (obrázek s float) — jinak by se do jeho výšky nepočítal a ResizeObserver by
   dorůstající plovoucí obrázek neviděl (nález 2. kola 7B). Rozvržení nemění (ověřeno na 8 stránkách). */
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis-obsah"] {
    display: flow-root;
}
/* Legacy `.product-description .description.description-wide div, p, span, font { font-size: 1.4rem !important }`
   (stylesheet.css) přebije jen další !important — jediná výjimka v pdp.css mimo cizí widgety, a jen velikost písma.
   `div` zasáhne i vnitřní obal ds-popis__obsah, takže odrážky, <strong> i holý text zdědí 15 px. */
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] div,
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] p,
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] span,
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] font {
    font-size: 15px !important;
}
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] p,
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] li {
    line-height: 1.55;
    text-align: left;
}
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"] > h2,
:is(html.ds-mobile, html.ds-karta) #box-popis .manufacturers > h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
}
/* Zkrácený stav: 240 px = nadpis + ~9 řádků textu, spodní ~3 pod vyblednutím (Baymard: zkrácení musí být vidět).
   Výška je JEDINÝ zdroj — ds-pdp.js ji čte z clientHeight a sám žádné číslo nemá. Bez JS třída nepřibude, text je celý. */
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"].ds-popis--zkraceno {
    position: relative;
    max-height: 240px;
    overflow: hidden;
}
:is(html.ds-mobile, html.ds-karta) #box-popis [data-js="ds-popis"].ds-popis--zkraceno::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(to bottom, transparent, var(--ds-surface));
    pointer-events: none;
}
/* Tlačítko hned pod textem: hnědý odkaz se šipkou (Baymard: klikatelný vzhled, ukazatel, těsná blízkost), plocha
   44 px. Vlastní :hover netřeba: obecné legacy `button:hover` neexistuje (ověřeno 5. 10.) a iOS po ťuknutí drží :hover
   jen se stejnými pravidly — akceptace barvu při vynuceném :hover hlídá (mobile-touch-discipline 6). */
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis__tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 4px 0 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-link-accent);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis__tlacitko[hidden] {
    display: none;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis__tlacitko:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis__sipka {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis__tlacitko[aria-expanded="true"] .ds-popis__sipka {
    margin-top: 4px;
    transform: rotate(-135deg);
}
/* Popis značky (beneo, čtvrtina produktů) jako zavřený řádek — vzor E14 „O kategorii" (listing.css). */
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky {
    margin: 12px 0 0;
    border-top: 1px solid var(--ds-divider);
    border-bottom: 1px solid var(--ds-divider);
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__radek {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 44px 12px 0;
    color: var(--ds-text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__radek::-webkit-details-marker {
    display: none;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__radek::marker {
    content: "";
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__radek:focus-visible {
    outline: 2px solid var(--ds-text-primary);
    outline-offset: 2px;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__sipka {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--ds-text-primary);
    border-bottom: 2px solid var(--ds-text-primary);
    transform: rotate(45deg);
    transition: transform .15s ease-out;
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky[open] .ds-popis-znacky__sipka {
    margin-top: -2px;
    transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
    :is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky__sipka {
        transition: none;
    }
}
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky .productdetailreducer-mf {
    padding: 0 0 16px;
    color: var(--ds-text-secondary);
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
}
/* legacy `.columnCenter p { text-align: justify }` a barva odstavce míří přímo na <p> — obal by jim nestačil (nález 7B) */
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky .productdetailreducer-mf p,
:is(html.ds-mobile, html.ds-karta) #box-popis .ds-popis-znacky .productdetailreducer-mf li {
    color: var(--ds-text-secondary);
    text-align: left;
}

/* ============================================================
   Phase 99 / D12 — karta produktu na novém desktopu (R29 B + C, vlastník 12. 10. 2026; vyzkum-desktop-tablet.md § 22)
   Obsah je tentýž jako na telefonu a tabletu (pravidla výš pod :is(html.ds-mobile, html.ds-karta)); dva sloupce dělá
   legacy float jako na tabletu. Tady jen to, čím se desktop liší:
   B — název, štítky a řádek značka · kód v pravém sloupci nad cenou (šablona, blok dsHlava), galerie od vrchu;
   C — přilepená lišta sekcí přes celou šířku nese vpravo cenu a „Do košíku" (Brainmarket; na telefonu tutéž roli hraje
   lišta s cenou dole); sekce přes celou šířku (do 13. 10. do 1000 px), čitelnost drží jejich obsah (níž).
   Galerie zůstává desktopová (šipky, lupa kliknutím na fotku — app.js, náhledy s posuvníkem) — jen vzhled jako telefon.
   Celá sekce pod html.ds-desktop.ds-karta (<html> má ds-karta jen na novém desktopu a jen na kartě).
   ============================================================ */
/* Lišta se lepí pod PŘILEPENOU část hlavičky (na desktopu se hlavička nesbaluje, promo proužek a servisní odkazy
   odjedou nahoru): top dává pravidlo výš z --ds-sekce-top, který ds-pdp.js na desktopu nastaví jako odkaz na živou
   --ds-header-pripnuto (ds-header.js ji mění i bez změny velikosti okna) — jeden zdroj, vlastní top tady není.
   Kotva v adrese: odstup hlavička + vyšší lišta s tlačítkem; bez JS
   proměnná chybí a přilepená je celá hlavička — záloha 212 px (změřeno 7B 12. 10., bibik 1440). */
html.ds-desktop.ds-karta .ds-sekce__sekce,
html.ds-desktop.ds-karta .ds-sekce__bez-hodnoceni {
    scroll-margin-top: calc(var(--ds-header-pripnuto, 212px) + 76px);
}
html.ds-desktop.ds-karta .ds-sekce__lista {
    align-items: center;
    margin: 0 0 4px;
    padding: 10px 0;
}
/* Nákup vpravo; v úzkém okně, kde se odkazy posouvají do strany (pod ~820 px, změřeno 12. 10.), zůstane přilepený
   u pravého okraje lišty. */
html.ds-desktop.ds-karta .ds-sekce__nakup {
    position: sticky;
    right: 0;
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    padding-left: 24px;
    background: var(--ds-surface);
}
html.ds-desktop.ds-karta .ds-sekce__cena {
    color: var(--ds-text-primary);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
html.ds-desktop.ds-karta .ds-sekce__koupit {
    min-height: 44px;
    padding: 0 24px;
}
html.ds-desktop.ds-karta .ds-sekce__koupit svg {
    width: 20px;
    height: 20px;
}
/* Sekce přes celou šířku obsahu jako lišta a doporučené produkty (vlastník 13. 10., „Přes celou šířku" — v 1000 px
   z 1410 karta vypadala zúžená). Popis přes celou šířku v jednom sloupci, parametry a doprava ve dvou sloupcích,
   fotky a videa v mřížce.
   Popis (vlastník 13. 10., 3. kolo): přes celou šířku obsahu v JEDNOM sloupci, zkrácený i rozbalený — dva sloupce
   vlastník výslovně nechce (ani u „O značce"). Pravý sloupec se značkou zrušen — nesl jen nadpis „Značka" a odkaz
   (u parfémů složení) a vedle textu zůstal prázdný; značka je řádek POD popisem: nadpis a odkaz vedle sebe, pod nimi
   řádek „O značce …" (E22, vzor „O kategorii" E14) přes celou šířku. Složení parfému (vzácné, `.param_slozeni` —
   v šabloně PŘED popisem) přes šířku nad ním. Historie: legacy text 70 % a značka 20 % na kraji; D12 mřížka text vlevo
   681 px + značka vpravo („úzký blok, vůbec nevypadá dobře"); návrh se dvěma sloupci rozbaleného textu vlastník
   odmítl (13. 10.). Do 1024 px legacy pořadí pod sebou (responsive-stylesheet.css: text 100 %, značka pod ním). */
@media (min-width: 1025px) {
    /* legacy obal je flex v řadě bez zalomení (stylesheet.css) — popis a značka by stály vedle sebe a značka by se
       zmáčkla do proužku vpravo (mezistav 13. 10., snímek vlastníka) */
    html.ds-desktop.ds-karta .product-description {
        display: block;
    }
    html.ds-desktop.ds-karta .product-description .description {
        float: none;
        width: auto;
    }
    html.ds-desktop.ds-karta .product-description .manufacturers {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 12px;
        float: none;
        width: auto;
        margin-top: 24px;
    }
    html.ds-desktop.ds-karta .product-description .manufacturers > h2 {
        margin: 0;
    }
    html.ds-desktop.ds-karta .product-description .param_slozeni {
        float: none;
        width: auto;
    }
    html.ds-desktop.ds-karta #box-popis .product-description .manufacturers > .ds-popis-znacky {
        flex: 1 0 100%;
        margin-top: 16px;
    }
}
/* parametry ve dvou sloupcích po řádcích (řádky obou sloupců stejně vysoké); čára nahoře nad každým sloupcem zvlášť */
html.ds-desktop.ds-karta #box-parametry table.parametry {
    display: block;
    border-top: 0;
}
html.ds-desktop.ds-karta #box-parametry table.parametry > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
}
html.ds-desktop.ds-karta #box-parametry table.parametry tr {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
}
html.ds-desktop.ds-karta #box-parametry table.parametry td {
    display: block;
    width: auto;
}
html.ds-desktop.ds-karta #box-parametry table.parametry tr:nth-child(-n+2) > td {
    border-top: 1px solid var(--ds-divider);
}
/* Karty v sekcích (Příslušenství…) a „Všechny barevné varianty" stejně široké jako v karuselech téže stránky
   („Mohlo by se vám líbit", „K produktu se hodí") a ve výpisu (~280 px; vlastník 13. 10.: výpisy na kartě nesmí
   vypadat jinak než výpis kategorie). Počty sloupců = počty karet v karuselu (main.js, itemsCustom na kartě nového
   desktopu): 3 / od 980 px 4 / od 1200 px 5 / od 1600 px 6. Body 980 a 1600 nejsou v řadě .ds-* — určuje je owl.
   Owl měří okno BEZ posuvníku, media query s ním → v pásmu šířky posuvníku nad 1200 / 1600 px se mohou o kartu
   rozejít. Karty s obrysem a mezerou 16 px jako ve výpisu nového desktopu (listing.css, sekce „Karty nového desktopu",
   vlastník 14. 10.). */
html.ds-desktop.ds-karta .ds-sekce__sekce .productListing,
html.ds-desktop.ds-karta .vsechny-barevne-varianty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 16px;
}
@media (min-width: 980px) {
    html.ds-desktop.ds-karta .ds-sekce__sekce .productListing,
    html.ds-desktop.ds-karta .vsechny-barevne-varianty {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    html.ds-desktop.ds-karta .ds-sekce__sekce .productListing,
    html.ds-desktop.ds-karta .vsechny-barevne-varianty {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
@media (min-width: 1600px) {
    html.ds-desktop.ds-karta .ds-sekce__sekce .productListing,
    html.ds-desktop.ds-karta .vsechny-barevne-varianty {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
/* videa po dvou vedle sebe (jedno video přes celou šířku by bylo ~800 px vysoké) */
html.ds-desktop.ds-karta #box-video {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}
html.ds-desktop.ds-karta #box-video > .ds-sekce__nadpis {
    grid-column: 1 / -1;
}
/* fotky po šesti (telefon po třech — na celé šířce by náhled měl 460 px) */
html.ds-desktop.ds-karta #box-foto [data-js="ds-sekce-obsah"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
/* dopravci ve dvou sloupcích — na celé šířce by cena ležela 1 300 px od názvu */
html.ds-desktop.ds-karta .ds-doprava__seznam {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.ds-desktop.ds-karta .ds-doprava__radek:nth-child(odd) {
    border-right: 1px solid var(--ds-divider);
}
html.ds-desktop.ds-karta .ds-doprava__radek:nth-child(2) {
    border-top: 0;
}
/* „Nejlépe nakoupíte" (komponenta bestBuy) na kartě produktu vypnuté úplně (vlastník 15. 10.) — styly D12 pryč. */
/* Jeden styl nadpisu pod názvem produktu (vlastník 13. 10.: „nejednotnost nadpisů"): výpisy pod sekcemi
   („Mohlo by se vám líbit" a „K produktu se hodí" — OwlBox .owl-box-head, dřív 20 px 400, od 1711 px 28 px;
   „Všechny barevné varianty" — .centerBoxHeading, dřív 18 px 500 šedě bez mezery) a nadpisy „Popis produktu"
   a „Značka" (E22, dřív 600 šedě) jako nadpis sekce (.ds-sekce__nadpis výš: 18 px 700, mezery 28 / 10 px). */
html.ds-desktop.ds-karta .ds-sekce__doporuceni h2.owl-box-head,
html.ds-desktop.ds-karta .ds-pdp__hodi-se h2.owl-box-head,
html.ds-jednotny-produkt .ds-pdp__hodi-se h2.owl-box-head,
html.ds-desktop.ds-karta .productDetail > h2.centerBoxHeading {
    margin: 28px 0 10px;
    padding: 0;
    color: var(--ds-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}
html.ds-desktop.ds-karta #box-popis [data-js="ds-popis"] > h2,
html.ds-desktop.ds-karta #box-popis .manufacturers > h2 {
    color: var(--ds-text-primary);
    font-weight: 700;
}
/* název nad cenou: jako nadpis stránky, ne jako řádek v kartě telefonu */
html.ds-desktop.ds-karta #productDetailRight .name_and_logo h1#productName {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.25;
}
/* S7 (vlastník 14. 10., § 34): tablet s designSystem.tabletDesktopParts — název 28 px jako desktop (telefon 22 px);
   na tabletu stojí nad galerií (mimo #productDetailRight), proto selektor pravidla telefonu. */
html.ds-dily-desktopu .productDetail .name_and_logo h1#productName {
    font-size: 28px;
}
/* goldex: kolečko dopravy zdarma pod kolečkem slevy (pravidlo výš top: 72px je spočítané na 65px kolečko telefonu).
   Na desktopu mají od 1200 px obě 80 px (sleva responsive-stylesheet.css, doprava goldex tenant-shared.css) — dřív
   se překrývaly o 20 px (nález 7B D12). Mezera 8 px: 12 + 65 + 8, od 1200 px 12 + 80 + 8. */
html.ds-desktop.ds-karta #productImagesBox .doprava_big {
    top: 85px;
}
@media (min-width: 1200px) {
    html.ds-desktop.ds-karta #productImagesBox .doprava_big {
        top: 100px;
    }
}

/* ---------- Výzkum UI/UX desktopu P2-2 (vlastník 13. 10. 2026; vyzkum-ux-desktop.md § 8) — nákupní box nové karty desktopu
   u produktu s tlačítky variant (goldex: velikost prstenu, délka řetízku…). Změřeno na náhledu: „Do košíku" 1220 → ~900 px
   (1440 × 900), 1167 → 833 px (1920 × 1080). Vše jen pod #frm-shopingCardButton:has(.ds-varianty) — tlačítka variant
   s nadpisem kreslí Product/default.latte na nové kartě nového desktopu (DsVarianty) a od S6 (§ 34) i na telefonu a tabletu
   s designSystem.unifiedProduct — každé pravidlo má dvojče html.ds-jednotny-produkt. ---------- */
/* pořadí: barvy → varianty → sbalený požadavek → košík (v HTML je pole atributů před variantami) */
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty),
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) {
    display: flex;
    flex-direction: column;
}
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty) > .velikosti-listing,
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) > .velikosti-listing {
    order: 1;
}
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty) > #productAttributes,
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) > #productAttributes {
    order: 2;
}
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty) > #cartAdd-out,
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) > #cartAdd-out {
    order: 3;
}
/* navigační seznam „Varianta" (CartAttributeInputs — select s onchange na adresu varianty) je duplikát tlačítek variant */
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty) #productAttributes .wrapperAttribsOptions.select:has(select[onchange]),
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) #productAttributes .wrapperAttribsOptions.select:has(select[onchange]) {
    display: none;
}
/* jediná barevná dlaždice — není z čeho vybírat */
html.ds-desktop.ds-karta #frm-shopingCardButton:has(.ds-varianty) > .barevne_varianty:not(:has(> a.model01variant ~ a.model01variant)),
html.ds-jednotny-produkt #frm-shopingCardButton:has(.ds-varianty) > .barevne_varianty:not(:has(> a.model01variant ~ a.model01variant)) {
    display: none;
}
html.ds-desktop.ds-karta #productDetailRight .velikosti-listing:has(> .ds-varianty),
html.ds-jednotny-produkt #productDetailRight .velikosti-listing:has(> .ds-varianty) {
    padding-bottom: 8px;   /* legacy 40 px */
}
html.ds-desktop.ds-karta #productDetailRight .ds-varianty__nadpis,
html.ds-jednotny-produkt #productDetailRight .ds-varianty__nadpis {
    margin: 4px 0 8px;
    color: var(--ds-text-primary);
    font-size: 15px;
    line-height: 20px;
}
html.ds-desktop.ds-karta #productDetailRight .ds-varianty a,
html.ds-jednotny-produkt #productDetailRight .ds-varianty a {
    box-sizing: border-box;
    min-width: 48px;       /* legacy 88 px na „velikost 58" — tlačítko teď nese jen „58" nebo „45 cm" */
    margin: 0 6px 6px 0;
    padding: 8px 10px;
}
/* sbalené textové pole atributu („+ Přidat: speciální požadavky") — <details> z cartAttributeInputs/default.latte */
html.ds-desktop.ds-karta #productDetailRight .ds-pozadavek__odkaz,
html.ds-jednotny-produkt #productDetailRight .ds-pozadavek__odkaz {
    display: inline-block;
    margin: 4px 0 12px;
    color: var(--ds-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    list-style: none;
    cursor: pointer;
}
html.ds-desktop.ds-karta #productDetailRight .ds-pozadavek__odkaz::-webkit-details-marker,
html.ds-jednotny-produkt #productDetailRight .ds-pozadavek__odkaz::-webkit-details-marker {
    display: none;
}

/* ---------- Výzkum UI/UX desktopu P2-3 (vlastník 13. 10. 2026; vyzkum-ux-desktop.md § 8) — VIP box pod tlačítkem na jeden
   řádek (krátký podtitulek „Registrace zdarma", Product/default.latte) a pás důvěry pod řádkem dopravy (hodnocení
   a počet zákazníků z designSystem.duvera, vrácení, bezpečná platba). Nový desktop a od S6 (§ 34) telefon a tablet
   s designSystem.unifiedProduct (dvojče html.ds-jednotny-produkt). ---------- */
html.ds-desktop.ds-karta #productDetailRight .product-card__vip-price--detail,
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail {
    padding: 8px 12px;
    gap: 10px;
}
html.ds-desktop.ds-karta #productDetailRight .product-card__vip-price--detail .product-card__vip-crown,
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-crown {
    width: 24px;
    height: 20px;
}
html.ds-desktop.ds-karta #productDetailRight .product-card__vip-price--detail .product-card__vip-text,
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-text {
    display: flex;
    flex-direction: row;   /* legacy stylesheet.css: column */
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}
html.ds-desktop.ds-karta #productDetailRight .product-card__vip-price--detail .product-card__vip-title,
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-title {
    font-size: 14px;
}
html.ds-desktop.ds-karta #productDetailRight .product-card__vip-price--detail .product-card__vip-subtitle,
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-subtitle {
    font-size: 13px;
    text-decoration: underline;
}
html.ds-desktop.ds-karta #productDetailRight .ds-pdp__duvera,
html.ds-jednotny-produkt #productDetailRight .ds-pdp__duvera {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--ds-divider);
    list-style: none;
    color: var(--ds-text-secondary);
    font-size: 13px;
    line-height: 18px;
}
html.ds-desktop.ds-karta #productDetailRight .ds-pdp__duvera li,
html.ds-jednotny-produkt #productDetailRight .ds-pdp__duvera li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
html.ds-desktop.ds-karta #productDetailRight .ds-pdp__duvera svg,
html.ds-jednotny-produkt #productDetailRight .ds-pdp__duvera svg {
    flex: none;
    color: var(--ds-stock-ok);
}
html.ds-desktop.ds-karta #productDetailRight .ds-pdp__duvera strong,
html.ds-jednotny-produkt #productDetailRight .ds-pdp__duvera strong {
    color: var(--ds-text-primary);
}
/* S6 — vlastní hodnoty telefonu a tabletu: panel nákupu má 342–380 px (telefon; tablet vedle galerie) proti 460–600 px
   desktopu. S hodnotami desktopu se „VIP cena po přihlášení · Registrace zdarma" vešla ve WebKitu, v Chromiu ne (text
   282 px, potřeba ~288). Kompaktnější řádek se vejde od 390 px v obou; užší telefon ho zalomí na dva krátké řádky
   (flex-wrap výš) — pořád méně než čtyřřádková výzva s dlouhým podtitulkem dřív. */
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail {
    padding: 8px 10px;
    gap: 8px;
}
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-crown {
    width: 22px;
    height: 18px;
}
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-text {
    column-gap: 6px;
}
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-title {
    font-size: 13px;
}
html.ds-jednotny-produkt #productDetailRight .product-card__vip-price--detail .product-card__vip-subtitle {
    font-size: 12px;
}
/* dotykové cíle ≥ 44 px (nález 7B S4–S7; tablet v S7 je dorovnal v hledání): desktop má pro myš tlačítka variant 39 px
   a odkaz „+ Přidat: speciální požadavky" 21 px (změřeno 15. 10., telefon 390 i tablet 820 px). */
html.ds-jednotny-produkt #productDetailRight .ds-varianty a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}
html.ds-jednotny-produkt #productDetailRight .ds-pozadavek__odkaz {
    margin: 0;
    padding: 12px 0;
}
/* vlastník 13. 10. (výzkum UI/UX desktopu): „panel s cenou nemusí být tolik široký, fotogalerie by mohla mít víc místa" —
   od 1200 px panel 38 % šířky v mezích 460–600 px, galerie zbytek (legacy 48 / 48, stylesheet.css). A téhož dne:
   „galerie je teď moc roztahaná na šířku" — fotka má nejvýš 800 px (u goldexu originál 600), takže širší box byl jen
   šedá plocha po stranách (1920 px: box 974 px, fotka 800). Box galerie proto nejvýš 820 px. A potřetí (Safari, široké
   okno): „galerie nevyplňuje prostor, panel je moc daleko od fotky a moc úzký" — sloupec galerie byl od 1680 px široký
   1010–1040 px a box 820 v něm uprostřed (110 px prázdna vlevo, fotka → panel 145–160 px). Sloupec galerie proto
   nejvýš 820 px a ZBYTEK šířky dostává panel: panel = víc z (38 % v mezích 460–600 px) a (vše nad 820 + mezera 40 px).
   Kontejner má nejvýš 1680 px, takže na nejširších oknech jsou sloupce 820 / 820 a fotku od panelu dělí 40 px.
   Pod 1200 px zůstává 48 / 48, aby se řádek s počtem kusů a „Do košíku" vešel. */
@media (min-width: 1200px) {
    html.ds-desktop.ds-karta .productDetail > .productDetailLeft {
        width: calc(100% - max(clamp(460px, 38%, 600px), calc(100% - 860px)) - 40px);   /* panel níž, mezera 40 px */
    }
    html.ds-desktop.ds-karta .productDetail > #productDetailRight {
        width: max(clamp(460px, 38%, 600px), calc(100% - 860px));
    }
    html.ds-desktop.ds-karta .productDetail > .productDetailLeft > #productImagesBox {
        max-width: 820px;
    }
}
/* vlastník 13. 10.: „Do košíku" stejně velké jako tlačítko v rozbalovacím košíku v hlavičce — tlačítko dostává
   .ds-button--lg (56 px, 18 px; button.css) v Product/default.latte; tady jen počet kusů na stejnou výšku, ať řádek
   lícuje. Jen nová karta nového desktopu — buy-row.css (48 px) platí i pro telefon. */
html.ds-desktop.ds-karta #cartAdd.ds-buy-row .ds-qty {
    height: 56px;
}
html.ds-desktop.ds-karta #cartAdd.ds-buy-row .ds-qty .quantity-plus.fas,
html.ds-desktop.ds-karta #cartAdd.ds-buy-row .ds-qty .quantity-minus.fas,
html.ds-desktop.ds-karta #cartAdd.ds-buy-row .ds-qty__input {
    height: 54px;
}