/* Product page layout (buy box, size / bundle tiles, sticky mobile bar). Moved out of product.html so the 25 generated
   product pages share one cached file instead of each carrying a copy. */
  .pdp-dark { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; padding:52px 0 90px; }
  .pdp-stage {
    border:1px solid var(--line-strong); border-radius:12px;
    padding:10px; display:flex; align-items:center; justify-content:center; height:420px; position:relative;
    overflow:hidden; width:fit-content; margin:0 auto;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='46'%3E%3Cpath d='M0 23 Q 22.5 8 45 23 T 90 23 T 135 23 T 180 23' stroke='%231e5fd9' stroke-width='1.2' fill='none' opacity='0.35'/%3E%3Cpath d='M0 36 Q 22.5 26 45 36 T 90 36 T 135 36 T 180 36' stroke='%231e5fd9' stroke-width='1.2' fill='none' opacity='0.2'/%3E%3C/svg%3E"),
      radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-accent, #1e5fd9) 16%, white) 0%, white 72%);
    background-repeat: repeat, no-repeat;
  }
  .pdp-stage svg { height:320px; }
  .pdp-stage img { max-height:100%; max-width:100%; object-fit:contain; border-radius:8px; }
  .pdp-batch-tag {
    position:absolute; top:16px; left:16px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
    border:1px solid var(--line-strong); padding:4px 9px; border-radius:5px; color:var(--text-dim);
  }
  .size-row-dark { display:flex; gap:10px; margin:16px 0 26px; flex-wrap:wrap; }
  .size-btn-dark {
    font-family: var(--display); font-size:14.5px; font-weight:600; letter-spacing:0.01em;
    padding:12px 20px; border:1.5px solid var(--line-strong);
    border-radius:30px; cursor:pointer; background:var(--bg-card); color:var(--text);
  }
  .size-btn-dark.active {
    background: var(--accent); border-color: var(--accent); color:#fff;
    box-shadow: 0 2px 10px rgba(30,95,217,0.28); transform: translateY(-1px);
  }
  .size-btn-dark:hover:not(.active):not(.oos) { border-color: var(--accent); }
  .size-btn-dark { transition: all .14s ease; display:inline-flex; align-items:center; gap:7px; }
  .size-btn-dark.oos {
    opacity:.42; cursor:not-allowed; text-decoration:line-through;
    text-decoration-thickness:1.5px; background:transparent;
  }
  .size-save {
    font-family: var(--display); font-size:11px; font-weight:700; letter-spacing:.02em;
    padding:3px 8px; border-radius:20px; background:var(--accent-secondary); color:#fff; line-height:1.4;
  }
  .size-btn-dark.active .size-save { background:rgba(255,255,255,.24); }
  .size-selected-note { font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent-bright); letter-spacing:.05em; }
  .attr-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
  .attr-chip {
    font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    padding:8px 14px; border:1.5px solid var(--line-strong); border-radius:20px; color:var(--text);
  }
  .bundle-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:14px 0 26px; }
  .bundle-tile {
    position:relative; border:1.5px solid var(--line-strong); border-radius:11px; padding:16px 8px 12px;
    text-align:center; cursor:pointer; background:var(--bg-card); transition:all .14s ease;
  }
  .bundle-tile:hover:not(.active) { border-color:var(--accent); }
  .bundle-tile.active {
    border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--bg-card));
    box-shadow:0 2px 12px rgba(30,95,217,.16);
  }
  .bundle-vials { font-size:15px; letter-spacing:1px; margin-bottom:6px; }
  .bundle-label { font-family:var(--display); font-size:15px; font-weight:700; color:var(--text); }
  .bundle-note { font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--text-dim); margin-top:3px; }
  .bundle-tile.active .bundle-note { color:var(--accent-bright); }
  .bundle-badge {
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:var(--accent-secondary); color:#fff; font-size:10px; font-weight:700;
    font-family:var(--display); letter-spacing:.04em; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; white-space:nowrap;
  }
  .bundle-saveline { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--accent-secondary); margin:-14px 0 22px; }
  @media (max-width:480px){ .bundle-row { grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 10px; } .bundle-tile { padding:15px 4px 11px; } }
  .bulk-link-line { font-size:12.5px; line-height:1.5; color:var(--text-dim); margin:-12px 0 22px; }
  .bulk-link-line a { color:var(--accent-bright); font-weight:700; white-space:nowrap; }
  .qty-row-dark { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
  .qty-row-dark button {
    width:32px; height:32px; border:1px solid var(--line-strong); background:transparent; border-radius:6px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .qty-row-dark button svg { width:13px; height:13px; stroke:var(--text); }
  @media (max-width:900px){ .pdp-dark { grid-template-columns:minmax(0, 1fr); } }
  /* the vial stage is 420px tall with a fixed-size picture; on a 320px phone that made it wider than the screen (42px of sideways scroll) */
  .pdp-stage { max-width: 100%; box-sizing: border-box; }
  .pdp-stage svg { max-width: 100%; }
  .mobile-sticky-bar {
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--bg-elevated); border-top:1px solid var(--line-strong);
    padding:12px 16px; align-items:center; justify-content:space-between; gap:14px;
    box-shadow:0 -8px 20px rgba(0,0,0,0.35);
  }
  .sticky-name { font-size:13px; font-weight:600; }
  .sticky-price { font-family:var(--mono); font-size:12px; color:var(--accent-bright); margin-top:2px; }
  @media (max-width:640px){
    .mobile-sticky-bar { display:flex; }
    .pdp-dark { padding-bottom:100px; }
  }

/* What a crawler (or a visitor with JavaScript off) sees inside #pdp-root before the buy box is drawn. It is replaced
   as soon as the page's script runs, so it only needs to be readable, not pretty. */
.pdp-static { padding: 52px 0 36px; max-width: 70ch; }
.pdp-static h1 { font-size: 36px; font-weight: 700; margin: 10px 0 14px; }
.pdp-static p { font-size: 15.5px; line-height: 1.65; }
.pdp-static ul { margin: 14px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }