﻿/* v2-detail.css – styly jen pro detail produktu (šablona dno_cz_test), načítá ProductDetail.htm až za dno-v2.css.
   Obsah: 1. galerie Swiper 11 + CSS záloha bez Swiperu, 2. „Dnes u nás nakoupilo", 3. sbalený dlouhý popis,
   4. dodavatelská tabulka parametrů, 5. Skip Pay (jeden řádek), 6. odkazy v buyboxu, 7. modal „Ceny a termíny dopravy“ (iframe).
   Přebíjí .pd-main / .pd-thumbs z dno-v2.css kap. 13 (ty počítají se scroll-snap bez Swiperu). */

/* 1. GALERIE – hlavní obrázek ---------------------------------------------------------- */
.v2 .pd-main.swiper { display: block; overflow: hidden; scroll-snap-type: none; position: relative; }
.v2 .pd-main .swiper-wrapper { display: flex; height: 100%; }
/* záloha bez Swiperu: posuvný pruh slidů se scroll-snap (stejné chování jako původní galerie) */
.v2 .pd-main:not(.swiper-initialized) .swiper-wrapper { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2 .pd-main:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.v2 .pd-slide { height: 100%; }
.v2 .pd-slide a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; cursor: zoom-in; }
.v2 .pd-slide img { user-select: none; -webkit-user-drag: none; }
.v2 .pd-arrow { position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid var(--c-border); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-text); box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.v2 .pd-arrow .ico { width: 20px; height: 20px; }
.v2 .pd-arrow--prev { left: 10px; }
.v2 .pd-arrow--next { right: 10px; }
.v2 .pd-arrow:hover { background: #fff; color: var(--c-brand); border-color: var(--c-border-strong); }
.v2 .pd-arrow:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
.v2 .pd-arrow.swiper-button-disabled { opacity: .3; pointer-events: none; }
.v2 .pd-arrow.swiper-button-lock, .v2 .pd-main:not(.swiper-initialized) .pd-arrow { display: none; }
.v2 .pd-count { position: absolute; right: 10px; bottom: 10px; z-index: 5; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--c-muted); background: rgba(255, 255, 255, .92); border: 1px solid var(--c-border); border-radius: 999px; padding: 2px 10px; pointer-events: none; }
.v2 .pd-main:not(.swiper-initialized) .pd-count { display: none; }
@media (max-width: 767.98px) {
    .v2 .pd-arrow { width: 32px; height: 32px; margin-top: -16px; }
    .v2 .pd-arrow .ico { width: 18px; height: 18px; }
    .v2 .pd-arrow--prev { left: 6px; }
    .v2 .pd-arrow--next { right: 6px; }
}

/* 1b. GALERIE – miniatury (posuvné pod hlavním obrázkem na desktopu i mobilu) */
.v2 .pd-thumbs-wrap { display: flex; align-items: center; gap: 6px; padding-top: 10px; }
.v2 .pd-thumbs.swiper { display: block; overflow: hidden; flex: 1 1 auto; min-width: 0; padding: 2px; gap: 0; }
.v2 .pd-thumbs .swiper-wrapper { display: flex; }
.v2 .pd-thumbs:not(.swiper-initialized) .swiper-wrapper { overflow-x: auto; gap: 8px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2 .pd-thumbs:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.v2 .pd-thumb { cursor: pointer; scroll-snap-align: start; }
.v2 .pd-thumb:hover { border-color: var(--c-border-strong); }
.v2 .pd-thumb.swiper-slide-thumb-active, .v2 .pd-thumbs:not(.swiper-initialized) .pd-thumb.is-active { border-color: var(--c-brand); }
.v2 .pd-thumb:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
.v2 .pd-thumbs-arrow { flex: none; width: 28px; height: 64px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-s); background: #fff; color: var(--c-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, border-color .15s, opacity .15s; }
.v2 .pd-thumbs-arrow:hover { color: var(--c-brand); border-color: var(--c-border-strong); }
.v2 .pd-thumbs-arrow.swiper-button-disabled { opacity: .3; pointer-events: none; }
.v2 .pd-thumbs-arrow.swiper-button-lock, .v2 .pd-thumbs-wrap:not(:has(.swiper-initialized)) .pd-thumbs-arrow { display: none; }
@media (max-width: 767.98px) { .v2 .pd-thumbs-arrow { display: none; } }

/* 2. „DNES U NÁS NAKOUPILO X ZÁKAZNÍKŮ" (buybox pod dostupností); spodní okraj 16 px odsazuje počítadlo kusů
      + „Do košíku" (.buybox-cta) od tohoto řádku (2026-11-01, dřív 2 px) ----------------------------------- */
.v2 .pd-social { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--c-cta-soft); color: var(--c-ok); font-size: 13px; font-weight: 500; line-height: 1.35; }
.v2 .pd-social[hidden] { display: none; }
.v2 .pd-social .ico { flex: none; color: var(--c-ok); }
.v2 .pd-social b { font-weight: 700; }

/* 3. DLOUHÝ POPIS – sbalení na ~600 px (třídy přidává js/script/v2-detail.js) ---------------- */
.v2 .pd-longwrap { position: relative; }
.v2 .pd-longwrap.is-collapsed { max-height: 600px; overflow: hidden; }
.v2 .pd-longwrap.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.v2 .pd-longtoggle { display: flex; justify-content: center; margin: 12px 0 6px; }
.v2 .pd-longtoggle .btn-v2 { gap: 6px; }
.v2 .pd-longtoggle .ico { transition: transform .2s; }
.v2 .pd-longtoggle [aria-expanded="true"] .ico { transform: rotate(180deg); }

/* 4. DODAVATELSKÁ TABULKA PARAMETRŮ – skrytá, když existují „Technické parametry" (duplikát);
      tabulky, které nejsou dvojice klíč/hodnota, JS označí .pd-table-keep a zůstanou --------- */
.v2 .pd-longtext--has-params table { display: none; }
.v2 .pd-longtext--has-params table.pd-table-keep { display: table; }

/* 5. SKIP PAY – jediný řádek (odložená platba, text-variant 2) ---------------------------- */
.v2 .buybox-skippay { margin-top: 10px; }
.v2 .buybox-skippay skip-pay-placement { display: block; }

/* 6. ODKAZY V BUYBOXU (důvěra) ------------------------------------------------------------ */
.v2 .buybox-trust a.buybox-trust-link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.v2 .buybox-trust a.buybox-trust-link:hover { color: var(--c-brand); }

/* 7. MODAL „CENY A TERMÍNY DOPRAVY" – delivery-info.aspx v iframe (otevírá js/script/v2-detail.js bez vlastního titulku, výšku hlásí stránka) ---- */
.v2-modal--doprava .v2-modal-box { max-width: 720px; }
.v2 .pd-doprava-frame { display: block; width: 100%; height: 60vh; min-height: 240px; max-height: 80vh; border: 0; background: #fff; transition: height .2s; }

/* 8. HOME CREDIT – nákup na splátky v buyboxu (.buybox-hc; js/script/v2-splatky.js doplní nejnižší splátku [data-hc-from]
      a reprezentativní příklad [data-hc-example], tlačítko [data-hc-calc] otevře kalkulačku; třída is-standalone = jen odkaz) ---- */
.v2 .buybox-hc { border-top: 1px solid var(--c-border); padding: 12px 0 4px; font-size: 14px; }
.v2 .buybox-hc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2 .buybox-hc-logo { height: 26px; width: auto; flex: none; }
.v2 .buybox-hc-text { flex: 1; min-width: 130px; line-height: 1.3; }
.v2 .buybox-hc-text b { font-family: var(--font-head); white-space: nowrap; }
.v2 .buybox-hc .price-note { margin: 6px 0 0; }
.v2 .buybox-hc .hc-example { color: var(--c-muted); }
.v2 .buybox-hc .hc-legal a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.v2 .buybox-hc .hc-legal a:hover { color: var(--c-brand); }
.v2 .pd-sheet [data-hc-sheet] { display: block; color: var(--c-ok); font-weight: 600; }

/* 9. AKČNÍ CENA – „lepší cena“ bez dárku (ceník 2, element AkcePriceWithVat): blok #pd-akce v buyboxu pod cenou, u ceny odkaz „Můžete mít za“
      (#price-akce-hint) a po aktivaci škrtnutá běžná cena (.pd-akce-only); přepíná js/script/v2-detail.js kap. 6. Klidný vzhled bez blikání (plán 9.6) ---- */
.v2 .pd-akce { margin: 0 0 14px; padding: 12px; border: 1px solid #f5c2c4; border-radius: var(--radius-m); background: var(--c-brand-soft); transition: box-shadow .3s; }
.v2 .pd-akce.is-pulse { box-shadow: 0 0 0 4px rgba(215, 38, 45, .25); }
.v2 .pd-akce-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--c-brand-dark); }
.v2 .pd-akce-title .ico { flex: none; color: var(--c-brand); }
.v2 .pd-akce-opts { display: grid; gap: 8px; }
.v2 .pd-akce-opts--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 479.98px) { .v2 .pd-akce-opts--2 { grid-template-columns: 1fr; } }
.v2 .pd-akce-opt { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 0; padding: 10px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-s); background: #fff; color: var(--c-text); font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.v2 .pd-akce-opt:hover { border-color: var(--c-brand); }
.v2 .pd-akce-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.v2 .pd-akce-opt:has(input:focus-visible) { outline: 2px solid var(--c-info); outline-offset: 2px; }
.v2 .pd-akce-check { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--c-border-strong); border-radius: 50%; background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.v2 .pd-akce-opt--check .pd-akce-check { border-radius: 4px; }
.v2 .pd-akce-check .ico { width: 14px; height: 14px; opacity: 0; }
.v2 .pd-akce-opt.is-active { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }
.v2 .pd-akce-opt.is-active .pd-akce-check { border-color: var(--c-brand); background: var(--c-brand); }
.v2 .pd-akce-opt.is-active .pd-akce-check .ico { opacity: 1; }
.v2 .pd-akce-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2 .pd-akce-body b { font-family: var(--font-head); font-size: 17px; font-weight: 700; white-space: nowrap; }
.v2 .pd-akce.is-on .pd-akce-opt.is-active .pd-akce-body b { color: var(--c-brand); } /* červeně jen aktivovaná lepší cena, ne volba „s dárkem“ */
.v2 .pd-akce-body .small { font-size: 12px; color: var(--c-muted); font-weight: 400; }
.v2 .pd-akce-lbl-on, .v2 .pd-akce-opt.is-active .pd-akce-lbl-off { display: none; }
.v2 .pd-akce-opt.is-active .pd-akce-lbl-on { display: inline; }
.v2 .pd-akce-note { margin: 8px 0 0; font-size: 12px; color: var(--c-muted); }
.v2 .price--akce { color: var(--c-brand); }
.v2 .price-akce-hint { font-size: 13px; font-weight: 600; color: var(--c-brand); text-decoration: none; white-space: nowrap; }
.v2 .price-akce-hint b { font-family: var(--font-head); }
.v2 .price-akce-hint:hover { text-decoration: underline; }
.v2 .pd-gift.is-off { opacity: .45; }
.v2 .buybox-price [hidden], .v2 .pd-akce [hidden], .v2 .pd-akce[hidden] { display: none !important; }
