@import url('../tokens.css');

/* ============================================================
   PDP DESKTOP — NaMaximum / Greenmedical
   Mirrors mobile design tokens; desktop-only layout (≥1024px).
   All classes are scoped under .pdp-d to avoid mobile collisions.
   ============================================================ */

/* CTA accent (orange) — same override as mobile */
:root {
  --cta:         #F96628;
  --cta-hover:   #FF8A4D;
  --cta-press:   #C44A15;

  --pdp-d-container: 1200px;
  --pdp-d-gutter: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Stage ===== */
.pdp-d-stage {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 0% 0%, #f4f9fd 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #fbf3ee 0%, transparent 55%),
    #fff;
}

/* ===== Container ===== */
.pdp-d-container {
  max-width: var(--pdp-d-container);
  margin: 0 auto;
  padding: 0 var(--pdp-d-gutter);
}

/* ============================================================
   TOP ANNOUNCEMENT BAR (optional, tweak: promo_bar)
   ============================================================ */
.pdp-d-top {
  background: #050505;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pdp-d-top-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px;
  gap: 24px;
}
.pdp-d-top-msg {
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,.82);
}
.pdp-d-top-msg .ic { color: var(--color-1-light); display: inline-flex; }
.pdp-d-top-msg strong { font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.pdp-d-top-links {
  display: inline-flex; align-items: center; gap: 0;
  font-size: 11.5px;
  letter-spacing: 0.015em;
}
.pdp-d-top-links a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: 0 14px;
  transition: color 160ms var(--ease-out);
  position: relative;
}
.pdp-d-top-links a:hover { color: #fff; text-decoration: none; }
.pdp-d-top-links a + a::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 12px;
  background: rgba(255,255,255,.12);
  transform: translateY(-50%);
}
.pdp-d-top-links a:last-child { padding-right: 0; }
.pdp-d-top-links .sep { display: none; }

/* ============================================================
   HEADER (static on desktop - mobile mirror keeps sticky)
   v0.7.9 #5: User feedback 'nechcem stickyhlavicku na desktope'.
   Real namaximum.sk desktop also scrolls the header out (not
   pinned), so the prototype now matches. Mobile prototype keeps
   its sticky header because that IS what the live mobile site
   does. The sticky tab nav (.pdp-d-tabnav.is-stuck) and sticky
   buy panel (.pdp-d-buy) are unchanged - those are PDP-section
   sticky behaviours, not page-chrome.
   ============================================================ */
.pdp-d-hd {
  position: static; z-index: 60;
  background: #0A0A0A;
  border-bottom: 1px solid #000;
  color: #fff;
}
.pdp-d-hd-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 32px;
  height: 80px;
}
.pdp-d-hd-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; color: #fff;
}
.pdp-d-hd-logo img {
  display: block; height: 22px; width: auto;
}

/* Search bar — center, wide */
.pdp-d-search {
  position: relative;
  height: 44px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  display: flex; align-items: center;
  padding: 0 14px;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.pdp-d-search:focus-within {
  background: #fff;
  border-color: var(--color-1);
}
.pdp-d-search:focus-within input {
  color: var(--ink-2);
}
.pdp-d-search:focus-within .pdp-d-search-ic {
  color: var(--color-1);
}
.pdp-d-search-ic {
  color: rgba(255,255,255,.6);
  margin-right: 10px;
  flex-shrink: 0;
}
.pdp-d-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: rgba(255,255,255,.92);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.pdp-d-search input::placeholder { color: rgba(255,255,255,.5); }
.pdp-d-search-kbd {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.pdp-d-search:focus-within .pdp-d-search-kbd {
  color: var(--muted);
  border-color: var(--line);
}

/* Heureka trust badge (between search and tools) */
.pdp-d-heureka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-heureka img {
  width: 100%; height: 100%; object-fit: contain;
}
.pdp-d-heureka:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Tools cluster (right) */
.pdp-d-hd-tools {
  display: inline-flex; align-items: center; gap: 4px;
}
.pdp-d-hd-tool {
  position: relative;
  height: 44px; padding: 0 12px;
  border: 0; background: transparent;
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  border-radius: 8px;
  transition: background 160ms var(--ease-out);
}
.pdp-d-hd-tool:hover { background: rgba(255,255,255,.06); }
.pdp-d-hd-tool .lbl {
  white-space: nowrap;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.92);
}
.pdp-d-hd-tool .ic-wrap {
  position: relative;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-d-hd-badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--color-1);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #0A0A0A;
  line-height: 1;
}

/* Category nav row 2 */
.pdp-d-hd-nav {
  border-top: 1px solid rgba(255,255,255,.06);
  background: #0A0A0A;
}
.pdp-d-hd-nav-row {
  display: flex; align-items: stretch; gap: 0;
  height: 44px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-d-hd-nav-row::-webkit-scrollbar { display: none; }
.pdp-d-nav-item {
  position: relative;
  height: 100%;
  padding: 0 14px;
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.85);
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.pdp-d-nav-item.is-accent .chev { display: none; }
.pdp-d-nav-item.is-accent {
  background: var(--color-1);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pdp-d-nav-item.is-accent:hover { background: var(--color-1-darker); }
.pdp-d-nav-item.is-accent .chev { opacity: .85; }

.pdp-d-nav-item:not(.is-accent):hover { color: #fff; }
.pdp-d-nav-item:not(.is-accent)::after {
  content: '';
  position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2px; background: var(--color-1);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.pdp-d-nav-item:not(.is-accent):hover::after { transform: scaleX(1); }
.pdp-d-nav-item .chev {
  opacity: .5;
  transition: transform 160ms var(--ease-out);
}
.pdp-d-nav-item:hover .chev { opacity: .9; transform: rotate(90deg); }
@keyframes pdp-d-pulse {
  0% { box-shadow: 0 0 0 0 rgba(38,187,89,.4); }
  70% { box-shadow: 0 0 0 8px rgba(38,187,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(38,187,89,0); }
}

/* ============================================================
   STICKY MINI BAR (top, on scroll past hero)
   ============================================================ */
.pdp-d-mini {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transform: translateY(-100%);
  transition: transform 280ms var(--ease-out);
}
.pdp-d-mini.on { transform: translateY(0); }
.pdp-d-mini-inner {
  max-width: var(--pdp-d-container);
  margin: 0 auto;
  padding: 10px var(--pdp-d-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  height: 64px;
}
.pdp-d-mini-thumb {
  width: 44px; height: 44px;
  background: #F7F8FA; border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
}
.pdp-d-mini-name {
  min-width: 0;
}
.pdp-d-mini-name .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp-d-mini-name .meta {
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
}
.pdp-d-mini-name .meta .stars {
  color: #F9C80E; margin-right: 4px;
}
.pdp-d-mini-price {
  font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pdp-d-mini-cta {
  height: 44px; padding: 0 22px;
  background: var(--cta); color: #fff;
  border: 0; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-mini-cta:hover { background: var(--cta-press); transform: translateY(-1px); }
.pdp-d-mini-cta.out { background: var(--muted-2); cursor: not-allowed; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.pdp-d-bc {
  display: flex; align-items: center; gap: 6px;
  padding: 24px 0 16px;
  font-size: 12px;
  color: var(--muted);
}
.pdp-d-bc a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.pdp-d-bc a:hover { color: var(--color-1); text-decoration: none; }
.pdp-d-bc .sep { color: var(--muted-2); opacity: .6; }
.pdp-d-bc .cur { color: var(--ink-2); font-weight: 600; }

/* ============================================================
   HERO — 2-COL (gallery + sticky buy)
   ============================================================ */
.pdp-d-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 56px;
  padding-bottom: 80px;
  align-items: start;
}

/* ============================================================
   GALLERY (left)
   ============================================================ */
.pdp-d-gal {
  position: relative;
}
.pdp-d-gal-main {
  position: relative;
  aspect-ratio: 1 / 1;
  /* v0.7.3: white background + zero padding so the on-white product
     photo fills the framed canvas without a visible grey gutter.
     Source images carry their own internal whitespace; the 14px
     border-radius now clips directly to the photo edge. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: zoom-in;
}
.pdp-d-gal-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 360ms var(--ease-out), opacity 240ms var(--ease-out);
}
.pdp-d-gal-main:hover .pdp-d-gal-stage { transform: scale(1.02); }
/* Flag overlays */
.pdp-d-gal-flags {
  position: absolute; top: 60px; left: 16px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
}
.pdp-d-gal-flags img {
  width: 48px; height: 48px; display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.06));
}
.pdp-d-gal-discount {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(221,48,48,.25);
}
/* Bottom-right zoom chip */
.pdp-d-gal-zoom {
  position: absolute; bottom: 16px; right: 16px; z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%; background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 160ms var(--ease-out);
}
.pdp-d-gal-zoom:hover { color: var(--color-1); border-color: var(--color-1); }
/* Bottom-left video badge */
.pdp-d-gal-video {
  position: absolute; bottom: 16px; left: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms var(--ease-out);
}
.pdp-d-gal-video:hover { background: rgba(0,0,0,.9); }
.pdp-d-gal-video .play {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pdp-d-gal-video .play::after {
  content: ''; width: 0; height: 0;
  border-left: 6px solid #fff;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  margin-left: 2px;
}

/* Thumbs grid (5 cols below main) */
.pdp-d-gal-thumbs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.pdp-d-gal-thumb {
  position: relative;
  aspect-ratio: 1;
  /* v0.7.3: white background to match white photos. Padding kept
     (14px) so each thumb keeps a small inner gutter; the selected
     (.on) state still flips to --color-1-tint accent. */
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.pdp-d-gal-thumb:hover { border-color: var(--color-1-lighter); transform: translateY(-1px); }
.pdp-d-gal-thumb.on {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  box-shadow: 0 0 0 3px rgba(0,119,188,.12);
}
.pdp-d-gal-thumb.video::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  border-radius: 8px;
}
.pdp-d-gal-thumb.video::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 2;
  width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 2px;
}

.pdp-d-gal-loop {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.pdp-d-gal-loop video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Trust strip below gallery */
.pdp-d-trust {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  padding: 18px 18px;
  background: var(--bg-soft);
  border-radius: 14px;
  border: 1px solid var(--line-soft);
}
.pdp-d-trust-item {
  display: flex; align-items: flex-start; gap: 9px;
}
.pdp-d-trust-item .ic {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  margin-top: 1px;
}
.pdp-d-trust-item .body {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.pdp-d-trust-item .t {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.pdp-d-trust-item .d {
  font-size: 11px; color: var(--muted);
  line-height: 1.35;
  text-wrap: balance;
}

/* ============================================================
   BUY PANEL (right, sticky)
   ============================================================ */
.pdp-d-buy {
  position: sticky;
  /* v0.7.9 #5: header is no longer sticky on desktop, so the buy
     panel only needs to clear the sticky tab-nav (44px) plus a
     small gap. Was: 144px (had to clear sticky header + nav). */
  top: 60px;
  align-self: start;
  display: flex; flex-direction: column;
  gap: 18px;
}

/* Brand strip */
.pdp-d-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pdp-d-brand .mark {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--color-1);
  color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-d-brand .all {
  margin-left: auto;
  color: var(--color-1);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
}
.pdp-d-brand .all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Title */
.pdp-d-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* Meta row (rating + sku) */
.pdp-d-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pdp-d-rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3);
}
.pdp-d-rating .stars { color: #F9C80E; font-size: 14px; letter-spacing: 1px; }
.pdp-d-rating .num {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.pdp-d-rating a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-d-rating a:hover { color: var(--color-1); }
.pdp-d-rating .sep {
  color: var(--muted-2);
  margin: 0 -2px;
  user-select: none;
}
.pdp-d-sku {
  font-size: 12px; color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

/* Stock pill */
.pdp-d-stock {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(38,187,89,.08);
  color: var(--color-ok);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.01em;
  align-self: flex-start;
}
.pdp-d-stock .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success);
}
.pdp-d-stock.low { background: #FFF7E6; color: var(--color-warn-ink); }
.pdp-d-stock.low .dot { background: #F5A623; }
.pdp-d-stock.out { background: #FBEAEA; color: var(--color-sale); }
.pdp-d-stock.out .dot { background: var(--color-sale); }
.pdp-d-stock .extra {
  font-weight: 500; opacity: .75;
}

/* Price block */
.pdp-d-price {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.pdp-d-price .now {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 42px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pdp-d-price .orig {
  font-family: var(--font-heading); font-weight: 500; font-size: 17px;
  color: var(--muted); text-decoration: line-through;
  font-variant-numeric: tabular-nums; padding-bottom: 4px;
}
.pdp-d-price .flag {
  height: 26px; padding: 0 9px;
  background: var(--color-sale); color: #fff;
  border-radius: 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.pdp-d-price-sub {
  font-size: 12px;
  color: var(--muted);
}
.pdp-d-price-sub .num {
  color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pdp-d-price-sub .saved {
  color: var(--color-sale); font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

/* Bullets in buy panel (compact) */
.pdp-d-bullets {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pdp-d-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.45;
  color: var(--ink-3);
}
.pdp-d-bullets li .ic {
  width: 18px; height: 18px;
  color: var(--color-ok);
  flex-shrink: 0; margin-top: 1px;
}
.pdp-d-bullets li strong {
  color: var(--ink-2);
  font-family: var(--font-heading); font-weight: 700;
}

/* Evidence card */
.pdp-d-evidence {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--color-1-tint);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-1-darker);
  line-height: 1.45;
  display: flex; align-items: flex-start; gap: 10px;
}
.pdp-d-evidence .ic {
  color: var(--color-1); flex-shrink: 0; margin-top: 1px;
}
.pdp-d-evidence a {
  color: var(--color-1); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Variant label */
.pdp-d-vlabel {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 6px 0 10px;
}
.pdp-d-vlabel .lbl {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pdp-d-vlabel .lbl .count {
  color: var(--muted); font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0; text-transform: none;
}
.pdp-d-vlabel .chosen {
  font-size: 13px; color: var(--ink-3); font-weight: 500;
}

/* Size grid */
.pdp-d-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pdp-d-size {
  position: relative;
  padding: 10px 10px 9px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-size:hover { border-color: var(--color-1-lighter); }
.pdp-d-size .sz {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); letter-spacing: -0.01em;
  line-height: 1.2;
}
.pdp-d-size .pr {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  margin-top: 4px;
  line-height: 1.15;
}
.pdp-d-size .pr.unavail {
  font-weight: 500; font-size: 11px; color: var(--muted);
  font-style: italic;
}
.pdp-d-size .orig {
  display: inline-block;
  font-size: 10px; color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.pdp-d-size .per {
  font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.pdp-d-size .meta {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
.pdp-d-size .giftbadge {
  position: absolute; top: -7px; left: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB347, #F96628);
  color: #fff;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(249,102,40,.3);
  z-index: 2;
}
.pdp-d-size .badge {
  position: absolute; top: -7px; right: 8px;
  height: 16px; padding: 0 5px; border-radius: 4px;
  background: var(--color-1); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center;
}
.pdp-d-size .badge.save { background: var(--color-sale); }
.pdp-d-size.on {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  box-shadow: 0 0 0 2px rgba(0,119,188,.10);
}
.pdp-d-size.out {
  opacity: .55;
  cursor: pointer;
  background: var(--bg-alt);
}
.pdp-d-size.out .pr { color: var(--color-sale); }
.pdp-d-size.restock {
  background: #FFF8EC;
  border-color: #F2C744;
}
.pdp-d-size.is-unavailable {
  opacity: .35;
  cursor: not-allowed;
  background:
    linear-gradient(135deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%);
  background-size: 8px 8px;
  background-color: var(--bg-alt);
}
.pdp-d-size.is-unavailable .meta::before {
  content: '× ';
  color: var(--color-sale); font-weight: 700;
}

/* Flavor pills */
.pdp-d-flavors {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pdp-d-flavor {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 8px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-flavor:hover { border-color: var(--color-1-lighter); }
.pdp-d-flavor .swatch {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.pdp-d-flavor .swatch .pdp-d-stkchip {
  position: absolute; bottom: -2px; right: -2px;
  width: 9px; height: 9px;
}
.pdp-d-flavor .name { white-space: nowrap; }
.pdp-d-flavor .discpill {
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 2px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pdp-d-flavor .giftpill {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB347, #F96628);
  color: #fff;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(249,102,40,.35);
  margin-left: 2px;
}
.pdp-d-flavor.on {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  color: var(--color-1-darker);
  box-shadow: 0 0 0 3px rgba(0,119,188,.10);
}
.pdp-d-flavor.low { border-color: #F2C744; }
.pdp-d-flavor.restock { background: #FFF8EC; border-color: #F2C744; }
.pdp-d-flavor.out {
  opacity: .55; cursor: pointer;
}
.pdp-d-flavor.out .name { text-decoration: line-through; }
.pdp-d-flavor.is-unavailable {
  opacity: .35; cursor: not-allowed;
  background:
    repeating-linear-gradient(135deg, var(--bg-alt) 0 6px, transparent 6px 12px);
}
.pdp-d-flavor.is-unavailable .name { text-decoration: line-through; }

/* Per-variant stock chip (small dot indicator on pills) */
.pdp-d-stkchip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.pdp-d-stkchip.is-in     { background: #26BB59; }
.pdp-d-stkchip.is-low    { background: #F2C744; }
.pdp-d-stkchip.is-restk  { background: #F96628; }
.pdp-d-stkchip.is-out    { background: #999; }

/* ===== DISCOUNT COUNTDOWN ===== */
.pdp-d-countdown {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(249,102,40,.08), rgba(249,102,40,.02));
  border-left: 3px solid var(--color-sale, #DD3030);
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-2);
}
.pdp-d-countdown .ic { color: var(--color-sale, #DD3030); display: inline-flex; }
.pdp-d-countdown .lbl { color: var(--muted); }
.pdp-d-countdown .time {
  margin-left: auto;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  color: var(--color-sale, #DD3030);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pdp-d-countdown .time b { font-weight: 800; }
.pdp-d-countdown.is-soft .time { font-size: 12px; }

/* ===== PRODUCT EXPIRATION WARNING ===== */
.pdp-d-expiration {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(221,48,48,.06);
  color: var(--color-sale, #DD3030);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  border: 1px solid rgba(221,48,48,.2);
}
.pdp-d-expiration .ic { display: inline-flex; }

/* ===== GIFT BONUS BLOCK ===== */
.pdp-d-giftblock {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF7E8 0%, #FFEAC4 100%);
  border: 1px solid #FFD27A;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pdp-d-giftblock .gh {
  display: flex; align-items: center; gap: 10px;
}
.pdp-d-giftblock .giftic {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB347, #F96628);
  color: #fff; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(249,102,40,.35);
  flex-shrink: 0;
}
.pdp-d-giftblock strong {
  display: block;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  color: var(--ink-2);
}
.pdp-d-giftblock span {
  display: block;
  font-size: 12px; color: var(--ink-3);
}
.pdp-d-giftblock .gp-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #F96628;
  border-radius: 8px;
  color: #F96628;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  text-decoration: none;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pdp-d-giftblock .gp-btn:hover { background: #F96628; color: #fff; }

/* ===== QUANTITY DISCOUNT TIERS ===== */
.pdp-d-qtytiers {
  margin-top: 12px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  background: var(--bg-alt, #F4F6F8);
  border: 1px solid var(--line);
}
.pdp-d-qtytiers-h {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.pdp-d-qtytiers-h .ic { color: var(--color-1); display: inline-flex; }
.pdp-d-qtytiers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pdp-d-qtytiers li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid transparent;
  font-size: 12px; color: var(--ink-3);
  transition: all 160ms var(--ease-out);
}
.pdp-d-qtytiers li.is-active {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  color: var(--color-1-darker);
  box-shadow: 0 0 0 3px rgba(0,119,188,.08);
}
.pdp-d-qtytiers .qt-range { font-weight: 600; }
.pdp-d-qtytiers .qt-prc {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.pdp-d-qtytiers .qt-prc strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  color: var(--ink-2);
}
.pdp-d-qtytiers li.is-active .qt-prc strong { color: var(--color-1-darker); }
.pdp-d-qtytiers .qt-prc em {
  font-style: normal; font-size: 11px; color: var(--muted);
}
.pdp-d-qtytiers .qt-save {
  background: var(--color-sale, #DD3030);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ===== RESTOCK NOTIFICATION MODAL ===== */
.pdp-d-restock-overlay {
  position: fixed; inset: 0;
  background: rgba(10,37,64,.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: pdp-d-fadein 200ms var(--ease-out);
}
.pdp-d-restock-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 24px;
  max-width: 440px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  animation: pdp-d-pop 240ms var(--ease-out);
}
.pdp-d-restock-modal .close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: 50%; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.pdp-d-restock-modal .close:hover { background: var(--bg-alt); }
.pdp-d-restock-modal .hd {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.pdp-d-restock-modal .hd .ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-1-tint); color: var(--color-1-darker);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pdp-d-restock-modal .hd strong {
  display: block;
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.pdp-d-restock-modal .hd span {
  display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
}
.pdp-d-restock-modal .copy {
  font-size: 13px; color: var(--ink-3);
  margin: 0 0 16px; line-height: 1.45;
}
.pdp-d-restock-modal .row {
  display: flex; gap: 8px;
}
.pdp-d-restock-modal input {
  flex: 1;
  height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-2);
  outline: none;
  transition: border-color 160ms var(--ease-out);
}
.pdp-d-restock-modal input:focus { border-color: var(--color-1); }
.pdp-d-restock-modal .submit {
  height: 44px; padding: 0 18px;
  background: var(--color-1); color: #fff; border: 0;
  border-radius: 10px;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.pdp-d-restock-modal .submit:hover { background: var(--color-1-darker); }
@keyframes pdp-d-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdp-d-pop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ATC row */
.pdp-d-atc-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.pdp-d-qty {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  height: 56px;
}
.pdp-d-qty button {
  width: 40px; border: 0; background: #fff;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.pdp-d-qty button:hover { color: var(--color-1); background: var(--color-1-tint); }
.pdp-d-qty button:disabled { color: var(--muted-2); cursor: not-allowed; }
.pdp-d-qty .val {
  width: 32px; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-d-atc-btn {
  flex: 1; min-width: 0;
  height: 56px; padding: 0 18px;
  background: var(--cta); color: #fff;
  border: 0; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  box-shadow: 0 8px 18px -8px rgba(249,102,40,.55);
  letter-spacing: 0.01em;
}
.pdp-d-atc-btn:hover { background: var(--cta-press); transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(249,102,40,.6); }
.pdp-d-atc-btn:active { transform: translateY(0); }
.pdp-d-atc-btn.added { background: var(--color-success); box-shadow: 0 8px 18px -8px rgba(38,187,89,.5); }
.pdp-d-atc-btn.out {
  background: var(--muted-2); cursor: not-allowed; box-shadow: none;
}
.pdp-d-atc-btn .stack {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.pdp-d-atc-btn .stack .total {
  font-size: 12px; font-weight: 500; opacity: .85;
  font-variant-numeric: tabular-nums;
}
.pdp-d-fav {
  width: 56px; height: 56px;
  border-radius: 10px; flex-shrink: 0;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-fav:hover { border-color: var(--ink); color: var(--color-sale); }
.pdp-d-fav.on { border-color: var(--color-sale); color: var(--color-sale); background: #FBEAEA; }
.pdp-d-fav.on svg { fill: var(--color-sale); }

/* Ship + free row */
.pdp-d-ship {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3);
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.pdp-d-ship .ic { color: var(--color-1); flex-shrink: 0; }
.pdp-d-ship strong {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--ink-2);
}

.pdp-d-free {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.pdp-d-free-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pdp-d-free-bar {
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.pdp-d-free-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-1-light), var(--color-1));
  border-radius: 999px;
  transition: width 320ms var(--ease-out);
}

/* Inline certs row in buy panel */
.pdp-d-buy-certs {
  display: flex; align-items: center; gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.pdp-d-buy-certs .lbl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pdp-d-buy-certs .row {
  display: flex; align-items: center; gap: 10px;
  flex: 1;
}
.pdp-d-buy-certs .row a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-buy-certs .row a:hover { opacity: 1; transform: translateY(-1px); }
.pdp-d-buy-certs .row a img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   SECTION SHARED
   ============================================================ */
.pdp-d-section {
  padding: 72px 0;
  border-top: 1px solid var(--line-soft);
}
.pdp-d-section.alt { background: var(--bg-soft); }
.pdp-d-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.pdp-d-section-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 24px; line-height: 1.2;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  margin: 0;
}
.pdp-d-section-sub {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--muted);
}
.pdp-d-section-link {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  color: var(--color-1);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 160ms var(--ease-out);
}
.pdp-d-section-link:hover { gap: 9px; text-decoration: none; }

/* ============================================================
   PRODUCT INFO — long description (2/3) + side boxes (1/3)
   Mirrors namaximum #info Latte tab structure.
   ============================================================ */
.pdp-d-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.pdp-d-info-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 88px;
}

/* Card chrome */
.pdp-d-info-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pdp-d-info-box > header {
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to bottom, var(--bg-soft), var(--surface));
}
.pdp-d-info-box > header h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pdp-d-info-box > header h3::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--color-1);
  border-radius: 2px;
  flex-shrink: 0;
}
.pdp-d-info-body {
  padding: 22px 28px 28px;
}
.pdp-d-info-side .pdp-d-info-box > header {
  padding: 16px 22px 12px;
}
.pdp-d-info-side .pdp-d-info-body {
  padding: 16px 22px 22px;
}

/* Collapsible main description */
.pdp-d-info-box--collapsible:not(.is-expanded) .pdp-d-info-body {
  position: relative;
  max-height: 720px;
  overflow: hidden;
}
.pdp-d-info-box--collapsible:not(.is-expanded) .pdp-d-info-body::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface) 88%);
  pointer-events: none;
}
.pdp-d-info-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-1);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.pdp-d-info-toggle:hover {
  background: var(--color-1-tint);
  color: var(--color-1-darker);
}
.pdp-d-info-toggle:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: -2px;
}
.pdp-d-info-toggle .chev {
  display: inline-block;
  font-size: 14px;
  transition: transform 220ms var(--ease-out);
}
.pdp-d-info-box.is-expanded .pdp-d-info-toggle .chev {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------
   Prose styles — sanitises raw Froala HTML from product
   description / use_dosing / storage_and_alerts.
   ---------------------------------------------------------- */
.pdp-d-prose {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.pdp-d-prose > * + * { margin-top: 12px; }
.pdp-d-prose p { margin: 0; }
.pdp-d-prose strong { color: var(--ink-2); font-weight: 600; }
.pdp-d-prose em { font-style: italic; }
.pdp-d-prose u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pdp-d-prose h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 32px 0 4px !important;
}
.pdp-d-prose h4:first-child { margin-top: 0 !important; }
.pdp-d-prose a {
  color: var(--color-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms var(--ease-out);
}
.pdp-d-prose a:hover { color: var(--color-1-darker); }
.pdp-d-prose ul,
.pdp-d-prose ol {
  margin: 0;
  padding-left: 22px;
}
.pdp-d-prose ul li,
.pdp-d-prose ol li {
  margin: 4px 0;
}
.pdp-d-prose ul { list-style: none; padding-left: 0; }
.pdp-d-prose ul li {
  position: relative;
  padding-left: 22px;
}
.pdp-d-prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-1);
}
.pdp-d-prose blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--color-2);
  background: linear-gradient(
    to right,
    rgba(249, 102, 40, 0.06),
    rgba(249, 102, 40, 0.02) 60%,
    transparent
  );
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
}
.pdp-d-prose blockquote a { color: var(--color-2); }
.pdp-d-prose blockquote a:hover { color: #c44d18; }
.pdp-d-prose img {
  max-width: 100%;
  height: auto !important;
  width: auto !important;
  border-radius: var(--r-md);
  display: block;
  margin: 20px auto;
}
.pdp-d-prose p[style*="text-align: center"] { text-align: center; }

/* Override the brand-orange inline color used in the legacy Froala output */
.pdp-d-prose [style*="color: rgb(227, 108, 9)"],
.pdp-d-prose [style*="color:rgb(227, 108, 9)"],
.pdp-d-prose [style*="color:rgb(227,108,9)"] {
  color: var(--color-2) !important;
}

/* Tables (nutritional grids) */
.pdp-d-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.pdp-d-prose thead th {
  background: var(--bg-alt);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink-2);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 2px solid var(--line);
  border-right: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.pdp-d-prose tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.pdp-d-prose tbody td:first-child {
  background: var(--bg-soft);
  font-weight: 500;
  color: var(--ink-2);
  position: sticky;
  left: 0;
  z-index: 1;
}
.pdp-d-prose tbody tr:last-child td { border-bottom: 0; }
.pdp-d-prose th:last-child,
.pdp-d-prose td:last-child { border-right: 0; }
.pdp-d-prose tbody tr:nth-child(even) td:not(:first-child) {
  background: var(--bg-soft);
}

/* Compact variant for the small side boxes */
.pdp-d-prose--compact {
  font-size: 13.5px;
  line-height: 1.55;
}
.pdp-d-prose--compact p { margin: 0; }
.pdp-d-prose--compact > * + * { margin-top: 10px; }

/* Responsive: stack to single column under 1100px */
@media (max-width: 1100px) {
  .pdp-d-info-grid {
    grid-template-columns: 1fr;
  }
  .pdp-d-info-side {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .pdp-d-info-side {
    grid-template-columns: 1fr;
  }
  .pdp-d-info-body { padding: 18px 20px 22px; }
  .pdp-d-info-box > header { padding: 16px 20px 12px; }
}

/* ----------------------------------------------------------
   DEPRECATED — legacy 3-col mock (still referenced by mobile
   prototype via i18n keys but no longer rendered on desktop).
   Kept for reference; safe to delete once mobile prototype is
   refactored to consume real data fixtures.
   ---------------------------------------------------------- */
.pdp-d-info {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.pdp-d-info-col h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-1);
  display: inline-block;
}

/* Nutrition table */
.pdp-d-nutri { font-size: 13px; }
.pdp-d-nutri .hd {
  display: grid; grid-template-columns: 1fr 90px 90px;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--line);
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.pdp-d-nutri .hd > *:not(:first-child) { text-align: right; }
.pdp-d-nutri .row {
  display: grid; grid-template-columns: 1fr 90px 90px;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-3);
}
.pdp-d-nutri .row > *:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2); font-weight: 600;
}
.pdp-d-nutri .row.indent > *:first-child {
  padding-left: 14px;
  color: var(--muted); font-size: 12px;
}
.pdp-d-nutri .row.indent > *:not(:first-child) {
  color: var(--ink-3); font-weight: 500;
}
.pdp-d-nutri .row.hl {
  background: var(--color-1-tint);
  margin: 0 -16px;
  padding-left: 16px; padding-right: 16px;
  border-bottom: 0;
  border-radius: 6px;
}
.pdp-d-nutri .row.hl > *:first-child { color: var(--ink-2); font-weight: 700; }
.pdp-d-nutri .row.hl > *:not(:first-child) { color: var(--color-1-darker); font-weight: 700; }

/* Ingredients */
.pdp-d-ingredients p {
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.pdp-d-ingredients strong {
  color: var(--ink-2); font-family: var(--font-heading); font-weight: 700;
}
.pdp-d-allergen {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-warn-ink);
  font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
}
.pdp-d-allergen .ic { flex-shrink: 0; margin-top: 1px; }
.pdp-d-allergen strong { color: var(--color-warn-ink); font-weight: 700; }

/* Dosage steps */
.pdp-d-dose {
  display: flex; flex-direction: column; gap: 12px;
}
.pdp-d-dose-step {
  display: flex; gap: 12px;
  padding: 14px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}
.pdp-d-dose-step .num {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-1);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-d-dose-step .body { flex: 1; }
.pdp-d-dose-step .t {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 4px;
  line-height: 1.3;
}
.pdp-d-dose-step .d {
  font-size: 12px; line-height: 1.45;
  color: var(--ink-3);
}

/* ============================================================
   CERTIFICATIONS BAND (full-width, dedicated)
   ============================================================ */
.pdp-d-certs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pdp-d-cert {
  aspect-ratio: 1.6;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-cert:hover { border-color: var(--ink); transform: translateY(-1px); }
.pdp-d-cert img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.pdp-d-cert-note {
  margin-top: 16px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
  text-wrap: pretty;
  text-align: center;
}
.pdp-d-cert-note a { color: var(--color-1); font-weight: 600; }

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
.pdp-d-rev-summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 48px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
  margin-bottom: 32px;
}
.pdp-d-rev-summary > .pdp-d-rev-score-big,
.pdp-d-rev-summary > .pdp-d-rev-recommend {
  position: relative;
}
.pdp-d-rev-summary > .pdp-d-rev-score-big::after {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; right: -24px;
  width: 1px;
  background: var(--line);
}
.pdp-d-rev-summary > .pdp-d-rev-recommend::before {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; left: -24px;
  width: 1px;
  background: var(--line);
}
@media (max-width: 980px) {
  .pdp-d-rev-summary {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .pdp-d-rev-summary > .pdp-d-rev-dist { grid-column: 1 / -1; order: 3; }
  .pdp-d-rev-summary > .pdp-d-rev-score-big::after,
  .pdp-d-rev-summary > .pdp-d-rev-recommend::before { display: none; }
}
@media (max-width: 600px) {
  .pdp-d-rev-summary {
    grid-template-columns: 1fr;
  }
  .pdp-d-rev-summary > .pdp-d-rev-dist { order: 3; }
}
.pdp-d-rev-score-big { text-align: center; }
.pdp-d-rev-score-big .num {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 64px; line-height: 1;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pdp-d-rev-score-big .stars {
  color: #F9C80E; font-size: 18px;
  margin: 6px 0 4px;
  letter-spacing: 2px;
}
.pdp-d-rev-score-big .cnt {
  font-size: 12px; color: var(--muted);
}
.pdp-d-rev-dist {
  display: flex; flex-direction: column; gap: 6px;
}
.pdp-d-rev-dist-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 50px;
  gap: 10px;
  align-items: center;
  font-size: 12px; color: var(--muted);
}
.pdp-d-rev-dist-row .s {
  color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pdp-d-rev-dist-row .s .st {
  color: #F9C80E;
}

/* Recommend tile (mirrors $recommendedByCustomer panel in _reviews.latte) */
.pdp-d-rev-recommend {
  text-align: center;
}
.pdp-d-rev-recommend .num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: var(--color-success);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pdp-d-rev-recommend .msg {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.35;
  text-wrap: balance;
}
.pdp-d-rev-dist-row .bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.pdp-d-rev-dist-row .fill {
  height: 100%;
  background: #F9C80E;
  border-radius: 999px;
  transition: width 600ms var(--ease-out);
}
.pdp-d-rev-dist-row .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* Review CTA + filter row */
.pdp-d-rev-controls {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 14px;
  padding: 14px 18px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
}
.pdp-d-rev-controls .ask {
  flex: 1;
  font-size: 13px; color: var(--ink-3);
}
.pdp-d-rev-controls .write {
  height: 38px; padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--ink-2); cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-rev-controls .write:hover {
  background: var(--ink); color: #fff;
}

.pdp-d-rev-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pdp-d-rev-chip {
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 160ms var(--ease-out);
}
.pdp-d-rev-chip:hover { border-color: var(--ink-3); }
.pdp-d-rev-chip.on {
  background: var(--ink-2); border-color: var(--ink-2); color: #fff;
}
.pdp-d-rev-chip .n {
  opacity: .6; font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pdp-d-rev-sort {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px; color: var(--muted);
}
.pdp-d-rev-sort select {
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 8px 28px 8px 12px;
  border-radius: 8px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%231B1B1B' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

/* Review grid */
.pdp-d-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pdp-d-rev-card {
  display: flex; flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-rev-card:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pdp-d-rev-card-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pdp-d-rev-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-1-tint);
  color: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.pdp-d-rev-card .nm-block {
  flex: 1; min-width: 0;
}
.pdp-d-rev-card .nm-block .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.pdp-d-rev-card .nm-block .verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  color: var(--color-ok);
  font-weight: 600;
}
.pdp-d-rev-card .nm-block .date {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.pdp-d-rev-card .item-stars {
  color: #F9C80E; font-size: 14px;
  letter-spacing: 1px;
}
.pdp-d-rev-card .title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; color: var(--ink-2);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pdp-d-rev-card .body {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-3);
  flex: 1;
}
.pdp-d-rev-card .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.pdp-d-rev-card .tag {
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  padding: 3px 8px;
  background: var(--bg-alt);
  border-radius: 999px;
}
.pdp-d-rev-card .helpful {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--muted);
}
.pdp-d-rev-card .helpful button {
  background: none; border: 0;
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  padding: 0;
}
.pdp-d-rev-card .helpful button:hover { color: var(--color-1); }

.pdp-d-rev-more {
  margin-top: 24px;
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-rev-more:hover { background: var(--ink); color: #fff; }

/* ============================================================
   REVIEW ENHANCEMENTS (P2)
   - per-review approval badge (rating > 3)
   - customer-type + purchase-verified badges
   - reply by NaMaximum team
   - language filter dropdown (flag chips)
   - add-rating form
   ============================================================ */

/* A. per-review "odporucam" approval badge (real Latte: rating > 3) */
.pdp-d-rev-item-recommend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-ok);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  border: 1px solid rgba(38, 187, 89, .25);
  white-space: nowrap;
}
.pdp-d-rev-item-recommend .ic {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--color-success);
  position: relative;
  flex: 0 0 auto;
}
/* CSS-shape thumbs-up: small white dot inside the green pill (no emoji). */
.pdp-d-rev-item-recommend .ic::before {
  content: '';
  position: absolute;
  inset: 2px 3px 2px 3px;
  background: #fff;
  clip-path: polygon(0% 55%, 35% 55%, 35% 100%, 65% 100%, 65% 55%, 100% 55%, 65% 0%, 35% 0%);
}
.pdp-d-rev-item-recommend.in-form {
  margin-left: 8px;
  height: 22px;
  font-size: 12px;
  padding: 0 10px 0 7px;
}

/* B. customer-type badges block (real Latte: .customer-type rows) */
.pdp-d-rev-cust {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px 0;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-radius: 8px;
}
.pdp-d-rev-cust-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  color: var(--ink-3);
}
.pdp-d-rev-cust-row.is-cust {
  color: var(--color-ok);
}
.pdp-d-rev-cust-row.is-guest {
  color: var(--muted);
}
.pdp-d-rev-cust-row.is-purchase {
  color: var(--color-ok);
}
.pdp-d-rev-cust-ic {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
}
.pdp-d-rev-cust-ic.is-check {
  background: var(--color-success);
}
.pdp-d-rev-cust-ic.is-check::after {
  content: '';
  position: absolute;
  left: 3px; top: 5px;
  width: 3px; height: 5px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.pdp-d-rev-cust-ic.is-cross {
  background: #C9CDD6;
}
.pdp-d-rev-cust-ic.is-cross::before,
.pdp-d-rev-cust-ic.is-cross::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 1.5px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.pdp-d-rev-cust-ic.is-cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* C. reply by NaMaximum team (real Latte: .rating-answer) */
.pdp-d-rev-reply {
  margin: 14px 0 0 32px;
  padding: 12px 14px 12px 14px;
  border-left: 3px solid var(--color-1);
  background: var(--color-1-tint);
  border-radius: 0 10px 10px 0;
}
.pdp-d-rev-reply-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pdp-d-rev-reply-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pdp-d-rev-reply-logo img {
  max-width: 18px;
  max-height: 18px;
  display: block;
}
.pdp-d-rev-reply-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pdp-d-rev-reply-meta .l {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-1-darker);
  line-height: 1.2;
}
.pdp-d-rev-reply-meta .d {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.pdp-d-rev-reply-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .pdp-d-rev-reply { margin-left: 12px; }
}

/* D. language filter dropdown */
.pdp-d-rev-sort-ctrls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pdp-d-rev-lang-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pdp-d-rev-lang-lbl {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.pdp-d-rev-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}
.pdp-d-rev-lang-btn:hover { border-color: var(--ink-3); }
.pdp-d-rev-lang-filter.on .pdp-d-rev-lang-btn {
  border-color: var(--color-1);
  box-shadow: 0 0 0 3px var(--color-1-lighter);
}
.pdp-d-rev-lang-btn .current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdp-d-rev-lang-btn .flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: block;
  border: 1px solid rgba(0,0,0,.06);
}
.pdp-d-rev-lang-btn .chev {
  display: inline-flex;
  color: var(--muted);
  transition: transform 160ms var(--ease-out);
}
.pdp-d-rev-lang-filter.on .pdp-d-rev-lang-btn .chev {
  transform: rotate(180deg);
}
.pdp-d-rev-lang-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-d-rev-lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 120ms var(--ease-out);
}
.pdp-d-rev-lang-opt:hover { background: var(--bg-alt); }
.pdp-d-rev-lang-opt.on {
  background: var(--color-1-tint);
  color: var(--color-1-darker);
}
.pdp-d-rev-lang-opt .flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;
}
/* "All" pseudo-flag: globe-style gradient circle */
.pdp-d-rev-lang-opt .flag-all {
  background: conic-gradient(from 180deg, var(--color-1) 0 25%, var(--color-success) 25% 50%, #F9C80E 50% 75%, var(--color-1-light) 75% 100%);
  border-radius: 999px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,.08);
}
.pdp-d-rev-empty {
  padding: 32px 18px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
}

/* E. add-rating form (real Latte: addRatingForm) */
.pdp-d-rev-controls .write.on {
  background: var(--ink);
  color: #fff;
}
.pdp-d-rev-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp-d-rev-form-hd h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 4px 0;
}
.pdp-d-rev-form-hd p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.pdp-d-rev-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.pdp-d-rev-fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pdp-d-rev-fld.span-2 { grid-column: 1 / -1; }
.pdp-d-rev-fld > span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pdp-d-rev-fld > span em {
  color: var(--color-danger, #DD3030);
  font-style: normal;
  font-weight: 800;
}
.pdp-d-rev-fld input[type="text"],
.pdp-d-rev-fld input[type="email"],
.pdp-d-rev-fld select,
.pdp-d-rev-fld textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-rev-fld textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.pdp-d-rev-fld input:focus,
.pdp-d-rev-fld select:focus,
.pdp-d-rev-fld textarea:focus {
  outline: none;
  border-color: var(--color-1);
  box-shadow: 0 0 0 3px var(--color-1-lighter);
}
.pdp-d-rev-fld-rating { grid-column: 1 / -1; }
.pdp-d-rev-form-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pdp-d-rev-form-star {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #D8DCE3;
  cursor: pointer;
  padding: 0;
  transition: color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.pdp-d-rev-form-star:hover { transform: scale(1.1); }
.pdp-d-rev-form-star.on { color: #F9C80E; }
.pdp-d-rev-form-stars-n {
  margin-left: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pdp-d-rev-form-bot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.pdp-d-rev-form-submit {
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--color-1);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.pdp-d-rev-form-submit:hover { background: var(--color-1-darker); }
.pdp-d-rev-form-login {
  margin: 0 0 18px 0;
  padding: 14px 18px;
  background: #fff;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-3);
}
.pdp-d-rev-form-login a {
  color: var(--color-1);
  font-weight: 700;
}
@media (max-width: 720px) {
  .pdp-d-rev-form-grid {
    grid-template-columns: 1fr;
  }
  .pdp-d-rev-fld.span-2 { grid-column: 1; }
}

/* ============================================================
   AI REVIEW SUMMARY (desktop variant)
   ============================================================ */
.pdp-d-ai {
  position: relative;
  margin: 0 0 32px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg,
    #8A7AFE 0%,
    #0077BC 35%,
    #26BB59 65%,
    #F96628 100%);
  background-size: 300% 300%;
  animation: pdp-d-ai-border 9s ease infinite;
  isolation: isolate;
  overflow: hidden;
}
.pdp-d-ai::before {
  content: '';
  position: absolute; inset: 1px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(138,122,254,.08), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(0,119,188,.07), transparent 55%),
    #fff;
  border-radius: 17px;
  z-index: -1;
}
@keyframes pdp-d-ai-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.pdp-d-ai-inner {
  padding: 24px 28px;
}
.pdp-d-ai-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.pdp-d-ai-spark {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-d-ai-spark svg {
  width: 100%; height: 100%;
  animation: pdp-d-ai-pulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(138,122,254,.55));
}
@keyframes pdp-d-ai-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; }
  50%      { transform: scale(1.12) rotate(8deg); opacity: 1; }
}
.pdp-d-ai-badge {
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(90deg, #8A7AFE, #0077BC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pdp-d-ai-beta {
  margin-left: auto;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6B6F8E;
  background: #F2F0FE; border: 1px solid #E5E1FB;
  padding: 4px 8px; border-radius: 999px;
}
.pdp-d-ai-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 18px; color: var(--ink-2);
  line-height: 1.3;
  margin-bottom: 8px;
  text-wrap: balance;
}
.pdp-d-ai-tldr {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
  max-width: 880px;
}

.pdp-d-ai-body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.pdp-d-ai-col {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
  display: flex; flex-direction: column;
}
.pdp-d-ai-col-hd {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.pdp-d-ai-col.pros .pdp-d-ai-col-hd { color: #1F8A45; }
.pdp-d-ai-col.cons .pdp-d-ai-col-hd { color: #8A5A00; }
.pdp-d-ai-col.topics .pdp-d-ai-col-hd { color: var(--color-1); }
.pdp-d-ai-col .dot-ic {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
}
.pdp-d-ai-col.pros .dot-ic { background: #26BB59; }
.pdp-d-ai-col.cons .dot-ic { background: #E0A33A; }
.pdp-d-ai-col.topics .dot-ic { background: var(--color-1); }
.pdp-d-ai-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pdp-d-ai-list li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-3);
  align-items: start;
}
.pdp-d-ai-list li::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .5;
  margin-top: 8px;
}
.pdp-d-ai-list li strong {
  color: var(--ink-2); font-weight: 700;
  font-family: var(--font-heading);
  display: block;
}
.pdp-d-ai-list li small {
  display: block; color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Topics col contents */
.pdp-d-ai-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.pdp-d-ai-chip {
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms var(--ease-out);
}
.pdp-d-ai-chip:hover {
  border-color: var(--color-1);
  color: var(--color-1);
  transform: translateY(-1px);
}
.pdp-d-ai-chip .n {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 11px;
}
.pdp-d-ai-sent {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.pdp-d-ai-sent-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  display: flex;
}
.pdp-d-ai-sent-bar span {
  height: 100%; display: block;
  transition: width 600ms var(--ease-out);
}
.pdp-d-ai-sent-bar .pos { background: #26BB59; }
.pdp-d-ai-sent-bar .neu { background: #C9CDD6; }
.pdp-d-ai-sent-bar .neg { background: #E6452B; }
.pdp-d-ai-sent-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pdp-d-ai-sent-legend b { color: var(--ink-2); font-weight: 700; margin-left: 2px; }
.pdp-d-ai-sent-legend .dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.pdp-d-ai-ft {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.pdp-d-ai-meta {
  flex: 1;
  font-size: 11px; color: var(--muted);
  line-height: 1.4;
}
.pdp-d-ai-disc {
  font-size: 11px; color: var(--muted-2);
  margin-top: 6px;
  line-height: 1.4;
}

/* Skeleton loading */
.pdp-d-ai.loading .pdp-d-ai-tldr,
.pdp-d-ai.loading .pdp-d-ai-list li,
.pdp-d-ai.loading .pdp-d-ai-chips,
.pdp-d-ai.loading .pdp-d-ai-sent,
.pdp-d-ai.loading .pdp-d-ai-title {
  color: transparent !important;
  background: linear-gradient(90deg, #EEF0F5 25%, #F7F8FB 50%, #EEF0F5 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: pdp-d-ai-shimmer 1.1s ease-in-out infinite;
}
.pdp-d-ai.loading .pdp-d-ai-tldr { min-height: 56px; }
.pdp-d-ai.loading .pdp-d-ai-title { min-height: 24px; }
@keyframes pdp-d-ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Minimal AI variant */
.pdp-d-ai.variant-minimal { background: var(--line); padding: 1px; }
.pdp-d-ai.variant-minimal::before { background: #fff; }
.pdp-d-ai.variant-minimal .pdp-d-ai-badge {
  -webkit-text-fill-color: var(--ink-2); color: var(--ink-2);
  background: none;
}
.pdp-d-ai.variant-minimal .pdp-d-ai-spark svg { filter: none; }

/* ============================================================
   BUNDLE + CROSS-SELL
   ============================================================ */
.pdp-d-bundle {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #FFF4EC 0%, #FFE4D1 100%);
  border: 1px solid rgba(249,102,40,.22);
  border-radius: 16px;
  align-items: center;
  margin-bottom: 40px;
}
.pdp-d-bundle-left { display: flex; flex-direction: column; gap: 14px; }
.pdp-d-bundle-tag {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: var(--color-2);
  padding: 5px 10px;
  border-radius: 4px;
}
.pdp-d-bundle-name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}
.pdp-d-bundle-items {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
}
.pdp-d-bundle-it {
  width: 96px; height: 96px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
/* v0.7.11: real CDN product photos in the bundle row (was 2 ProductVisual
   tubs). object-fit: contain keeps the white packshot framing inside
   the 96 / 76 padded box; the size pill ('1 KG' / '500 G') sits in the
   bottom-right so the bundle reads as 'WPC 80 1 KG + CREATINE 500 G'
   without losing the standalone-product feel. */
.pdp-d-bundle-it img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pdp-d-bundle-it-size {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-soft);
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}
.pdp-d-bundle-plus {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 22px;
  color: var(--color-2);
  flex-shrink: 0;
}

.pdp-d-bundle-right {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 18px 20px;
}
.pdp-d-bundle-pricerow {
  display: flex; align-items: baseline; gap: 12px;
}
.pdp-d-bundle-pricerow .now {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 32px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pdp-d-bundle-pricerow .orig {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.pdp-d-bundle-vs {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  color: var(--color-sale);
  letter-spacing: 0.04em;
}
.pdp-d-bundle-saving {
  font-size: 12px; color: var(--ink-3);
  line-height: 1.4;
}
.pdp-d-bundle-saving strong {
  color: var(--color-sale); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pdp-d-bundle-cta {
  margin-top: 4px;
  height: 48px; padding: 0 20px;
  background: var(--ink-2); color: #fff;
  border: 0; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-bundle-cta:hover { background: #000; transform: translateY(-1px); }

/* Cross-sell grid (4 columns) */
.pdp-d-cross-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pdp-d-cross-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  transition: all 160ms var(--ease-out);
}
.pdp-d-cross-card:hover {
  border-color: var(--color-1-lighter);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(0,119,188,.18);
}
/* v0.7.8 photo-unify: real CDN photos vary in composition (some
   full-bleed, some show two packshots with margin). Image fills the
   full square card edge-to-edge - rounded radius + white surface
   keep the strip visually unified even when individual photos
   differ. Hover adds a soft 4% zoom + lift for interactivity. */
.pdp-d-cross-card .img {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out),
              transform   var(--dur-med) var(--ease-out);
}
.pdp-d-cross-card:hover .img {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.pdp-d-cross-card .img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-med) var(--ease-out);
}
.pdp-d-cross-card:hover .img img {
  transform: scale(1.04);
}
.pdp-d-cross-card .flag {
  position: absolute; top: 8px; left: 8px;
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.pdp-d-cross-card .flag.new { background: var(--color-1); }
.pdp-d-cross-card .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); line-height: 1.35;
  margin: 4px 0 6px;
  min-height: 36px;
}
.pdp-d-cross-card .rt {
  font-size: 11px; color: var(--muted);
  margin-bottom: 10px;
}
.pdp-d-cross-card .rt .s { color: #F9C80E; }
.pdp-d-cross-card .bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.pdp-d-cross-card .pr {
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdp-d-cross-card .orig {
  display: block;
  font-size: 11px; color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.pdp-d-cross-card .add {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--cta); color: #fff;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--ease-out);
}
.pdp-d-cross-card .add:hover { background: var(--cta-press); }
.pdp-d-cross-card .add.added { background: var(--color-success); }

/* F3 (v0.8.2): cross-sell card polish to match real combinations.latte.
   .img + .nm became <a> wrappers - reset link defaults. .price-from is
   the new "od" prefix. .sale-flag is the -X% overlay top-right (mirrors
   .sale-flag--new in real). .detail replaces the inline ATC "+" button
   with a plain Detail pseudo-link + magnifier icon. */
.pdp-d-cross-card a.img,
.pdp-d-cross-card a.nm {
  text-decoration: none;
  color: inherit;
}
.pdp-d-cross-card .price-from {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 2px;
}
.pdp-d-cross-card .sale-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.pdp-d-cross-card .detail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pdp-d-cross-card .detail:hover {
  background: var(--color-1);
  color: #fff;
  border-color: var(--color-1);
}
.pdp-d-cross-card .detail svg {
  flex-shrink: 0;
}



/* ============================================================
   FAQ
   ============================================================ */
.pdp-d-faq {
  max-width: 880px;
  margin: 0 auto;
}
.pdp-d-faq-item {
  border-bottom: 1px solid var(--line-soft);
}
.pdp-d-faq-item:first-child { border-top: 1px solid var(--line-soft); }
.pdp-d-faq-q {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  color: var(--ink-2);
  text-wrap: pretty;
  transition: color 160ms var(--ease-out);
}
.pdp-d-faq-q:hover { color: var(--color-1); }
.pdp-d-faq-q .num {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 28px;
  letter-spacing: 0.04em;
}
.pdp-d-faq-q .chev {
  margin-left: auto;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out), color 160ms var(--ease-out);
}
.pdp-d-faq-item.on .pdp-d-faq-q .chev {
  transform: rotate(90deg);
  color: var(--color-1);
}
.pdp-d-faq-a {
  font-size: 14px; line-height: 1.65;
  color: var(--ink-3);
  padding: 0 4px 22px 38px;
  display: none;
  text-wrap: pretty;
  max-width: 760px;
}
.pdp-d-faq-item.on .pdp-d-faq-a { display: block; }

/* ============================================================
   CUSTOMER Q&A ("Otázky a odpovede")
   Replaces the static FAQ on desktop. Real product_questions
   data — see prototypes/wpc80-data.jsx + data/wpc80-questions.json.
   ============================================================ */
.pdp-d-qa-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--color-1-tint);
  border: 1px solid color-mix(in srgb, var(--color-1) 14%, transparent);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.pdp-d-qa-strip-stats {
  display: flex; align-items: center;
  gap: var(--s-8);
}
.pdp-d-qa-stat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.pdp-d-qa-stat .n {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; line-height: 1;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pdp-d-qa-stat .n.with-ic {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-success);
}
.pdp-d-qa-stat .l {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.pdp-d-qa-ask {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--color-1);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-qa-ask:hover {
  background: var(--color-1-darker);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.pdp-d-qa-ask.on {
  background: var(--surface);
  color: var(--color-1);
  border: 1px solid var(--color-1);
}

/* Inline form panel */
.pdp-d-qa-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.pdp-d-qa-form-hd { margin-bottom: var(--s-4); }
.pdp-d-qa-form-hd h4 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 18px; color: var(--ink-2);
  margin: 0 0 4px;
}
.pdp-d-qa-form-hd p {
  font-size: 13px; color: var(--muted);
  margin: 0;
}
.pdp-d-qa-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
}
.pdp-d-qa-fld {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.pdp-d-qa-fld.span-2 { grid-column: span 2; }
.pdp-d-qa-fld > span {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: 0.03em;
  color: var(--ink-3);
}
.pdp-d-qa-fld > span em {
  color: var(--color-error);
  font-style: normal;
  margin-left: 2px;
}
.pdp-d-qa-fld input,
.pdp-d-qa-fld select,
.pdp-d-qa-fld textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-qa-fld textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
  font-family: var(--font-body);
}
.pdp-d-qa-fld input:focus,
.pdp-d-qa-fld select:focus,
.pdp-d-qa-fld textarea:focus {
  outline: none;
  border-color: var(--color-1);
  box-shadow: 0 0 0 3px rgba(0, 119, 188, 0.12);
}
.pdp-d-qa-form-bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.pdp-d-qa-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; line-height: 1.45;
  color: var(--ink-3);
  max-width: 540px;
  cursor: pointer;
}
.pdp-d-qa-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-1);
  flex-shrink: 0;
}
.pdp-d-qa-submit {
  padding: 12px 26px;
  background: var(--color-1);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-qa-submit:hover:not(:disabled) {
  background: var(--color-1-darker);
  transform: translateY(-1px);
}
.pdp-d-qa-submit:disabled {
  background: var(--muted-2);
  cursor: not-allowed;
}

/* Sort tabs */
.pdp-d-qa-sort {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-5);
}
.pdp-d-qa-sort-chip {
  padding: 8px 16px;
  background: var(--surface);
  color: var(--ink-3);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-qa-sort-chip:hover { border-color: var(--color-1-lighter); color: var(--color-1); }
.pdp-d-qa-sort-chip.on {
  background: var(--color-1);
  border-color: var(--color-1);
  color: #fff;
}
.pdp-d-qa-sort-info {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Question stack */
.pdp-d-qa-list {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.pdp-d-qa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-qa-card:hover {
  border-color: color-mix(in srgb, var(--color-1) 30%, var(--line));
  box-shadow: var(--shadow-sm);
}
.pdp-d-qa-card-hd {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-3);
}
.pdp-d-qa-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-1-tint);
  color: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--color-1) 18%, transparent);
}
.pdp-d-qa-id {
  min-width: 0;
}
.pdp-d-qa-nm {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
}
.pdp-d-qa-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1;
}
.pdp-d-qa-badge.verified {
  background: rgba(38, 187, 89, 0.1);
  color: var(--color-success);
}
.pdp-d-qa-badge.guest {
  background: var(--bg-alt);
  color: var(--muted);
  padding-left: 9px;
}
.pdp-d-qa-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.pdp-d-qa-meta .dot { opacity: 0.6; }
.pdp-d-qa-vchip {
  display: inline-block;
  padding: 2px 9px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px;
  color: var(--ink-3);
}
.pdp-d-qa-helpful {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: var(--surface);
  color: var(--ink-3);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  flex-shrink: 0;
  white-space: nowrap;
}
.pdp-d-qa-helpful .plus {
  font-weight: 800;
  color: var(--color-1);
  font-size: 13px;
}
.pdp-d-qa-helpful .n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pdp-d-qa-helpful:hover {
  border-color: var(--color-1);
  color: var(--color-1);
  transform: translateY(-1px);
}
.pdp-d-qa-helpful.on {
  background: var(--color-1);
  border-color: var(--color-1);
  color: #fff;
}
.pdp-d-qa-helpful.on .plus,
.pdp-d-qa-helpful.on .n { color: #fff; }
.pdp-d-qa-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: var(--s-4);
  text-wrap: pretty;
  white-space: pre-wrap;
}

/* Reply panel — brand-tinted, anchored to the left edge */
.pdp-d-qa-reply {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-4);
  background: var(--color-1-tint);
  border-left: 3px solid var(--color-1);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5);
  margin-left: 56px;
}
.pdp-d-qa-reply-mark {
  display: flex; align-items: center; gap: var(--s-3);
  border-right: 1px solid color-mix(in srgb, var(--color-1) 18%, transparent);
  padding-right: var(--s-4);
}
.pdp-d-qa-reply-logo {
  width: 36px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pdp-d-qa-reply-logo img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.pdp-d-qa-reply-mark .nm {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.pdp-d-qa-reply-mark .date {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--color-1-darker);
  margin-top: 3px;
}
.pdp-d-qa-reply-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
  white-space: pre-wrap;
}
.pdp-d-qa-pending {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-warn-ink);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  margin-left: 56px;
}

/* Show more */
.pdp-d-qa-more {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  margin: var(--s-6) auto 0;
  padding: 12px 28px;
  background: var(--surface);
  color: var(--color-1);
  border: 1.5px solid var(--color-1);
  border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-qa-more:hover {
  background: var(--color-1);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.pdp-d-qa-more svg { transform: rotate(90deg); }

/* Empty state */
.pdp-d-qa-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.pdp-d-qa-empty svg { color: var(--muted-2); }
.pdp-d-qa-empty p {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Compact below 980px (still desktop scope, but tightens at narrow viewports) */
@media (max-width: 980px) {
  .pdp-d-qa-strip {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .pdp-d-qa-strip-stats { gap: var(--s-5); }
  .pdp-d-qa-card-hd {
    grid-template-columns: auto 1fr;
  }
  .pdp-d-qa-helpful {
    grid-column: 1 / -1;
    margin-top: 4px;
    align-self: start;
  }
  .pdp-d-qa-reply {
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .pdp-d-qa-reply-mark {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-1) 18%, transparent);
    padding-right: 0;
    padding-bottom: var(--s-3);
  }
  .pdp-d-qa-pending { margin-left: 0; }
  .pdp-d-qa-form-grid { grid-template-columns: 1fr; }
  .pdp-d-qa-fld.span-2 { grid-column: span 1; }
  .pdp-d-qa-form-bot { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.pdp-d-ft {
  background: #0A0A0A;
  color: rgba(255,255,255,.7);
  padding: 56px 0 28px;
  margin-top: 40px;
}
/* v0.7.10: footer columns went from 4 (brand + 3 menu) to 6 (brand +
   Kontakt + 4 menu) to mirror real namaximum.sk. The brand column
   stays widest (1.4fr) because it carries the description + social
   pills. Kontakt + 4 menu sections share equal weight. Drops to a
   wrap-friendly auto-fit grid below 980px so the column count adapts
   to the prototype's narrow content lane on smaller laptops. */
.pdp-d-ft-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 1100px) {
  .pdp-d-ft-grid {
    grid-template-columns: 1.4fr repeat(2, 1fr);
    gap: 32px 40px;
  }
}
@media (max-width: 720px) {
  .pdp-d-ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .pdp-d-ft-brand { grid-column: 1 / -1; }
}
.pdp-d-ft-brand .lg {
  display: block;
  margin-bottom: 18px;
  height: 24px;
}
.pdp-d-ft-brand p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  margin: 0 0 16px;
  max-width: 320px;
}
/* v0.7.10: 'Sleduj nas' header h4 above the social pills. The mobile
   twin uses the same key (foot_social_title) and a similar treatment
   inside .p-foot-soc-title - kept here as a desktop-scoped rule so
   the brand block stacks (logo / about / 'Sleduj nas' / pills). */
.pdp-d-ft-soc-title {
  margin-top: 4px;
}
.pdp-d-ft-soc {
  display: flex; gap: 8px;
}
.pdp-d-ft-soc a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-out);
}
.pdp-d-ft-soc a:hover { background: var(--color-1); }
.pdp-d-ft h4 {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: #fff;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 16px;
}
.pdp-d-ft ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pdp-d-ft a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  transition: color 160ms var(--ease-out);
}
.pdp-d-ft a:hover { color: #fff; text-decoration: none; }
.pdp-d-ft-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.pdp-d-ft-bottom .legal {
  display: inline-flex; align-items: center; gap: 14px;
}
.pdp-d-ft-bottom .legal a { font-size: 11px; }

/* v0.7.10: dedicated Kontakt column - mirrors mobile .p-foot-contact
   and real namaximum.sk @base.latte 'Kontakt' block. Tel + mail are
   styled as quiet links so they read as content, not nav. */
.pdp-d-ft-contact p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.65);
}
.pdp-d-ft-contact .addr {
  color: rgba(255,255,255,.55);
}
.pdp-d-ft-contact a {
  color: rgba(255,255,255,.85);
}
.pdp-d-ft-contact a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   TOAST
   ============================================================ */
.pdp-d-toast-wrap {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  align-items: center;
}
.pdp-d-toast {
  background: var(--ink-2); color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  animation: pdp-d-toast-in 280ms var(--ease-out);
}
.pdp-d-toast .ic { color: var(--color-success); }
.pdp-d-toast.err .ic { color: var(--color-sale); }
@keyframes pdp-d-toast-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   RESPONSIVE FALLBACK (below 1024px → narrower hero/grids)
   The mobile view has its own dedicated file. This is just to
   prevent the desktop template from breaking horribly on tablets.
   ============================================================ */
@media (max-width: 1100px) {
  .pdp-d-hero { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pdp-d-info { grid-template-columns: 1fr 1fr; }
  .pdp-d-info-col:first-child { grid-column: 1 / -1; }
  .pdp-d-rev-grid { grid-template-columns: 1fr 1fr; }
  .pdp-d-cross-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-d-ai-body { grid-template-columns: 1fr 1fr; }
  .pdp-d-ai-col.topics { grid-column: 1 / -1; }
  .pdp-d-bundle { grid-template-columns: 1fr; }
  .pdp-d-trust { grid-template-columns: 1fr 1fr; }
  .pdp-d-ft-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
 * VALUE-PROPS STRIP (under header) — mirrors live PDP
 * ============================================================ */
.pdp-d-vp-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.pdp-d-vp-list {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  list-style: none; margin: 0; padding: 10px 0;
}
.pdp-d-vp-it {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 28px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--color-1);
  position: relative;
}
.pdp-d-vp-it + .pdp-d-vp-it::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 16px; background: var(--line);
}
.pdp-d-vp-it .vp-ic { color: var(--color-1); display: inline-flex; }
.pdp-d-vp-it .vp-tx { white-space: nowrap; }
@media (max-width: 1100px) {
  .pdp-d-vp-it { padding: 0 14px; font-size: 12px; }
}

/* ============================================================
 * SOCIAL PROOF RIBBON over gallery
 * ============================================================ */
.pdp-d-gal-watching {
  position: absolute; top: 12px; left: 12px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(0,119,188,.92);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(0,119,188,.25);
  backdrop-filter: blur(6px);
}
.pdp-d-gal-watching .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ED66A;
  box-shadow: 0 0 0 2px rgba(78,214,106,.35);
  animation: pdp-d-pulse 2s ease-in-out infinite;
}
@keyframes pdp-d-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .7; }
}

/* ============================================================
 * BRAND ROW + FLAGS (Značka: Warrior, Natural Nutrition / AKCIA / ODPORÚČAME)
 * ============================================================ */
.pdp-d-brandrow {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: -2px 0 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-3);
}
.pdp-d-brandrow .brand-lbl {
  font-weight: 700; color: var(--ink-2);
}
.pdp-d-brandrow .brand-link {
  color: var(--color-1);
  text-decoration: none;
  font-weight: 600;
  transition: text-decoration-color 160ms var(--ease-out);
}
.pdp-d-brandrow .brand-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.pdp-d-flags {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px;
}
.pdp-d-flag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
}
.pdp-d-flag.is-sale { background: var(--color-sale, #DD3030); }
.pdp-d-flag.is-rec  { background: var(--color-1); }

/* ============================================================
 * EAN + ALTERNATIVE NAMES (small meta below evidence)
 * ============================================================ */
.pdp-d-altnames {
  margin: 10px 0 4px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.pdp-d-altnames em {
  font-style: italic;
  color: var(--ink-3);
}
.pdp-d-ean {
  display: inline-flex; gap: 6px;
  margin: 4px 0 12px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.pdp-d-ean .k {
  font-weight: 700; text-transform: uppercase;
}
.pdp-d-ean .v {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ============================================================
 * SHIPPING OPTIONS EXPANDER (Možnosti dopravy)
 * ============================================================ */
.pdp-d-shipopts {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: border-color 160ms var(--ease-out);
}
.pdp-d-shipopts.is-open { border-color: var(--color-1-lighter); }
.pdp-d-shipopts-tg {
  width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--color-1);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.pdp-d-shipopts-tg .ic { display: inline-flex; }
.pdp-d-shipopts-tg .chev {
  margin-left: auto;
  display: inline-flex;
  transition: transform 200ms var(--ease-out);
}
.pdp-d-shipopts.is-open .pdp-d-shipopts-tg .chev {
  transform: rotate(90deg);
}
.pdp-d-shipopts-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.pdp-d-shipopt {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--line-2, #F4F6F8);
}
.pdp-d-shipopt:first-child { border-top: 0; }
.pdp-d-shipopt .so-ic { color: var(--color-1); display: inline-flex; }
.pdp-d-shipopt .so-nm { color: var(--ink-2); font-weight: 600; }
.pdp-d-shipopt .so-tm {
  color: var(--muted); font-size: 11px;
  white-space: nowrap;
}
.pdp-d-shipopt .so-pr {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdp-d-shipopt .so-pr.is-free { color: var(--color-ok, #26BB59); }

/* ============================================================
 * STICKY TAB ANCHOR NAV (Popis · Certifikáty · Recenzie · …)
 * ============================================================ */
.pdp-d-tabnav {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: 50;
  margin-top: 24px;
}
.pdp-d-tabnav.is-stuck {
  position: sticky; top: 0;
  box-shadow: 0 4px 16px rgba(10,37,64,.08);
  z-index: 200;
}
/* Hide the older mini sticky bar when tab nav is stuck (redundant) */
body:has(.pdp-d-tabnav.is-stuck) .pdp-d-mini.on { display: none !important; }
.pdp-d-tabnav-inner {
  display: flex; align-items: center; gap: 24px;
  height: 56px;
}
.pdp-d-tabnav-list {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-d-tabnav-list::-webkit-scrollbar { display: none; }
.pdp-d-tabnav-link {
  display: inline-flex; align-items: center;
  height: 56px; padding: 0 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color 160ms var(--ease-out);
  letter-spacing: 0.01em;
}
.pdp-d-tabnav-link:hover { color: var(--color-1); }
.pdp-d-tabnav-link.is-active {
  color: var(--color-1-darker);
  background: var(--color-1-tint);
}
.pdp-d-tabnav-link.is-active::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 3px; background: var(--color-1);
  border-radius: 3px 3px 0 0;
}
.pdp-d-tabnav-mini {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  animation: pdp-d-fadein 200ms var(--ease-out);
}
.pdp-d-tabnav-mini .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2);
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-d-tabnav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--color-accent2, #F96628);
  color: #fff; border: 0;
  border-radius: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pdp-d-tabnav-cta:hover { background: #E55518; transform: translateY(-1px); }
.pdp-d-tabnav-cta.is-out {
  background: var(--bg-alt, #F4F6F8);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.pdp-d-tabnav-cta.is-out:hover { background: #EAEDF1; transform: none; }
@media (max-width: 900px) {
  .pdp-d-tabnav-mini { display: none; }
}

/* ============================================================
 * FILES / ATTACHMENTS section
 * ============================================================ */
.pdp-d-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.pdp-d-file {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 200ms var(--ease-out);
}
.pdp-d-file:hover {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,119,188,.10);
}
.pdp-d-file .file-ic {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ink-3);
}
.pdp-d-file .file-body {
  flex: 1; min-width: 0;
}
.pdp-d-file .file-nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pdp-d-file .file-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pdp-d-file .file-dl {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--color-1);
  transform: rotate(90deg);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pdp-d-file:hover .file-dl {
  background: var(--color-1);
  color: #fff;
}

/* ============================================================
 * VIDEO REVIEWS section
 * ============================================================ */
/* v0.7.9 #2: User feedback 'recenzie by mohli byt vedla seba'. Was
   auto-fit minmax(360px, 1fr) which collapsed to a single column on
   the prototype's narrower content lane (~720px gallery + buy panel
   stacked). Forcing 2 columns puts both video cards side-by-side; the
   sub-700px media query below still drops to one column for tiny
   viewports. */
.pdp-d-videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .pdp-d-videos { grid-template-columns: 1fr; }
}
.pdp-d-video {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10,37,64,.06);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pdp-d-video:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10,37,64,.12);
}
.pdp-d-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1A2B3C 0%, #0A2540 100%);
  overflow: hidden;
}
.pdp-d-video-mock {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0,119,188,.4), transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(249,102,40,.3), transparent 60%);
}
.pdp-d-video-mock::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px),
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px);
}
.pdp-d-video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: transparent; border: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  transition: transform 200ms var(--ease-out);
}
.pdp-d-video:hover .pdp-d-video-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.pdp-d-video-len {
  position: absolute; bottom: 10px; right: 10px;
  padding: 3px 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.pdp-d-video-yt {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px;
  background: rgba(221,48,48,.95);
  color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 3px;
}
.pdp-d-video-meta {
  padding: 14px 16px 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.pdp-d-video-nm {
  flex: 1;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pdp-d-video-ch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
}
.pdp-d-video-ch .ch-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-1), var(--color-1-darker));
  flex-shrink: 0;
}

/* ============================================================
 * REAL DESCRIPTION_VIDEO HTML render (#video tab)
 * Replaces the static videos grid when WPC80.product.descriptionVideoHtml
 * is present. The Froala source ships fixed width=500/height=281 attrs on
 * each <iframe>; we override them here for fluid 16:9 sizing.
 * ============================================================ */
/* v0.7.9 #2: User feedback 'recenzie by mohli byt vedla seba'. The
   real Froala HTML has two <iframe> blocks; on the prototype's 860px
   content lane, the previous auto-fit minmax(420px, 1fr) collapsed
   to a single column because 2 x 420px + gap > 860px. Forcing
   repeat(2, 1fr) keeps the iframes side-by-side on desktop and the
   media query below still collapses to one column on small screens. */
.pdp-d-video-real {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 700px) {
  .pdp-d-video-real { grid-template-columns: 1fr; }
}
.pdp-d-video-real p { margin: 0; }
/* v0.7.9 #2: Froala authoring leaves <p> stubs around the iframes
   (one with <a data-file=''></a>, another with just <br>). The old
   :empty + descendant selectors only hid the inner <a>, leaving the
   <p> itself as an empty grid item that pushed the second <figure>
   into row 2. With grid-template-columns: repeat(2, 1fr) the empty
   <p> made the layout look like 'header on the left, two videos
   stacked on the right'. Hiding direct <p> children of the wrapper
   collapses the grid back to two side-by-side iframes. */
.pdp-d-video-real > p {
  display: none;
}
.pdp-d-video-real figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 1px 3px rgba(10,37,64,.06);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pdp-d-video-real figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(10,37,64,.14);
}
.pdp-d-video-real iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ============================================================
 * FEATURED REVIEW (bestRating top-comment block)
 * Real _reviews.latte $bestRating section: pinned above review controls.
 * ============================================================ */
.pdp-d-rev-featured {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 28px;
  margin: 24px 0 24px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--color-1-tint) 0%, #fff 60%);
  border: 1px solid var(--color-1-lighter);
  box-shadow: 0 1px 3px rgba(0,119,188,.05);
  overflow: hidden;
}
.pdp-d-rev-featured::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-1) 0%, var(--color-1-darker) 100%);
}
.pdp-d-rev-featured-mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,119,188,.25);
}
.pdp-d-rev-featured-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pdp-d-rev-featured-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-1-darker);
}
.pdp-d-rev-featured-stars {
  line-height: 1;
}
.pdp-d-rev-featured-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: -0.01em;
}
.pdp-d-rev-featured-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.pdp-d-rev-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}
.pdp-d-rev-featured-meta .who {
  font-weight: 700;
  color: var(--ink-2);
}
.pdp-d-rev-featured-meta .verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-ok);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pdp-d-rev-featured-meta .sep {
  color: var(--line);
}
.pdp-d-rev-featured-meta .variant {
  font-weight: 600;
  color: var(--ink-3);
}
.pdp-d-rev-featured-helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
  align-self: flex-start;
}
.pdp-d-rev-featured-helpful .plus {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-1);
}
.pdp-d-rev-featured-helpful .l {
  font-weight: 600;
}
.pdp-d-rev-featured-helpful .n {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
@media (max-width: 720px) {
  .pdp-d-rev-featured {
    grid-template-columns: 1fr;
    padding: 20px 18px;
  }
  .pdp-d-rev-featured-mark {
    width: 44px; height: 44px;
    font-size: 22px;
  }
  .pdp-d-rev-featured-title { font-size: 16px; }
}

/* ============================================================
 * VARIANT MATRIX TABLE (#variants tab)
 * Real _table.latte: every (size x flavor) combination as a row with
 * stock chip, discount badge, per-kg price and inline add-to-cart button.
 * ============================================================ */
.pdp-d-vartab-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.pdp-d-vartab {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
}
.pdp-d-vartab thead th {
  background: var(--bg-soft);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pdp-d-vartab thead th.col-price,
.pdp-d-vartab thead th.col-perkg { text-align: right; }
.pdp-d-vartab thead th.col-action { text-align: right; }
.pdp-d-vartab tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.pdp-d-vartab tbody tr:last-child td {
  border-bottom: 0;
}
.pdp-d-vartab-row {
  transition: background 120ms var(--ease-out);
}
.pdp-d-vartab-row:hover {
  background: var(--bg-soft);
}
.pdp-d-vartab-row.is-out {
  background: #FAFBFC;
  color: var(--muted);
}
.pdp-d-vartab-row.is-out td {
  opacity: 0.78;
}
.pdp-d-vartab-row.is-active {
  background: var(--color-1-tint);
}
.pdp-d-vartab-row.is-active td {
  border-bottom-color: var(--color-1-lighter);
}

.pdp-d-vartab .col-flavor {
  min-width: 220px;
  vertical-align: middle;
}
.pdp-d-vartab .col-flavor .flavor-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-d-vartab .col-flavor .swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  flex-shrink: 0;
}
.pdp-d-vartab .col-flavor .nm {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
}

/* Size group header row */
.pdp-d-vartab tbody tr.pdp-d-vartab-group td {
  background: var(--color-1-darker);
  padding: 8px 16px;
  border-bottom: 0;
}
.pdp-d-vartab-group .gh {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.pdp-d-vartab-group .gh-size {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.pdp-d-vartab-group .gh-count {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  opacity: 0.78;
}
.pdp-d-vartab .col-size {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pdp-d-vartab .col-price {
  text-align: right;
  white-space: nowrap;
}
.pdp-d-vartab .col-price .now {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pdp-d-vartab .col-price .orig {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.pdp-d-vartab .col-price .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-error);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.pdp-d-vartab .col-perkg {
  text-align: right;
  white-space: nowrap;
}
.pdp-d-vartab .col-perkg .perkg {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pdp-d-vartab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pdp-d-vartab-chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdp-d-vartab-chip.is-in {
  background: var(--color-success-bg);
  color: var(--color-ok);
  border-color: rgba(38,187,89,.18);
}
.pdp-d-vartab-chip.is-in .dot { background: var(--color-success); }
.pdp-d-vartab-chip.is-low {
  background: rgba(249,200,14,.12);
  color: #8A6500;
  border-color: rgba(249,200,14,.28);
}
.pdp-d-vartab-chip.is-low .dot { background: #F9C80E; }
.pdp-d-vartab-chip.is-restock {
  background: var(--color-1-tint);
  color: var(--color-1-darker);
  border-color: var(--color-1-lighter);
}
.pdp-d-vartab-chip.is-restock .dot { background: var(--color-1); }
.pdp-d-vartab-chip.is-out {
  background: #F4F4F4;
  color: var(--muted);
  border-color: var(--line);
}
.pdp-d-vartab-chip.is-out .dot { background: var(--muted-2); }

.pdp-d-vartab .col-action {
  text-align: right;
  white-space: nowrap;
}
.pdp-d-vartab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: var(--color-2);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pdp-d-vartab-btn:hover {
  background: var(--color-2);
  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249,102,40,.28);
}
.pdp-d-vartab-btn.is-active {
  background: var(--color-2);
  filter: brightness(0.84);
}
.pdp-d-vartab-btn.is-notify {
  background: #fff;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.pdp-d-vartab-btn.is-notify:hover {
  background: var(--bg-soft);
  border-color: var(--ink-3);
  color: var(--ink-2);
  transform: none;
}

/* Mobile: horizontal scroll fallback */
@media (max-width: 900px) {
  .pdp-d-vartab-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-d-vartab {
    min-width: 760px;
  }
  .pdp-d-vartab thead th {
    position: static;
  }
}

/* ============================================================
 * RECENTLY VIEWED row (pre-footer)
 * Real default.latte $visitorProducts list. Compact cards (~25% smaller
 * than cross-sell) so the row sits comfortably above the footer.
 * ============================================================ */
.pdp-d-recent-section {
  border-top: 1px solid var(--line-soft);
}
/* v0.7.9 #1: User feedback 'tu len jeden riadok produktov a na mobile
   skor slide / scroll horizontalny'. Mobile already had a horizontal
   scroll (.p-recent-scroll); the desktop version was a 6-col grid that
   wrapped 8 items into 2 rows. Switched to a single-row horizontal
   scroll with fixed card widths so the section reads as one tidy strip
   regardless of card count, with native horizontal scroll on overflow.
   Scroll-snap aligns each card to the section gutter for clean swipes
   on touchpads / scroll wheels. */
.pdp-d-recent-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pdp-d-recent-grid::-webkit-scrollbar { height: 6px; }
.pdp-d-recent-grid::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 3px;
}
.pdp-d-recent-grid::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
}
.pdp-d-recent-card {
  /* v0.7.9 #1: fixed width so the row stays a single horizontal strip;
     flex-shrink: 0 prevents cards from collapsing as siblings join. */
  flex: 0 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 160ms var(--ease-out);
}
.pdp-d-recent-card:hover {
  border-color: var(--color-1-lighter);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(0,119,188,.18);
  text-decoration: none;
}
/* v0.7.8 photo-unify: same treatment as .pdp-d-cross-card .img. */
.pdp-d-recent-img {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out),
              transform   var(--dur-med) var(--ease-out);
}
.pdp-d-recent-card:hover .pdp-d-recent-img {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.pdp-d-recent-img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-med) var(--ease-out);
}
.pdp-d-recent-card:hover .pdp-d-recent-img img {
  transform: scale(1.04);
}
.pdp-d-recent-nm {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
  margin-bottom: 6px;
  min-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-d-recent-rt {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pdp-d-recent-rt .st { color: #F9C80E; font-size: 11px; }
.pdp-d-recent-rt .r {
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pdp-d-recent-pr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}
.pdp-d-recent-pr .now {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pdp-d-recent-pr .orig {
  font-size: 10px;
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* v0.7.9 #1: legacy responsive @media rules for grid-template-columns
   no longer apply because .pdp-d-recent-grid is now flex (horizontal
   scroll). The card width stays fixed at 200px on every viewport - the
   row simply scrolls when there isn't room for all cards. */

/* Cross-sell wrapper (when promoted above tab nav). Same internal layout
 * as before; only top spacing softens since it follows the hero block. */
.pdp-d-section--xsell {
  padding-top: 48px;
}

/* ============================================================
 * P3.A: SHARE BUTTON + DROPDOWN (hero column, next to fav)
 * Real Latte: .toggle-share-box (mobile only). Hoisted to desktop
 * hero column inside the buy panel ATC row.
 * ============================================================ */
.pdp-d-share-wrap {
  position: relative;
  flex-shrink: 0;
}
.pdp-d-share {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.pdp-d-share:hover { border-color: var(--ink); color: var(--color-1); }
.pdp-d-share.on {
  border-color: var(--color-1);
  color: var(--color-1);
  background: var(--color-1-tint);
}
.pdp-d-share-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: pdp-d-share-pop-in 160ms var(--ease-out);
}
@keyframes pdp-d-share-pop-in {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.pdp-d-share-pop-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.pdp-d-share-pop-item:hover { background: var(--bg-alt); }
.pdp-d-share-pop-item:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: -2px;
}
.pdp-d-share-pop-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  color: var(--ink-2);
}
.pdp-d-share-pop-ic.is-link { background: var(--bg-alt); color: var(--ink-2); }
.pdp-d-share-pop-ic.is-mail { background: var(--color-1-tint); color: var(--color-1-darker); }
/* CSS-shape Facebook 'f' on brand-blue tile (no emoji, no SVG required). */
.pdp-d-share-pop-ic.is-fb {
  background: #1877F2;
  color: #fff;
}
.pdp-d-share-pop-ic.is-fb::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 14px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  box-shadow:
    -3px -4px 0 0 #fff, /* hat of f */
     3px -4px 0 0 #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 35%, 100% 35%, 100% 25%, 60% 25%, 60% 0);
}
/* CSS-shape WhatsApp speech bubble on brand-green tile. */
.pdp-d-share-pop-ic.is-wa {
  background: #25D366;
  color: #fff;
}
.pdp-d-share-pop-ic.is-wa::before {
  content: '';
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
}
.pdp-d-share-pop-ic.is-wa::after {
  content: '';
  position: absolute;
  left: 64%; top: 70%;
  width: 5px; height: 5px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: rotate(15deg);
}

/* ============================================================
 * P3.B: GIFT RIBBON OVER GALLERY (right corner, accent)
 * Real Latte: <i n:if="$canHaveGifts" class="icon-gift">
 * ============================================================ */
.pdp-d-gal-gift {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFB347 0%, var(--color-2) 60%, var(--color-sale) 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -4px rgba(249, 102, 40, 0.45);
  transform: rotate(-8deg);
  transform-origin: right center;
  pointer-events: none;
}
/* When discount badge is also present, drop gift ribbon below it. */
.pdp-d-gal-gift.has-disc {
  top: 60px;
}
/* CSS-shape gift box (small ribboned package, no emoji/SVG). */
.pdp-d-gal-gift-ic {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: inset 0 4px 0 0 rgba(255,255,255,0.0);
}
.pdp-d-gal-gift-ic::before {
  /* horizontal ribbon */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: var(--color-sale);
  transform: translateY(-50%);
}
.pdp-d-gal-gift-ic::after {
  /* vertical ribbon + bow loop */
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-sale);
  transform: translateX(-50%);
}
.pdp-d-gal-gift-tx {
  white-space: nowrap;
}

/* ============================================================
 * P3.C: GIFT PICKS THUMBNAIL STRIP + COUNTER (in giftblock)
 * Real Latte: product-bonus__items + 'Vybrali ste %s z %s darčekov'
 * ============================================================ */
.pdp-d-giftblock {
  /* Override default flex-row layout to host the new picks/counter rows. */
  flex-direction: column;
  align-items: stretch;
}
.pdp-d-giftblock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pdp-d-giftblock-picks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pdp-d-giftblock-pick {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFD27A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.pdp-d-giftblock-pick:hover {
  transform: translateY(-1px);
  border-color: var(--color-2);
}
.pdp-d-giftblock-pick-shape {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--color-1-tint);
  border: 1.5px solid var(--color-1-lighter);
  position: relative;
}
/* Shaker icon: tall rectangle with cap. */
.pdp-d-giftblock-pick.is-shaker .pdp-d-giftblock-pick-shape {
  width: 14px;
  height: 24px;
  border-radius: 3px 3px 5px 5px;
  background: var(--color-1-tint);
  border-color: var(--color-1);
}
.pdp-d-giftblock-pick.is-shaker .pdp-d-giftblock-pick-shape::before {
  content: '';
  position: absolute;
  left: 50%; top: -3px;
  transform: translateX(-50%);
  width: 8px;
  height: 4px;
  background: var(--color-1);
  border-radius: 1.5px 1.5px 0 0;
}
/* Sample sachet: square with diagonal stripe. */
.pdp-d-giftblock-pick.is-sample .pdp-d-giftblock-pick-shape {
  width: 22px;
  height: 22px;
  background: var(--color-1-light);
  border-color: var(--color-1);
  border-radius: 3px;
  overflow: hidden;
}
.pdp-d-giftblock-pick.is-sample .pdp-d-giftblock-pick-shape::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  background: rgba(255,255,255,0.7);
  transform: translateY(-50%) rotate(-18deg);
}
.pdp-d-giftblock-counter {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ============================================================
 * P3.D: Q&A FORM HONEYPOT (additional_email, visually hidden)
 * Real Latte: addQuestionForm > additional_email
 * ============================================================ */
.pdp-d-qa-honey {
  position: absolute;
  left: -10000px;
  top: -10000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* ============================================================
 * P3.E: SALE-TERMINATED OVERLAY (productState === 'P')
 * Real Latte: $product->state == 'P' replaces buy block with
 * a soft-red 'Predaj ukončený' panel.
 * ============================================================ */
.pdp-d-soldout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  border-radius: var(--r-lg, 14px);
  background: linear-gradient(180deg, rgba(221, 48, 48, 0.06) 0%, rgba(221, 48, 48, 0.02) 100%);
  border: 1px solid rgba(221, 48, 48, 0.22);
}
.pdp-d-soldout-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-sale, #DD3030);
  position: relative;
  margin-bottom: 4px;
  box-shadow: 0 6px 14px -6px rgba(221, 48, 48, 0.5);
}
.pdp-d-soldout-ic::before,
.pdp-d-soldout-ic::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.pdp-d-soldout-ic::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.pdp-d-soldout-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-sale, #DD3030);
  line-height: 1.2;
}
.pdp-d-soldout-msg {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 360px;
  text-wrap: pretty;
}

/* ============================================================
   D3 - FLOATING TWEAK PANEL
   Bottom-right FAB + slide-in panel exposing all 28 tweak keys.
   Coexists with the legacy showcase-shell tweak panel; both write
   to window.__TWEAKS so they stay in sync.
   ============================================================ */
.pdp-d-tweak-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--color-1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 24px -8px rgba(0, 119, 188, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 160ms var(--ease-out);
}
.pdp-d-tweak-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0, 119, 188, 0.6), 0 4px 10px rgba(0, 0, 0, 0.1);
  background: var(--color-1-light, #00AEEF);
}
.pdp-d-tweak-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 119, 188, 0.25), 0 8px 24px -8px rgba(0, 119, 188, 0.55);
}
.pdp-d-tweak-fab svg {
  display: block;
  transition: transform 240ms var(--ease-out);
}
.pdp-d-tweak-fab.is-open svg {
  transform: rotate(-90deg);
}

.pdp-d-tweak-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 9999;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E2E8F0);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 60px -16px rgba(11, 28, 56, 0.28), 0 4px 12px rgba(11, 28, 56, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.pdp-d-tweak-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.pdp-d-tweak-panel-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--line-soft, #EEE);
  background: linear-gradient(180deg, var(--bg-soft, #F7FAFC) 0%, var(--surface, #fff) 100%);
}
.pdp-d-tweak-panel-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--fw-bold, 700);
  color: var(--ink-2, #111);
  letter-spacing: 0.02em;
}
.pdp-d-tweak-panel-reset {
  appearance: none;
  border: 1px solid var(--line, #E2E8F0);
  background: var(--surface, #fff);
  color: var(--muted, #666);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semi, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.pdp-d-tweak-panel-reset:hover {
  background: var(--bg-soft, #F7FAFC);
  color: var(--ink-2, #111);
  border-color: var(--ink-2, #111);
}
.pdp-d-tweak-panel-close {
  appearance: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line, #E2E8F0);
  background: var(--surface, #fff);
  color: var(--muted, #666);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.pdp-d-tweak-panel-close:hover {
  background: var(--bg-soft, #F7FAFC);
  color: var(--ink-2, #111);
  border-color: var(--ink-2, #111);
}

/* Body / scroll area */
.pdp-d-tweak-panel-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 6px 14px 14px 14px;
}
.pdp-d-tweak-panel-body::-webkit-scrollbar {
  width: 8px;
}
.pdp-d-tweak-panel-body::-webkit-scrollbar-thumb {
  background: var(--line, #E2E8F0);
  border-radius: 4px;
}

/* Category section */
.pdp-d-tweak-cat {
  border-bottom: 1px solid var(--line-soft, #EEE);
  padding: 6px 0;
}
.pdp-d-tweak-cat:last-child { border-bottom: 0; }
.pdp-d-tweak-cat-h {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2, #111);
}
.pdp-d-tweak-cat-h .chev {
  display: inline-grid;
  place-items: center;
  color: var(--muted, #666);
  transition: transform 200ms var(--ease-out);
}
.pdp-d-tweak-cat.is-collapsed .pdp-d-tweak-cat-h .chev {
  transform: rotate(-90deg);
}
.pdp-d-tweak-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px 0;
}

/* F1 (v0.8.0): kategória meta (popis + bulk toggle). Sedí pod hlavičkou
   kategórie a nad zoznamom toggleov. */
.pdp-d-tweak-cat-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.pdp-d-tweak-cat-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.pdp-d-tweak-cat-bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-2);
}
.pdp-d-tweak-cat-bulk button {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-1);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.pdp-d-tweak-cat-bulk button:hover {
  color: var(--color-1-darker);
}

/* Single toggle row */
.pdp-d-tweak-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.pdp-d-tweak-toggle:hover {
  background: var(--bg-soft, #F7FAFC);
}
.pdp-d-tweak-toggle.is-segment {
  cursor: default;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.pdp-d-tweak-toggle-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.pdp-d-tweak-toggle-l .nm {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi, 600);
  color: var(--ink-2, #111);
  line-height: 1.3;
}
.pdp-d-tweak-toggle-l .ds {
  font-size: 11px;
  color: var(--muted, #666);
  line-height: 1.35;
}
.pdp-d-tweak-toggle.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Boolean switch */
.pdp-d-tweak-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--line, #E2E8F0);
  border-radius: 999px;
  transition: background 160ms var(--ease-out);
}
.pdp-d-tweak-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pdp-d-tweak-switch .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 160ms var(--ease-out);
}
.pdp-d-tweak-switch.is-on {
  background: var(--color-1);
}
.pdp-d-tweak-switch.is-on .thumb {
  transform: translateX(16px);
}
.pdp-d-tweak-switch input:focus-visible + .thumb {
  box-shadow: 0 0 0 3px rgba(0, 119, 188, 0.28);
}

/* Enum segmented control */
.pdp-d-tweak-segment {
  display: inline-flex;
  width: 100%;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.pdp-d-tweak-segment button {
  appearance: none;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semi, 600);
  color: var(--ink-2, #111);
  cursor: pointer;
  border-right: 1px solid var(--line-soft, #EEE);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
  line-height: 1.2;
}
.pdp-d-tweak-segment button:last-child {
  border-right: 0;
}
.pdp-d-tweak-segment button:hover {
  background: var(--bg-soft, #F7FAFC);
}
.pdp-d-tweak-segment button.is-on {
  background: var(--color-1);
  color: #fff;
}
.pdp-d-tweak-segment button:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: -2px;
}

/* Below 600px the panel goes full-width (minus 16px gutter) */
@media (max-width: 600px) {
  .pdp-d-tweak-panel {
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    bottom: 84px;
  }
  .pdp-d-tweak-fab {
    right: 16px;
    bottom: 16px;
  }
}

/* ============================================================
   Hide legacy showcase tweak panel (preserved in HTML for external
   editmode postMessage integration; React DTweakPanel is primary UI)
   ============================================================ */
#tweak-toggle,
#tweak-panel { display: none !important; }

/* ============================================================
   v0.7.1 polish - GALLERY LIGHTBOX (desktop)
   Mirrors the mobile .p-lightbox layout: solid dark backdrop
   (raw rgba, not a hex literal), centered image stage, X close
   top-right, prev/next arrow buttons on the long edges, and a
   counter pill bottom-centre. ESC + arrow keys handled in JS.
   Z-index 9000 to clear the legacy + floating tweak panels.
   DS tokens only.
   ============================================================ */

@keyframes pdp-d-lightbox-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pdp-d-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: pdp-d-lightbox-fadein 220ms var(--ease-out);
}
.pdp-d-lightbox-stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.pdp-d-lightbox-stage img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
.pdp-d-lightbox-stage > div:not(img) {
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  background: var(--surface);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.pdp-d-lightbox-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 160ms var(--ease-out);
}
.pdp-d-lightbox-close:hover,
.pdp-d-lightbox-close:active { background: rgba(255, 255, 255, .26); }
.pdp-d-lightbox-close:focus-visible {
  outline: 2px solid var(--surface);
  outline-offset: 2px;
}
.pdp-d-lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 160ms var(--ease-out);
}
.pdp-d-lightbox-nav.is-prev { left: 24px; }
.pdp-d-lightbox-nav.is-next { right: 24px; }
.pdp-d-lightbox-nav:hover,
.pdp-d-lightbox-nav:active { background: rgba(255, 255, 255, .26); }
.pdp-d-lightbox-nav:focus-visible {
  outline: 2px solid var(--surface);
  outline-offset: 2px;
}
.pdp-d-lightbox-counter {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--surface);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .12);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}