:root {
    --bg:#fafbfc; --bg2:#ffffff; --ink:#101418; --dim:#5b6470;
    --blue:#1e4fd8; --blue-hi:#1a43b8; --blue-soft:#e8eefc; --line:#d8dee6;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--ink); font-family:'Instrument Sans',sans-serif; -webkit-font-smoothing:antialiased; }
  .mono { font-family:'JetBrains Mono',monospace; }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

  /* trust bar — honest reseller framing */
  .trustbar { text-align:center; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; background:var(--ink); color:#e6ebf2; font-weight:600; }
  .trustbar b { color:#fff; }

  nav { display:flex; align-items:center; justify-content:space-between; padding:20px 5vw; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(250,251,252,.86); backdrop-filter:blur(14px); z-index:50; }
  .logo { font-weight:700; font-size:17px; letter-spacing:-.01em; text-decoration:none; display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
  .logo em { font-style:italic; color:var(--blue); }
  .logo-mark { height:30px; width:auto; display:block; }
  nav ul { display:flex; gap:34px; list-style:none; }
  nav ul a { text-decoration:none; font-size:14px; color:var(--dim); transition:color .2s; }
  nav ul a:hover { color:var(--ink); }
  .navbuy { font-size:13px; text-decoration:none; padding:9px 20px; border-radius:99px; background:var(--ink); color:#fff; font-weight:600; }

  .hero { min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 5vw 40px; position:relative; overflow:hidden; }
  .hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 45% at 50% 62%, rgba(30,79,216,.07), transparent 65%); pointer-events:none; }
  .eyebrow { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); font-weight:600; }
  h1 { font-size:clamp(40px,6.5vw,84px); font-weight:600; letter-spacing:-.035em; line-height:1.02; margin:18px 0 0; }
  .hero .sub { margin-top:22px; font-size:clamp(16px,1.6vw,19px); color:var(--dim); max-width:52ch; line-height:1.55; }
  .hero .cta-row { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .btn { text-decoration:none; font-weight:600; font-size:15px; padding:14px 30px; border-radius:99px; transition:transform .15s ease, background .2s; display:inline-block; }
  .btn:hover { transform:translateY(-1px); }
  .btn-blue { background:var(--blue); color:#fff; }
  .btn-blue:hover { background:var(--blue-hi); }
  .btn-ghost { border:1px solid var(--ink); color:var(--ink); }
  .price-note { margin-top:14px; font-size:13px; color:var(--dim); }
  .price-note s { opacity:.6; }

  .pen-stage { margin-top:52px; width:min(1200px,94vw); }
  .pen-stage img, .pen-stage video { width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 30px 70px rgba(16,20,24,.22); border:1px solid var(--line); }

  /* gallery */
  .gallery { padding:110px 5vw; border-top:1px solid var(--line); max-width:1200px; margin:0 auto; }
  .g-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; margin-top:56px; }
  .g-item.g-wide { grid-column:1/-1; }
  .g-item { display:flex; flex-direction:column; }
  .g-item img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:14px; border:1px solid var(--line); box-shadow:0 18px 44px rgba(16,20,24,.14); }
  .g-item.g-wide img { aspect-ratio:auto; height:auto; }
  .g-cap { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim); margin-top:12px; }
  @media (max-width:1020px) { .g-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:640px) { .g-grid { grid-template-columns:1fr; } }

  /* dial — signature */
  .dial-sec { padding:110px 5vw; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center; max-width:1200px; margin:0 auto; }
  .dial-sec h2, .feat h2, .specs h2, .buy h2, .faq h2 { font-size:clamp(28px,3.4vw,44px); font-weight:600; letter-spacing:-.025em; line-height:1.08; }
  .dial-sec p { color:var(--dim); line-height:1.65; margin-top:18px; font-size:16.5px; max-width:44ch; }
  .dial-wrap { display:flex; flex-direction:column; align-items:center; gap:22px; user-select:none; }
  .dial { width:min(300px,70vw); aspect-ratio:1; border-radius:50%; position:relative; cursor:grab; touch-action:none; background:#23252b;
    box-shadow:inset 0 2px 10px rgba(255,255,255,.08), inset 0 -6px 18px rgba(0,0,0,.55), 0 20px 50px rgba(16,20,24,.25); }
  .dial-ring { position:absolute; inset:0; border-radius:50%; will-change:transform;
    background:repeating-conic-gradient(#3a3d44 0deg 6deg, #23252b 6deg 12deg); }
  .dial:active { cursor:grabbing; }
  .dial-face { position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle at 38% 30%, #2b2d33, #17181c 70%); display:flex; align-items:center; justify-content:center; flex-direction:column; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
  .dial-num { font-family:'JetBrains Mono',monospace; font-size:clamp(52px,7vw,76px); font-weight:500; color:#9db8ff; line-height:1; font-variant-numeric:tabular-nums; }
  .dial-lbl { font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#8b93a1; margin-top:8px; }
  .dial-ml { font-size:13px; color:#c7cfdc; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); }
  .dial-ml .mono { color:#9db8ff; font-size:15px; }
  .dial-marker { position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:3px; height:22px; background:var(--blue); border-radius:2px; }
  .dial-hint { font-size:13px; color:var(--dim); }
  .dial-hint .mono { color:var(--blue); }
  .demo-calc { margin-top:10px; width:min(340px,100%); border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--bg2); }
  .demo-title { font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .demo-title::before { content:"calc"; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:500; display:block; margin-bottom:6px; }
  .demo-grid { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
  .demo-grid label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:var(--dim); }
  .demo-grid input { width:84px; font-family:'JetBrains Mono',monospace; font-size:14px; padding:5px 9px; border:1px solid var(--line); border-radius:8px; text-align:right; color:var(--ink); background:var(--bg); }
  .demo-grid input:focus { outline:2px solid var(--blue); outline-offset:1px; }
  .demo-over { color:#b4540a; font-size:12.5px; }
  .mbuy { display:none; }
  @media (max-width:760px) {
    .mbuy { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:10px 18px; align-items:center; justify-content:space-between; }
    .mbuy .mp { font-weight:600; font-size:17px; }
    .mbuy .mp s { color:var(--dim); font-weight:400; font-size:13px; margin-left:6px; }
    body { padding-bottom:64px; }
  }
  .demo-eq { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--dim); }
  .demo-eq .mono { color:var(--ink); font-size:14.5px; }
  .demo-note { margin-top:10px; font-size:12px; color:var(--dim); }

  .feat { padding:110px 5vw; border-top:1px solid var(--line); max-width:1200px; margin:0 auto; }
  .feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px; background:var(--line); margin-top:56px; border:1px solid var(--line); }
  .fcard { background:var(--bg2); padding:38px 32px 42px; }
  .fcard .fk { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--blue); letter-spacing:.1em; }
  .fcard h3 { font-size:20px; font-weight:600; margin:14px 0 10px; letter-spacing:-.01em; }
  .fcard p { font-size:14.5px; color:var(--dim); line-height:1.6; }

  .specs { padding:110px 5vw; border-top:1px solid var(--line); max-width:1200px; margin:0 auto; }
  .spec-table { max-width:900px; }
  .spec-table { margin-top:44px; border-top:1px solid var(--ink); }
  .spec-row { display:grid; grid-template-columns:1fr 1fr; padding:18px 4px; border-bottom:1px solid var(--line); font-size:15px; }
  .spec-row:hover { background:var(--blue-soft); }
  .spec-row dt { color:var(--dim); }
  .spec-row dd { font-family:'JetBrains Mono',monospace; font-size:14px; }

  .buy { padding:110px 5vw 120px; border-top:1px solid var(--line); text-align:center; position:relative; overflow:hidden; background:var(--bg2); }
  .buy::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 40% at 50% 100%, rgba(30,79,216,.06), transparent 70%); pointer-events:none; }
  .buy .inner { position:relative; max-width:560px; margin:0 auto; }
  .buy .price { font-size:clamp(40px,5vw,56px); font-weight:600; letter-spacing:-.03em; margin-top:20px; }
  .buy .price s { font-size:.45em; color:var(--dim); font-weight:400; vertical-align:middle; margin-left:12px; }
  .buy ul { list-style:none; margin:26px 0 34px; color:var(--dim); font-size:14.5px; line-height:2.1; }
  .buy ul .mono { color:var(--blue); margin-right:8px; }
  .bundle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; text-align:left; }
  .bundle { position:relative; display:flex; flex-direction:column; gap:3px; padding:18px 16px 15px; border:1.5px solid var(--line); border-radius:14px; background:var(--bg); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
  .bundle input { position:absolute; opacity:0; pointer-events:none; }
  .bundle:hover { border-color:#aeb9c9; }
  .bundle:has(input:checked) { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); background:#fff; }
  .b-badge { position:absolute; top:-10px; left:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--blue); color:#fff; padding:3px 9px; border-radius:99px; }
  .b-badge-alt { background:var(--ink); }
  .b-qty { font-size:14px; font-weight:600; }
  .b-price { font-size:21px; font-weight:600; letter-spacing:-.02em; margin-top:2px; }
  .b-per { font-size:12.5px; color:var(--dim); }
  .b-save { font-size:12px; color:var(--blue); font-weight:600; margin-top:5px; }
  @media (max-width:640px) { .bundle-grid { grid-template-columns:1fr; } }

  .faq { padding:100px 5vw; border-top:1px solid var(--line); max-width:760px; margin:0 auto; }
  .faq details { border-bottom:1px solid var(--line); padding:20px 4px; }
  .faq details:first-of-type { margin-top:36px; border-top:1px solid var(--ink); }
  .faq summary { cursor:pointer; font-size:16.5px; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq summary::after { content:"+"; font-family:'JetBrains Mono',monospace; color:var(--blue); font-size:20px; }
  .faq details[open] summary::after { content:"–"; }
  .faq details p { margin-top:14px; color:var(--dim); font-size:15px; line-height:1.65; max-width:60ch; }
  .faq .all { display:inline-block; margin-top:30px; font-size:14px; color:var(--blue); }

  .pp-footer { border-top:1px solid var(--ink); padding:70px 5vw 46px; background:var(--bg2); }
  .f-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto; }
  .f-grid h4 { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
  .f-grid ul { list-style:none; font-size:14px; line-height:2.2; }
  .f-grid ul a { text-decoration:none; color:var(--dim); }
  .f-grid ul a:hover { color:var(--ink); }
  .disclaimer { max-width:1200px; margin:54px auto 0; padding-top:28px; border-top:1px solid var(--line); font-size:12.5px; color:var(--dim); line-height:1.7; }
  .disclaimer strong { color:var(--ink); }

  .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .reveal { opacity:1; transform:none; transition:none; }
    .btn:hover { transform:none; }
  }
  @media (max-width:860px) {
    nav ul { display:none; }
    .dial-sec { grid-template-columns:1fr; gap:48px; }
    .f-grid { grid-template-columns:1fr 1fr; gap:24px 20px; }
    .f-grid > *:first-child, .f-grid > .f-news { grid-column:1 / -1; }
    .spec-row { grid-template-columns:1fr; gap:4px; }
  }

/* Vessel adaptation: the page scrolls inside .page-wrapper, and our nav+trustbar
   live in #header-group. Stick the group with the trustbar tucked off-screen. */
#header-group { position: sticky; top: calc(-1 * var(--pp-trustbar-h, 35px)); z-index: 50; }

/* calculator outputs in accent blue, live-updating */
#dc-units, #dc-mg { color: var(--blue, #1e4fd8); }

/* ---- Judge.me reviews, themed to PreppinPeppers ---- */
.jdgm-widget, .jdgm-widget * { font-family:'Instrument Sans', sans-serif !important; }
.jdgm-star { color:#f5a623 !important; }               /* amber = universally reads as a rating */
.jdgm-star.jdgm--off { color:var(--line) !important; }
.jdgm-prev-badge__text { color:var(--dim) !important; font-size:13px !important; }
.pp-badge-atc { text-decoration:none; }
.pp-reviews-sec { border-top:1px solid var(--line); padding:70px 5vw; }
.pp-reviews-inner { max-width:960px; margin:0 auto; }
.jdgm-rev-widg__title, .jdgm-histogram, .jdgm-rev-widg__summary-text { color:var(--ink) !important; }
.jdgm-rev-widg__title { font-size:clamp(24px,3vw,34px) !important; font-weight:600 !important; letter-spacing:-.025em !important; }
/* accent controls in blue */
.jdgm-write-rev-link, .jdgm-paginate__page.jdgm--active, .jdgm-histogram__bar-content {
  background-color:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; border-radius:99px !important;
}
.jdgm-write-rev-link:hover { background-color:var(--blue-hi) !important; }
.jdgm-rev__body a, .jdgm-rev-widg__sort-wrapper a, a.jdgm-rev__author { color:var(--blue) !important; }
.jdgm-all-reviews-rating, .jdgm-rev__rating { }
.jdgm-rev { border-color:var(--line) !important; }
/* review carousel on homepage */
.pp-carousel-sec { border-top:1px solid var(--line); padding:70px 5vw 30px; text-align:center; }
.pp-carousel-sec h2 { font-size:clamp(24px,3vw,36px); font-weight:600; letter-spacing:-.025em; margin-bottom:8px; }
.pp-carousel-sec .eyebrow { display:block; margin-bottom:10px; }

/* judge.me star glyphs: icon font can render as boxes — replace with text stars, theme ink */
.jdgm-star { font-family:'Instrument Sans',sans-serif !important; color:var(--ink) !important; font-style:normal; }
.jdgm-star:before { content:'\2605' !important; }
.jdgm-star.jdgm--off:before { content:'\2606' !important; }
.jdgm-star.jdgm--half:before { content:'\2605' !important; opacity:.5; }

/* judge.me featured carousel: never show product thumbnails on reviews — only real customer photos */
.pp-carousel-sec .jdgm-carousel-item__product { display:none !important; }
.pp-carousel-sec .jdgm-carousel-item__product-image { display:none !important; }
/* carousel typography → theme */
.pp-carousel-sec .jdgm-carousel-item__review-body,
.pp-carousel-sec .jdgm-carousel-item__review-body p { font-family:'Instrument Sans',sans-serif; color:var(--dim); }
.pp-carousel-sec .jdgm-carousel-item__reviewer-name { font-family:'Instrument Sans',sans-serif; color:var(--ink); font-weight:600; }
.pp-carousel-sec .jdgm-carousel-item { border-color:var(--line) !important; }
/* injected customer photo thumb (real review photos only) */
.pp-carousel-sec .jdgm-carousel-item__reviewer-name-wrapper { display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.pp-car-pic { width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex-shrink:0; cursor:zoom-in; transition:transform .15s ease; }
.pp-car-pic:hover { transform:scale(1.08); }
/* click-to-zoom lightbox for review photos */
.pp-lightbox { position:fixed; inset:0; z-index:200; background:rgba(16,20,24,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:5vw; cursor:zoom-out; animation:pp-lb-in .18s ease-out; }
.pp-lightbox img { max-width:min(92vw,900px); max-height:88vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
@keyframes pp-lb-in { from { opacity:0; } to { opacity:1; } }

/* dial detent feedback — number bounce + ring flash per unit */
@keyframes pp-tick-bounce { 0%{transform:scale(1);} 45%{transform:scale(1.14);} 100%{transform:scale(1);} }
.dial-num.pp-tick { animation:pp-tick-bounce .11s ease-out; }
@keyframes pp-ring-flash { 0%{box-shadow:0 0 0 0 rgba(30,79,216,.35);} 100%{box-shadow:0 0 0 14px rgba(30,79,216,0);} }
.dial.pp-flash { animation:pp-ring-flash .22s ease-out; }

/* ---- Legal, policy & content pages: Apple-style breathing room ---- */
/* Shopify built-in policy pages (/policies/*) */
.shopify-policy__container { max-width:760px; margin:0 auto; padding:80px 5vw 110px; }
.shopify-policy__title { text-align:left; margin-bottom:38px; }
.shopify-policy__title h1 { font-size:clamp(32px,4.4vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.05; }
.shopify-policy__body { font-size:16.5px; line-height:1.85; color:var(--ink); }
.shopify-policy__body h2 { font-size:22px; font-weight:600; letter-spacing:-.015em; margin:46px 0 14px; }
.shopify-policy__body h3 { font-size:17px; font-weight:600; margin:30px 0 10px; }
.shopify-policy__body p { margin:0 0 18px; }
.shopify-policy__body ul, .shopify-policy__body ol { margin:0 0 22px; padding-left:22px; }
.shopify-policy__body li { margin-bottom:11px; line-height:1.75; }
.shopify-policy__body a { color:var(--blue); }
.shopify-policy__body strong { font-weight:600; }

/* Custom legal pages via pp-legal section */
.pp-legal { padding:70px 5vw 110px; }
.pp-legal-inner { max-width:760px; margin:0 auto; }
.pp-legal-back { display:inline-block; font-size:13px; color:var(--dim); text-decoration:none; margin-bottom:28px; }
.pp-legal-back:hover { color:var(--ink); }
.pp-legal h1 { font-size:clamp(32px,4.4vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:10px 0 0; }
.pp-legal-updated { color:var(--dim); font-size:13px; margin-top:14px; }
.pp-legal-body { margin-top:40px; font-size:16.5px; line-height:1.85; color:var(--ink); }
.rte h2 { font-size:22px; font-weight:600; letter-spacing:-.015em; margin:46px 0 14px; }
.rte h3 { font-size:17px; font-weight:600; margin:30px 0 10px; }
.rte p { margin:0 0 18px; }
.rte ul, .rte ol { margin:0 0 22px; padding-left:22px; }
.rte li { margin-bottom:11px; line-height:1.75; }
.rte a { color:var(--blue); }
.rte strong { font-weight:600; }

/* footer newsletter */
.f-news-row { display:flex; gap:8px; max-width:280px; }
.f-news-row input { flex:1; min-width:0; font-family:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.f-news-row button { flex:none; font-family:inherit; font-size:14px; font-weight:600; padding:10px 18px; border:0; border-radius:10px; background:var(--blue); color:#fff; cursor:pointer; }
.f-news-row button:hover { background:var(--blue-hi); }

/* cart: free-ship progress bar + cross-sell (drawer-friendly, box-sizing safe) */
.pp-shipbar, .pp-xsell, .pp-xsell * { box-sizing:border-box; }
.pp-shipbar { margin:0 0 16px; max-width:100%; }
.pp-shipbar-txt { font-size:13px; color:var(--ink); margin-bottom:7px; line-height:1.4; }
.pp-shipbar-txt strong { font-weight:600; }
.pp-shipbar-won { color:var(--blue); }
.pp-shipbar-track { height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
/* Slid into place, not resized. The cart updates through morph.js, which patches this
   element instead of replacing it, so the transition really runs - and a width animation
   is laid out and painted on the main thread every frame. translateX, not scaleX: the bar
   is 6px tall with a 99px radius, and scaling it horizontally stretches that end cap into
   an oval at every value under 100%. The track's overflow:hidden clips the overhang. */
.pp-shipbar-fill { height:100%; background:var(--blue); border-radius:99px; transform:translateX(-100%); transition:transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .pp-shipbar-fill { transition:none; } }
.pp-xsell { margin:0 0 16px; max-width:100%; }
.pp-xsell-h { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:600; margin-bottom:8px; }
.pp-xsell-row { display:flex; align-items:center; gap:9px; padding:9px 0; max-width:100%; }
.pp-xsell-row + .pp-xsell-row { border-top:1px solid var(--line); }
.pp-xsell-row img { width:38px !important; height:38px !important; max-width:38px; border-radius:7px; flex:0 0 auto; object-fit:cover; }
.pp-xsell-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.pp-xsell-name { font-size:13px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-xsell-price { font-size:12px; color:var(--dim); }
.pp-xsell-add { flex:0 0 auto; font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 13px; border:1px solid var(--ink); border-radius:99px; background:#fff; color:var(--ink); cursor:pointer; white-space:nowrap; }
.pp-xsell-add:hover { background:var(--ink); color:#fff; }

/* product spec table (AEO-friendly) */
.pp-spec { margin:22px 0; border:1px solid var(--line, #d8dee6); border-radius:12px; overflow:hidden; }
.pp-spec h3 { font-size:14px; font-weight:600; padding:14px 16px; margin:0; background:#f4f6f9; border-bottom:1px solid var(--line, #d8dee6); }
.pp-spec table { width:100%; border-collapse:collapse; font-size:14px; }
.pp-spec th, .pp-spec td { text-align:left; padding:11px 16px; vertical-align:top; line-height:1.5; }
.pp-spec th { width:42%; font-weight:500; color:#5b6470; }
.pp-spec tr + tr th, .pp-spec tr + tr td { border-top:1px solid #edf0f4; }
.pp-coa { margin:14px 0; font-size:13px; color:#5b6470; }

/* homepage cartridge add-on: small, secondary, on its own line below the hero buy button */
.buy-addon { display:flex; width:100%; align-items:center; justify-content:center; gap:7px; margin-top:20px; font-size:12.5px; color:var(--dim); cursor:pointer; }
.buy-addon input { flex:none; width:14px; height:14px; }
.buy-addon:hover { color:var(--ink); }

/* calculator "?" help tooltips (CSS-only, hover + tap-focus) */
.pp-help { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--dim); font-size:11px; font-weight:600; cursor:help; vertical-align:middle; position:relative; user-select:none; }
.pp-help:hover, .pp-help:focus { border-color:var(--blue); color:var(--blue); outline:none; }
.pp-help-bubble { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:220px; max-width:70vw; background:var(--ink); color:#fff; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; padding:10px 12px; border-radius:10px; z-index:20; box-shadow:0 8px 24px rgba(16,20,24,.18); }
.pp-help-bubble::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ink); }
.pp-help:hover .pp-help-bubble, .pp-help:focus .pp-help-bubble { display:block; }

/* calculator how-to intro line + inline ? marker */
.tool-howto { margin-top:10px; font-size:13.5px; color:var(--dim); line-height:1.55; max-width:70ch; }
.pp-help-inline { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--line); font-size:10px; color:var(--dim); vertical-align:middle; }

/* kit dynamic description */
.kit-desc-block[hidden] { display:none !important; }

/* generic variant description blocks */
.pp-vardesc-block[hidden] { display:none !important; }

/* cookie consent banner */
.pp-consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:2147483647; max-width:560px; margin:0 auto; background:var(--ink); color:#e6ebf2; border-radius:16px; padding:16px 18px; box-shadow:0 16px 44px rgba(16,20,24,.28); display:flex; flex-direction:column; gap:12px; }
.pp-consent[hidden] { display:none; }
.pp-consent-txt { font-size:13px; line-height:1.55; margin:0; }
.pp-consent-txt a { color:#fff; text-decoration:underline; }
.pp-consent-btns { display:flex; gap:10px; justify-content:flex-end; }
.pp-consent-btns button { font-family:inherit; font-size:13px; font-weight:600; padding:9px 18px; border-radius:99px; cursor:pointer; border:0; }
.pp-consent-decline { background:transparent; color:#e6ebf2; border:1px solid rgba(255,255,255,.35) !important; }
.pp-consent-decline:hover { border-color:#fff !important; }
.pp-consent-accept { background:#fff; color:var(--ink); }
.pp-consent-accept:hover { background:#e6ebf2; }
@media (min-width:560px){ .pp-consent { flex-direction:row; align-items:center; } .pp-consent-txt{ flex:1; } .pp-consent-btns{ flex:none; } }
/* Cookie notice vs the floating widgets (2026-09-08): on phones the notice shares the bottom strip with Ask the Lab,
   the PushOwl toast and the Alia teaser, which covered Accept. Lift the notice above that row and hide the
   widgets while html.pp-consent-open is set by the notice script in pp-footer.liquid. */
@media (max-width:559px){ .pp-consent { bottom:calc(96px + env(safe-area-inset-bottom)); } .pp-consent-btns button{ flex:1; } }
html.pp-consent-open #pp-asklab, html.pp-consent-open .pushowl-widget-node, html.pp-consent-open .pushowl-simple-toast { display:none !important; }

/* mini calc: mcg/mg toggle + structured output rows */
.dc-unitwrap { display:inline-flex; align-items:center; gap:6px; }
.dc-unitwrap input { width:64px !important; }
.dc-unit-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:none; }
.dc-unit-toggle button { font-family:inherit; font-size:11px; font-weight:600; padding:5px 8px; border:0; background:#fff; color:var(--dim); cursor:pointer; line-height:1; }
.dc-unit-toggle button.on { background:var(--ink); color:#fff; }
.dc-out { margin-top:14px; display:flex; flex-direction:column; }
.dc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--dim); padding:8px 0; border-top:1px solid var(--line); }
.dc-row:first-child { border-top:0; padding-top:2px; }
.dc-row b { color:var(--ink); font-size:14px; font-weight:600; }
.dc-row.dc-hl b { color:var(--blue); }


/* ---- Collection description (custom-liquid section below the product grid) ----
   The body_html of every collection follows one shape: intro p, h2 sections,
   .pp-acc details (specs + FAQ), .pp-from-the-lab links, italic disclaimer.
   Readable measure + demoted headings; the page title stays the only display-serif. */
.pp-collection-body { max-width:760px; margin:0 auto; padding:38px 20px 8px; border-top:1px solid var(--line); font-size:16px; line-height:1.75; color:var(--ink); }
.pp-collection-body::before { content:"Collection guide"; display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:18px; }
.pp-collection-body > p:first-of-type { font-size:19px; line-height:1.6; letter-spacing:-.012em; }
.pp-collection-body h2 { font-family:'Instrument Sans',sans-serif; font-size:21px; font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:46px 0 12px; color:var(--ink); }
.pp-collection-body h3 { font-family:'Instrument Sans',sans-serif; font-size:16.5px; font-weight:600; letter-spacing:-.005em; margin:28px 0 8px; color:var(--ink); }
.pp-collection-body h3::before { content:""; display:inline-block; width:7px; height:7px; border-radius:2px; background:var(--blue); margin-right:9px; vertical-align:2px; }
.pp-collection-body p { margin:0 0 16px; }
.pp-collection-body a { color:var(--blue); text-underline-offset:2px; }
/* accordions (Specifications / Common questions) */
.pp-collection-body details.pp-acc, .pp-guide details.pp-acc { border:1px solid var(--line); border-radius:14px; background:var(--bg2); margin:28px 0; }
.pp-collection-body .pp-acc summary, .pp-guide .pp-acc summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.pp-collection-body .pp-acc summary::-webkit-details-marker, .pp-guide .pp-acc summary::-webkit-details-marker { display:none; }
.pp-collection-body .pp-acc summary::after, .pp-guide .pp-acc summary::after { content:"+"; font-family:'JetBrains Mono',monospace; font-size:19px; color:var(--blue); line-height:1; }
.pp-collection-body .pp-acc[open] summary::after, .pp-guide .pp-acc[open] summary::after { content:"\2013"; }
.pp-collection-body .pp-acc[open] summary, .pp-guide .pp-acc[open] summary { border-bottom:1px solid var(--line); }
.pp-collection-body .pp-acc-body, .pp-guide .pp-acc-body { padding:16px 18px 4px; }
.pp-collection-body .pp-acc summary h2 { display:inline; font-family:'Instrument Sans',sans-serif; font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0; }
.pp-collection-body .pp-acc + .pp-acc { margin-top:-18px; }
.pp-collection-body .pp-acc-body > p + p, .pp-guide .pp-acc-body > p + p { border-top:1px solid #edf0f4; padding-top:14px; }
.pp-collection-body .pp-acc-body strong, .pp-guide .pp-acc-body strong { font-weight:600; }
/* spec table inside the accordion: the accordion already draws the frame */
.pp-collection-body .pp-acc .pp-spec { border:0; border-radius:0; margin:0 -18px; }
.pp-collection-body .pp-acc .pp-spec th { width:38%; }
/* From The Lab: tappable article cards instead of a bare link list */
.pp-collection-body .pp-from-the-lab { margin:44px 0 8px; }
.pp-collection-body .pp-from-the-lab h2 { margin:0 0 14px; }
.pp-collection-body .pp-from-the-lab ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:10px; }
.pp-collection-body .pp-from-the-lab li a { display:block; height:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:500; line-height:1.5; transition:border-color .15s, box-shadow .15s; }
.pp-collection-body .pp-from-the-lab li a:hover { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
/* compliance small print */
.pp-collection-body > p:last-child { border-top:1px solid var(--line); margin-top:36px; padding-top:18px; }
.pp-collection-body > p:last-child em { font-style:normal; font-size:12.5px; color:var(--dim); line-height:1.7; }
@media (max-width:640px) {
  .pp-collection-body { font-size:15.5px; padding-top:30px; }
  .pp-collection-body > p:first-of-type { font-size:17.5px; }
  .pp-collection-body h2 { font-size:19px; margin-top:38px; }
}

/* ---- The Lab A-Z index (/pages/lab-index) ----
   The page body is owned by the fleet automation, which republishes it as
   <h1>, a lede, a jump paragraph, then <h2>letter</h2> + <ul> pairs. These
   selectors target that shape (and the sectioned .lab-ix-sec variant) so the
   design survives a republish. Controls are built by assets/pp-lab-index.js. */
.lab-index { max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,40px) 70px; }
.lab-index h1 { font-size:clamp(30px,4vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:0 0 16px; }
.lab-index > p { max-width:64ch; font-size:16px; line-height:1.65; color:var(--dim); margin:0 0 26px; }
.lab-index > p b, .lab-index > p strong { color:var(--ink); font-weight:600; }
.lab-index a { color:inherit; }
.lab-index .lab-index-jump[hidden] { display:none; }

/* sticky control bar — 77px clears the sticky nav (#header-group tucks the trustbar) */
.lab-index .lab-ix-bar { position:sticky; top:77px; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:14px 0 12px; margin-bottom:6px; background:rgba(250,251,252,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.lab-index .lab-ix-search { position:relative; flex:1 1 300px; min-width:0; }
.lab-index .lab-ix-input { width:100%; height:44px; padding:0 38px 0 16px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line); border-radius:99px; }
.lab-index .lab-ix-input::-webkit-search-cancel-button { display:none; }
.lab-index .lab-ix-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.lab-index .lab-ix-clear { position:absolute; right:6px; top:6px; width:32px; height:32px; border:0; border-radius:50%;
  background:none; color:var(--dim); font-size:20px; line-height:1; cursor:pointer; }
.lab-index .lab-ix-clear:hover { background:var(--blue-soft); color:var(--ink); }

/* jump letters: real tap targets. This is a <nav>, so the global `nav {}` rule
   at the top of this file lands on it — reset its padding, sticky and layout. */
.lab-index .lab-ix-jump { display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-start;
  position:static; padding:0; border:0; background:none; backdrop-filter:none; z-index:auto; }
.lab-index .lab-ix-jump a { display:flex; align-items:center; justify-content:center; min-width:27px; height:27px; padding:0 5px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500; color:var(--dim); text-decoration:none; border-radius:7px; transition:background .12s, color .12s; }
.lab-index .lab-ix-jump a:hover { background:var(--blue-soft); color:var(--blue); }
.lab-index .lab-ix-count { margin:10px 0 0; font-size:13px; color:var(--dim); }
/* no filter active: don't reserve a blank strip, and don't let the first letter
   heading draw a second rule right under the control bar's own border */
.lab-index .lab-ix-count:empty { display:none; }
.lab-index .lab-ix-count + h2, .lab-index .lab-ix-count + .lab-ix-sec h2 { border-top:0; padding-top:0; margin-top:22px; }

/* letter headings + their lists */
.lab-index h2 { display:flex; align-items:baseline; gap:10px; margin:26px 0 14px; padding-top:30px; border-top:1px solid var(--line);
  font-family:'Instrument Sans',sans-serif; font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--blue);
  scroll-margin-top:132px; }
.lab-index h2[hidden], .lab-index ul[hidden], .lab-index .lab-ix-sec[hidden] { display:none; }
.lab-index .lab-ix-n { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:400; color:var(--dim); letter-spacing:0; }
.lab-index.is-filtering .lab-ix-n { display:none; }
.lab-index ul { list-style:none; margin:0 0 4px; padding:0; columns:3; column-gap:34px; }
.lab-index li { break-inside:avoid; margin:0 0 2px; }
.lab-index li[hidden] { display:none; }
.lab-index li a { display:block; padding:6px 10px; margin-left:-10px; border-radius:8px;
  font-size:14.5px; line-height:1.5; color:var(--ink); text-decoration:none; transition:background .12s, color .12s; }
.lab-index li a:hover { background:var(--blue-soft); color:var(--blue); }

.lab-index .lab-ix-none { margin:40px 0; font-size:15px; color:var(--dim); }
.lab-index .lab-ix-none a { color:var(--blue); }

@media (max-width:1000px) { .lab-index ul { columns:2; } }
@media (max-width:660px) {
  .lab-index ul { columns:1; }
  .lab-index .lab-ix-bar { top:68px; gap:10px; }
  .lab-index h2 { font-size:22px; scroll-margin-top:150px; }
}

/* PP wordmark: preppin' peppers (peppers in brand blue) next to the flask mark */
.logo-text { font-weight:700; font-size:18px; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; line-height:1; }
.logo-text .pin { font-style:italic; color:var(--blue); }
.logo-text em { font-style:normal; color:var(--blue); }

/* buying-guide FAQ accordion: same component as collections, guide type scale */
.pp-guide details.pp-acc { margin:34px 0 8px; }
.pp-guide .pp-acc-body p { font-size:16px; line-height:1.65; margin:0 0 14px; }
.pp-guide .pp-acc summary { font-size:17px; }

/* ── Static content pages, styled to match a blog article ───────────────────
   Covers /pages/about, /pages/contact, /pages/terms-of-use, /pages/disclaimer,
   /pages/editorial-standards and the Shopify policy pages (/policies/*).
   EXCLUDED on purpose: faq, tools, lab-index, guide, peptides, privacy-choices
   and the reconstitution-calculator pages all carry their own layouts, so only
   typography is touched here - never the wrapper width.

   Target spec lifted from .blog-post-content on a live article:
     column   672px          body  Instrument Sans 16.8px / 29.4px (1.75)
     h2       Trirong 24px / 30px, weight 650, tracking -.24px, 35px above

   THE BUG THIS FIXES. /pages/terms-of-use wraps its copy in .pp-legal, which
   pp.css styles for a STANDALONE full-width page: `padding: 70px 5vw 110px`.
   Inside the theme's text block that block is capped at 455px, so 5vw (86px a
   side at 1720px) ate 172px and left a 283px column - headings broke mid-phrase
   ("1. Acceptance of / these terms"). The standalone padding is neutralised
   whenever .pp-legal appears inside a theme section. */
:where(.template-page, .template-policy) :is(.pp-legal, .pp-legal-inner, .pp-legal-body) {
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}
/* Only the INLINE padding is the problem. The authored 70px/110px block padding
   is what gives the page air top and bottom - zeroing it made the copy run
   straight into the heading and the footer. */
:where(.template-page, .template-policy) .pp-legal { padding-block: 34px 80px !important; }

/* one measure for heading and body, so both edges line up */
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) :is(p, ul, ol, blockquote, table) {
  max-width: 100% !important;
  width: auto !important;
}

/* blog body type */
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) :is(p, li) {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16.8px;
  line-height: 1.75;
}
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) p { margin-block-end: 1.05em; }
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) li { margin-block-end: .45em; }

/* blog sub-heading type: Trirong, tight, with air above and almost none below */
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) :is(h2, h3) {
  font-family: 'Trirong', Georgia, serif;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-block: 2em .35em;
  max-width: 100% !important;
}
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) h2 { font-size: 24px; }
:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) h3 { font-size: 19px; }

:where(.template-page:not([class*="template-suffix-"]), .template-suffix-contact,
       .template-suffix-legal, .template-policy)
  :is(.section-content-wrapper, .shopify-policy__container) a:not(.btn) {
  color: var(--blue); text-underline-offset: 2px;
}

/* ── Contact form ───────────────────────────────────────────────────────────
   Was unstyled: borderless grey boxes and a small square submit, on a site that
   uses bordered fields and pill CTAs everywhere else. The intro copy is centred
   by the theme, so the form is centred to match - previously the intro centred
   on x=648 and the form on x=582, and that offset is what read as misaligned. */
.template-suffix-contact .section-content-wrapper form {
  max-width: 640px; margin: 10px auto 0; text-align: center;
}
.template-suffix-contact .section-content-wrapper form :is(input, textarea) { text-align: left; }
.template-suffix-contact .section-content-wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.template-suffix-contact .section-content-wrapper :is(input, textarea)::placeholder { color: var(--dim); }
.template-suffix-contact .section-content-wrapper :is(input, textarea):focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.template-suffix-contact .section-content-wrapper textarea { min-height: 170px; resize: vertical; }
.template-suffix-contact .section-content-wrapper button[type="submit"] {
  background: var(--ink); color: #fff; border: 0; border-radius: 99px;
  padding: 14px 34px; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, background .2s;
}
.template-suffix-contact .section-content-wrapper button[type="submit"]:hover {
  background: var(--blue); transform: translateY(-1px);
}

/* --- visible breadcrumbs (added 2026-08-11, pairs with snippets/pp-breadcrumbs.liquid) --- */
/* pp.css has a bare `nav{}` rule for the site header (sticky top:0, z-50, backdrop). Without these
   neutralizers it leaks onto this <nav> and pins the breadcrumb OVER the header. Keep them. */
.pp-crumbs{display:block;position:static;top:auto;z-index:auto;border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:1200px;margin:0 auto;padding:14px 20px 0;}
.pp-crumbs__list{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:0;padding:0;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pp-crumbs__list::-webkit-scrollbar{display:none;}
.pp-crumbs__item{display:flex;align-items:center;white-space:nowrap;font-size:13px;line-height:1.4;color:var(--dim,#5b6470);}
.pp-crumbs__item+.pp-crumbs__item::before{content:"/";margin:0 8px;color:var(--line,#c9d1db);flex:none;}
.pp-crumbs__item a{color:var(--dim,#5b6470);text-decoration:none;border-bottom:1px solid transparent;}
.pp-crumbs__item a:hover{color:var(--blue,#1e4fd8);border-bottom-color:currentColor;}
.pp-crumbs__item a:focus-visible{outline:2px solid var(--blue,#1e4fd8);outline-offset:2px;border-radius:2px;}
.pp-crumbs__item[aria-current="page"]{color:var(--ink,#101418);}
.pp-crumbs__item[aria-current="page"] span{display:inline-block;max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
@media (max-width:749px){
  .pp-crumbs{padding:10px 16px 0;}
  .pp-crumbs__item{font-size:12px;}
  .pp-crumbs__item[aria-current="page"] span{max-width:22ch;}
}

/* buyer FAQ block (snippets/pp-buyer-faq.liquid): reuses the collection-body accordion styling on product pages; label + no top rule so it sits under the description */
.pp-buyer-faq { border-top:0; padding:14px 0 0; }
.pp-buyer-faq::before { content:"Before you buy"; }
.pp-buyer-faq details.pp-acc { margin:14px 0; }
.pp-buyer-faq .pp-acc + .pp-acc { margin-top:-4px; }


/* ---- Lab article hero: show the whole illustration (Oliver 2026-09-20) ----
   The hero is an image-block locked to aspect-ratio 16/9 with object-fit:cover, and the theme caps
   the box at 440px tall. A box shorter than width x 9/16 cannot hold a 16:9 picture, so cover
   resolved it by cropping - the clock lost its top and the fridge its base on every article.
   These images are drawn at 16:9 on purpose, so nothing should be trimmed.
   The selector is deliberately heavy: theme styles.css loads AFTER pp.css, so an equal-weight
   !important there wins on source order. html+body+attr+class outranks it whatever the order.
   Scoped by the block's own __blog-post-image class, so product and section image blocks are untouched. */
html body [class*="__blog-post-image"].image-block {
  max-width: 1040px !important;
  margin-inline: auto !important;
}
html body [class*="__blog-post-image"] img.image-block__image,
html body [class*="__blog-post-image"] .image {
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px;
}


/* ---- breadcrumbs must not widen the page (2026-09-21) ----
   The breadcrumb bar is a flex ITEM of main.content-for-layout, and a flex item's default
   min-width:auto refuses to shrink below its own content. On the bac-water product page the trail
   reads Home / Diluents & Bacteriostatic Water / Bacteriostatic Water 30 ml, which measures 472px
   inside a 390px phone - so the nav stretched the layout and the overflow-x:auto already set on
   .pp-crumbs__list never got the chance to scroll, because the list was never the thing overflowing.
   body{overflow-x:hidden} then clipped the evidence, which is why nobody saw a scrollbar while
   pp_guard has reported the overflow on every run for weeks.
   min-width:0 lets the bar shrink so the inner list scrolls, as it was designed to. */
.pp-crumbs {
  max-width: 100%;
  min-width: 0;
}
.pp-crumbs__list {
  min-width: 0;
  max-width: 100%;
}