/* ============================================================
   TopEpoxy — šablony detailu produktu (v1, 3. 7. 2026)
   Nasazení: externí soubor (Shoptet → HTML kódy → hlavička:
   <link rel="stylesheet" href="/user/documents/produkt-detail.css">)
   Bloky: 1) restyle nativního propojení variant (Shoptet widget)
          2) .te-sizes  — velikosti balení s cenovým rozdílem (Alza vzor)
          3) .te-badges — klíčové vlastnosti (piktogramové odznaky)
          4) .te-compare — UNIVERZÁLNÍ srovnávací tabulka (Finish vzor)
   Prefix te- = vlastní třídy, generuje AI do popisu produktu.
   ============================================================ */
:root{
  --te-navy:#1F4E79; --te-navy-dark:#163A5B; --te-accent:#0B72B9;
  --te-ok:#2E7D32; --te-ok-bg:#E8F5E9; --te-no:#B0B7BF;
  --te-line:#E3E8EE; --te-bg-soft:#F4F7FA; --te-radius:12px;
  --te-shadow:0 2px 10px rgba(22,58,91,.08);
}

/* ── 1) NATIVNÍ PROPOJENÍ „Varianty“ (c-product-interconnection…) ── */
.c-product-interconnection-detail-params{
  border:1px solid var(--te-line); border-radius:var(--te-radius);
  padding:14px 16px; margin:14px 0 18px; background:#fff; box-shadow:var(--te-shadow);
}
.c-product-interconnection-detail-params__type{
  display:block; font-weight:700; font-size:15px; color:var(--te-navy); margin-bottom:10px;
}
.c-product-interconnection-detail-params__products.is-type--photos{
  display:flex; flex-wrap:wrap; gap:8px;
}
.c-product-interconnection-detail-params__products.is-type--photos a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:76px; padding:8px 4px 6px; text-decoration:none;
  border:1.5px solid var(--te-line); border-radius:10px; background:#fff;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.c-product-interconnection-detail-params__products.is-type--photos a:hover{
  border-color:var(--te-accent); box-shadow:var(--te-shadow); transform:translateY(-2px);
}
.c-product-interconnection-detail-params__products.is-type--photos a.is-current{
  border-color:var(--te-navy); background:var(--te-bg-soft); position:relative;
}
.c-product-interconnection-detail-params__products.is-type--photos a.is-current::after{
  content:"✓"; position:absolute; top:-7px; right:-7px; width:18px; height:18px;
  background:var(--te-navy); color:#fff; font-size:11px; line-height:18px;
  text-align:center; border-radius:50%;
}
.c-product-interconnection-detail-params .item-type-img{
  width:52px; height:52px; border-radius:8px; background-size:cover; background-position:center;
}
.c-product-interconnection-detail-params .item-label{
  font-size:10.5px; line-height:1.25; text-align:center; color:#3A4654;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:600px){
  .c-product-interconnection-detail-params__products.is-type--photos{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;
  }
}

/* ── 2) VELIKOSTI BALENÍ s cenovým rozdílem (.te-sizes) ── */
.te-sizes{margin:16px 0}
.te-sizes__title{font-weight:700; font-size:15px; color:var(--te-navy); margin:0 0 8px}
.te-sizes__grid{display:flex; flex-wrap:wrap; gap:8px}
.te-size{
  display:flex; flex-direction:column; gap:2px; min-width:108px;
  padding:10px 14px; border:1.5px solid var(--te-line); border-radius:10px;
  text-decoration:none; background:#fff; transition:border-color .15s, box-shadow .15s;
}
.te-size:hover{border-color:var(--te-accent); box-shadow:var(--te-shadow)}
.te-size.is-current{border-color:var(--te-navy); background:var(--te-bg-soft); pointer-events:none}
.te-size__kg{font-weight:700; font-size:14px; color:#1B2733}
.te-size__delta{font-size:12.5px; color:#5A6775}
.te-size.is-current .te-size__delta{color:var(--te-navy); font-weight:600}
.te-size__stock{font-size:11.5px; font-weight:600; color:var(--te-ok)}
.te-size__stock.is-out{color:#C00000}

/* ── 3) ODZNAKY vlastností (.te-badges) ── */
.te-badges{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.te-badge{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  background:var(--te-bg-soft); border:1px solid var(--te-line); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--te-navy);
}
.te-badge__ico{font-size:15px; line-height:1}

/* ── 4) UNIVERZÁLNÍ SROVNÁVACÍ TABULKA (.te-compare) ── */
.te-compare{margin:22px 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.te-compare table{
  border-collapse:separate; border-spacing:0; width:100%; min-width:640px;
  font-size:13.5px; background:#fff;
}
.te-compare th,.te-compare td{
  padding:10px 12px; border-bottom:1px solid var(--te-line); text-align:center; vertical-align:middle;
}
/* první sloupec = názvy vlastností, přilepený vlevo */
.te-compare th:first-child,.te-compare td:first-child{
  position:sticky; left:0; background:#fff; text-align:left; font-weight:600;
  color:#3A4654; min-width:170px; z-index:2;
  border-right:1px solid var(--te-line);
}
/* hlavička s produkty */
.te-compare thead th{border-bottom:2px solid var(--te-navy); background:#fff}
.te-compare .te-cmp-prod{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:120px}
.te-compare .te-cmp-prod img{width:64px; height:64px; object-fit:contain}
.te-compare .te-cmp-prod__name{font-size:12.5px; font-weight:700; color:#1B2733; line-height:1.25}
.te-compare .te-cmp-prod__btn{
  display:inline-block; padding:5px 14px; background:var(--te-navy); color:#fff;
  border-radius:999px; font-size:12px; font-weight:700; text-decoration:none;
}
.te-compare .te-cmp-prod__btn:hover{background:var(--te-navy-dark)}
/* zvýrazněný (aktuální/doporučený) sloupec */
.te-compare .is-hl{background:var(--te-bg-soft)}
.te-compare thead th.is-hl{box-shadow:inset 0 3px 0 var(--te-navy)}
/* zebra */
.te-compare tbody tr:nth-child(odd) td:not(.is-hl):not(:first-child){background:#FBFCFE}
/* ano/ne/hodnota */
.te-compare .yes::before{content:"✓"; display:inline-block; width:20px; height:20px;
  background:var(--te-ok-bg); color:var(--te-ok); border-radius:50%; line-height:20px; font-weight:700}
.te-compare .no::before{content:"✕"; display:inline-block; width:20px; height:20px;
  background:#F1F3F5; color:var(--te-no); border-radius:50%; line-height:20px; font-weight:700}
.te-compare .val{font-weight:600; color:#1B2733}
/* poznámka pod tabulkou */
.te-compare__note{font-size:12px; color:#5A6775; margin-top:8px}

/* ============================================================
   v2 (3. 7. 2026) — KOMPLETNÍ DETAIL: hero, karty vlastností,
   callouty, specifikace, návod, kalkulačky, bannery, split
   sekce, plná DIPON matice. Nahrazuje Pobo widgety 1:1.
   ============================================================ */

/* ── SEKČNÍ NADPIS s linkou ── */
.te-section{display:flex; align-items:center; gap:14px; margin:34px 0 18px}
.te-section::before,.te-section::after{content:""; flex:1; height:2px; background:var(--te-line)}
.te-section h2{margin:0; font-size:22px; color:var(--te-navy); text-align:center; line-height:1.3}

/* ── HERO úvod ── */
.te-hero{text-align:center; max-width:820px; margin:0 auto 10px}
.te-hero h2{font-size:26px; color:var(--te-navy); margin:0 0 10px}
.te-hero p{font-size:15px; line-height:1.65; color:#3A4654; margin:0 0 10px}
.te-hero .te-badges{justify-content:center}

/* ── KARTY VLASTNOSTÍ (nahrazuje rc-advantages-four) ── */
.te-features{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0}
.te-feature{
  background:#fff; border:1px solid var(--te-line); border-top:3px solid var(--te-accent); border-radius:var(--te-radius);
  padding:18px 14px; text-align:center; box-shadow:var(--te-shadow);
}
.te-feature img{width:56px; height:56px; object-fit:contain; margin-bottom:8px}
.te-feature h3{font-size:15px; color:var(--te-navy); margin:0 0 6px; line-height:1.3}
.te-feature p{font-size:12.5px; line-height:1.5; color:#5A6775; margin:0}
@media (max-width:820px){.te-features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.te-features{grid-template-columns:1fr}}

/* ── CALLOUTY (info / success / warn) ── */
.te-callout{
  display:flex; gap:14px; align-items:flex-start; border-radius:var(--te-radius);
  padding:16px 18px; margin:18px 0; border:1px solid;
}
.te-callout__ico{font-size:22px; line-height:1.2}
.te-callout h3{margin:0 0 6px; font-size:16px}
.te-callout p{margin:0; font-size:14px; line-height:1.6}
.te-callout--success{background:var(--te-ok-bg); border-color:#BFDFC2}
.te-callout--success h3{color:var(--te-ok)}
.te-callout--info{background:#EBF3FB; border-color:#C9DEF2}
.te-callout--info h3{color:var(--te-navy)}
.te-callout--warn{background:#FDECEC; border-color:#F3C5C5}
.te-callout--warn h3{color:#B8312F}
.te-callout--warn strong{color:#B8312F}

/* ── VELKÝ OBRÁZEK ── */
.te-img{margin:18px 0; text-align:center}
.te-img img{max-width:100%; border-radius:var(--te-radius); box-shadow:var(--te-shadow)}

/* ── SPECIFIKACE — dvousloupec label:hodnota (nahrazuje odrážky) ── */
.te-specs{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0}
@media (max-width:760px){.te-specs{grid-template-columns:1fr}}
.te-specs__col{background:#fff; border:1px solid var(--te-line); border-radius:var(--te-radius); padding:16px 18px; box-shadow:var(--te-shadow)}
.te-specs__col h3{margin:0 0 10px; font-size:16px; color:var(--te-navy); padding-bottom:8px; border-bottom:2px solid var(--te-navy)}
.te-spec{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--te-line); font-size:13.5px}
.te-spec:last-child{border-bottom:none}
.te-spec__k{color:#5A6775}
.te-spec__v{color:#1B2733; font-weight:600; text-align:right}
.te-specs__col ul{margin:8px 0 0; padding-left:18px; font-size:13px; line-height:1.6; color:#3A4654}
.te-specs__col ul li{margin-bottom:3px}

/* ── NÁVOD — číslované kroky ── */
.te-steps{counter-reset:step; margin:16px 0}
.te-step{
  position:relative; padding:12px 16px 12px 56px; margin-bottom:10px;
  background:#fff; border:1px solid var(--te-line); border-radius:var(--te-radius); box-shadow:var(--te-shadow);
  font-size:14px; line-height:1.6; color:#3A4654;
}
.te-step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:14px; top:12px; width:30px; height:30px;
  background:var(--te-navy); color:#fff; border-radius:50%;
  font-weight:700; font-size:15px; line-height:30px; text-align:center;
}
.te-step strong{color:var(--te-navy)}

/* ── KALKULAČKY ── */
.te-calc{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0}
@media (max-width:760px){.te-calc{grid-template-columns:1fr}}
.te-calc__col{background:var(--te-bg-soft); border:1px solid var(--te-line); border-radius:var(--te-radius); padding:16px 18px}
.te-calc__col h3{margin:0 0 8px; font-size:15.5px; color:var(--te-navy)}
.te-calc__col ol{margin:0 0 10px; padding-left:20px; font-size:13.5px; line-height:1.6}
.te-btn{
  display:inline-block; padding:11px 26px; background:var(--te-navy); color:#fff !important;
  border-radius:999px; font-size:14px; font-weight:700; text-decoration:none;
}
.te-btn:hover{background:var(--te-navy-dark)}
.te-center{text-align:center; margin:16px 0}

/* ── BANNER s obrázkem na pozadí (jumbotron) ── */
.te-banner{
  position:relative; border-radius:var(--te-radius); overflow:hidden; margin:22px 0;
  min-height:230px; display:flex; align-items:center;
}
.te-banner__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.te-banner__content{
  position:relative; margin:26px; max-width:560px; background:rgba(255,255,255,.93);
  border-radius:var(--te-radius); padding:20px 24px;
}
.te-banner__content h2{margin:0 0 8px; font-size:20px; color:var(--te-navy)}
.te-banner__content p{margin:0; font-size:14px; line-height:1.6; color:#3A4654}

/* ── SPLIT — obrázek + text vedle sebe ── */
.te-split{display:grid; grid-template-columns:5fr 7fr; gap:22px; align-items:center; margin:22px 0}
.te-split.is-reverse{grid-template-columns:7fr 5fr}
.te-split.is-reverse .te-split__media{order:2}
@media (max-width:760px){.te-split,.te-split.is-reverse{grid-template-columns:1fr}
  .te-split.is-reverse .te-split__media{order:0}}
.te-split__media img{width:100%; border-radius:var(--te-radius); box-shadow:var(--te-shadow)}
.te-split__body h2,.te-split__body h3{color:var(--te-navy); margin:0 0 10px; font-size:19px}
.te-split__body p,.te-split__body li{font-size:14px; line-height:1.65; color:#3A4654}
.te-split__body ul{padding-left:18px; margin:8px 0}
.te-split__body li{margin-bottom:6px}
.te-split__body li::marker{color:var(--te-accent)}

/* ── PLNÁ DIPON MATICE (10 tvrdidel) ── */
.te-matrix{margin:18px 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.te-matrix table{border-collapse:collapse; width:100%; min-width:680px; font-size:13px; background:#fff}
.te-matrix th{background:var(--te-navy); color:#fff; padding:10px 10px; font-size:12.5px; text-align:center}
.te-matrix td{padding:8px 10px; border-bottom:1px solid var(--te-line); text-align:center}
.te-matrix td:first-child{text-align:left; font-weight:600; white-space:nowrap}
.te-matrix td:first-child a{color:var(--te-navy); text-decoration:none; border-bottom:1px dotted var(--te-accent)}
.te-matrix tr:nth-child(even) td{background:#FBFCFE}
.te-matrix tr.is-hl td{background:var(--te-bg-soft); box-shadow:inset 3px 0 0 var(--te-navy)}
.te-matrix__note{font-size:12px; color:#5A6775; margin-top:8px; line-height:1.5}

/* ── SEZNAM TYPŮ (popisy tvrdidel pod maticí) ── */
.te-typelist{margin:14px 0; display:grid; grid-template-columns:1fr 1fr; gap:6px 22px}
@media (max-width:760px){.te-typelist{grid-template-columns:1fr}}
.te-typelist p{margin:0; padding:8px 10px; font-size:13px; line-height:1.5; color:#3A4654; background:#fff; border:1px solid var(--te-line); border-radius:8px}
.te-typelist p strong{color:var(--te-navy)}


/* ============================================================
   v3 (3. 7. 2026) — LAYOUT: parametry produktu POD popis
   (Shoptet .description-inner = 2 sloupce -> 1 sloupec)
   + oprava .te-spec na spany (editor stripuje dl/dt/dd)
   ============================================================ */
.description-inner{display:block !important}
.description-inner .basic-description,
.description-inner .extended-description{
  width:100% !important; max-width:none !important; float:none !important; padding:0 !important;
}
.description-inner .extended-description{
  margin-top:36px !important; background:var(--te-bg-soft);
  border-radius:var(--te-radius); padding:22px 26px !important;
}
.description-inner .extended-description h3{
  color:var(--te-navy); font-size:20px; border-bottom:2px solid var(--te-navy); padding-bottom:8px; margin-top:0;
}
.description-inner .extended-description table{width:100%}
.description-inner .extended-description tr{font-size:13.5px}
@media (min-width:768px){
  /* parametry ve dvou sloupcích, ať pás není zbytečně dlouhý */
  .description-inner .extended-description .detail-parameters,
  .description-inner .extended-description table tbody{
    display:block; column-count:2; column-gap:36px;
  }
  .description-inner .extended-description table tr{display:block; break-inside:avoid; width:100%}
}

/* ============================================================
   v4 (3. 7. 2026) — WOW SKIN pro popis produktu (prefix tw-)
   Port vzorové stránky VZOR_WOW_ocean-flow.html do Shoptetu.
   Vyžaduje v hlavičce navíc font:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
   ============================================================ */
.tw{--deep:#06263F;--ocean:#0E4D73;--cyan:#35C3E8;--cyansoft:#D9F2FB;--amber:#F5A623;--amberd:#DE8F0D;
 --ink:#122334;--mute:#5A6E80;--tline:#E2EAF1;--ok2:#1FA55C;--r2:16px;
 --sh:0 10px 40px rgba(6,38,63,.10);--shl:0 24px 70px rgba(6,38,63,.18);
 font-family:'Inter',system-ui,sans-serif;color:var(--ink);line-height:1.6}
.tw *{box-sizing:border-box}
.tw img{max-width:100%;display:block}
.tw a{text-decoration:none}
.tw h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.5px;color:var(--ink);margin:0}
.tw .kick{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.tw .sechead{text-align:center;max-width:640px;margin:46px auto 26px}
.tw .sechead p{color:var(--mute);margin:8px 0 0;font-size:14.5px}

/* mini-hero band */
.tw-hero{background:radial-gradient(900px 420px at 78% 0%,#14639A 0%,var(--ocean) 40%,var(--deep) 100%);
 border-radius:20px;color:#fff;padding:36px 34px;margin-bottom:20px;box-shadow:var(--shl)}
.tw-hero .kick{color:var(--cyan)}
.tw-hero h2{color:#fff;font-size:clamp(24px,3.2vw,38px);font-weight:900;letter-spacing:-1px;line-height:1.12;margin-bottom:12px}
.tw-hero h2 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#8FE3FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-hero p{color:#BFD9EC;font-size:15px;max-width:640px;margin:0 0 16px}
.tw-chips{display:flex;flex-wrap:wrap;gap:8px}
.tw-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;color:#fff}

/* stat strip */
.tw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 6px}
.tw-stat{background:#fff;border-radius:var(--r2);padding:18px 14px;text-align:center;box-shadow:var(--sh);border-top:4px solid var(--cyan)}
.tw-stat b{display:block;font-size:27px;font-weight:900;letter-spacing:-1px;color:var(--ocean)}
.tw-stat span{font-size:12px;font-weight:600;color:var(--mute)}

/* use cases */
.tw-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tw-use{position:relative;border-radius:var(--r2);overflow:hidden;aspect-ratio:4/4.4;box-shadow:var(--sh);background:linear-gradient(160deg,var(--ocean),var(--deep));display:block}
.tw-use img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tw-use:hover img{transform:scale(1.05)}
.tw-use .tag{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.92);padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;color:var(--ocean)}
.tw-use .body{position:absolute;inset:auto 0 0 0;z-index:2;padding:40px 16px 14px;background:linear-gradient(to top,rgba(6,38,63,.88),transparent);color:#fff}
.tw-use .body h3{font-size:17px;font-weight:800;margin:0}
.tw-use .body p{font-size:12px;color:#BFD9EC;margin:2px 0 0}
.tw-use.panel{display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:18px}
.tw-use.panel h3{font-size:18px;margin:0 0 6px}
.tw-use.panel p{font-size:12.5px;color:#BFD9EC;margin:0}

/* velikosti */
.tw-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;max-width:900px;margin:0 auto}
.tw-size{position:relative;background:#fff;border:2px solid var(--tline);border-radius:14px;padding:15px 8px;text-align:center;transition:.15s;display:block;color:var(--ink)}
.tw-size:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--sh)}
.tw-size b{display:block;font-size:17px;font-weight:900}
.tw-size .pr{font-size:12.5px;color:var(--mute);font-weight:600}
.tw-size .st{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:800;color:var(--ok2)}
.tw-size .st.out{color:#C43A3A}
.tw-size.cur{border-color:var(--ocean);background:linear-gradient(180deg,#F2F9FE,#fff)}
.tw-size .pop{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--amber);color:#2B1A00;font-size:10px;font-weight:900;padding:2px 9px;border-radius:999px;white-space:nowrap}

/* feature split */
.tw-feat{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:34px 0}
.tw-feat.rev .media{order:2}
.tw-feat .media{position:relative}
.tw-feat .media img{border-radius:var(--r2);box-shadow:var(--shl)}
.tw-feat .fbadge{position:absolute;bottom:-13px;right:16px;background:var(--ocean);color:#fff;padding:10px 16px;border-radius:13px;font-weight:800;font-size:13px;box-shadow:var(--shl)}
.tw-feat p{color:var(--mute);font-size:14.5px;margin:10px 0}
.tw-ticks{list-style:none;padding:0;margin:0}
.tw-ticks li{position:relative;padding:6px 0 6px 32px;font-size:14px;font-weight:600}
.tw-ticks li::before{content:"✓";position:absolute;left:0;top:6px;width:21px;height:21px;border-radius:50%;background:var(--cyansoft);color:var(--ocean);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center}

/* tmavý panel parametrů */
.tw-params{background:linear-gradient(140deg,var(--deep),var(--ocean));border-radius:20px;color:#fff;padding:32px;box-shadow:var(--shl);margin:26px 0}
.tw-params h2{color:#fff;margin-bottom:2px}
.tw-params .sub{color:#9DC1DB;font-size:13.5px;margin:0 0 20px}
.tw-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.tw-prow{display:flex;justify-content:space-between;gap:14px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.13);font-size:13.5px}
.tw-prow span{color:#9DC1DB}
.tw-prow b{text-align:right;font-weight:700;color:#fff}
.tw-params .note{margin:16px 0 0;font-size:12px;color:#9DC1DB}

/* kroky timeline */
.tw-steps{position:relative;max-width:820px;margin:0 auto}
.tw-steps::before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:3px;background:linear-gradient(var(--cyan),var(--ocean));border-radius:3px}
.tw-stp{position:relative;padding:0 0 22px 68px}
.tw-stp .n{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--cyan);color:var(--ocean);font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.tw-stp h3{font-size:15.5px;font-weight:800;margin:0 0 3px}
.tw-stp p{font-size:13.5px;color:var(--mute);margin:0}
.tw-warn{max-width:820px;margin:22px auto;background:#FFF3F2;border:1px solid #F3C9C5;border-left:6px solid #C43A3A;border-radius:13px;padding:16px 20px}
.tw-warn h3{color:#B8312F;font-size:15px;margin:0 0 5px}
.tw-warn p{font-size:13.5px;margin:0}

/* srovnání */
.tw-cmp{overflow-x:auto;border-radius:var(--r2);box-shadow:var(--sh)}
.tw-cmp table{border-collapse:collapse;width:100%;min-width:720px;background:#fff;font-size:13.5px}
.tw-cmp th,.tw-cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--tline)}
.tw-cmp td:first-child,.tw-cmp th:first-child{text-align:left;font-weight:700;position:sticky;left:0;background:#fff;z-index:1}
.tw-cmp thead th{background:var(--deep);color:#fff;font-size:12.5px}
.tw-cmp thead th:first-child{background:var(--deep)}
.tw-cmp .hl{background:var(--cyansoft)}
.tw-cmp thead th.hl{background:var(--ocean);box-shadow:inset 0 -4px 0 var(--amber)}
.tw-cmp .y{color:var(--ok2);font-weight:900}
.tw-cmp .n{color:#C6CFD8;font-weight:900}
.tw-cmp .prodh img{width:50px;height:50px;object-fit:contain;margin:0 auto 4px}
.tw-cmpbtn{display:inline-block;margin-top:5px;padding:5px 12px;border-radius:999px;background:var(--amber);color:#2B1A00!important;font-size:11.5px;font-weight:800}

/* recenze */
.tw-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tw-rev{background:#fff;border-radius:var(--r2);padding:20px;box-shadow:var(--sh)}
.tw-rev .strs{color:var(--amber);letter-spacing:2px;font-size:14px;margin-bottom:6px}
.tw-rev p{font-size:13.5px;margin:0 0 10px}
.tw-rev b{font-size:12.5px;color:var(--mute)}

/* faq */
.tw-faq{max-width:820px;margin:0 auto}
.tw-faq details{background:#fff;border:1px solid var(--tline);border-radius:13px;margin-bottom:9px;box-shadow:var(--sh)}
.tw-faq summary{cursor:pointer;padding:14px 18px;font-weight:800;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.tw-faq summary::after{content:"+";font-size:20px;color:var(--cyan);font-weight:900}
.tw-faq details[open] summary::after{content:"–"}
.tw-faq details p{padding:0 18px 14px;font-size:13.5px;color:var(--mute);margin:0}

/* CTA band */
.tw-cta{background:linear-gradient(120deg,var(--ocean),var(--deep));border-radius:20px;color:#fff;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;box-shadow:var(--shl);margin:40px 0 10px}
.tw-cta h2{color:#fff;max-width:520px}
.tw-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;background:linear-gradient(180deg,var(--amber),var(--amberd));color:#2B1A00!important;font-weight:800;font-size:15px;box-shadow:0 12px 30px rgba(245,166,35,.35);transition:.15s}
.tw-btn:hover{transform:translateY(-2px)}

@media (max-width:860px){
 .tw-stats{grid-template-columns:repeat(2,1fr)}
 .tw-uses{grid-template-columns:1fr 1fr}
 .tw-sizes{grid-template-columns:repeat(3,1fr)}
 .tw-feat,.tw-feat.rev{grid-template-columns:1fr}
 .tw-feat.rev .media{order:0}
 .tw-pgrid{grid-template-columns:1fr}
 .tw-revs{grid-template-columns:1fr}
}
@media (max-width:520px){.tw-uses{grid-template-columns:1fr}.tw-sizes{grid-template-columns:repeat(2,1fr)}}

/* ── v4.1 (3. 7. večer) — feedback: odsazení od krajů, sizes bez cen, kalkulačka ── */
.tw{padding:0 clamp(12px,3vw,36px)}
.tw-use{cursor:default}
.tw-size .hint{display:block;font-size:11px;color:var(--mute);line-height:1.35;margin-top:3px;font-weight:600}
.tw-size b{font-size:18px}
/* interaktivní kalkulačka */
.tw-calc2{max-width:860px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shl);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.tw-calc2 .in{padding:26px 28px}
.tw-calc2 label{display:block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mute);margin:12px 0 5px}
.tw-calc2 input{width:100%;padding:12px 14px;border:2px solid var(--tline);border-radius:11px;font-size:16px;font-weight:700;font-family:inherit;color:var(--ink);background:#FAFCFE;outline:none;transition:border-color .15s}
.tw-calc2 input:focus{border-color:var(--cyan)}
.tw-calc2 .dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.tw-calc2 .out{background:linear-gradient(150deg,var(--deep),var(--ocean));color:#fff;padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.tw-calc2 .out .kick{color:var(--cyan)}
.tw-calc2 .big{font-size:46px;font-weight:900;letter-spacing:-2px;line-height:1}
.tw-calc2 .big small{font-size:18px;font-weight:700;letter-spacing:0}
.tw-calc2 .ab{display:flex;gap:26px;margin:14px 0 16px}
.tw-calc2 .ab div{font-size:13px;color:#9DC1DB}
.tw-calc2 .ab b{display:block;font-size:19px;color:#fff}
.tw-reco{background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.45);border-radius:12px;padding:12px 15px;font-size:13.5px}
.tw-reco b{color:var(--amber)}
@media (max-width:760px){.tw-calc2{grid-template-columns:1fr}}

/* ── v4.2 — sizes plná šířka + zvýraznění 3/30 kg, čitelnost textu na dlaždicích ── */
.tw-sizes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:none;gap:14px}
.tw-size{padding:22px 12px 18px}
.tw-size b{font-size:22px}
.tw-size .hint{font-size:12px;margin-top:5px}
.tw-size.hot{border-color:var(--amber);background:linear-gradient(180deg,#FFF9EF,#fff);box-shadow:0 8px 26px rgba(245,166,35,.22)}
.tw-size.hot:hover{border-color:var(--amberd)}
.tw-size.cur{border-color:var(--ocean);background:linear-gradient(150deg,var(--deep),var(--ocean));box-shadow:var(--shl)}
.tw-size.cur b{color:#fff}
.tw-size.cur .hint{color:#9DC1DB}
/* bílý text na fotodlaždicích (téma webu přebíjelo dědění) */
.tw-use .body h3{color:#fff}
.tw-use .body{padding-top:56px;background:linear-gradient(to top,rgba(6,38,63,.94) 30%,rgba(6,38,63,.55) 65%,transparent)}
.tw-use.panel h3{color:#fff}

/* ── v4.3 — rozklikávací kompletní matice (WOW styl, žádný návrat k podkladům) ── */
.tw-more{margin:14px 0 6px;background:#fff;border:1px solid var(--tline);border-radius:var(--r2);box-shadow:var(--sh);overflow:hidden}
.tw-more summary{cursor:pointer;padding:16px 20px;font-weight:800;font-size:14.5px;color:var(--ocean);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tw-more summary::after{content:"+";font-size:22px;color:var(--cyan);font-weight:900;flex:none}
.tw-more[open] summary::after{content:"–"}
.tw-more .tw-cmp{box-shadow:none;border-radius:0;border-top:1px solid var(--tline)}
.tw-more .tw-cmp td{font-size:13px;padding:10px 14px}
.tw-more .tw-cmp td:last-child{text-align:left;color:var(--mute)}
.tw-more .tw-cmp td:first-child a{color:var(--ocean);font-weight:700}
.tw-morenote{padding:12px 20px 16px;font-size:12px;color:var(--mute);margin:0}

/* ── v4.4 — srovnávačka bez obrázků (číselné odznaky), viditelná rozklikávací matice ── */
.tw-cmp .prodh .lcn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 7px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid var(--cyan);color:#fff;font-size:19px;font-weight:900}
.tw-cmp thead th.hl .lcn{background:var(--amber);border-color:var(--amber);color:#2B1A00}
.tw-cmp .prodh .pnm{display:block;font-size:13px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:7px}
/* matice jako výrazné rozklikávací CTA */
.tw-more{margin:16px 0 6px;background:linear-gradient(120deg,#EBF5FC,#F6FAFD);border:2px solid var(--cyan);border-radius:var(--r2);box-shadow:var(--sh)}
.tw-more summary{padding:18px 22px;display:flex;align-items:center;gap:14px;justify-content:flex-start}
.tw-more summary .ico{flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(150deg,var(--deep),var(--ocean));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.tw-more summary .tt{flex:1}
.tw-more summary .tt b{display:block;font-size:15.5px;color:var(--ink)}
.tw-more summary .tt small{display:block;font-size:12.5px;color:var(--mute);font-weight:600;margin-top:2px}
.tw-more summary .arr{flex:none;width:34px;height:34px;border-radius:50%;background:var(--amber);color:#2B1A00;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;transition:transform .25s;box-shadow:0 6px 16px rgba(245,166,35,.35)}
.tw-more summary::after{content:none}
.tw-more[open] summary .arr{transform:rotate(45deg)}
.tw-more summary:hover .arr{transform:scale(1.12)}
.tw-more[open] summary:hover .arr{transform:rotate(45deg) scale(1.12)}
.tw-more .tw-cmp{border-top:2px solid var(--cyan)}