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

/* Konverzné CTA akcenty — oranžová namiesto modrej (len pre CTA, nie celá paleta) */
:root {
  --cta:         #F96628;
  --cta-hover:   #FF8A4D;
  --cta-press:   #C44A15;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #eef1f4; }
body { font-family: var(--font-body); color: var(--ink); }

/* ===== Device stage ===== */
.p-stage {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 600px at 20% 0%, #e6f1fa 0%, transparent 60%),
    radial-gradient(800px 500px at 100% 100%, #f0f7fc 0%, transparent 55%),
    #eef1f4;
}

/* ===== Frame root ===== */
.p {
  width: 100%; height: 100%; background: #fff;
  color: var(--ink); font-family: var(--font-body);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

/* ========= M4a: TOP PROMO ANNOUNCEMENT BAR =========
   Optional dark strip above the .p-hd header (tweak: promo_bar,
   default OFF). Mobile single-line variant of PDPDesktop .pdp-d-top:
   no extra links, no country flag, copy truncates if it overflows.
   DS tokens only - no new hex literals. */
.p-promo {
  position: relative; z-index: 1;
  background: var(--color-1-darker);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-med);
  letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-1-darker);
}
.p-promo .ic { display: inline-flex; color: var(--color-1-light); flex-shrink: 0; }
.p-promo strong { font-weight: var(--fw-bold); color: var(--surface); letter-spacing: 0.015em; }

/* ========= HEADER (matches web layout: MENU / NAMAXIMUM / ikony) ========= */
.p-hd {
  position: sticky; top: 0; z-index: 30;
  background: #0A0A0A;
  padding: 54px 0 0;
  display: flex; align-items: stretch;
  height: 100px;
  border-bottom: 1px solid #000;
}
/* Blue MENU block on the left */
.p-hd-menu {
  width: 52px; flex-shrink: 0;
  background: var(--color-1);
  border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer;
  color: #fff;
}
.p-hd-menu .burger {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  width: 22px;
}
.p-hd-menu .burger span {
  display: block; height: 2.5px; background: #fff; border-radius: 1px;
}
.p-hd-menu .lbl {
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  letter-spacing: 0.1em; color: #fff;
}

/* Wordmark */
.p-hd-logo {
  display: flex; align-items: center;
  padding: 0 8px; text-decoration: none;
  color: #fff; flex: 0 0 auto;
}
.p-hd-logo img {
  display: block;
  height: 18px; width: auto;
}

/* Right side icon cluster */
.p-hd-tools {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0; padding-right: 6px;
}
.p-hd-ic {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: #fff; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.p-hd-badge {
  position: absolute; top: -1px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  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;
  line-height: 1;
  border: 2px solid #0A0A0A;
}
.p-hd-badge.fav { background: var(--color-1); }

/* ========= M4a: TOP CATEGORIES NAV =========
   Horizontal scroll pill row pinned under .p-hd. Mirrors PDPDesktop
   .pdp-d-hd-nav layout but uses tap-friendly pills (44px touch target)
   instead of underlined nav items. Always-on - no tweak. The accent
   modifier (Akcie / Akciók!) flips to brand orange.
   DS tokens only - no new hex literals. */
.p-topcats {
  position: relative; z-index: 1;
  background: var(--color-1-darker);
  border-bottom: 1px solid var(--color-1-darker);
}
.p-topcats-row {
  display: flex; align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.p-topcats-row::-webkit-scrollbar { display: none; }
.p-topcat {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-topcat:hover,
.p-topcat:active { background: rgba(255, 255, 255, 0.06); }
.p-topcat.is-accent {
  background: var(--color-2);
  color: var(--surface);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.p-topcat.is-accent:hover,
.p-topcat.is-accent:active { background: var(--cta-press); }

/* ========= VALUE-PROPS ROTATOR (v0.7.1 polish) =========
   Was a 4-pill horizontal scroll; now cycles one pill at a time every
   3500ms with a fade-rotate. Centered, single line, pauses on
   hover/touch via the .is-paused flag (set from JS handlers). Sits
   between top categories nav and breadcrumbs. DS tokens only.
   .p-valprops legacy class kept around as alias in case any other
   surface still queries it; no rules emitted under that name now. */
.p-valprops-rotator {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px;
  min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.p-valprop {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-align: center;
}
.p-valprop .ic {
  display: inline-flex;
  color: var(--color-1);
  flex-shrink: 0;
}
.p-valprop.is-rotating {
  animation: vpFade 350ms var(--ease-out);
  will-change: opacity, transform;
}
@keyframes vpFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sticky mini-bar (appears on scroll past CTA) */
.p-sticky-mini {
  position: absolute; left: 0; right: 0; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 62px 12px 10px;
  display: flex; align-items: center; gap: 10px;
  transform: translateY(-110%); transition: transform 260ms var(--ease-out);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.p-sticky-mini.on { transform: translateY(0); }
.p-sticky-mini .img {
  width: 40px; height: 40px; border-radius: 8px; background: #F7F8FA;
  border: 1px solid var(--line-soft); display: flex; align-items: center;
  justify-content: center; padding: 4px; flex-shrink: 0;
}
.p-sticky-mini .nm {
  flex: 1; min-width: 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-sticky-mini .nm small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.p-sticky-mini .mini-cta {
  height: 38px; padding: 0 14px; background: var(--cta); color: #fff;
  border: 0; border-radius: 10px; font-family: var(--font-heading);
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  flex-shrink: 0;
}

/* ========= STICKY TAB ANCHOR NAV (M1c) =========
   Mobile pattern: horizontal pill bar that fades in below the
   sticky-mini header once the user has scrolled past the hero. Sits at
   y=113px (matches sticky-mini measured height; clears it cleanly).
   v0.7.1 polish: was top:100px which overlapped the mini ATC by 13px;
   bumped to 113 + a 1px DS-token shadow for clean separation. */
.p-tabnav {
  position: absolute; left: 0; right: 0; top: 113px; z-index: 39;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(0, 0, 0, .04);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.p-tabnav.on {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.p-tabnav-track {
  display: flex; align-items: stretch; gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.p-tabnav-track::-webkit-scrollbar { display: none; }
.p-tabnav-pill {
  flex: 0 0 auto;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-3);
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.p-tabnav-pill:hover { color: var(--color-1); border-color: var(--color-1-lighter); }
.p-tabnav-pill.is-active {
  background: var(--color-1);
  border-color: var(--color-1);
  color: #fff;
}

/* ========= VARIANT MATRIX CARD LIST (M1c) =========
   Mobile-friendly equivalent of the desktop pdp-d-vartab table. Cards
   stack vertically inside per-size groups. Tapping a card calls
   setSize / setFlavor on the parent so the buy-panel updates live. */
.p-vartab {
  padding: 16px; border-top: 8px solid var(--bg-soft);
}
.p-vartab .p-sect-title { margin-bottom: 14px; }
.p-vartab-group + .p-vartab-group { margin-top: 18px; }
.p-vartab-group-hd {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--color-1-darker); color: #fff;
  border-radius: 8px;
}
.p-vartab-group-hd .sz {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
}
.p-vartab-group-hd .cnt {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  opacity: .78;
}
.p-vartab-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; margin: 0 0 8px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 10px; cursor: pointer; text-align: left;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.p-vartab-card:last-child { margin-bottom: 0; }
.p-vartab-card:hover { border-color: var(--color-1-lighter); }
.p-vartab-card.is-active {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  box-shadow: 0 0 0 3px rgba(0, 119, 188, .12);
}
.p-vartab-card.is-out {
  opacity: .55; cursor: not-allowed;
  background: var(--bg-alt);
}
.p-vartab-thumb {
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 8px; background: #F7F8FA;
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; overflow: hidden;
}
.p-vartab-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.p-vartab-info { flex: 1; min-width: 0; }
.p-vartab-nm {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); line-height: 1.25;
}
.p-vartab-nm .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08); flex-shrink: 0;
}
.p-vartab-nm .flavor { flex: 0 1 auto; }
.p-vartab-nm .size {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  color: var(--muted); margin-left: 2px;
}
.p-vartab-price {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.p-vartab-price .now {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.p-vartab-price .orig {
  font-size: 11px; color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.p-vartab-price .per {
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-vartab-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px;
  letter-spacing: .02em; white-space: nowrap;
}
.p-vartab-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.p-vartab-chip.is-in {
  background: var(--color-success-bg, rgba(38, 187, 89, .08));
  color: var(--color-ok);
  border-color: rgba(38, 187, 89, .18);
}
.p-vartab-chip.is-in .dot { background: var(--color-success); }
.p-vartab-chip.is-low {
  background: rgba(249, 200, 14, .12);
  color: var(--color-warn-ink);
  border-color: rgba(249, 200, 14, .28);
}
.p-vartab-chip.is-low .dot { background: #F9C80E; }
.p-vartab-chip.is-restock {
  background: var(--color-1-tint);
  color: var(--color-1-darker);
  border-color: var(--color-1-lighter);
}
.p-vartab-chip.is-restock .dot { background: var(--color-1); }
.p-vartab-chip.is-out {
  background: var(--bg-alt);
  color: var(--muted);
  border-color: var(--line);
}
.p-vartab-chip.is-out .dot { background: var(--muted-2); }

/* ========= VIDEO TAB (M1c block 3) =========
   Renders raw description_video HTML from product_translations 1:1 with
   the desktop module. Width/height attrs from Froala iframes are
   overridden for fluid 16:9 sizing on mobile. */
.p-video {
  display: flex; flex-direction: column; gap: 12px;
}
.p-video-body { display: flex; flex-direction: column; gap: 14px; }
/* Empty paragraphs and the trailing data-file link are layout debris
   from Froala; hide them so the embed stack stays tight. */
.p-video-body p:empty,
.p-video-body p > a[data-file]:only-child {
  display: none;
}
.p-video-body p { margin: 0; }
.p-video-body figure {
  margin: 0; position: relative;
  padding-bottom: 56.25%; height: 0;
  border-radius: 12px; overflow: hidden;
  background: #0A0A0A;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.p-video-body figure iframe,
.p-video-body iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0;
}
.p-video-empty {
  padding: 24px 12px; text-align: center;
  font-size: 13px; color: var(--muted);
  background: var(--bg-soft); border-radius: 10px;
}

/* ========= FILES TAB (M1c block 4) =========
   Each entry is a tap-target row: PDF icon, name, type chip + size,
   chevron download affordance. Mirrors desktop pdp-d-file styling but
   slimmed to a single column on small screens. */
.p-files {
  display: flex; flex-direction: column; gap: 10px;
}
.p-files-sub {
  margin: 0;
  font-size: 12px; color: var(--muted); line-height: 1.45;
}
.p-files-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.p-file-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none;
  color: var(--ink-2);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.p-file-item:active {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  box-shadow: 0 4px 14px rgba(0, 119, 188, .10);
}
.p-file-icon {
  flex-shrink: 0; width: 32px; height: 40px;
  display: inline-flex; color: var(--ink-3);
}
.p-file-icon svg { display: block; }
.p-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.p-file-nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); line-height: 1.3;
}
.p-file-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); letter-spacing: .03em;
}
.p-file-type {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  font-family: var(--font-heading); font-weight: 800; font-size: 9.5px;
  letter-spacing: .06em; color: var(--ink-3);
  text-transform: uppercase;
}
.p-file-dl {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(90deg);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-file-item:active .p-file-dl {
  background: var(--color-1);
  color: #fff;
}

/* ========= BODY =========
   v0.7.1 polish: dropped padding-bottom (was 140px). The footer now
   carries its own 100px bottom padding (calc(--s-5 + 80px)) which
   keeps the legal line ~17px above the 83px sticky ATC bar. Keeping
   both paddings stacked produced a ~157px visible void between the
   legal line and the sticky bar (user feedback: 'paticka nekonci na
   konci stranky'). */
.p-body {
  flex: 1; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* ========= BREADCRUMBS ========= */
.p-bc {
  display: flex; align-items: center; gap: 4px; padding: 10px 16px 0;
  font-size: 11px; color: var(--muted); overflow-x: auto;
  white-space: nowrap;
}
.p-bc::-webkit-scrollbar { display: none; }
.p-bc a { color: var(--muted); }
.p-bc .sep { color: var(--muted-2); }
.p-bc .cur { color: var(--ink-2); font-weight: 600; }

/* ========= GALLERY ========= */
.p-gal { margin: 8px 0 0; position: relative; }
.p-gal-viewport {
  position: relative; aspect-ratio: 1; width: 100%;
  /* v0.7.3: white background to match the product photos' own white
     backdrop. Previously #F7F8FA created a visible grey frame around
     the on-white WPC 80 hero photo. */
  background: var(--surface);
  overflow: hidden;
}
.p-gal-track {
  display: flex; width: 100%; height: 100%;
  scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.p-gal-track::-webkit-scrollbar { display: none; }
.p-gal-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  /* v0.7.3: padding dropped 40px -> 0 so the photo fills the
     viewport edge-to-edge. The hero stays comfortably sized
     because the source images are already framed with their
     own internal whitespace. */
  padding: 0; position: relative;
}
/* Flags overlay top-left */
.p-gal-flags {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}
.p-gal-flags img { width: 40px; height: 40px; display: block; }
/* M3b: gallery overlay flags (sale + recommend pills). Always-on; sits
   above the gallery slide via absolute positioning, never blocks dot
   navigation thanks to pointer-events: none. is-sale pill anchors the
   top-left strip (offset right past the cert circles); is-rec pill
   anchors the top-right strip (offset down past the video pill). Tokens
   only - sale uses --color-error, rec uses --color-1, foreground uses
   --surface. */
.p-gal-overlays {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
}
.p-gal-flag {
  position: absolute;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
.p-gal-flag.is-sale {
  top: 12px; left: 60px;
  background: var(--color-error);
}
.p-gal-flag.is-rec {
  top: 50px; right: 12px;
  background: var(--color-1);
}
/* Videorecenzia pill top-right */
.p-gal-video {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(0,0,0,.75); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: .06em;
}
.p-gal-video .play {
  width: 16px; height: 16px; border-radius: 50%; background: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
}
.p-gal-video .play::after {
  content: ''; width: 0; height: 0; border-left: 5px solid #fff;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  margin-left: 2px;
}
/* Zoom hint bottom-right */
.p-gal-zoom {
  position: absolute; bottom: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
/* v0.7.1 polish: share button paired with .p-gal-zoom in the bottom-right
   corner. Sat in the .p-atc-row before but cramped 'Pridat do kosika' on
   small viewports. Same circular surface treatment as zoom for visual
   pairing. DS tokens only. */
.p-gallery-share {
  position: absolute; bottom: 12px; right: 56px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.p-gallery-share:hover  { border-color: var(--ink); color: var(--color-1); }
.p-gallery-share:active { transform: scale(.96); }
.p-gallery-share:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}
/* Dots */
.p-gal-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 6px;
}
.p-gal-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(27,27,27,.3);
  transition: all 200ms;
}
.p-gal-dots span.on { background: var(--color-1); width: 18px; border-radius: 999px; }
/* Thumbs row */
.p-gal-thumbs {
  display: flex; gap: 8px; padding: 10px 16px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.p-gal-thumbs::-webkit-scrollbar { display: none; }
.p-gal-thumb {
  flex: 0 0 56px; height: 56px; border-radius: 8px;
  /* v0.7.3: white thumb background to match white product photos.
     Padding kept (4px) so the thumb keeps a tiny inner gutter; the
     selected (.on) state still flips to --color-1-tint accent. */
  background: var(--surface); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; cursor: pointer; position: relative;
  transition: border-color 160ms var(--ease-out);
}
.p-gal-thumb.on { border-color: var(--color-1); }
.p-gal-thumb.video::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35);
  border-radius: 6px;
}
.p-gal-thumb.video::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%); z-index: 2;
  width: 0; height: 0; border-left: 9px solid #fff;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  margin-left: 2px;
}

/* ========= HEAD BLOCK (title, rating, price, stock) ========= */
.p-head { padding: 4px 16px 16px; }
/* Multi-brand row above the title. Mirrors PDPDesktop .pdp-d-brandrow but
   tightened for mobile (smaller font, less side padding). Each brand is a
   plain link in --color-1; the label is rendered slightly heavier in --ink-2
   so the chain reads "Značka: Warrior, Natural Nutrition" naturally. */
.p-brandrow {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px;
  margin: 0 0 6px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-3);
}
.p-brandrow .brand-lbl {
  font-weight: 700; color: var(--ink-2);
}
.p-brandrow .brand-link {
  color: var(--color-1); text-decoration: none;
  font-weight: 600;
}
.p-brandrow .brand-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.p-head h1 {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--ink-2); line-height: 1.25; margin: 0 0 10px;
  letter-spacing: -0.01em; text-wrap: pretty;
}
/* Product flag chips below the title. Compact pills (SALE / RECOMMEND).
   Wrap on narrow widths via flex-wrap. is-sale uses --color-sale (red),
   is-rec uses --color-1 (brand blue) so the row reads as semantically
   distinct status surfaces, mirroring desktop .pdp-d-flag. */
.p-flags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
}
.p-flag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; border-radius: 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--surface);
}
.p-flag.is-sale { background: var(--color-sale); }
.p-flag.is-rec  { background: var(--color-1); }
.p-head .meta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.p-rating-inline {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--ink-3);
}
.p-rating-inline .stars { display: inline-flex; gap: 2px; color: #F9C80E; font-size: 13px; }
.p-rating-inline strong { font-family: var(--font-heading); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.p-rating-inline a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
/* Dot separator between reviews link and Q&A count link. Mirrors the
   desktop .pdp-d-rating .sep visual: muted, non-selectable, slight
   negative margin to tighten against the surrounding links. */
.p-rating-inline .sep {
  color: var(--muted-2);
  margin: 0 -2px;
  user-select: none;
}
.p-sku {
  font-size: 11px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 10px;
}

.p-stock {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(38,187,89,.08); color: var(--color-ok);
  font-size: 12px; font-weight: 700;
}
.p-stock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.p-stock.low { background: #FFF7E6; color: var(--color-warn-ink); }
.p-stock.low .dot { background: #F5A623; }
.p-stock.out { background: #FBEAEA; color: var(--color-sale); }
.p-stock.out .dot { background: var(--color-sale); }

/* Price block */
.p-price {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 4px;
}
.p-price .now {
  font-family: var(--font-heading); font-weight: 900; font-size: 32px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; line-height: 1;
}
.p-price .orig {
  font-family: var(--font-heading); font-weight: 500; font-size: 15px;
  color: var(--muted); text-decoration: line-through;
  font-variant-numeric: tabular-nums; padding-bottom: 2px;
}
.p-price .flag {
  height: 24px; padding: 0 8px; background: var(--color-sale);
  color: #fff; border-radius: 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; letter-spacing: .02em;
}
.p-price-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.p-price-sub .num {
  color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* M3b: savings clause appended to price-sub when origPrice > rawPrice.
   Mirrors PDPDesktop .pdp-d-price-sub .saved color/weight; sale red so the
   eye lands on the saved amount. Inline span keeps it on the same line as
   VAT + per-kg, wrapping naturally on narrow viewports. */
.p-price-sub .saved {
  color: var(--color-sale); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* M3b: discount countdown chip rendered after .p-price-sub. Mirrors
   PDPDesktop .pdp-d-countdown design language with mobile-tuned 12px text
   and an 8px clock-icon gap. Aggressive state (default) leans on
   --color-sale tinted gradient + a sale-red left rule, soft state (>26h)
   swaps to brand --color-1-tint surface so the countdown reads as informative
   rather than urgent. Tokens only - no hex literals introduced. */
.p-countdown {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-error-bg);
  border-left: 3px solid var(--color-sale);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
}
.p-countdown .ic   { color: var(--color-sale); display: inline-flex; }
.p-countdown .lbl  { color: var(--muted); }
.p-countdown .time {
  margin-left: auto;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 13px;
  color: var(--color-sale);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.p-countdown .time b { font-weight: 800; }
.p-countdown.is-soft {
  background: var(--color-1-tint);
  border-left-color: var(--color-1);
}
.p-countdown.is-soft .ic { color: var(--color-1); }

/* M3b: product expiration warning chip (Latte: $productExpiration).
   Caution palette using the warn token trio (bg / border / ink) so the
   row reads as informative-not-blocking. Sits below the countdown,
   above the short-desc bullets. Mirrors PDPDesktop .pdp-d-expiration
   semantics but mobile-tuned 12px text + tighter padding. */
.p-expiration {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-warn-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.p-expiration .ic { display: inline-flex; flex-shrink: 0; }

/* M3b: trust strip below gallery (Latte: tile group above description).
   2x2 grid of reassurance tiles. Mirrors PDPDesktop .pdp-d-trust visual
   language but mobile-tuned: 8px gap, 10px padding, white surface tiles
   on bg-soft. Icon chip is white-on-line with brand-blue glyph; title is
   13px/600 in heading font, desc is 11px/muted. Tokens only - no hex. */
.p-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 0;
}
.p-trust-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.p-trust-item .ic {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--color-1);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  margin-top: 1px;
}
.p-trust-item .body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.p-trust-item .t {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.p-trust-item .d {
  font-size: 11px; color: var(--muted);
  line-height: 1.35;
  text-wrap: balance;
}
.p-pricedash {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding-top: 10px; margin-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.p-pricedash .saved {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-sale); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ========= SHORT DESC (evidence bullets) ========= */
.p-desc {
  padding: 0 16px 18px;
}
.p-desc ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.p-desc li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.4; color: var(--ink-3);
}
.p-desc li .ic {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--color-ok);
  margin-top: 1px;
}
.p-desc li strong { color: var(--ink-2); font-family: var(--font-heading); font-weight: 700; }
.p-evidence {
  margin-top: 12px; padding: 12px;
  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: 8px;
}
.p-evidence .ic { color: var(--color-1); flex-shrink: 0; margin-top: 1px; }
.p-evidence a { color: var(--color-1); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Alternative names line below the evidence callout. Mirrors desktop
   .pdp-d-altnames: small italic synonyms strip separated from bullets
   above by a dotted top border so it reads as auxiliary meta, not
   primary copy. */
.p-altnames {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dotted var(--line);
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.5;
}
.p-altnames em {
  font-style: italic;
  color: var(--ink-3);
}

/* Standalone EAN row below the alt names line. Mirrors desktop
   .pdp-d-ean: muted uppercase label + monospace value so the active
   variant identifier reads clearly when it changes via size / flavor
   selection. The inline SKU/EAN in .meta-row above the price stays as
   well so users still get the identifier above the fold. */
.p-ean-row {
  display: inline-flex; gap: 6px;
  margin-top: 6px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.p-ean-row .k {
  font-weight: 700; text-transform: uppercase;
}
.p-ean-row .v {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ========= VARIANT PICKER — BALENIE ========= */
.p-variant {
  padding: 16px; border-top: 8px solid var(--bg-soft);
}
.p-variant .label {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.p-variant .label .lbl {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase;
}
.p-variant .label .lbl .count {
  color: var(--muted); font-weight: 500; margin-left: 4px;
  letter-spacing: 0; text-transform: none;
}
.p-variant .label .chosen {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-3);
  font-weight: 500;
}

.p-sizes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.p-size {
  position: relative; padding: 12px 10px 10px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: all 160ms var(--ease-out);
}
.p-size .sz {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); letter-spacing: -0.01em;
}
.p-size .pr {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.p-size .per {
  font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.p-size .badge {
  position: absolute; top: -8px; right: 8px;
  height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--color-1); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  letter-spacing: .04em; display: inline-flex; align-items: center;
}
.p-size .badge.save { background: var(--color-sale); }
.p-size.on {
  border-color: var(--color-1); background: var(--color-1-tint);
  box-shadow: 0 0 0 3px rgba(0,119,188,.12);
}
.p-size.out {
  opacity: .45; cursor: not-allowed;
  background: var(--bg-alt);
}
.p-size.out::after {
  content: 'vypredané'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-6deg);
  font-family: var(--font-heading); font-weight: 700; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-sale); background: #fff;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--color-sale);
}

/* ========= VARIANT PICKER — PRÍCHUŤ ========= */
.p-flavors {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.p-flavor {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; 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);
}
.p-flavor .swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
}
.p-flavor.on {
  border-color: var(--color-1); background: var(--color-1-tint);
  color: var(--color-1-darker);
}
.p-flavor.out {
  opacity: .45; text-decoration: line-through; cursor: not-allowed;
}

/* ========= ADD TO CART BLOCK ========= */
.p-atc {
  padding: 16px; border-top: 8px solid var(--bg-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.p-atc-row {
  display: flex; align-items: center; gap: 10px;
}
.p-qty {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden; height: 52px;
}
.p-qty button {
  width: 36px; border: 0; background: #fff; color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.p-qty button:hover { color: var(--color-1); }
.p-qty button:disabled { color: var(--muted-2); cursor: not-allowed; }
.p-qty .val {
  width: 28px; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
.p-atc-btn {
  flex: 1; min-width: 0; height: 52px; padding: 0 10px;
  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; justify-content: center; gap: 8px;
  cursor: pointer; transition: all 160ms var(--ease-out);
  box-shadow: var(--shadow-md); white-space: nowrap;
}
.p-atc-btn:hover { background: var(--cta-press); transform: translateY(-1px); }
.p-atc-btn:active { transform: translateY(0); }
.p-atc-btn.added { background: var(--color-success); }
.p-atc-btn.out { background: var(--muted-2); color: #fff; cursor: not-allowed; box-shadow: none; }

.p-fav {
  width: 44px; height: 52px; 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; flex-shrink: 0;
  transition: all 160ms var(--ease-out);
}
.p-fav:hover { border-color: var(--ink); color: var(--color-sale); }
.p-fav.on { border-color: var(--color-sale); color: var(--color-sale); background: #FBEAEA; }
.p-fav.on svg { fill: var(--color-sale); }

/* ========= QUANTITY DISCOUNT TIERS (M2b) =========
   Mirrors PDPDesktop pdp-d-qtytiers, scaled down for mobile density.
   Three rows; active tier (qty within range) gets color-1 border + tint. */
.p-qtytiers {
  padding: 10px 12px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.p-qtytiers-h {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.p-qtytiers-h .ic { color: var(--color-1); display: inline-flex; }
.p-qtytiers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.p-qtytiers li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px; color: var(--ink-3);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.p-qtytiers li.is-active {
  border-color: var(--color-1);
  background: var(--color-1-tint);
  color: var(--ink-2);
}
.p-qtytiers .qt-range { font-weight: 600; }
.p-qtytiers .qt-prc {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.p-qtytiers .qt-prc strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  color: var(--ink-2);
}
.p-qtytiers li.is-active .qt-prc strong { color: var(--color-1-darker); }
.p-qtytiers .qt-prc em {
  font-style: normal; font-size: 10px; color: var(--muted);
}
.p-qtytiers .qt-save {
  background: var(--color-sale);
  color: var(--surface);
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  padding: 2px 6px; border-radius: 999px;
  margin-left: 2px;
}

/* ========= GIFT BONUS BLOCK (M2b) =========
   Mirrors PDPDesktop pdp-d-giftblock; mobile uses 40x40 picks (vs desktop 36px),
   stacks header above CTA on narrow widths, and accents the limited-action vibe
   with --color-2 (orange) on a --color-1-tint background. */
.p-giftblock {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-1-tint);
  border: 1px solid var(--color-1-lighter);
  border-radius: 10px;
}
.p-giftblock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.p-giftblock-h {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.p-giftblock-h .giftic {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-2);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p-giftblock-h strong {
  display: block;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  color: var(--ink-2);
  line-height: 1.2;
}
.p-giftblock-h span {
  display: block;
  font-size: 11px; color: var(--ink-3);
  line-height: 1.35;
  margin-top: 2px;
}
.p-giftblock .gp-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-2);
  background: var(--surface);
  border: 1.5px solid var(--color-2);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-giftblock .gp-btn:hover { background: var(--color-2); color: var(--surface); }

.p-giftblock-picks {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.p-giftblock-pick {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.p-giftblock-pick:hover {
  transform: translateY(-1px);
  border-color: var(--color-2);
}
.p-giftblock-pick-shape {
  width: 22px; height: 22px;
  display: block;
  position: relative;
}
/* Shaker icon: tall rectangle with cap. */
.p-giftblock-pick.is-shaker .p-giftblock-pick-shape {
  width: 14px;
  height: 24px;
  border-radius: 3px;
  background: var(--color-1-tint);
  border: 1.5px solid var(--color-1);
}
.p-giftblock-pick.is-shaker .p-giftblock-pick-shape::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 4px;
  border-radius: 2px;
  background: var(--color-1);
}
/* Sample sachet: square with diagonal stripe. */
.p-giftblock-pick.is-sample .p-giftblock-pick-shape {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: var(--color-1-tint);
  border: 1.5px solid var(--color-1);
  overflow: hidden;
}
.p-giftblock-pick.is-sample .p-giftblock-pick-shape::after {
  content: '';
  position: absolute;
  top: 50%; left: -10%;
  width: 120%; height: 4px;
  background: var(--color-1);
  transform: translateY(-50%) rotate(-18deg);
}
.p-giftblock-counter {
  font-family: var(--font-body);
  font-size: 11px; color: var(--ink-3);
  font-weight: 600;
}

.p-ship-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  padding: 10px 12px; background: var(--bg-soft);
  border-radius: 10px;
}
.p-ship-info .ic { color: var(--color-1); flex-shrink: 0; }
.p-ship-info strong { font-family: var(--font-heading); font-weight: 700; color: var(--ink-2); }

/* ========= SHIPPING OPTIONS EXPANDER (M2b) =========
   Mirrors PDPDesktop pdp-d-shipopts; collapsible carrier list with
   toggle button + chev rotation. Free shipping price gets --color-ok. */
.p-shipopts {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 160ms var(--ease-out);
}
.p-shipopts.is-open { border-color: var(--color-1-lighter); }
.p-shipopts-tg {
  width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.p-shipopts-tg .ic { color: var(--color-1); display: inline-flex; }
.p-shipopts-tg .chev {
  margin-left: auto;
  display: inline-flex;
  color: var(--muted);
  transition: transform 200ms var(--ease-out);
}
.p-shipopts.is-open .p-shipopts-tg .chev {
  transform: rotate(90deg);
}
.p-shipopts-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.p-shipopt {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}
.p-shipopt:first-child { border-top: 0; }
.p-shipopt .so-ic { color: var(--color-1); display: inline-flex; }
.p-shipopt .so-nm { color: var(--ink-2); font-weight: 600; }
.p-shipopt .so-tm {
  color: var(--muted); font-size: 11px;
  white-space: nowrap;
}
.p-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;
}
.p-shipopt .so-pr.is-free { color: var(--color-ok); }

/* Free shipping progress */
.p-free {
  padding: 10px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; font-size: 12px; color: var(--ink-3);
}
.p-free-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.p-free-bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.p-free-fill { height: 100%; background: linear-gradient(90deg, var(--color-1-light), var(--color-1)); border-radius: 999px; }

/* ========= CERTIFICATIONS ========= */
.p-certs { padding: 16px; border-top: 8px solid var(--bg-soft); }
.p-sect-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--ink-2); margin: 0 0 12px; letter-spacing: -0.01em;
  display: flex; align-items: baseline; justify-content: space-between;
}
.p-sect-title small {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  color: var(--muted); letter-spacing: 0;
}
.p-certs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.p-cert {
  aspect-ratio: 1; background: #fff; border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; cursor: pointer;
  transition: border-color 160ms;
}
.p-cert:hover { border-color: var(--ink); }
.p-cert img { width: 100%; height: 100%; object-fit: contain; }
.p-cert-note {
  margin-top: 10px; font-size: 11px; color: var(--muted); line-height: 1.4;
  text-wrap: pretty;
}
.p-cert-note a { color: var(--color-1); font-weight: 600; }

/* ========= TABS (nutri, zloženie, dávkovanie) ========= */
.p-tabs { border-top: 8px solid var(--bg-soft); }
.p-tabs-head {
  display: flex; flex-wrap: wrap; gap: 0 4px; padding: 0 4px;
  border-bottom: 1px solid var(--line); overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  /* v0.8.6: was position: sticky; top: 0; z-index: 5 - which collided
     visually with the .p-sticky-mini bar (also at top:0, z-index:40)
     once the user scrolled into the tabs section. The mini bar covered
     the tabs head and the two stacked at the same y produced an awkward
     overlap (user annotation: 'tento sticky prvok na mobile nehra pekne
     s sticky toolbarom nad nim.. s kupit.. prekryvaju sa'). Tabs body is
     short enough that scrolling within it without a sticky head is fine. */
}
.p-tabs-head::-webkit-scrollbar { display: none; }
.p-tabs-head button {
  flex: 0 0 auto; padding: 12px 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--muted); position: relative;
  white-space: nowrap;
}
.p-tabs-head button.on { color: var(--ink-2); font-weight: 700; }
.p-tabs-head button.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--color-1);
}
.p-tabs-body { padding: 16px; }

/* Nutrition table */
.p-nutri {
  font-size: 13px;
}
.p-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: .08em; text-transform: uppercase; color: var(--muted);
}
.p-nutri .hd > *:not(:first-child) { text-align: right; }
.p-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);
}
.p-nutri .row > *:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-2); font-weight: 600;
}
.p-nutri .row.indent > *:first-child { padding-left: 12px; color: var(--muted); font-size: 12px; }
.p-nutri .row.indent > *:not(:first-child) { color: var(--ink-3); font-weight: 500; }
.p-nutri .row.hl { background: var(--color-1-tint); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 0; }
.p-nutri .row.hl > *:first-child { color: var(--ink-2); font-weight: 700; }
.p-nutri .row.hl > *:not(:first-child) { color: var(--color-1-darker); font-weight: 700; }

/* Zloženie paragraph */
.p-ingredients p {
  font-size: 13px; line-height: 1.5; color: var(--ink-3);
  margin: 0 0 10px; text-wrap: pretty;
}
.p-ingredients .allergen {
  padding: 10px 12px; background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border); border-radius: 8px;
  font-size: 12px; color: var(--color-warn-ink); font-weight: 600;
  display: flex; align-items: flex-start; gap: 8px;
}

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

/* ========= REVIEWS ========= */
.p-rev { padding: 16px; border-top: 8px solid var(--bg-soft); }
.p-rev-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: center; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.p-rev-score {
  text-align: center;
}
.p-rev-score .num {
  font-family: var(--font-heading); font-weight: 900; font-size: 40px;
  color: var(--ink-2); line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.p-rev-score .stars {
  color: #F9C80E; font-size: 14px; margin: 4px 0 2px;
}
.p-rev-score .cnt { font-size: 11px; color: var(--muted); }
.p-rev-dist { display: flex; flex-direction: column; gap: 3px; }
.p-rev-dist-row {
  display: grid; grid-template-columns: 14px 1fr 28px;
  gap: 6px; align-items: center;
  font-size: 10px; color: var(--muted);
}
.p-rev-dist-row .s { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-rev-dist-row .bar {
  height: 5px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.p-rev-dist-row .fill { height: 100%; background: #F9C80E; border-radius: 999px; }
.p-rev-dist-row .n { text-align: right; font-variant-numeric: tabular-nums; }

.p-rev-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1.5px dashed var(--line); border-radius: 10px;
  font-size: 12px; color: var(--ink-3);
}
.p-rev-cta button {
  height: 32px; padding: 0 12px; border-radius: 8px;
  background: #fff; border: 1.5px solid var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  color: var(--ink-2); cursor: pointer; flex-shrink: 0;
}

/* Filter bar */
.p-rev-filters {
  display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px;
  padding: 0 16px 10px; -webkit-overflow-scrolling: touch;
}
.p-rev-filters::-webkit-scrollbar { display: none; }
.p-rev-chip {
  flex: 0 0 auto; height: 30px; padding: 0 10px; 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: 4px;
  white-space: nowrap;
}
.p-rev-chip.on {
  background: var(--ink-2); border-color: var(--ink-2); color: #fff;
}
.p-rev-chip .n {
  opacity: .6; font-size: 11px; font-variant-numeric: tabular-nums;
}

/* Sort dropdown */
.p-rev-sort {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 12px; font-size: 12px; color: var(--muted);
}
.p-rev-sort select {
  border: 0; background: none; font-family: var(--font-body);
  font-weight: 600; font-size: 12px; color: var(--ink-2);
  cursor: pointer; padding-right: 16px;
  -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 center; background-size: 10px;
}

/* Review card */
.p-rev-item {
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.p-rev-item:last-child { border-bottom: 0; }
.p-rev-hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.p-rev-avatar {
  width: 34px; height: 34px; 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: 13px;
  flex-shrink: 0;
}
.p-rev-name { flex: 1; min-width: 0; }
.p-rev-name .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--ink-2); display: flex; align-items: center; gap: 6px;
}
.p-rev-name .verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--color-ok); font-weight: 600;
}
.p-rev-name .date { font-size: 11px; color: var(--muted); margin-top: 1px; }
.p-rev-item-stars { color: #F9C80E; font-size: 13px; }
.p-rev-t {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); margin-bottom: 4px;
}
.p-rev-b {
  font-size: 13px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty;
}
.p-rev-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.p-rev-tags .tg {
  font-size: 10px; font-weight: 600; color: var(--muted);
  padding: 2px 8px; background: var(--bg-alt); border-radius: 999px;
}
.p-rev-helpful {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  font-size: 11px; color: var(--muted);
}
.p-rev-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;
}
.p-rev-helpful button:hover { color: var(--color-1); }

.p-rev-more {
  width: 100%; height: 42px; margin-top: 12px;
  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: 13px;
  cursor: pointer;
}

/* ========= CROSS-SELL ========= */
.p-cross { padding: 20px 0 16px; border-top: 8px solid var(--bg-soft); }
.p-cross .p-sect-title { padding: 0 16px; }
.p-cross-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 4px 16px 10px;
  scroll-snap-type: x mandatory;
  /* v0.7.1 polish: align scroll-snap origin with the 16px content padding
     so the first card snaps flush with the section gutter instead of the
     viewport edge. Without this, the initial scrollLeft reads 16 because
     snap-target=container-edge eats the visual padding on first paint. */
  scroll-padding-inline-start: 16px;
  -webkit-overflow-scrolling: touch;
}
.p-cross-scroll::-webkit-scrollbar { display: none; }
.p-cross-card {
  flex: 0 0 160px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; scroll-snap-align: start;
  position: relative; display: flex; flex-direction: column;
}
/* v0.7.8 photo-unify: real CDN photos vary in composition (some
   full-bleed, some show two packshots with margin). To make the
   strip read as one consistent set, the image fills 100% of the
   square card. We drop the inner padding entirely so the photo
   meets the rounded card edge - the rounded radius + white surface
   keep cards visually unified even when individual photos differ.
   Hover adds a 4% scale + soft shadow lift for interactivity. */
.p-cross-card .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: 8px; margin-bottom: var(--s-2); position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out),
              transform   var(--dur-med) var(--ease-out);
}
.p-cross-card:hover .img {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.p-cross-card .img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-med) var(--ease-out);
}
.p-cross-card:hover .img img {
  transform: scale(1.04);
}
.p-cross-card .flag {
  position: absolute; top: 6px; left: 6px; background: var(--color-sale);
  color: #fff; font-family: var(--font-heading); font-weight: 700;
  font-size: 9px; padding: 2px 5px; border-radius: 3px;
}
.p-cross-card .flag.new { background: var(--color-1); }
.p-cross-card .nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--ink-2); line-height: 1.3; margin: 2px 0 4px; min-height: 30px;
}
.p-cross-card .rt {
  font-size: 10px; color: var(--muted); margin-bottom: 6px;
}
.p-cross-card .rt .s { color: #F9C80E; }
.p-cross-card .bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto;
}
.p-cross-card .pr {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.p-cross-card .orig {
  display: block; font-size: 10px; color: var(--muted);
  text-decoration: line-through; font-weight: 500;
}
.p-cross-card .add {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--cta); color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.p-cross-card .add.added { background: var(--color-success); }

/* F3 (v0.8.2): mobile twin of desktop polish. Detail link replaces the
   ATC "+" button, anchor wrappers reset link styling, sale-flag overlay
   sits top-right, "od" prefix preceeds the variant price. Linklist
   variant renders as a single bordered paragraph between cross-sell
   heading and the recently-viewed (or QA) section. */
.p-cross-card a.img,
.p-cross-card a.nm {
  text-decoration: none;
  color: inherit;
}
.p-cross-card .price-from {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 1px;
}
.p-cross-card .sale-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.p-cross-card .detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  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: 11px;
  letter-spacing: 0.01em;
  text-decoration: none;
  flex-shrink: 0;
}
.p-cross-card .detail svg {
  flex-shrink: 0;
}



/* Bundle card — special cross-sell */
.p-bundle {
  margin: 12px 16px 0; padding: 14px;
  background: linear-gradient(180deg, #FFF4EC 0%, #FFE4D1 100%);
  border: 1px solid rgba(249,102,40,.25);
  border-radius: 12px;
}
.p-bundle-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.p-bundle-head .tag {
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  letter-spacing: .08em; background: var(--color-2); color: #fff;
  padding: 3px 8px; border-radius: 4px;
}
.p-bundle-head .t {
  flex: 1; font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; color: var(--ink-2);
}
.p-bundle-items {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.p-bundle-items .it {
  flex: 1; aspect-ratio: 1; background: #fff;
  border: 1px solid rgba(0,0,0,.06); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  max-width: 70px;
  overflow: hidden;
}
/* v0.7.11: real CDN product photos for the bundle items - the 70px
   tile holds a contain-fit packshot now instead of a ProductVisual
   tub. Twin of .pdp-d-bundle-it img. */
.p-bundle-items .it img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.p-bundle-items .plus {
  font-family: var(--font-heading); font-weight: 900; font-size: 18px;
  color: var(--color-2); flex-shrink: 0;
}
.p-bundle-bot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.p-bundle-bot .pr {
  font-family: var(--font-heading); font-variant-numeric: tabular-nums;
}
.p-bundle-bot .pr .now {
  font-size: 18px; font-weight: 900; color: var(--ink-2);
}
.p-bundle-bot .pr .orig {
  font-size: 12px; font-weight: 500; color: var(--muted);
  text-decoration: line-through; margin-left: 4px;
}
.p-bundle-bot .pr small {
  display: block; font-size: 10px; color: var(--color-sale); font-weight: 700;
  margin-top: 1px;
}
.p-bundle-bot button {
  height: 38px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--ink-2); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}

/* ========= FAQ ========= */
.p-faq { padding: 16px; border-top: 8px solid var(--bg-soft); }
.p-faq-item {
  border-bottom: 1px solid var(--line-soft);
}
.p-faq-item:last-child { border-bottom: 0; }
.p-faq-q {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--ink-2); text-wrap: pretty;
}
.p-faq-q .chev {
  margin-left: auto; color: var(--muted); flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
.p-faq-item.on .p-faq-q .chev { transform: rotate(90deg); color: var(--color-1); }
.p-faq-a {
  font-size: 13px; line-height: 1.5; color: var(--ink-3);
  padding: 0 0 14px; display: none; text-wrap: pretty;
}
.p-faq-item.on .p-faq-a { display: block; }

/* ========= STICKY BOTTOM BAR ========= */
.p-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line);
  padding: 12px 14px 22px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.05);
  display: flex; align-items: center; gap: 10px;
  transform: translateY(110%); transition: transform 300ms var(--ease-out);
}
.p-bottom.on { transform: translateY(0); }
.p-bottom .pr-mini {
  display: flex; flex-direction: column; flex-shrink: 0;
}
.p-bottom .pr-mini .now {
  font-family: var(--font-heading); font-weight: 900; font-size: 20px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1;
}
.p-bottom .pr-mini .sub {
  font-size: 10px; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.p-bottom .pr-mini .sub .orig {
  text-decoration: line-through; margin-right: 4px;
}
.p-bottom .atc {
  flex: 1; height: 48px;
  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; justify-content: center; gap: 8px;
  cursor: pointer; box-shadow: var(--shadow-md);
}
.p-bottom .atc:active { transform: translateY(1px); }
.p-bottom .atc.out { background: var(--muted-2); cursor: not-allowed; box-shadow: none; }
.p-bottom::after {
  content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; background: #000; border-radius: 3px; opacity: .25;
}

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

/* ================================================
   AI REVIEW SUMMARY — "Krásny element"
   ================================================ */
.p-ai {
  position: relative;
  margin: 14px 0 18px;
  border-radius: 16px;
  padding: 1px; /* gradient border */
  background:
    linear-gradient(135deg,
      #8A7AFE 0%,
      #0077BC 35%,
      #26BB59 65%,
      #F96628 100%);
  background-size: 300% 300%;
  animation: p-ai-border 9s ease infinite;
  isolation: isolate;
  overflow: hidden;
}
.p-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: 15px;
  z-index: -1;
}
@keyframes p-ai-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.p-ai-inner {
  padding: 14px 14px 12px;
}

/* Header */
.p-ai-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.p-ai-spark {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.p-ai-spark svg {
  width: 100%; height: 100%;
  animation: p-ai-pulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(138,122,254,.55));
}
@keyframes p-ai-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; }
  50%      { transform: scale(1.12) rotate(8deg); opacity: 1; }
}
.p-ai-badge {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(90deg, #8A7AFE, #0077BC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.p-ai-hd .chip-beta {
  margin-left: auto;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #6B6F8E;
  background: #F2F0FE; border: 1px solid #E5E1FB;
  padding: 3px 6px; border-radius: 999px;
}

/* Title + TL;DR */
.p-ai-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; color: var(--ink-2);
  line-height: 1.3; margin-bottom: 6px;
  text-wrap: balance;
}
.p-ai-tldr {
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
  text-wrap: pretty;
}

/* Sentiment micro-bar */
.p-ai-sent {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: #FAFBFD; border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.p-ai-sent-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--line); overflow: hidden;
  display: flex;
}
.p-ai-sent-bar span {
  height: 100%; display: block;
  transition: width 600ms var(--ease-out);
}
.p-ai-sent-bar .pos { background: #26BB59; }
.p-ai-sent-bar .neu { background: #C9CDD6; }
.p-ai-sent-bar .neg { background: #E6452B; }
.p-ai-sent-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-ai-sent-legend b {
  color: var(--ink-2); font-weight: 700; margin-left: 2px;
}
.p-ai-sent-legend .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  margin-right: 5px; vertical-align: middle;
}

/* Pros + Cons */
.p-ai-pc {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-top: 4px;
}
.p-ai-col {
  border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 10px 12px; background: #fff;
}
.p-ai-col-hd {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 8px;
}
.p-ai-col.pros .p-ai-col-hd { color: #1F8A45; }
.p-ai-col.cons .p-ai-col-hd { color: #8A5A00; }
.p-ai-col .dot-ic {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800;
}
.p-ai-col.pros .dot-ic { background: #26BB59; }
.p-ai-col.cons .dot-ic { background: #E0A33A; }
.p-ai-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.p-ai-list li {
  display: grid; grid-template-columns: 8px 1fr; gap: 8px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  align-items: start;
}
.p-ai-list li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5;
  margin-top: 8px;
}
.p-ai-list li strong {
  color: var(--ink-2); font-weight: 700; font-family: var(--font-heading);
}
.p-ai-list li small {
  display: block; color: var(--muted); font-size: 11.5px;
  margin-top: 1px;
}

/* Topic chips */
.p-ai-topics {
  margin-top: 12px;
}
.p-ai-sub {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.p-ai-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.p-ai-chip {
  border: 1px solid var(--line); background: #fff;
  padding: 6px 10px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px; color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms var(--ease-out);
}
.p-ai-chip:hover {
  border-color: var(--color-1); color: var(--color-1);
  transform: translateY(-1px);
}
.p-ai-chip .n {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: 10.5px;
}

/* Footer */
.p-ai-ft {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.p-ai-meta {
  flex: 1; font-size: 10.5px; color: var(--muted); line-height: 1.4;
}
.p-ai-regen {
  border: 1px solid var(--line); background: #fff;
  border-radius: 8px; padding: 6px 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  transition: all 160ms var(--ease-out);
}
.p-ai-regen:hover { border-color: #8A7AFE; color: #6A56F0; }
.p-ai-regen.spin svg { animation: p-ai-spin 800ms linear infinite; }
@keyframes p-ai-spin { to { transform: rotate(360deg); } }

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

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

/* Disclaimer */
.p-ai-disc {
  font-size: 10px; color: var(--muted-2);
  margin-top: 6px; line-height: 1.4;
  display: flex; align-items: center; gap: 5px;
}

/* ============================================================
   PRODUCT INFO SECTION (M1: long description + storage)
   ============================================================
   Mobile-stacked equivalent of desktop .pdp-d-info-grid 2/3+1/3
   layout. Cards stack vertically with same chrome.
   ============================================================ */
.p-info {
  padding: 24px 16px 8px;
}
.p-info > * + * { margin-top: 12px; }

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

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

/* ============================================================
   PROSE - sanitises raw Froala HTML for description / dosing /
   storage. Mobile spacing is tighter than desktop .pdp-d-prose.
   Inline orange brand override (Froala color rgb(227, 108, 9))
   is rewritten to var(--color-2) for token consistency.
   ============================================================ */
.p-prose {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}
.p-prose > * + * { margin-top: 10px; }
.p-prose p { margin: 0; }
.p-prose strong { color: var(--ink-2); font-weight: 600; }
.p-prose em { font-style: italic; }
.p-prose u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.p-prose h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 22px 0 4px !important;
}
.p-prose h4:first-child { margin-top: 0 !important; }
.p-prose a {
  color: var(--color-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.p-prose a:active { color: var(--color-1-darker); }
.p-prose ul,
.p-prose ol { margin: 0; padding-left: 0; }
.p-prose ul { list-style: none; }
.p-prose ul li {
  position: relative;
  padding-left: 18px;
  margin: 3px 0;
}
.p-prose ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-1);
}
.p-prose ol { padding-left: 18px; }
.p-prose ol li { margin: 3px 0; }
.p-prose blockquote {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-2);
  background: var(--bg-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px;
}
.p-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.p-prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  margin: 8px 0;
}
.p-prose table th,
.p-prose table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
}
.p-prose table th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--ink-2);
}
.p-prose figure {
  margin: 12px 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.p-prose figure iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Inline brand orange override (Froala): rewrite to token. */
.p-prose [style*="color: rgb(227, 108, 9)"] { color: var(--color-2) !important; }

.p-prose--compact { font-size: 13px; line-height: 1.55; }
.p-prose--compact > * + * { margin-top: 8px; }

/* ============================================================
   RECOMMEND % BLOCK (in review summary, M1)
   ============================================================ */
.p-rev-recommend {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-1-tint);
  border-radius: var(--r-md);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.p-rev-recommend .num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  color: var(--color-1-darker);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.p-rev-recommend .msg {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* =====================================================================
   CUSTOMER Q&A (M1b) - mobile counterpart of .pdp-d-qa-*
   Replaces the static FAQ accordion as the primary knowledge surface.
   Section header + 3-tile stats strip + ask-question toggle button.
   ===================================================================== */
.p-qa {
  padding: 16px;
  border-top: 8px solid var(--bg-soft);
}
.p-qa-hd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 12px;
}
.p-qa-title {
  margin: 0;
  display: block;
}
.p-qa-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
}

/* Stats strip: 3 compact tiles, single row on mobile, equal width */
.p-qa-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--color-1-tint);
  border: 1px solid color-mix(in srgb, var(--color-1) 14%, transparent);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.p-qa-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.p-qa-stat .n {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.p-qa-stat .n.with-ic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
}
.p-qa-stat .l {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.25;
}

/* Ask-question pill: full-width on mobile so it stays tappable */
.p-qa-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  background: var(--color-1);
  color: #fff;
  border: 1px solid var(--color-1);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-qa-ask:hover {
  background: var(--color-1-darker);
  border-color: var(--color-1-darker);
}
.p-qa-ask.on {
  background: var(--surface);
  color: var(--color-1);
}

/* Add-question form (M1b): stacked vertically on mobile - each control
   gets full row width instead of the 2-col grid used on desktop. */
.p-qa-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: var(--shadow-sm);
}
.p-qa-form-hd {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-qa-form-hd h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
}
.p-qa-form-hd p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}
.p-qa-fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.p-qa-fld > span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.p-qa-fld > span em {
  color: var(--color-error);
  font-style: normal;
  margin-left: 2px;
}
.p-qa-fld input,
.p-qa-fld select,
.p-qa-fld textarea {
  width: 100%;
  padding: 11px 12px;
  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);
  -webkit-appearance: none;
  appearance: none;
}
.p-qa-fld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.p-qa-fld textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.p-qa-fld input:focus,
.p-qa-fld select:focus,
.p-qa-fld textarea:focus {
  outline: none;
  border-color: var(--color-1);
  box-shadow: 0 0 0 3px rgba(0, 119, 188, 0.12);
}
/* Honeypot field: visually hidden but reachable for bots. */
.p-qa-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.p-qa-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
  cursor: pointer;
}
.p-qa-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-1);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.p-qa-submit {
  width: 100%;
  padding: 13px 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;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.p-qa-submit:hover:not(:disabled) {
  background: var(--color-1-darker);
}
.p-qa-submit:disabled {
  background: var(--muted-2);
  cursor: not-allowed;
}

/* Sort row (M1b): native select on the left, "showing X / Y" on the right.
   Native dropdown UX is a deliberate choice on mobile - cheap, accessible,
   beats a wrapping chip row at 360px. */
.p-qa-sort {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}
.p-qa-sort-fld {
  flex: 0 0 auto;
  position: relative;
}
.p-qa-sort-fld select {
  padding: 8px 32px 8px 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.p-qa-sort-fld select:focus {
  outline: none;
  border-color: var(--color-1);
}
.p-qa-sort-info {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
}

/* Question list: vertical card stack */
.p-qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.p-qa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.p-qa-card-hd {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: 10px;
}
.p-qa-avatar {
  width: 36px;
  height: 36px;
  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;
  border: 2px solid color-mix(in srgb, var(--color-1) 18%, transparent);
}
.p-qa-id {
  min-width: 0;
}
.p-qa-nm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
}
.p-qa-nm .nm-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.p-qa-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.p-qa-badge.verified {
  background: rgba(38, 187, 89, 0.12);
  color: var(--color-success);
}
.p-qa-badge.guest {
  background: var(--bg-alt);
  color: var(--muted);
  padding-left: 7px;
}
.p-qa-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.p-qa-meta .dot {
  opacity: 0.6;
}
.p-qa-vchip {
  display: inline-block;
  padding: 1px 8px;
  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: 10px;
  color: var(--ink-3);
}
.p-qa-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 10px;
  text-wrap: pretty;
  white-space: pre-wrap;
}
.p-qa-card-bot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

/* Voting button: tap-to-toggle counter */
.p-qa-helpful {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  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: 11px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  white-space: nowrap;
}
.p-qa-helpful .plus {
  font-weight: 800;
  color: var(--color-1);
  font-size: 12px;
}
.p-qa-helpful .n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-qa-helpful.on {
  background: var(--color-1);
  border-color: var(--color-1);
  color: #fff;
}
.p-qa-helpful.on .plus,
.p-qa-helpful.on .n {
  color: #fff;
}

/* Reply block: brand-tinted, left-border accent. Mobile drops the desktop
   2-col grid (mark | body) for a stacked layout - mark on top, body below. */
.p-qa-reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-1-tint);
  border-left: 3px solid var(--color-1);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 10px 12px;
}
.p-qa-reply-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-qa-reply-logo {
  width: 26px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-qa-reply-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.p-qa-reply-id .nm {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.p-qa-reply-id .date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--color-1-darker);
  margin-top: 2px;
}
.p-qa-reply-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
  white-space: pre-wrap;
}

/* Pending state shown when q.hasReply is false. */
.p-qa-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-warn-ink);
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: 600;
}

/* Show-more pagination button */
.p-qa-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--s-4);
  padding: 11px 18px;
  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: 12px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.p-qa-more:hover {
  background: var(--color-1);
  color: #fff;
}
.p-qa-more svg {
  transform: rotate(90deg);
}

/* Empty state (defensive, not used by current fixture). */
.p-qa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-4);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
  margin-top: var(--s-3);
}
.p-qa-empty svg {
  color: var(--muted-2);
}
.p-qa-empty p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* ========= RECENTLY VIEWED (M1d) =========
   Horizontal scroll carousel mirroring .p-cross-scroll, but slightly narrower
   cards and no ATC pill - link-out only (mirrors real visitorProducts row). */
.p-recent { padding: 20px 0 16px; border-top: 8px solid var(--bg-soft); }
.p-recent-scroll {
  display: flex; gap: var(--s-3); overflow-x: auto;
  padding: var(--s-1) var(--s-4) var(--s-3);
  scroll-snap-type: x mandatory;
  /* v0.7.1 polish: same scroll-padding fix as .p-cross-scroll above so the
     first card aligns to the 16px section gutter instead of the viewport
     edge on initial paint. */
  scroll-padding-inline-start: var(--s-4);
  -webkit-overflow-scrolling: touch;
}
.p-recent-scroll::-webkit-scrollbar { display: none; }
.p-recent-card {
  flex: 0 0 140px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-2);
  scroll-snap-align: start; text-decoration: none;
  display: flex; flex-direction: column;
}
/* v0.7.8 photo-unify: same treatment as .p-cross-card .img - photo
   fills the square card edge-to-edge, hover adds a soft lift. */
.p-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: 8px; margin-bottom: var(--s-2);
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out),
              transform   var(--dur-med) var(--ease-out);
}
.p-recent-card:hover .p-recent-img {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.p-recent-img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-med) var(--ease-out);
}
.p-recent-card:hover .p-recent-img img {
  transform: scale(1.04);
}
.p-recent-nm {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--ink-2); line-height: 1.3; margin: 2px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.p-recent-rt {
  font-size: 10px; color: var(--muted); margin-bottom: var(--s-1);
  display: inline-flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums;
}
/* Star color matches PDPDesktop .pdp-d-recent-rt .st and .p-cross-card .rt .s
   to keep both prototypes visually aligned; no DS token exists for star yet. */
.p-recent-rt .s { color: #F9C80E; font-size: 11px; }
.p-recent-rt .r { color: var(--ink-2); font-weight: 600; }
.p-recent-rt .c { color: var(--muted); }
.p-recent-pr {
  display: flex; align-items: baseline; gap: var(--s-2); margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.p-recent-pr .now {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink-2); white-space: nowrap;
}
.p-recent-pr .orig {
  font-size: 10px; color: var(--muted);
  text-decoration: line-through; font-weight: 500;
}

/* ========= FOOTER (M1d) =========
   Mobile accordion variant of PDPDesktop multi-column footer. Brand block +
   bottom bar always visible; the 3 link columns collapse by default. */
.p-foot {
  background: var(--ink-2); color: var(--surface);
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + 80px);
  border-top: 8px solid var(--bg-soft);
  font-size: 13px; line-height: 1.5;
}
.p-foot-brand { padding-bottom: var(--s-4); }
.p-foot-brand .lg {
  display: inline-flex; align-items: center;
  filter: brightness(0) invert(1);
}
.p-foot-brand .lg img { display: block; height: 24px; width: auto; }
.p-foot-brand p {
  margin: var(--s-3) 0 var(--s-3);
  font-size: 12px; line-height: 1.55;
  color: var(--line);
}
/* v0.7.6 B3: 'Sleduj nas' header above the social pills, matches real
   footer-soc h3 from @base.latte. Same dark-on-dark muted treatment as
   the accordion section toggles. */
.p-foot-soc-title {
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.p-foot-soc { display: flex; gap: var(--s-2); }
.p-foot-soc a {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center;
  /* v0.7.5 A4: pill content is now an SVG <Icon>, not a text glyph.
     Color = currentColor on the link, so the SVG inherits white. The
     old font-family / font-weight / font-size / letter-spacing rules
     were dropped because they no longer style anything. */
  color: var(--surface); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.p-foot-soc a:active { background: rgba(255,255,255,.16); }
.p-foot-soc a:hover { background: var(--color-1); }

/* v0.7.6 B3: contact column (Kontakt / address / tel / email). Mirrors
   real namaximum.sk footer-contact - static block, not an accordion.
   Tel and email are styled as pseudo-links so taps fire native dialer
   or mail composer; underline removed to match the rest of the footer. */
.p-foot-contact {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--s-4) 0 var(--s-2);
}
.p-foot-contact h4 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--surface);
}
.p-foot-contact p {
  margin: 0 0 var(--s-1);
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.p-foot-contact .addr {
  color: rgba(255,255,255,.7);
}
.p-foot-contact a {
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.p-foot-contact a:hover {
  color: var(--surface);
  text-decoration: underline;
}

/* Accordion section */
.p-foot-sect {
  border-top: 1px solid rgba(255,255,255,.08);
}
.p-foot-toggle {
  width: 100%; background: transparent; border: 0; padding: var(--s-4) 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--surface); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
}
.p-foot-toggle .chev {
  color: var(--line); flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.p-foot-sect.on .p-foot-toggle .chev {
  transform: rotate(90deg); color: var(--color-1-light);
}
.p-foot-sect ul {
  list-style: none; margin: 0;
  padding: 0 0 var(--s-4);
  display: none;
}
.p-foot-sect.on ul { display: block; }
.p-foot-sect li { padding: var(--s-2) 0; }
.p-foot-sect a {
  color: var(--line); text-decoration: none; font-size: 13px;
}
.p-foot-sect a:active { color: var(--surface); }

/* Bottom bar - always visible */
.p-foot-bot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: var(--s-4); margin-top: var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: 11px; color: var(--muted-2); line-height: 1.5;
}
.p-foot-bot .copy { color: var(--line); }
.p-foot-bot .legal {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.p-foot-bot .legal a {
  color: var(--muted-2); text-decoration: none;
  font-size: 11px;
}
.p-foot-bot .legal a:active { color: var(--surface); }

/* ============================================================
   M2a - Per-variant stock chip on size pills
   Mirrors PDPDesktop pdp-d-size + pdp-d-stkchip; uses DS tokens
   only (no new hex literals). Extends existing .p-size rules
   above without replacing them.
   ============================================================ */

/* Per-variant stock chip (small dot) used inside size + flavor pills */
.p-stkchip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
  vertical-align: middle;
  margin-right: 4px;
}
.p-stkchip.is-in     { background: var(--color-success); }
.p-stkchip.is-low    { background: var(--color-2); }
.p-stkchip.is-restk  { background: var(--color-1-light); }
.p-stkchip.is-out    { background: var(--muted); }

/* Size pill: tighter inner stack to fit chip + meta line */
.p-size .sz {
  display: inline-flex; align-items: center; gap: 0;
}
.p-size .orig {
  font-size: 10px; color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.p-size .meta {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.p-size .pr.unavail {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Low-stock state: subtle amber tint, still clickable */
.p-size.low {
  border-color: var(--color-warn-border);
  background: var(--color-warn-bg);
}
/* Restock-pending state: light blue tint, still clickable */
.p-size.restock {
  border-color: var(--color-1-lighter);
  background: var(--color-1-tint);
}

/* OOS variants stay clickable (open restock sheet); drop the legacy
   diagonal "vypredane" ribbon now that we render a proper stock chip. */
.p-size.out {
  opacity: .6; cursor: pointer;
  background: var(--bg-alt);
}
.p-size.out::after { content: none; }
.p-size.out .pr { color: var(--color-sale); }

/* Combo doesn't exist in matrix - render as truly disabled (real
   eshop $missingValues cascade equivalent for mobile). */
.p-size.is-unavailable {
  opacity: .4;
  cursor: not-allowed;
  background:
    repeating-linear-gradient(135deg, var(--bg-alt) 0 6px, transparent 6px 12px);
  background-color: var(--surface);
}
.p-size.is-unavailable .sz,
.p-size.is-unavailable .pr {
  color: var(--muted-2);
}

/* ============================================================
   M2a - Per-variant stock detail on flavor pills
   Mirrors PDPDesktop pdp-d-flavor cascade. The stock chip lives
   on the swatch as a tiny dot in the bottom-right corner so the
   pill height stays unchanged. Cascade greys out combos that
   don't exist for the current size, with hatched is-unavailable
   pattern.
   ============================================================ */

.p-flavor {
  position: relative;
}
.p-flavor:hover { border-color: var(--color-1-lighter); }

/* Stock-chip overlay on swatch (bottom-right corner) */
.p-flavor .swatch {
  position: relative;
  width: 14px; height: 14px;
}
.p-flavor .swatch .p-stkchip {
  position: absolute; bottom: -3px; right: -3px;
  width: 7px; height: 7px;
  margin: 0;
  border-width: 1.5px;
}
.p-flavor .name { white-space: nowrap; }

/* Per-variant discount pill (compact) */
.p-flavor .discpill {
  background: var(--color-sale);
  color: var(--surface);
  font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 2px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Stock state modifiers */
.p-flavor.low {
  border-color: var(--color-warn-border);
}
.p-flavor.restock {
  border-color: var(--color-1-lighter);
  background: var(--color-1-tint);
}
/* Override the legacy .out rule so OOS flavor pills stay clickable
   (tap opens the restock sheet); only mute visually. */
.p-flavor.out {
  opacity: .55;
  text-decoration: none;
  cursor: pointer;
}
.p-flavor.out .name { text-decoration: line-through; }

/* Combo missing entirely - cascade against current size */
.p-flavor.is-unavailable {
  opacity: .4;
  cursor: not-allowed;
  background:
    repeating-linear-gradient(135deg, var(--bg-alt) 0 6px, transparent 6px 12px);
}
.p-flavor.is-unavailable .name { text-decoration: line-through; }

/* ============================================================
   M2a - Gift indicator overlay on variant pills
   Uses Icon name="gift" (Lucide stroke), no emoji. Sits in the
   top-left of size pills (so it doesn't collide with .badge in
   top-right) and as a trailing chip on flavor pills. Gated by
   the shared gift_bonus tweak (default ON).
   ============================================================ */

/* v0.7.6 B4: legacy 18px circular gift badge - kept for any consumer
   pinning to the old class name, but new markup uses .giftribbon. */
.p-size .giftbadge {
  position: absolute; top: -7px; left: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-2);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 2;
  pointer-events: none;
}

/* v0.7.6 B4: labelled gift ribbon. Replaces the old single-icon
   .giftbadge with a wider pill that spells out 'DARCEK' / 'AJANDEK'
   so users do not need to decode the tiny gift glyph. Anchored to the
   top-left corner like .giftbadge was; sale badge stays top-right via
   .p-size .badge so both can co-exist on a single variant. */
.p-size .giftribbon {
  position: absolute; top: -8px; left: 6px;
  height: 18px; padding: 0 7px 0 5px;
  border-radius: 9px;
  background: var(--color-2); color: var(--surface);
  font-family: var(--font-heading); font-weight: 800; font-size: 9px;
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 3px;
  box-shadow: 0 2px 6px rgba(249,102,40,.32);
  z-index: 2;
  pointer-events: none;
}
.p-size .giftribbon svg {
  display: block; flex-shrink: 0;
}

/* Gift accent on the whole pill so the gift state is also readable at a
   distance, not only from the corner ribbon. Soft warm tint via
   color-mix; falls back gracefully on browsers without color-mix because
   the ribbon itself still renders. */
.p-size.has-gift {
  background: color-mix(in srgb, var(--color-2) 4%, var(--surface));
}
.p-size.has-gift.on {
  /* When the user actually picks the gift variant, the selected (.on)
     blue accent wins - we keep the blue background and just nudge the
     border so it stays visible. */
  background: var(--color-1-tint);
}
.p-flavor .giftpill {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-2);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
  margin-left: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ============================================================
   M2a - Restock notification bottom sheet
   Mobile pattern: slide-up sheet anchored to viewport bottom
   (NOT a centered modal). Backdrop tap closes; max-height 75vh
   with internal scroll. Pure CSS transform animation per the
   risk register guidance (no JS animation libs). DS tokens
   only - no new hex literals.
   ============================================================ */

@keyframes p-restock-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-restock-slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.p-restock-overlay {
  /* v0.7.2: absolute (not fixed) so the overlay is scoped to the
     prototype frame (.p has position: relative) instead of bleeding
     across the entire browser viewport. */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: p-restock-fadein 200ms var(--ease-out);
}

.p-restock-sheet {
  position: relative;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 12px var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  animation: p-restock-slideup 280ms var(--ease-out);
  will-change: transform;
}

.p-restock-handle {
  display: block;
  width: 40px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  margin: 0 auto var(--s-3);
}

.p-restock-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-out);
}
.p-restock-close:hover,
.p-restock-close:active { background: var(--bg-alt); }

.p-restock-hd {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-right: 36px;
}
.p-restock-hd .ic {
  width: 40px; height: 40px;
  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;
}
.p-restock-hd strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.p-restock-hd span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.p-restock-body {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}

.p-restock-info {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-soft);
  border-radius: 12px;
}
.p-restock-info .thumb {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p-restock-info .thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.p-restock-info .meta {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.p-restock-info .meta strong {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.p-restock-info .meta .status {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.p-restock-info .meta .status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.p-restock-info .meta .status .dot.out     { background: var(--muted); }
.p-restock-info .meta .status .dot.restock { background: var(--color-1-light); }

.p-restock-form {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.p-restock-form .fld {
  display: flex; flex-direction: column;
  gap: 6px;
}
.p-restock-form .fld .lbl {
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.p-restock-form .fld input {
  height: 48px;
  padding: 0 var(--s-3);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-2);
  background: var(--surface);
  outline: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.p-restock-form .fld input::placeholder { color: var(--muted-2); }
.p-restock-form .fld input:focus {
  border-color: var(--color-1);
  box-shadow: var(--shadow-focus-ring);
}
.p-restock-form .consent {
  display: flex; align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.p-restock-form .consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--color-1);
  flex-shrink: 0;
}
.p-restock-form .consent a {
  color: var(--color-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-restock-form .submit {
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--color-1);
  color: var(--surface);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 100ms var(--ease-out);
  margin-top: var(--s-1);
}
.p-restock-form .submit:hover  { background: var(--color-1-darker); }
.p-restock-form .submit:active { transform: scale(.98); }

.p-restock-success {
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-3);
  background: var(--color-success-bg);
  border-radius: 12px;
  text-align: center;
}
.p-restock-success .ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--color-success);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.p-restock-success p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
  font-weight: var(--fw-med);
}

/* ============================================================
   M4a - Share button bottom-sheet
   Mobile pattern: tap the share trigger next to ATC opens a
   slide-up sheet (NOT a popdown like desktop). Same 4 channels
   as PDPDesktop (copy link / email / Facebook / WhatsApp), each
   rendered as a full-width row. Pure CSS animation per the risk
   register guidance. Z-index 1200 matches restock sheet so the
   two never overlap (only one is open at a time anyway).
   DS tokens only - no new hex literals introduced.
   ============================================================ */

@keyframes p-share-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-share-slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.p-share-overlay {
  /* v0.7.2: absolute scopes overlay to the prototype frame. */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: p-share-fadein 200ms var(--ease-out);
}

.p-share-sheet {
  position: relative;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 12px var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  animation: p-share-slideup 280ms var(--ease-out);
  will-change: transform;
}

.p-share-handle {
  display: block;
  width: 40px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  margin: 0 auto var(--s-3);
}

.p-share-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s-2);
}
.p-share-hd h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.p-share-close {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-share-close:hover,
.p-share-close:active { background: var(--bg-alt); color: var(--ink-2); }

.p-share-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.p-share-item {
  width: 100%;
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: 14px var(--s-2);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-med);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 140ms var(--ease-out);
}
.p-share-item:hover,
.p-share-item:active { background: var(--bg-soft); }
.p-share-item:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: -2px;
}
.p-share-lbl { flex: 1; min-width: 0; }

.p-share-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.p-share-ic.is-link { background: var(--bg-alt); color: var(--ink-2); }
.p-share-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).
   Mirrors PDPDesktop .pdp-d-share-pop-ic.is-fb pattern, but using
   --color-1 instead of FB hex blue to keep mobile diff token-only. */
.p-share-ic.is-fb {
  background: var(--color-1);
  color: var(--surface);
}
.p-share-ic.is-fb::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 14px;
  background: var(--surface);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  box-shadow: -3px -4px 0 0 var(--surface), 3px -4px 0 0 var(--surface);
  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.
   Mirrors PDPDesktop .pdp-d-share-pop-ic.is-wa pattern, using
   --color-success in place of the WA hex green for token-only diff. */
.p-share-ic.is-wa {
  background: var(--color-success);
  color: var(--surface);
}
.p-share-ic.is-wa::before {
  content: '';
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--surface);
  border-radius: 50%;
}
.p-share-ic.is-wa::after {
  content: '';
  position: absolute;
  left: 64%; top: 70%;
  width: 5px; height: 5px;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: rotate(15deg);
}

/* ============================================================
   M4b - Tweak panel (slide-up bottom sheet, React-rendered)
   FAB sits bottom-right; tap opens a sheet with 6 collapsible
   categories of toggles + segmented controls. Z-index 1300 so
   it stacks above the restock + share sheets (1200). All values
   come from DS tokens; no hex literals introduced here. The
   .tweaks-hidden body class (set by the showcase iframe edit
   mode handshake in pdp-mobile.html) hides the FAB + sheet
   during preview screenshot passes.
   ============================================================ */

.p-tweak-fab {
  /* v0.7.2: absolute so the FAB sits in the bottom-right of the
     prototype frame, not the browser viewport. */
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 160ms var(--ease-out);
}
.p-tweak-fab:hover {
  transform: translateY(-2px);
  background: var(--bg-soft);
}
.p-tweak-fab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring), var(--shadow-sm);
}
.p-tweak-fab svg { display: block; }
.p-tweak-fab.is-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}
body.tweaks-hidden .p-tweak-fab,
body.tweaks-hidden .p-tweak-overlay { display: none !important; }

@keyframes p-tweak-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-tweak-slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.p-tweak-overlay {
  /* v0.7.2: absolute scopes overlay to the prototype frame. */
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: p-tweak-fadein 200ms var(--ease-out);
}

.p-tweak-sheet {
  position: relative;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  transform: translateY(100%);
  transition: transform 280ms var(--ease-out);
  will-change: transform;
}
.p-tweak-sheet.is-open {
  transform: translateY(0);
  animation: p-tweak-slideup 280ms var(--ease-out);
}

.p-tweak-handle {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  margin: 8px auto var(--s-2);
  flex-shrink: 0;
}

.p-tweak-sheet-hd {
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px var(--s-4) 12px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.p-tweak-sheet-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.p-tweak-sheet-reset {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semi);
  padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.p-tweak-sheet-reset:hover,
.p-tweak-sheet-reset:active {
  background: var(--bg-soft);
  color: var(--ink-2);
  border-color: var(--ink-2);
}
.p-tweak-sheet-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-tweak-sheet-close:hover,
.p-tweak-sheet-close:active { background: var(--bg-soft); color: var(--ink-2); }

.p-tweak-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
}

.p-tweak-cat {
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 0;
}
.p-tweak-cat:last-child { border-bottom: 0; }
.p-tweak-cat-h {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.p-tweak-cat-h .chev {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  transition: transform 200ms var(--ease-out);
}
.p-tweak-cat.is-collapsed .p-tweak-cat-h .chev {
  transform: rotate(-90deg);
}
.p-tweak-cat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
}

/* F1 (v0.8.0): kategória meta block (popis + bulk toggle linky), parita
   s desktop .pdp-d-tweak-cat-meta. */
.p-tweak-cat-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.p-tweak-cat-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.p-tweak-cat-bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-2);
}
.p-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;
}
.p-tweak-cat-bulk button:active {
  color: var(--color-1-darker);
}

.p-tweak-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 0;
  cursor: pointer;
}
.p-tweak-toggle.is-segment {
  cursor: default;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.p-tweak-toggle-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.p-tweak-toggle-l .nm {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--ink-2);
  line-height: 1.3;
}
.p-tweak-toggle-l .ds {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.p-tweak-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--line);
  flex-shrink: 0;
  transition: background 160ms var(--ease-out);
}
.p-tweak-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.p-tweak-switch .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform 160ms var(--ease-out);
}
.p-tweak-switch.is-on { background: var(--color-1); }
.p-tweak-switch.is-on .thumb { transform: translateX(16px); }
.p-tweak-switch input:focus-visible + .thumb {
  box-shadow: var(--shadow-focus-ring);
}

.p-tweak-segment {
  display: inline-flex;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.p-tweak-segment button {
  appearance: none;
  flex: 1 1 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semi);
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.p-tweak-segment button:last-child { border-right: 0; }
.p-tweak-segment button:hover { background: var(--bg-soft); }
.p-tweak-segment button.is-on {
  background: var(--color-1);
  color: var(--surface);
}
.p-tweak-segment button:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: -2px;
}

/* ============================================================
   v0.7.1 polish - GALLERY LIGHTBOX
   Fullscreen viewer opened by tapping any hero slide. Solid dark
   backdrop (raw rgba, not a hex literal), single image / visual
   centred via object-fit: contain, max 90vw / 90vh. X button top
   right + prev/next nav arrows on the long edges + tap-counter
   bottom-centre. Z-index 1400 so it stacks above the tweak panel
   (1300) and the restock + share sheets (1200).
   DS tokens only.
   ============================================================ */

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

.p-lightbox {
  /* v0.7.2: absolute scopes lightbox to the prototype frame. */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: p-lightbox-fadein 220ms var(--ease-out);
}
.p-lightbox-stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.p-lightbox-stage img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
/* Fallback for non-image slides (SVG ProductVisual placeholder) */
.p-lightbox-stage > div {
  width: min(80vw, 480px);
  height: min(80vw, 480px);
  background: var(--surface);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.p-lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  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);
}
.p-lightbox-close:hover,
.p-lightbox-close:active { background: rgba(255, 255, 255, .26); }
.p-lightbox-close:focus-visible {
  outline: 2px solid var(--surface);
  outline-offset: 2px;
}
.p-lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  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);
}
.p-lightbox-nav.is-prev { left: 12px; }
.p-lightbox-nav.is-next { right: 12px; }
.p-lightbox-nav:hover,
.p-lightbox-nav:active { background: rgba(255, 255, 255, .26); }
.p-lightbox-nav:focus-visible {
  outline: 2px solid var(--surface);
  outline-offset: 2px;
}
.p-lightbox-counter {
  position: absolute;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--surface);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* ============================================================
   v0.7.1 polish - GIFT PICKER BOTTOM-SHEET
   Slide-up sheet (mirrors .p-share-sheet / .p-restock-sheet),
   2-col grid of gift cards, max GIFT_PICKS_TOTAL = 3 picks.
   Tapping a card toggles its membership; once full, unselected
   cards get is-disabled treatment. Z-index 1200 matches the
   share + restock sheets so only one is open at a time.
   DS tokens only.
   ============================================================ */

@keyframes p-gift-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-gift-slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.p-gift-overlay {
  /* v0.7.2: absolute scopes overlay to the prototype frame. */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: flex; align-items: flex-end; justify-content: center;
  animation: p-gift-fadein 200ms var(--ease-out);
}
.p-gift-sheet {
  position: relative;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 12px var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  animation: p-gift-slideup 280ms var(--ease-out);
}
.p-gift-handle {
  display: block;
  width: 40px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  margin: 0 auto var(--s-3);
}
.p-gift-hd {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s-3);
}
.p-gift-hd h3 {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.p-gift-counter {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: var(--color-2);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.p-gift-close {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.p-gift-close:hover,
.p-gift-close:active { background: var(--bg-alt); color: var(--ink-2); }

.p-gift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--s-3);
}
.p-gift-pick-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.p-gift-pick-card:hover { border-color: var(--color-2); }
.p-gift-pick-card.is-picked {
  border-color: var(--color-2);
  background: var(--bg-soft);
  box-shadow: 0 0 0 3px rgba(249, 102, 40, .12);
}
.p-gift-pick-card.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.p-gift-pick-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  color: var(--color-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.p-gift-pick-card.is-picked .p-gift-pick-thumb {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--surface);
}
.p-gift-pick-nm {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.25;
}
.p-gift-pick-brief {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.p-gift-pick-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--surface);
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.p-gift-pick-check.on {
  background: var(--color-2);
  border-color: var(--color-2);
}
.p-gift-max {
  margin: 0 0 var(--s-2);
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  text-align: center;
}
.p-gift-confirm {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cta);
  color: var(--surface);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.p-gift-confirm:hover { background: var(--cta-press); }

/* v0.7.1 polish: cursor on the gp-btn now that it's a <button>. */
.p-giftblock .gp-btn { cursor: pointer; }

/* v0.7.1 polish: empty slot styling for the gift block thumb strip
   when picks are below GIFT_PICKS_TOTAL. */
.p-giftblock-pick.is-slot-empty {
  border: 1.5px dashed var(--line);
  background: var(--bg-soft);
}
.p-giftblock-pick.is-slot-empty .p-giftblock-pick-shape {
  opacity: .35;
  background: var(--muted-2);
}