/* =========================================================
   SIGMA STACKS — shared product-card system (bento grid, .prod card,
   photo vial, COA badge/popover, buttons).
   EXTRACTED from sigma-home.css 2026-08-08 so the shop archive and the
   homepage lineup render identical cards from ONE stylesheet.
   Loaded on: front page (before sigma-home.css) + Woo shop/category/
   product pages (inc/sigma-shop.php).
   Tokens come from :root in sigma-chrome.css (inner pages) or
   sigma-home.css (front page) — both define the same values.
   ========================================================= */
  /* ---------- Buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14.5px;
    padding: 12px 20px; border-radius: 10px; border: 1px solid var(--acid); background: var(--acid); color: var(--acid-ink);
    text-decoration: none; transition: transform .18s var(--ease), box-shadow .25s, background .2s; white-space: nowrap; }
  .btn:hover { box-shadow: 0 8px 30px -10px var(--acid); transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
  .btn.ghost:hover { border-color: var(--ink); box-shadow: none; background: oklch(100% 0 0 / 0.03); }
  .btn.sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }


  /* ---------- Bento grid (best-sellers + proof) ---------- */
  .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 36px; }
  .cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; transition: border-color .3s, transform .3s var(--ease); }
  .cell:hover { border-color: var(--line-2); transform: translateY(-3px); }
  .cell.col-6 { grid-column: span 6; } .cell.col-4 { grid-column: span 4; } .cell.col-3 { grid-column: span 3; } .cell.col-8 { grid-column: span 8; }
  @media (max-width: 820px) { .cell.col-6,.cell.col-4,.cell.col-3,.cell.col-8 { grid-column: span 12; } }


  /* product cell */
  .prod { display: flex; flex-direction: column; justify-content: center; min-height: 100%; text-align: center; }
  /* Badge floats out of flow: inside the centered column it made COA cards'
     content sit lower than badge-less ones, breaking row alignment. */
  .prod .top { position: absolute; top: 6px; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
  .prod .pct { font-family: "JetBrains Mono"; color: var(--acid); font-weight: 700; font-size: 12px; letter-spacing: .5px; }
  .prod .vialart { height: 88px; display: grid; place-items: center; margin: 6px 0 10px; }
  /* ===== blue photo vial (.vbvial) — per-product name/MG band over the generic text ===== */
  /* Widths went up 50% on 2026-08-10 (owner: show off the vial photography):
     104 -> 156 placeholder, 132 -> 198 photo. max-width keeps them inside the
     card when a cell is narrower than the fixed width. */
  .vbvial { position:relative; width:156px; max-width:100%; aspect-ratio:740/1340; margin:6px auto 12px; overflow:hidden; border-radius:12px; background:#10131A; border:1px solid var(--line); container-type:inline-size; }
  .vbvial img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* Real product photography is a squarer crop than the placeholder render, so
     it needs its own ratio — forcing it into the 740:1340 portrait frame cut
     the printed name off both sides. */
  /* 4:5 is the target ratio for product photography. The first tiles were
     258:328 (0.787) only because that is what dividing the contact sheet into
     a 3x4 grid happened to produce; 0.8 is within 2% of it, so the older tiles
     lose nothing visible while new 4:5 art lands exactly. */
  /* 2026-08-11: product art is now background-free, so the frame stops being a
     photo tile and becomes the space the vial stands in — no fill, no border,
     no crop. The ratio is the vial's own (526:1040), not 4:5, because the art
     is a tall product cutout; forcing it into 4:5 with object-fit:contain
     letterboxed it and made the vial SMALLER than the frame holding it. */
  .vbvial.has-photo {
    width:100%; max-width:210px; aspect-ratio:526/1040;
    background:transparent; border:0; border-radius:0; overflow:visible;
  }
  .vbvial.has-photo img {
    object-fit:contain;
    /* grounds the vial on the card instead of leaving it floating */
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
    transition:transform .25s var(--ease, ease);
  }
  /* The vial and the title both link to the product page. Give them a visible
     affordance — the art is the thing people instinctively click. */
  .prod .vialwrap { display:block; text-decoration:none; }
  .prod .vialwrap:hover .vbvial.has-photo img { transform:translateY(-4px) scale(1.03); }
  .prod h3 .plink { color:inherit; text-decoration:none; }
  .prod h3 .plink:hover { color:var(--acid); }
  .prod h3 .plink:focus-visible { outline:2px solid var(--acid); outline-offset:3px; border-radius:4px; }
  @media (prefers-reduced-motion:reduce) {
    .vbvial.has-photo img, .prod .vialwrap:hover .vbvial.has-photo img { transition:none; transform:none; }
  }
  /* Shown whenever a product has no featured image, to cover the SEMAX label
     baked into the shared placeholder render. Remove once real per-product
     photography lands and .vbband is no longer emitted. */
  .vbvial .vbband { position:absolute; left:3.5%; right:3.5%; top:60%; height:21.5%; background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqw; padding:0 2cqw; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(31,116,192,.06); }
  .vbvial .vbn { font-family:"Archivo", sans-serif; font-weight:800; font-size:8.5cqw; line-height:1.05; color:#0e1b2a; letter-spacing:-.3cqw; text-align:center; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .vbvial .vbd { font-family:"JetBrains Mono", monospace; font-weight:700; font-size:5.5cqw; line-height:1; color:#3f4a57; letter-spacing:.2cqw; margin-top:1.5cqw; text-align:center; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Archivo at 600 rather than Anton: the display face was too heavy and too
     wide for names as long as "Ipamorelin / CJC-1295" now the full catalog
     renders here, and it wrapped every two-word product onto three lines. */
  .prod h3 { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.015em; line-height: 1.18; margin-bottom: 5px; }
  .prod .dose { list-style: none; margin: 0 0 5px; padding: 0; }
  .prod .dose li { font-family: "JetBrains Mono"; font-size: 12px; line-height: 1.35; color: var(--muted); letter-spacing: .2px; }
  .prod .dose li::before { content: "•"; margin-right: 6px; color: var(--acid); }
  .prod .cat { color: var(--faint); font-size: 12px; font-family: "JetBrains Mono"; }
  .prod .specrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
  .spec-chip { font-family: "JetBrains Mono"; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; }
  .prod .buy { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .prod .price .now { font-size: 22px; font-weight: 700; }
  .prod .price .unit { color: var(--faint); font-size: 12px; }


  /* COA badge + popover (anchor positioning + popover API w/ JS fallback) */
  .coa-badge { font-family: "JetBrains Mono"; font-size: 10.5px; color: var(--blue); border: 1px solid var(--line-2); background: var(--blue-soft); padding: 4px 9px; border-radius: 999px; cursor: pointer; anchor-name: --coa; }
  .coa-pop { margin: 0; border: 1px solid var(--blue); background: var(--surface-2); color: var(--ink); border-radius: 12px; padding: 14px; width: 230px; font-size: 13px; }
  .coa-pop::backdrop { background: transparent; }
  @supports (anchor-name: --x) {
    .coa-pop[popover] { position-anchor: --coa; position-area: bottom span-left; margin-top: 8px; position-try-fallbacks: flip-block; inset: auto; }
  }
  /* JS-positioned fallback for the non-popover path */
  .coa-pop.jsfallback { position: absolute; z-index: 40; top: 42px; right: 14px; display: none; }
  .coa-pop.jsfallback.show { display: block; }
  .coa-pop h4 { font-family: "JetBrains Mono"; font-size: 11px; color: var(--blue); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
  .coa-pop .row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--muted); border-bottom: 1px dashed var(--line); }
  .coa-pop .row span:last-child { font-family: "JetBrains Mono"; color: var(--ink); }