/** Shopify CDN: Minification failed

Line 386:8 Expected identifier but found whitespace
Line 386:9 Unexpected "var("

**/
/* =================================================================
   RIT PERFORMANCE — RESTORE
   Product-page specific styles (extends theme.css)
   ================================================================= */

/* ---------- Crumbs ---------- */
.crumbs{
  background: var(--ink-deep);
  border-bottom: 1px solid var(--iron);
}
.crumbs__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.crumbs__inner a{ color: var(--ash); transition: color .2s; }
.crumbs__inner a:hover{ color: var(--hydrant-red); }
.crumbs__inner span > span{ color: var(--iron); }
.crumbs__current{ color: var(--bone); }

/* ---------- PDP MAIN ---------- */
.pdp{
  background: var(--ink-black);
}
.pdp__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
}

/* ---- Gallery ---- */
.pdp__gallery{
  display: flex; flex-direction: column;
  gap: 16px;
  position: sticky; top: 100px;
}
.pdp__main-image{
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at center, rgba(204,0,0,.18), transparent 60%),
    linear-gradient(160deg, #1a0606, #050202);
  border: 1px solid var(--iron);
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp__main-bg{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(255,255,255,.02) 30px 31px),
    radial-gradient(ellipse at 50% 100%, rgba(255,107,53,.18), transparent 60%);
}
.pdp__product{
  position: relative;
  z-index: 2;
}
.pdp__badge{
  position: absolute; top: 20px; left: 20px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  background: var(--ladder-red);
  color: #fff;
  padding: 6px 12px;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(204,0,0,.4);
}
.product-visual__bottle--large{
  width: 200px; height: 440px;
}
.product-visual__bottle--large .product-visual__brand{ font-size: 88px; }
.product-visual__bottle--large .product-visual__name{ font-size: 36px; }
.product-visual__bottle--mini{
  width: 100px; height: 200px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.product-visual__bottle--mini .product-visual__brand{ font-size: 36px; }
.product-visual__bottle--mini .product-visual__cap{ width: 50px; height: 22px; top: -18px; }

/* ---- Thumbs ---- */
.pdp__thumbs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pdp__thumb{
  aspect-ratio: 1 / 1;
  background: var(--ink-deep);
  border: 1px solid var(--iron);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  position: relative;
  overflow: hidden;
  padding: 8px;
}
.pdp__thumb:hover{ border-color: var(--ladder-red); transform: translateY(-2px); }
.pdp__thumb--active{ border-color: var(--ladder-red); }
.pdp__thumb-inner{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  position: relative;
}
.pdp__thumb-wafer{
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--flame-orange), var(--ladder-red));
  box-shadow: 0 0 24px rgba(255,107,53,.5);
}
.pdp__thumb-water{
  width: 50px; height: 70px;
  background: linear-gradient(180deg, transparent, var(--flame-orange));
  border: 1px solid rgba(255,107,53,.5);
  border-radius: 4px;
}
.pdp__thumb-pkg{
  width: 70px; height: 50px;
  background: linear-gradient(180deg, var(--ink-black), var(--ink-deep));
  border: 1px solid var(--ladder-red);
  border-radius: 2px;
  position: relative;
}
.pdp__thumb-pkg::after{
  content: "R";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 28px;
  color: var(--ladder-red);
}

/* ---- Buy box ---- */
.pdp__buybox{
  padding-top: 8px;
}
.pdp__rating{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.pdp__stars{
  color: var(--ladder-red);
  font-size: 16px;
  letter-spacing: 4px;
}
.pdp__rating-link{
  font-size: 13px;
  color: var(--ash);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pdp__title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--bone);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.pdp__sub{
  font-size: 14px;
  color: var(--ash);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.pdp__price-row{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.pdp__price{
  font-family: var(--display);
  font-size: 44px;
  color: var(--bone);
  letter-spacing: .02em;
}
.pdp__price-strike{
  font-size: 18px;
  color: var(--ash);
  text-decoration: line-through;
}
.pdp__price-save{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  background: var(--ladder-red);
  color: #fff;
  padding: 4px 8px;
}
.pdp__ship{
  font-size: 13px;
  color: var(--ash);
  margin-bottom: 32px;
}

/* ---- Variant ---- */
.pdp__variant{ margin-bottom: 24px; }
.pdp__variant-label{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
}
.pdp__variant-label a{
  font-size: 11px;
  color: var(--ash);
  text-decoration: underline;
}
.pdp__variant-opts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pdp__opt{
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s, background .2s;
}
.pdp__opt input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pdp__opt:hover{ border-color: rgba(204,0,0,.4); }
.pdp__opt--active{
  border-color: var(--ladder-red);
  background: rgba(204,0,0,.08);
  box-shadow: 0 0 0 1px var(--ladder-red);
}
.pdp__opt::after{
  content: "";
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px;
  border: 1px solid var(--iron);
  border-radius: 50%;
}
.pdp__opt--active::after{
  border-color: var(--ladder-red);
  background: radial-gradient(circle, var(--ladder-red) 40%, transparent 45%);
}
.pdp__opt-name{
  font-size: 14px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: .04em;
}
.pdp__opt-price{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ash);
}
.pdp__opt-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  background: var(--ladder-red);
  color: #fff;
  padding: 2px 6px;
  margin-top: 4px;
  width: fit-content;
}

/* ---- Subscribe ---- */
.pdp__subscribe{
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.pdp__sub-opt{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.pdp__sub-opt input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pdp__sub-opt::before{
  content: "";
  width: 18px; height: 18px;
  border: 1px solid var(--iron);
  border-radius: 50%;
  flex-shrink: 0;
}
.pdp__sub-opt--active{ border-color: var(--ladder-red); background: rgba(204,0,0,.06); }
.pdp__sub-opt--active::before{ border-color: var(--ladder-red); background: var(--ladder-red); box-shadow: inset 0 0 0 3px var(--ink-deep); }
.pdp__sub-opt strong{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: .04em;
}
.pdp__sub-opt strong em{
  font-style: normal;
  color: var(--ladder-red);
  background: rgba(204,0,0,.15);
  padding: 2px 6px;
  margin-left: 4px;
  font-size: 12px;
}
.pdp__sub-opt span{
  display: block;
  font-size: 12px;
  color: var(--ash);
  font-family: var(--mono);
  letter-spacing: .06em;
}

/* ---- ATC ---- */
.pdp__atc{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.pdp__qty{
  display: flex; align-items: center;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
  height: 60px;
}
.pdp__qty button{
  background: transparent;
  border: none;
  color: var(--bone);
  font-size: 22px;
  width: 50px;
  height: 100%;
  transition: color .2s, background .2s;
}
.pdp__qty button:hover{ color: var(--ladder-red); background: rgba(204,0,0,.06); }
.pdp__qty span,
.pdp__qty .cart__qty-input{
  display: inline-grid; place-items: center;
  width: 50px;
  height: 100%;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
  background: var(--ink-deep);
  border: none;
  text-align: center;
  -moz-appearance: textfield;
  appearance: none;
  outline: none;
  cursor: text;
}
.pdp__qty .cart__qty-input{
  border-left: 1px solid var(--iron);
  border-right: 1px solid var(--iron);
}
  color: var(--bone);
}
.pdp__atc-btn{
  height: 60px;
  width: 100%;
  justify-content: center;
  font-size: 16px;
  letter-spacing: .15em;
}

/* ---- Trust ---- */
.pdp__trust{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
}
.pdp__trust li{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--bone);
}
.pdp__trust-mark{
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  background: var(--ladder-red);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Payments ---- */
.pdp__payments{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--iron);
}
.pdp__payments > span:first-child{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash);
  margin-right: 8px;
}
.pdp__pay{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  padding: 4px 8px;
  background: var(--ink-deep);
  border: 1px solid var(--iron);
  color: var(--bone);
  border-radius: 2px;
}

/* ---------- WHY ---------- */
.why{
  background: var(--charred-ember);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.why__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.why__copy h2{ margin: 16px 0 24px; }
.why__copy .lede{ margin-bottom: 32px; }
.checklist li strong{ color: var(--bone); font-weight: 700; }
.why__footnote{
  margin-top: 24px;
  padding: 16px;
  border-left: 2px solid var(--ladder-red);
  font-size: 13px;
  color: var(--ash);
  font-style: italic;
}
.why__visual{
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.why__wafer{
  position: relative;
  width: 320px; height: 320px;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
}
.why__wafer-disc{
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff8c1a, var(--ladder-red) 50%, #6a0000 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 100px rgba(255,107,53,.4), 0 30px 80px rgba(0,0,0,.7);
  position: relative;
  animation: floatSlow 5s ease-in-out infinite;
}
@keyframes floatSlow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.why__wafer-disc::before{
  content: ""; position: absolute; inset: 30px;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 50%;
}
.why__wafer-disc::after{
  content: ""; position: absolute; inset: 14px;
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.4));
  border-radius: 50%;
}
.why__wafer-label{
  font-family: var(--display);
  font-size: 44px;
  color: #fff;
  letter-spacing: .08em;
  position: relative;
  z-index: 2;
}
.why__wafer-qty{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  position: relative;
  z-index: 2;
}
.why__bubbles{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.why__bubbles span{
  position: absolute;
  background: var(--flame-orange);
  border-radius: 50%;
  opacity: .8;
}
.why__bubbles span:nth-child(1){ width:14px;height:14px;top:20%;left:10%;animation: floatBubble 4s ease-in-out infinite; }
.why__bubbles span:nth-child(2){ width:10px;height:10px;top:30%;right:8%;animation: floatBubble 3s ease-in-out infinite .5s; }
.why__bubbles span:nth-child(3){ width:8px;height:8px;bottom:20%;left:18%;animation: floatBubble 3.4s ease-in-out infinite 1s; }
.why__bubbles span:nth-child(4){ width:12px;height:12px;bottom:30%;right:15%;animation: floatBubble 3.8s ease-in-out infinite .8s; }
.why__bubbles span:nth-child(5){ width:6px;height:6px;top:50%;left:5%;animation: floatBubble 2.8s ease-in-out infinite .3s; }
@keyframes floatBubble{
  0%,100%{ transform: translateY(0); opacity:.6; }
  50%{ transform: translateY(-30px); opacity:1; }
}

/* ---------- BRAND STORY ---------- */
/* Lives inside .why__inner so it inherits the 2-col grid + max-width/padding.
   .brand-story__media is column 1, .brand-story__copy is column 2. */
.brand-story{
  background: var(--charred-ember);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
/* "above" + "none" drop the grid and stack as single column */
.brand-story--above .why__inner,
.brand-story--none .why__inner{
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: center;
}
/* "left" puts the image in column 1 (default), "right" puts it in column 2.
   Both render via the same 2-col grid — just the column order reverses.
   Markup order is always: media first, copy second. We use CSS `order`
   to flip them visually. */
.brand-story--left  .why__inner{ grid-template-columns: 1fr 1.2fr; }
.brand-story--right .why__inner{ grid-template-columns: 1.2fr 1fr; }
/* Default: copy is column 1 (visually first), media is column 2.
   To put image on the LEFT, push media to column 1 and copy to column 2. */
.brand-story--left  .brand-story__media{ order: 1; }
.brand-story--left  .brand-story__copy { order: 2; }
/* For "right", the default order is already correct — no swap needed.
   (Be explicit anyway so future readers don't have to think about it.) */
.brand-story--right .brand-story__media{ order: 2; }
.brand-story--right .brand-story__copy { order: 1; }
/* Stack on mobile regardless of position */
@media (max-width: 899px){
  .brand-story--left  .why__inner,
  .brand-story--right .why__inner{
    grid-template-columns: 1fr;
  }
  .brand-story--left  .brand-story__media,
  .brand-story--right .brand-story__media,
  .brand-story--left  .brand-story__copy,
  .brand-story--right .brand-story__copy{ order: 0; }
}
.brand-story__media{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--iron);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.brand-story__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.brand-story__copy{
  /* Inherits why__copy's spacing. Override --center variant only when paired
     with an image (text shouldn't be hard-centered next to a photo). */
}
.brand-story--left .brand-story__copy,
.brand-story--right .brand-story__copy{
  text-align: left;
}
.brand-story--left .brand-story__copy .eyebrow,
.brand-story--left .brand-story__copy .display,
.brand-story--left .brand-story__copy .lede,
.brand-story--right .brand-story__copy .eyebrow,
.brand-story--right .brand-story__copy .display,
.brand-story--right .brand-story__copy .lede{
  text-align: left;
  margin-left: 0;
}

/* ---------- WHY (NEW) ---------- */
/* Brand-elevating "why this product exists" section with value props,
   bridge paragraph, and closing tagline. Lives between brand-story
   and the brand video. Markup order is always: media first, copy
   second; CSS `order` flips them visually for left/right layouts. */
.why-section{
  background: var(--ink-black);
  color: var(--bone);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
/* "above" + "none" drop the grid and stack as single column */
.why-section--above .why__inner,
.why-section--none .why__inner{
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: left;
}
/* Two-column ratios per position — same as brand-story */
.why-section--left  .why__inner{ grid-template-columns: 1fr 1.2fr; }
.why-section--right .why__inner{ grid-template-columns: 1.2fr 1fr; }
/* left: media col 1, copy col 2. right: media col 2, copy col 1. */
.why-section--left  .why-section__media{ order: 1; }
.why-section--left  .why-section__copy { order: 2; }
.why-section--right .why-section__media{ order: 2; }
.why-section--right .why-section__copy { order: 1; }
/* Stack on mobile */
@media (max-width: 899px){
  .why-section--left  .why__inner,
  .why-section--right .why__inner{
    grid-template-columns: 1fr;
  }
  .why-section--left  .why-section__media,
  .why-section--right .why-section__media,
  .why-section--left  .why-section__copy,
  .why-section--right .why-section__copy{ order: 0; }
}
.why-section__media{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--iron);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.why-section__media--placeholder{
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.04);
  border: 2px dashed rgba(255,255,255,.15);
  box-shadow: none;
  display: grid;
  place-items: center;
}
.why-section__placeholder-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  text-align: center;
  line-height: 1.4;
}
.why-section__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.why-section__copy{
  /* default left-aligned on side-by-side layouts */
  text-align: left;
}
.why-section__copy .eyebrow,
.why-section__copy .display,
.why-section__copy .lede,
.why-section__copy .checklist{
  text-align: left;
  margin-left: 0;
}
/* Closing tagline — punchy, like a manifesto footer */
.why-section__tagline{
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.35;
  color: var(--ladder-red);
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--iron);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---------- RECOVERY MANIFESTO ---------- */
/* Full-width banner: photo background, dark scrim, copy overlaid.
   Sits between buy box and brand story — breaks up the side-by-side
   pattern with a single visual moment. */
.recovery-manifesto{
  position: relative;
  background: var(--ink-black);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.recovery-manifesto__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
}
.recovery-manifesto__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
/* Dark gradient scrim — denser on the left where the copy lives.
   Keeps the photo visible on the right side for atmosphere.
   Opacity is driven by theme-editor 'scrim_opacity' setting; gradient
   stops use high base values (1.0/0.95/0.7/0.4) so the slider can
   both lighten AND darken the scrim from a balanced midpoint. */
.recovery-manifesto__scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,10,10,1)    0%,
      rgba(10,10,10,0.95) 40%,
      rgba(10,10,10,0.7)  70%,
      rgba(10,10,10,0.4)  100%);
}
.recovery-manifesto__inner{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) var(--pad);
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.recovery-manifesto__eyebrow{
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ladder-red);
  margin-bottom: 16px;
  display: inline-block;
  border-left: 3px solid var(--ladder-red);
  padding-left: 14px;
}
.recovery-manifesto__heading{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recovery-manifesto__line{
  display: block;
}
.recovery-manifesto__line--strong{
  color: var(--bone);
}
.recovery-manifesto__body{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--bone);
  opacity: .85;
  max-width: 560px;
  margin: 0;
}
/* Mobile: tighter padding, single-line heading wrap */
@media (max-width: 600px){
  .recovery-manifesto__scrim{
    background:
      linear-gradient(180deg,
        rgba(10,10,10,0.6) 0%,
        rgba(10,10,10,0.95) 50%,
        rgba(10,10,10,1)    100%);
  }
  .recovery-manifesto__inner{
    padding: clamp(60px, 12vh, 120px) var(--pad);
    min-height: 380px;
  }
  .recovery-manifesto__image{
    object-position: center 30%;
  }
}

/* ---------- USAGE ---------- */
.usage{
  background: var(--ink-black);
}
.usage__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.usage__inner > .display{ margin-bottom: 56px; }
.usage__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.usage__card{
  padding: 40px 28px;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .2s, transform .2s;
}
.usage__card:hover{ border-color: var(--ladder-red); transform: translateY(-4px); }
.usage__card--accent{
  border-color: var(--ladder-red);
  background: linear-gradient(160deg, rgba(204,0,0,.12), var(--ink-deep));
}
.usage__when{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--ladder-red);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--iron);
}
.usage__card h3{
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--bone);
}
.usage__card p{
  font-size: 14px;
  color: var(--ash);
  line-height: 1.5;
  flex: 1;
}
.usage__dose{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--bone);
  padding-top: 16px;
  border-top: 1px solid var(--iron);
}

/* ---------- SPECS ---------- */
.specs{
  background: var(--ink-deep);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.specs__inner{
  max-width: 920px;
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.specs__inner > .display{ margin-bottom: 56px; }
.specs__panel{
  border: 1px solid var(--iron);
  background: #fff;
  color: #000;
  padding: 40px;
}
.specs__serving{
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid #000;
  font-size: 14px;
}
.specs__serving strong{ font-weight: 700; }
.specs__serving span{ color: #555; }
.specs__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.specs__table th, .specs__table td{
  text-align: left;
  padding: 14px 8px;
  border-bottom: 1px solid #e0e0e0;
}
.specs__table th{
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 2px solid #000;
}
.specs__table td:nth-child(2),
.specs__table td:nth-child(3),
.specs__table th:nth-child(2),
.specs__table th:nth-child(3){ text-align: right; }
.specs__highlight{
  background: rgba(204,0,0,.08);
  font-weight: 700;
}
.specs__highlight td{ color: var(--ladder-red); }
.specs__footnote{
  margin-top: 24px;
  font-size: 11px;
  font-style: italic;
  color: #666;
}

/* ---------- REVIEWS ---------- */
.reviews{
  background: var(--ink-black);
}
.reviews__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.reviews__head{
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; flex-wrap: wrap; gap: 16px;
}
.reviews__head h2{ margin-top: 8px; }
.reviews__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.reviews__card{
  padding: 32px;
  border: 1px solid var(--iron);
  background: var(--ink-deep);
  display: flex; flex-direction: column; gap: 16px;
}
.reviews__rating{
  color: var(--ladder-red);
  font-size: 16px;
  letter-spacing: 3px;
}
.reviews__card h4{
  font-size: 18px;
  font-weight: 700;
  color: var(--bone);
}
.reviews__card p{
  font-size: 14px;
  color: var(--bone);
  line-height: 1.6;
  flex: 1;
}
.reviews__card footer{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 16px;
  border-top: 1px solid var(--iron);
}

/* ---------- DEPT CTA ---------- */
.dept-cta{
  background:
    linear-gradient(135deg, #1a0606, var(--ink-black) 60%);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.dept-cta__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.dept-cta__copy h2{ margin: 16px 0 24px; font-size: clamp(36px, 5vw, 64px); }
.dept-cta__panel{
  padding: 32px;
  border: 1px solid var(--iron);
  background: rgba(10,10,10,.6);
}
.dept-cta__panel h4{
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .12em;
  color: var(--bone);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--iron);
}
.dept-cta__panel ul{ display: flex; flex-direction: column; gap: 12px; }
.dept-cta__panel li{
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px;
  color: var(--bone);
}
.dept-cta__panel li span{
  color: var(--ladder-red);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- CROSS-SELL ---------- */
.crosssell{
  background: var(--charred-ember);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.crosssell__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.crosssell__inner > .display{ margin-bottom: 56px; }
.crosssell__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.crosssell__card{
  padding: 32px;
  border: 1px solid var(--iron);
  background: var(--ink-black);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: border-color .25s;
}
.crosssell__card:hover{ border-color: var(--ladder-red); }
.crosssell__media{
  height: 200px;
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.crosssell__card h4{
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .04em;
  color: var(--bone);
}
.crosssell__card p{
  font-size: 13px;
  color: var(--ash);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crosssell__price{
  font-family: var(--display);
  font-size: 28px;
  color: var(--ladder-red);
  letter-spacing: .04em;
}
.crosssell__card .btn{ width: 100%; justify-content: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .pdp__inner{ grid-template-columns: 1fr; }
  .pdp__gallery{ position: static; }
  .why__inner,
  .dept-cta__inner{ grid-template-columns: 1fr; }
  .usage__grid,
  .crosssell__grid{ grid-template-columns: 1fr; }
  .reviews__grid{ grid-template-columns: 1fr; }
  .pdp__trust{ grid-template-columns: 1fr; }
}

/* =====================================================
   PRODUCT IMAGE LIGHTBOX
   Minimal dark backdrop, centered image, prev/next nav
   ===================================================== */
.pdp__lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 64px);
  animation: lightboxFade .18s ease;
}
.pdp__lightbox--open{ display: flex; }
@keyframes lightboxFade{ from{ opacity:0; } to{ opacity:1; } }
.pdp__lightbox-stage{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 90vh;
  cursor: zoom-out;
}
.pdp__lightbox-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.6));
  animation: lightboxZoom .25s ease;
}
@keyframes lightboxZoom{
  from{ transform: scale(.92); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.pdp__lightbox-close,
.pdp__lightbox-prev,
.pdp__lightbox-next{
  position: absolute;
  background: rgba(255,255,255,.08);
  color: var(--bone);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .15s;
  z-index: 2;
}
.pdp__lightbox-close{
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  font-size: 28px;
}
.pdp__lightbox-prev{
  left: clamp(8px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
}
.pdp__lightbox-next{
  right: clamp(8px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
}
.pdp__lightbox-prev:hover,
.pdp__lightbox-next:hover,
.pdp__lightbox-close:hover{
  background: var(--ladder-red);
  border-color: var(--ladder-red);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.pdp__lightbox-close:hover{ transform: scale(1.08); }
.pdp__lightbox-counter{
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--bone);
  background: rgba(0,0,0,.5);
  padding: 8px 16px;
  border-radius: 2px;
}
@media (max-width: 600px){
  .pdp__lightbox-close,
  .pdp__lightbox-prev,
  .pdp__lightbox-next{
    width: 40px; height: 40px;
    font-size: 24px;
  }
}

/* ---------- VIDEO BLOCK ---------- */
.video-block{
  background: var(--ink-deep);
  padding: var(--section-pad-y) var(--pad);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.video-block__inner{
  max-width: var(--maxw);
  margin: 0 auto;
}
.video-block__head{
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 40px;
}
.video-block__head .display{ margin: 8px 0 12px; }
.video-block__head .lede{
  font-size: 15px;
  color: var(--ash);
  line-height: 1.5;
  margin: 0;
}
.video-block__frame{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-black);
  overflow: hidden;
  border: 1px solid var(--iron);
  max-width: 960px;
  margin: 0 auto;
}
.video-block__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--ink-black);
}
.video-block__play{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Radial overlay: transparent at the center (where the play button
     sits), only darkens at the edges. Keeps dark posters visible
     instead of being uniformly darkened. */
  background: radial-gradient(circle at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.25) 75%, rgba(0,0,0,.45) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .2s, opacity .2s;
  font-family: var(--body);
  z-index: 2;
}
.video-block__play:hover{ background: radial-gradient(circle at center, rgba(0,0,0,0) 25%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.55) 100%); }
.video-block__play:focus-visible{
  outline: 2px solid var(--ladder-red);
  outline-offset: -4px;
}
.video-block__play.is-hidden{
  opacity: 0;
  pointer-events: none;
}
.video-block__play-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid #fff;
  color: #fff;
  transition: transform .15s, background .15s;
  backdrop-filter: blur(2px);
}
.video-block__play:hover .video-block__play-circle{
  transform: scale(1.06);
  background: var(--ladder-red);
  border-color: var(--ladder-red);
}
.video-block__play-label{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.video-block__caption{
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 20px 0 0;
}