/* =============================================================================
   PEAKPHORM RESEARCH — theme.css
   Loaded after themes/default/assets/css/theme.css. Redefining default's own
   --cf-* custom properties here (rather than overriding every .cf-* class
   individually) is what re-skins every inherited page - cart, checkout,
   account, auth, pagination, price display - to this theme's black/white
   palette for free, without touching a single file under themes/default.
   ============================================================================= */

/* Paths are relative to THIS FILE's own published location
   (public/themes/peakphormresearch/css/theme.css) - fonts/ is a sibling of
   css/, not nested inside it, so the reference must climb out one level. A
   bare 'fonts/...' 404s in every real browser (Pest's HTTP tests never
   fetch CSS sub-resources, which is how this went undetected). */
@font-face {
  font-family: 'Gilroy-Bold';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2'),
       url('../fonts/Gilroy-Bold.woff') format('woff'),
       url('../fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Base palette (re-skins every inherited default-theme page) */
  --cf-bg: #050505;
  --cf-surface: #0a0a0a;
  --cf-fg: #f5f5f5;
  --cf-muted: #9a9a9a;
  --cf-line: rgba(255,255,255,0.12);
  --cf-line-strong: rgba(255,255,255,0.22);
  --cf-panel: #121212;
  --cf-warn: #f5c451;
  --cf-warn-bg: #2a2210;
  --cf-ok: #34d399;
  --cf-ok-bg: #0f2a20;
  --cf-radius: 14px;
  --cf-radius-sm: 8px;
  --cf-shadow: 0 12px 30px rgba(0,0,0,0.45);
  --cf-max: 1280px;
  --cf-accent: #ffffff;
  --cf-accent-text: #000000;

  /* Theme-specific tokens */
  --pr-font-heading: 'Gilroy-Bold', 'Inter', sans-serif;
  --pr-font-body: 'Instrument Sans', 'Inter', sans-serif;
  --pr-section-py: clamp(48px, 6vw, 88px);
  --pr-px: clamp(20px, 4vw, 48px);
}

body {
  font-family: var(--pr-font-body);
  -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Default theme's white-background form controls (login/register/checkout/
   account fields, and the product page's quantity input via .cf-qty-stepper
   input) inherit body's --cf-fg, which this theme sets to near-white for the
   dark surfaces around them - invisible text on their white background.
   Scoped to the light-background control set only; dark controls like
   .pr-search input keep inheriting --cf-fg as intended. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea,
.cf-qty-stepper input {
  color: #111;
  -webkit-text-fill-color: #111;
  opacity: 1;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: #777;
  -webkit-text-fill-color: #777;
}

h1, h2, h3 {
  font-family: var(--pr-font-heading);
  letter-spacing: 0.2px;
}

/* `body.pr-home` rather than `.pr-home` on purpose: the generic
   `.pr-section h2` rule further down carries the same specificity and is
   declared later, so a bare .pr-home selector would lose and every homepage
   heading would render at 40px instead of the source's 45px. */
body.pr-home h2 {
  font-size: clamp(35px, 3.2vw, 45px);
  /* Source: font-size:45px; line-height:45px on every homepage h2. */
  line-height: 1;
}
.pr-home .pr-section { padding-block: 60px; }

/* ============================================================================
   HOMEPAGE BANDS
   ============================================================================
   The source homepage is NOT a single dark page. It runs on a white body with
   exactly one full-bleed #1E1E1E band inserted in the middle, and that
   alternation is the composition - the off-white Why cards, their 8px black
   top border and their 34px black glow only read against white, and the FAQ
   is black-on-white type.

   Scoped to `body.pr-home` rather than the --cf-* tokens on purpose: cart,
   checkout, account and auth are inherited from themes/default and stay on
   this theme's dark palette. Only the homepage has a documented light
   composition to restore. */
body.pr-home { background: #ffffff; }

/* Homepage geometry, measured off the source at 1440:
     - header, dark band and FAQ are FULL-BLEED with 60px side padding, so
       their content runs 60 -> 1365 (1305 wide)
     - only the Why section is boxed, at min(100%, 1140px) centred
   The shared 1280px/clamp container started homepage content at x=120 instead
   of x=60, which is why every band read visibly narrower than the original.
   Scoped to body.pr-home so About/Shop/product/cart keep the CartFly
   container they were designed against. */
body.pr-home .pr-container {
  max-width: none;
  padding-inline: 60px;
}
.pr-home .pr-why { max-width: 1140px; margin-inline: auto; }

.pr-home-band { position: relative; }
.pr-home-band--light { background: #ffffff; color: #000; }
/* Source: --e-global-color-14c9094 on the band container. */
.pr-home-band--dark { background: #1E1E1E; color: #fff; padding-block: 60px; }

/* The source's Elementor reset zeroes heading and paragraph margins and then
   sets the ones it actually wants. Without this, the browser's own 0.83em h2
   margin adds ~37px above every homepage heading and pushes the whole page
   out of step with the original's spacing. Listed one by one rather than as a
   blanket reset so the deliberate margins further down keep winning. */
body.pr-home h2 { margin: 0; }
body.pr-home .pr-hero h1 { margin: 0 0 18px; }
body.pr-home .pr-why .pr-feature p,
body.pr-home .pr-how-it-works__step p { margin: 0; }
body.pr-home .pr-card__title { margin: 0 0 4px; }
body.pr-home .pr-card__price { margin: 0; }

.pr-container {
  max-width: var(--cf-max);
  margin-inline: auto;
  padding-inline: var(--pr-px);
}

/* Recovered promotional strip, inserted explicitly on Home, About and Shop. */
.pr-marquee {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 86px;
  padding: 10px;
  overflow: hidden;
  background: #8a8a8a;
  color: #000000;
  font-family: var(--pr-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
}
.pr-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: pr-marquee-scroll 90s linear 250ms infinite;
}
.pr-marquee__group {
  display: flex;
  flex: none;
}
.pr-marquee__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  white-space: nowrap;
  margin: 10px;
  padding: 10px;
}
.pr-marquee__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  flex: none;
}
.pr-marquee:hover .pr-marquee__track { animation-play-state: paused; }
@keyframes pr-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-marquee__track { animation: none; }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: opacity .2s, transform .2s, background .2s, color .2s;
}
.pr-btn--primary {
  background: #ffffff;
  color: #000000;
}
.pr-btn--primary:hover { opacity: .85; transform: translateY(-1px); }
.pr-btn--outline {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.pr-btn--outline:hover { border-color: #ffffff; background: rgba(255,255,255,0.06); }
.pr-btn--small { padding: 10px 20px; font-size: 13px; }

/* ----------------------------------------------------------------------------
   Homepage buttons - the source's compound pill
   ----------------------------------------------------------------------------
   Every major button on the source homepage is one shape: a 70px transparent
   pill with the label on the left and a 48px white circular arrow badge on the
   right (source: `.sty-btn svg { height:3em; width:3em }` at a 16px base, plus
   `flex-direction: row-reverse` on the content wrapper). The earlier pass
   rendered these as flat 14px pills with no badge.

   One deliberate deviation, and the only one in this pass: the source paints
   the label and 1px border of the two in-band buttons with
   --e-global-color-primary (#000) on the #1E1E1E band, which is very nearly
   invisible. The same .sty-btn class renders WHITE in the hero, so the shape
   is reproduced exactly and the label is kept white on the dark band. */
.pr-home .pr-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 16px;
  border-radius: 100px;
  /* Source: padding:10px 5px 10px 30px - the small right inset is what lets
     the 48px badge sit flush inside the pill. */
  padding: 10px 5px 10px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pr-home .pr-btn--small { padding: 10px 5px 10px 30px; font-size: 16px; }
.pr-btn__label { display: block; }
.pr-btn__icon,
.pr-btn__icon svg { display: block; width: 48px; height: 48px; flex: none; }

/* Source: the hero's primary CTA is the one button with a filled gradient. */
.pr-home .pr-btn--primary {
  background: linear-gradient(247deg, #E0E0E0 0%, rgba(76,75,77,0.44) 100%);
  color: #000;
  border: 0;
}
.pr-home .pr-btn--primary:hover { opacity: 1; transform: translateY(-1px); }

.pr-home .pr-btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.pr-home .pr-btn--outline:hover { background: rgba(255,255,255,0.06); }

/* Keep both dark-band homepage CTA labels legible in every link state. */
.pr-home .pr-btn--onband,
.pr-home .pr-btn--onband:link,
.pr-home .pr-btn--onband:visited,
.pr-home .pr-btn--onband:hover,
.pr-home .pr-btn--onband:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: #fff;
}
.pr-home .pr-btn--onband:hover,
.pr-home .pr-btn--onband:focus-visible { background: rgba(255,255,255,0.06); }

/* The source's rotating conic border on `.sty-btn`: a 1.5px ring masked to the
   button's own edge, sweeping once every 3s. @property is what makes an angle
   animatable; browsers without it simply show a static edge, which is why the
   real border above is a plain 1px white line rather than being faked here. */
@property --pr-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.pr-home .pr-btn--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--pr-angle), transparent 0deg, transparent 310deg, #fff 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: pr-border-rotate 3s linear infinite;
  pointer-events: none;
}
@keyframes pr-border-rotate {
  from { --pr-angle: 0deg; }
  to { --pr-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-home .pr-btn--outline::before { animation: none; }
}

/* ============================================================================
   HEADER
   ============================================================================ */
.pr-header {
  position: relative;
  z-index: 100;
  background: #000;
}
.pr-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 86px;
}
.pr-header__brand {
  flex: 0 0 15%;
  display: flex;
  justify-content: flex-start;
}
/* Source: `width:90%; max-width:90%` with no pixel cap - the earlier 150px cap
   shrank the wordmark by about 15% against the original. */
.pr-header__brand img { display: block; width: 90%; max-width: 190px; height: auto; }
.pr-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Source spaces nav items with per-link padding, not a flex gap. */
  gap: 0;
  flex: 1 1 65%;
  margin-right: auto;
  padding: 10px 25px;
  border-radius: 20px;
  background: rgba(217,217,217,.16);
}
.pr-header__nav a {
  font-family: var(--pr-font-heading);
  /* Source: Gilroy-Bold 16px/20px at weight 400, padding 13px 20px. */
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  padding: 13px 20px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
.pr-header__nav a:hover { color: #ffffff; }

.pr-nav-dropdown { position: relative; }
.pr-nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pr-font-heading);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  padding: 13px 20px;
  color: #fff;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
}
.pr-nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 200px;
  background: #0a0a0a;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  padding: 8px;
  display: none;
  flex-direction: column;
  box-shadow: var(--cf-shadow);
}
.pr-nav-dropdown.is-open .pr-nav-dropdown__panel { display: flex; }
.pr-nav-dropdown__panel a {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #e4e4e4;
}
.pr-nav-dropdown__panel a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.pr-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 20%; }
.pr-search { display: flex; align-items: center; gap: 6px; }
.pr-search input {
  background: var(--cf-panel);
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 13px;
  width: 180px;
}
.pr-search input::placeholder { color: #9a9a9a; -webkit-text-fill-color: #9a9a9a; }
.pr-search button { background: none; border: none; color: #e4e4e4; cursor: pointer; display: flex; }
.pr-header__account a,
.cf-cart-badge {
  /* Source pills measure 72x58 and 72x56. */
  min-width: 72px;
  min-height: 58px;
  padding: 14px 24px;
  border-radius: 12px;
  background: rgba(217,217,217,.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Source: `.elementor-icon { font-size:24px }` with `svg { height:24px }` -
   both glyphs are drawn 24px tall, not at their own viewBox size. */
.pr-header__account svg,
.cf-cart-badge svg { display: block; width: auto; height: 24px; }
.pr-nav-dropdown__caret { display: inline-flex; }
.pr-nav-dropdown__caret svg { display: block; width: 10px; height: 10px; fill: currentColor; }
.pr-header__account a:hover { color: #fff; }

.cf-cart-badge { position: relative; }
.cf-cart-badge:hover { color: #fff; }
.cf-cart-badge__count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #ffffff;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.pr-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Source: rgba(0,0,0,.05) at 22px with a 3px radius and 5.5px padding. */
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 3px;
  padding: 5.5px;
  color: #fff;
  cursor: pointer;
}
.pr-menu-toggle__icon { display: flex; }
.pr-menu-toggle__icon svg { display: block; width: 22px; height: 22px; fill: currentColor; }
/* The source swaps a menu-bar glyph for a close glyph while the panel is open;
   site.js flips aria-expanded, so no extra state hook is needed. */
.pr-menu-toggle__icon--close,
.pr-menu-toggle[aria-expanded="true"] .pr-menu-toggle__icon--open { display: none; }
.pr-menu-toggle[aria-expanded="true"] .pr-menu-toggle__icon--close { display: flex; }

/* Source: the desktop header sits in the page with `margin: 20px 0 -86px`, so
   it overlays the top of the hero card rather than pushing it down. Below the
   source's own tablet breakpoint it swaps to a solid black bar in normal flow
   (elementor-hidden-tablet on one container, elementor-hidden-desktop on the
   other), which is what the 1024px block further down does. */
@media (min-width: 1025px) {
  /* These three source routes intentionally overlay their hero. Every other
     commerce and auth route stays in the base, in-flow header treatment. */
  body.pr-home .pr-header,
  body.pr-about .pr-header,
  body.pr-shop .pr-header {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 10;
  }
}

/* ============================================================================
   HERO
   ============================================================================
   Layered so a future hero video can be dropped in without touching this
   CSS: .pr-hero__media holds an <img> fallback (always present) and an
   optional <video> (absolutely positioned, object-fit: cover) - if the
   video's <source> 404s the browser simply shows nothing for it and the
   image beneath remains visible. .pr-hero__overlay is the gradient that
   sits above both so text stays readable either way. */
/* Source: the hero is a rounded card inset 30px from each side of a WHITE
   page, with a 20px gap above it - not a full-bleed section. The frame
   collapses below the desktop breakpoint so the approved mobile hero is
   untouched. */
.pr-hero-frame { background: #ffffff; }
@media (min-width: 1025px) {
  .pr-home .pr-hero-frame { padding: 20px 30px 0; }
}
.pr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 650px;
  overflow: hidden;
  /* Source: --border-radius:50px 50px 0px 0px */
  border-radius: 50px 50px 0 0;
}
.pr-hero__media { position: absolute; inset: 0; z-index: 0; }
.pr-hero__fallback,
.pr-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The video sits above the fallback image; if it never paints (autoplay
   refused, decode failure, file absent) the image below stays visible. */
.pr-hero__video { z-index: 1; }
.pr-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Source: linear-gradient(139deg, #000000 26%, #F2295B00 100%) - the second
     stop is fully transparent (alpha 00), so only the black matters. */
  background: linear-gradient(139deg, #000000 26%, rgba(0,0,0,0) 100%);
}
.pr-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  /* Source mobile: --padding-top/bottom:60px */
  padding-block: 60px;
}
.pr-hero__content { max-width: 560px; text-align: center; margin-inline: auto; }
.pr-hero h1 {
  /* Source: Gilroy-Bold 65px/75px, capitalize. */
  font-size: clamp(32px, 6vw, 65px);
  line-height: 1.155;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 18px;
}
.pr-hero__sub {
  /* Source: Instrument Sans 16px/26px. */
  font-size: 16px;
  color: #d8d8d8;
  margin-bottom: 32px;
  line-height: 26px;
}
.pr-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Source mobile breakpoint is max-width:767px, so desktop starts at 768. */
@media (min-width: 768px) {
  .pr-hero { min-height: 1029px; }
  .pr-about-hero { min-height: 800px; }
  .pr-hero__content { text-align: left; margin-inline: 0; max-width: 520px; }
  .pr-hero__actions { justify-content: flex-start; }
}

/* Mobile keeps the approved landscape video in normal flow directly below
   the sticky header, then places the existing copy beneath it. Desktop stays
   on the layered full-bleed composition above. */
@media (max-width: 767px) {
  .pr-home .pr-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
  }
  .pr-home .pr-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: none;
    order: 0;
  }
  .pr-home .pr-hero__fallback,
  .pr-home .pr-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .pr-home .pr-hero__overlay { display: none; }
  .pr-home .pr-hero__inner {
    position: static;
    z-index: auto;
    order: 1;
    width: auto;
    padding-block: clamp(28px, 7vw, 44px);
  }
  /* The approved stacked mobile hero (video, then copy beneath) sits in normal
     flow, so it inherits the new white homepage background - which left white
     type on white. The composition is meant to read as ONE dark hero, so the
     frame and the stacked content area are painted black here rather than
     re-tinting four pieces of typography. Hero -> gray marquee -> white Why
     then reads as a deliberate sequence. */
  .pr-home .pr-hero-frame,
  .pr-home .pr-hero { background: #000; }
  .pr-home .pr-hero__content {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }
  .pr-home .pr-hero__sub { margin-bottom: 24px; }
  .pr-home .pr-hero__actions { justify-content: center; }
  .pr-about-hero { min-height: 650px; }
}

/* ============================================================================
   PEAKPHORM CONTACT — source-specific presentation
   ============================================================================
   Contact is intentionally separate from both the five-page `.pr-info-*`
   foundation and the generic `.pr-legal` fallback. */
body.pr-contact-page { background: #fff; color: #000; }
.pr-contact-page .pr-main { overflow: hidden; }
/* Contact renders its own inline form feedback; suppress the shell's duplicate
   summary without changing flash behavior on any other route. */
.pr-contact-page .pr-main > .pr-container { display: none; }

@media (min-width: 768px) {
  body.pr-contact-page .pr-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 110;
  }
  body.pr-contact-page .pr-header__inner { min-height: 116px; }
}

.pr-contact-page .pr-header__nav a[aria-current="page"] { color: #fff; }

.pr-contact-hero {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 800px;
  margin: 30px 30px 0;
  padding: 60px;
  overflow: hidden;
  border-radius: 50px 50px 0 0;
  color: #fff;
}
.pr-contact-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pr-contact-hero__content {
  position: relative;
  z-index: 1;
  width: 50%;
  transform: translateY(-8px);
}
.pr-contact-hero h2 {
  width: 87%;
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--pr-font-heading);
  font-size: 45px;
  line-height: 45px;
  font-weight: 500;
}
.pr-contact-hero p {
  max-width: 470px;
  margin: 0;
  color: #fff;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
}

.pr-contact-ticker {
  box-sizing: border-box;
  height: 86px;
  margin: 0 30px;
  padding: 20px 10px;
  overflow: hidden;
  background: transparent;
  color: #000;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}
.pr-contact-ticker__track {
  display: flex;
  width: max-content;
  gap: 40px;
  animation: pr-contact-ticker-scroll 90s linear 250ms infinite;
}
.pr-contact-ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 46px;
  padding: 10px;
  white-space: nowrap;
}
.pr-contact-ticker__track span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  flex: none;
}
.pr-contact-ticker:hover .pr-contact-ticker__track { animation-play-state: paused; }
@keyframes pr-contact-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pr-contact-section { margin: 0 30px; padding: 60px 60px 66px; background: #fff; }
.pr-contact-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.47fr) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}
.pr-contact-form-column,
.pr-contact-promo { min-width: 0; }
.pr-contact-form { position: relative; }
.pr-contact-field { margin: 0 0 10px; }
.pr-contact-field input,
.pr-contact-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 6px 16px;
  background: #fff;
  color: #000;
  -webkit-text-fill-color: #000;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
  box-shadow: none;
}
.pr-contact-field input { height: 47px; }
.pr-contact-field textarea { height: 196px; resize: vertical; }
.pr-contact-field input::placeholder,
.pr-contact-field textarea::placeholder { color: #000; opacity: 1; }
.pr-contact-field input:focus,
.pr-contact-field textarea:focus { outline: 2px solid #000; outline-offset: 2px; }
.pr-contact-field [aria-invalid="true"] { border-color: #9b1c1c; }
.pr-contact-field__error {
  margin: 6px 0 0;
  color: #9b1c1c;
  font-size: 14px;
  line-height: 20px;
}
.pr-contact-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pr-contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pr-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 123px;
  min-height: 46px;
  border: 0;
  border-radius: 50px;
  padding: 10px 30px;
  background: #000;
  color: #fff;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}
.pr-contact-submit:hover { background: #242424; }
.pr-contact-feedback {
  margin: 0 0 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 22px;
}
.pr-contact-feedback--success { background: #edf8f0; color: #20632d; }
.pr-contact-feedback--error { background: #fff1f1; color: #8b1d1d; }

.pr-contact-promo__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 671 / 670;
  object-fit: cover;
}
.pr-contact-promo h2 {
  margin: 20px 0;
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 40px;
  line-height: 40px;
  font-weight: 500;
}
.pr-contact-promo p {
  margin: 0 0 34px;
  color: #000;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
}
.pr-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 282px;
  min-height: 70px;
  border-radius: 100px;
  padding: 10px 5px 10px 30px;
  background: #000;
  color: #fff;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
}
.pr-contact-cta:hover { color: #fff; transform: scale(.98); }
.pr-contact-cta__icon,
.pr-contact-cta__icon svg { display: block; width: 49px; height: 49px; }

@media (prefers-reduced-motion: reduce) {
  .pr-contact-ticker__track { animation: none; }
  .pr-contact-cta { transition: none; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  /* Elementor shortens the Contact header at tablet width and pulls the
     recovered hero sequence upward by the same 38px. Its two content columns
     also resolve to 474px / 305px at the required 1024px viewport. */
  .pr-contact-hero { margin-top: -8px; }
  body.pr-contact-page .pr-header__inner { min-height: 78px; }
  .pr-contact-section__inner {
    grid-template-columns: minmax(0, 474fr) minmax(0, 305fr);
  }
}

@media (max-width: 767px) {
  body.pr-contact-page .pr-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    background: #000;
  }
  .pr-contact-hero {
    height: 650px;
    margin: 10px 10px 0;
    padding: 60px 10px;
  }
  .pr-contact-hero__content { width: 100%; }
  .pr-contact-hero h2 {
    width: 100%;
    margin-bottom: 20px;
    font-size: 35px;
    line-height: 35px;
  }
  .pr-contact-hero p { max-width: 282px; margin-inline: auto; text-align: center; }
  .pr-contact-ticker { margin: 0 10px; }
  .pr-contact-section { margin: 0 10px; padding: 10px 0 7px; }
  .pr-contact-section__inner { grid-template-columns: 1fr; gap: 50px; }
  .pr-contact-promo h2 { margin-top: 20px; }
}

@media (min-width: 400px) and (max-width: 767px) {
  body.pr-contact-page .pr-header__inner { min-height: 97px; }
}

@media (max-width: 399px) {
  body.pr-contact-page .pr-header__inner { min-height: 90px; }
}

/* A visitor who has asked for less motion gets the still fallback, not a
   looping video they cannot stop. */
@media (prefers-reduced-motion: reduce) {
  .pr-hero__video { display: none; }
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
.pr-section { padding-block: var(--pr-section-py); }
.pr-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.pr-section h2 {
  font-size: clamp(26px, 4vw, 40px);
  color: #fff;
}
.pr-gradient-text {
  background: linear-gradient(to bottom, #ffffff 20%, #808080 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pr-section-title--center {
  text-align: center;
  margin-bottom: 42px;
}

/* Only ONE heading on the source homepage is a gradient - "Why Choose us"
   (`.sty-gred h2`), and it runs black-to-white for a white background. Every
   other homepage h2 is solid: white on the dark band, black in the FAQ. The
   earlier pass applied an inverted white-to-gray gradient to all five. */
.pr-home-band--dark h2,
.pr-home-band--dark h3 { color: #fff; }
.pr-home-band--light .pr-faq-layout__heading { color: #000; }
.pr-why__heading {
  text-align: center;
  background: linear-gradient(to bottom, #000000 20%, #FFFFFF 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pr-section-divider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* Source: 20px between the label and the rule. */
  gap: 20px;
  padding: 60px 0 30px;
}
.pr-section-divider span {
  font-family: var(--pr-font-heading);
  color: #fff;
  font-size: 22px;
  line-height: 30px;
}
.pr-section-divider img {
  display: block;
  width: 100%;
  height: 1px;
}
/* Source: the FAQ divider is a CSS rule in --e-global-color-primary (#000) on
   white, with the label in Inter - not the white gradient Line-4.svg the two
   in-band dividers use. */
.pr-section-divider--faq span {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  line-height: 26px;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
}
.pr-section-divider__rule {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px solid #000;
}

/* Section rhythm inside the bands (source paddings). */
.pr-focus { padding: 0; background: none; }
.pr-popular,
.pr-how-it-works { padding: 0; }
.pr-faq-section { padding-block: 20px 60px; }

/* ============================================================================
   CATEGORY TILES / RESEARCH FOCUS
   ============================================================================ */
/* The band supplies #1E1E1E now (see HOMEPAGE BANDS) - the source's Research
   Focus container and everything down to the ordering section share one
   continuous band, so this section must not paint its own. */
.pr-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Source: gap 10px, and the grid carries the section's lower padding. */
  gap: 10px;
  padding-block: 30px 60px;
}
/* Source `.sty-box-dom`: #1d1d1d, a SOLID white 1px edge (the id rule
   overrides the .18 alpha in the theme's own stylesheet), 22px radius,
   30px/20px padding, 184px tall. */
.pr-category-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Source icon-box wrapper gap. */
  gap: 5px;
  text-align: center;
  min-height: 184px;
  background: #1d1d1d;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 30px 20px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.pr-category-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
/* The source's cursor-tracking spotlight edge and glow. --x/--y are written by
   site.js on pointer move; with no pointer (or no JS) both layers stay at
   opacity 0 and the tile is simply the static card above. */
.pr-category-tile::before,
.pr-category-tile::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.pr-category-tile::before {
  inset: 0;
  padding: 1px;
  background: radial-gradient(180px circle at var(--pr-x, 50%) var(--pr-y, 50%), rgba(255,255,255,.95), rgba(255,255,255,.35) 20%, rgba(255,255,255,.08) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.pr-category-tile::after {
  inset: -1px;
  background: radial-gradient(220px circle at var(--pr-x, 50%) var(--pr-y, 50%), rgba(255,255,255,.12), transparent 65%);
}
.pr-category-tile:hover::before,
.pr-category-tile:hover::after { opacity: 1; }
.pr-category-tile > * { position: relative; z-index: 1; }
/* Source draws every one of these at 50x50 regardless of viewBox. */
.pr-category-tile__icon,
.pr-category-tile__icon svg { display: block; width: 50px; height: 50px; }
.pr-category-tile__name {
  font-family: var(--pr-font-heading);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  /* Source: 22px/28px with margin 8px 0 5px. */
  font-size: 22px;
  line-height: 28px;
  margin: 8px 0 5px;
}
/* The source's second tile line ("Research", or "Blends" on the peptide tile).
   The earlier pass replaced it with visually-hidden product-count text, which
   left every tile one line short. */
.pr-category-tile__sub {
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

/* ============================================================================
   PRODUCT GRID / CARD
   ============================================================================ */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(var(--cf-grid-columns, 4), 1fr);
  /* Source loop grid: 30px. */
  gap: 30px;
}
/* Popular Research Materials always shows 4, independent of the merchant's
   configurable shop-page column count. */
.pr-grid--four { grid-template-columns: repeat(4, 1fr); }
.pr-card {
  background: transparent;
  border-radius: 20px;
  transition: background .2s;
}
.pr-card:hover { background: rgba(255,255,255,0.05); }
.pr-card__link { display: block; padding: 16px; }
.pr-card__media {
  aspect-ratio: 1 / 1;
  background: #101010;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pr-card__placeholder { width: 100%; height: 100%; display: block; background: #1a1a1a; }
.pr-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pr-card__title {
  font-family: var(--pr-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 4px;
}
.pr-card__price { font-family: var(--pr-font-heading); font-size: 15px; font-weight: 700; color: #e5e7eb; }
/* The source's homepage product card is a TRANSPARENT 20px-radius card with
   20px padding, no border, a square untinted image, a 15px title and a 16px
   price. The card treatment already above this line was correct; the earlier
   pass overrode it with a fill, a border, a 10px radius and inflated type.
   The only homepage-specific rules left are the ones that genuinely differ. */
.pr-home .pr-card__link { padding: 20px; }
.pr-home .pr-card__media { border-radius: 0; background: transparent; margin-bottom: 20px; }
.pr-home .pr-card__media img { object-fit: contain; }
.pr-home .pr-card__title { font-size: 15px; line-height: 26px; }
.pr-home .pr-card__price { font-size: 16px; line-height: 16px; }
/* Source: a 61-viewBox circular arrow drawn at 50px. The white disc is part of
   the artwork, so the wrapper must not paint its own. */
.pr-card__arrow {
  flex: none;
  display: block;
  width: 50px;
  height: 50px;
}
.pr-card__arrow svg { display: block; width: 50px; height: 50px; }
.pr-card__stock { padding: 0 16px 14px; font-size: 12px; color: var(--cf-warn); }
.pr-card__add-form { padding: 0 16px 14px; }
.pr-card__add-btn { width: 100%; }
/* The homepage `.pr-btn` rule above shapes the source's compound hero pill -
   a 30px/5px asymmetric padding that exists to seat a 48px icon badge. This
   card button has no badge, so it needs its own symmetric shape; it also
   aligns to the card's own 20px gutter rather than the inherited 16px. This
   is CartFly commerce UI with no counterpart in the source, so it is styled
   to sit quietly under the recovered product presentation. */
.pr-home .pr-card__add-form { padding: 0 20px 16px; }
.pr-home .pr-card__add-btn {
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 22px;
  gap: 0;
}
.pr-home .pr-card__status { padding: 0 20px 12px; }
/* Inherited .cf-add-status already carries `:empty { display: none }`, so
   this only adds card-specific spacing and never occupies height until the
   cart JS actually writes a message into it. */
.pr-card__status { padding: 0 16px 12px; margin: 0; font-size: 12px; line-height: 1.4; }

/* ============================================================================
   WHY CHOOSE US
   ============================================================================ */
.pr-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(180px, 30fr) minmax(0, 35fr);
  gap: 40px;
  align-items: center;
  margin-top: -60px;
}
/* Scroll-driven, not a timed float: site.js maps this image's travel through
   the viewport onto translateY +200px..-200px and rotateZ +25deg..-25deg,
   reproducing the source's Elementor motion effect (translateY speed 4,
   rotateZ speed 0.5, affected range 0-100%, all devices). It must not move
   while the visitor is stationary. */
/* The wrapper is the grid item and the measuring anchor - it is never
   transformed, so its rect stays a pure function of layout and scroll (see
   initScrollMotion in site.js). The image inside it is what moves. */
.pr-why__vial {
  display: block;
  width: 100%;
  max-width: 307px;
  justify-self: center;
}
.pr-why__image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  will-change: transform;
  /* Source: --e-transform-transition-duration:100ms */
  transition: transform 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .pr-why__image { transform: none !important; transition: none; }
}

.pr-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.pr-feature-grid--side { grid-template-columns: 1fr; gap: 40px; }
.pr-feature-grid--three { grid-template-columns: repeat(3, 1fr); }
.pr-why .pr-feature {
  background: #f9f9f9;
  border: 0;
  border-top: 8px solid #000;
  border-radius: 10px;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
}
.pr-feature__icon {
  width: 67px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
/* Source: `elementor-position-inline-start` - the icon sits to the LEFT of the
   text with a 15px gap, and is drawn at 50x50 despite its 67 viewBox. The
   earlier pass stacked it above the heading at full viewBox size. */
.pr-why .pr-feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.pr-why .pr-feature__icon {
  flex: none;
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: inherit;
}
.pr-why .pr-feature__icon svg { display: block; width: 50px; height: 50px; }
.pr-why .pr-feature__text { min-width: 0; }
.pr-feature h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.pr-feature p { color: var(--cf-muted); font-size: 14px; line-height: 1.7; }
/* Source: Gilroy-Bold 25px/30px capitalize, margin 8px 0 5px; body copy in
   Instrument Sans 14px/26px. Both solid black on the white section. */
.pr-why .pr-feature h3 {
  color: #000;
  font-size: 25px;
  line-height: 30px;
  text-transform: capitalize;
  margin: 8px 0 5px;
}
.pr-why .pr-feature p {
  color: #000;
  font-family: var(--pr-font-body);
  font-size: 14px;
  line-height: 26px;
}

/* ============================================================================
   HOW TO COMPLETE YOUR ORDER
   ============================================================================
   Two equal columns, 50px apart. The heading lives INSIDE the left column
   above the artwork, and the three cards are sticky: the source pins each one
   50px from the top of the viewport within its parent (Elementor sticky,
   sticky_offset 50, sticky_parent yes, all devices), so they stack as the
   visitor scrolls past the artwork. Nothing in this subtree may take
   `overflow: hidden` or the stickiness dies silently. */
.pr-how-it-works__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}
.pr-how-it-works__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Source: the heading is 81% of its column and left-aligned, not centred
   across the row. */
.pr-how-it-works__intro h2 { width: 81%; }
.pr-how-it-works__artwork {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 10px;
}
/* Centred in the column, which is what leaves the ~78px of headroom the first
   card's overhanging badge needs, and gives the sticky cards their travel. */
.pr-how-it-works__grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: 100%;
}
.pr-how-it-works__step {
  position: sticky;
  top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  border-radius: 14px;
  border: 1px solid rgba(76,75,77,.44);
  background: linear-gradient(90deg, #32302a 0%, #3e3e3e 100%);
  color: #fff;
}
/* The source layers a large 01/02/03 numeral into each card as an Elementor
   background overlay on ::before - `background-position: bottom right;
   background-repeat: no-repeat; background-size: 30% auto` at full opacity
   (the artwork itself is a near-transparent gradient fill). Two number
   treatments per card, not one: this watermark AND the 50px badge. */
.pr-how-it-works__step::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 30% auto;
}
.pr-how-it-works__step--1::before { background-image: url('../images/how-it-works-01.svg'); }
.pr-how-it-works__step--2::before { background-image: url('../images/how-it-works-02.svg'); }
.pr-how-it-works__step--3::before { background-image: url('../images/how-it-works-03.svg'); }
/* Keeps the badge and copy above the watermark. */
.pr-order-icon,
.pr-how-it-works__step-body { position: relative; z-index: 1; }
/* Source: `margin:-83px 0 -14px -17px` with `align-self:flex-start` - the
   badge hangs off the card's top-left corner rather than sitting inside it,
   and is drawn at 50px despite its 92 viewBox. */
.pr-order-icon {
  align-self: flex-start;
  margin: -83px 0 -14px -17px;
}
.pr-order-icon,
.pr-order-icon svg { display: block; width: 50px; height: 50px; }
/* Source: the text block is 73% wide with 18px side padding. */
.pr-how-it-works__step-body { width: 73%; padding: 0 18px; }
.pr-how-it-works__step h3 { color: #fff; font-size: 26px; line-height: 30px; font-weight: 600; margin-bottom: 5px; }
.pr-how-it-works__step p { color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 22px; }

/* ============================================================================
   FAQ
   ============================================================================ */
/* Source composition: heading on the left, accordion on the right, both on the
   white page. The earlier pass stacked them full-width on near-black. */
.pr-faq-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.pr-faq-layout__heading { color: #000; margin: 0; }
.pr-faq { max-width: 100%; }
/* Source: --n-accordion-item-title-space-between:17px */
.pr-faq details { margin-bottom: 17px; }
.pr-faq summary {
  cursor: pointer;
  color: #000;
  background: #fff;
  border-bottom: 1px solid #000;
  font-family: var(--pr-font-heading);
  /* Source: --n-accordion-title-font-size:1rem at weight 400. */
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  /* Source: --n-accordion-padding:15px 15px 15px 0px */
  padding: 15px 15px 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pr-faq summary::-webkit-details-marker { display: none; }
/* Source uses real artwork for both states - a chevron-down when collapsed and
   a minus when expanded - not a CSS "+"/"-" pair. */
.pr-faq__icon { flex: none; display: flex; align-items: center; color: #000; }
.pr-faq__icon svg { display: block; width: 13px; height: 15px; fill: currentColor; }
.pr-faq details:not([open]) .pr-faq__icon--open,
.pr-faq details[open] .pr-faq__icon--closed { display: none; }
/* Source: the answer panel is transparent between two 1px #D5D8DC rules. */
.pr-faq p {
  color: #000;
  background: transparent;
  font-family: var(--pr-font-body);
  font-size: 15px;
  line-height: 23px;
  border-top: 1px solid rgb(213,216,220);
  border-bottom: 1px solid rgb(213,216,220);
  padding: 18px 0;
  margin: 0;
}

/* ============================================================================
   GENERIC STATIC/INFORMATIONAL PAGE (legal/informational, via the Page model)
   ============================================================================
   Shared foundation for the five recovered informational pages (Terms,
   Privacy, Return & Refund, Payment Process, Shipping Process) plus any
   future merchant-authored page rendered through PageController. All five
   source pages share ONE Elementor template - same hero, same white content
   panel, same single heading tier, same list treatment - so this is built
   directly from that shared template rather than from any one page's copy.

   HEADER: informational pages use the IN-FLOW header, same as Product Detail.
   `pr-info-page` is deliberately absent from the desktop overlay selector
   list above (`body.pr-home .pr-header, body.pr-about .pr-header,
   body.pr-shop .pr-header`) - do not add it there. The base `.pr-header {
   position: relative }` rule already covers this page correctly by doing
   nothing extra, exactly as it does for Cart/Login/Register/Product.

   NOT PRESENT IN THE SOURCE, therefore not built here: breadcrumb, numbered
   (ordered) lists, nested lists, tables, callout/notice boxes, process/step
   cards, section dividers. Do not add any of these speculatively - a page
   that genuinely needs one should add it scoped to itself, not here.

   APPLIED BY ALLOWLIST, NOT BY DEFAULT. `body.pr-info-page` is emitted only
   for the five recovered slugs (see pages/page.blade.php). Contact Us and
   every future merchant page keep the generic `.pr-legal` treatment further
   down, exactly as they did before this foundation existed. */
body.pr-about,
body.pr-shop,
body.pr-info-page { background: #fff; color: #000; }
.pr-about .pr-main,
.pr-shop .pr-main,
.pr-info-page .pr-main { overflow: hidden; }

/* Source content column: the hero is inset 30px and padded 60px, so the text
   column is 90px from the viewport edge and the same width as the hero's own
   content box. */
.pr-info-container { width: min(100% - 180px, 1260px); margin-inline: auto; }

/* Hero: a static background image (no video, no gradient overlay - the
   source has neither), inset 30px, 50px top radius. */
.pr-info-hero {
  position: relative;
  box-sizing: border-box;
  min-height: 500px;
  margin: 30px 30px 0;
  padding: 90px 60px 60px;
  border-radius: 50px 50px 0 0;
  overflow: hidden;
  color: #fff;
}
.pr-info-hero__media,
.pr-info-hero__media img { position: absolute; inset: 0; }
.pr-info-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/*
 * The title is VERTICALLY CENTRED in the hero's padded content box, not
 * pushed down from the top: the source column is a flex column with
 * `justify-content: center`, measured at 1440 (243px above / 213px below a
 * 45px title inside a 350px box) and again at 430 (180/180). Reproducing
 * that with a fixed top padding would drift the moment a title wrapped to a
 * different number of lines.
 *
 * The column is HALF the hero's content box and the title is 87% of that
 * column - which is what actually governs where the title wraps. Measured:
 * 1440 -> column 623, title 542; 1024 -> column 415, title 361. Both are
 * proportions, so there is no 1024 breakpoint to write; the source has none
 * either, and a hard-coded max-width here is exactly what made the title run
 * too wide at 1024 before.
 */
.pr-info-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  min-height: 350px;
}
.pr-info-hero h1 {
  width: 87%;
  color: #fff;
  font-family: var(--pr-font-heading);
  font-size: 65px;
  line-height: 75px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}
/* Terms & Conditions alone sets its hero title two steps down. This is the
   only per-page difference in the shell, so it is the only modifier. */
.pr-info-hero--sm-title h1 { font-size: 45px; line-height: 45px; }

/* White content panel. NOTE: no title rule here - the heading that opens the
   panel is page CONTENT in the source (which is why Privacy Policy opens
   h2 "PeakPhorm Research" + h3 "Privacy Policy" while its siblings repeat
   their own title), so it arrives through PageView::bodyHtml() below. */
.pr-info-content { padding: 60px 0 100px; }
.pr-info-copy { color: #000; font-family: var(--pr-font-body); font-size: 16px; line-height: 26px; }
.pr-info-copy h2 {
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 40px;
  line-height: 40px;
  font-weight: 500;
  margin: 40px 0 16px;
}
.pr-info-copy h3 {
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
  margin: 24px 0 12px;
}
.pr-info-copy h2:first-child,
.pr-info-copy h3:first-child { margin-top: 0; }
.pr-info-copy h2 + h3 { margin-top: 16px; }
.pr-info-copy p { margin: 0 0 14px; }
.pr-info-copy ul { margin: 0 0 16px; padding-left: 40px; list-style: disc; }
.pr-info-copy li { margin-bottom: 8px; }
/* Not present in the current PageView::bodyHtml() output (it emits plain
   text, never an <a>) - defined so a real link degrades sensibly if that
   parser gap is ever closed, without inventing a visual treatment the
   source doesn't have (the source's own mailto text carries no distinct
   styling at all). */
.pr-info-copy a { color: inherit; text-decoration: underline; }

/* GENERIC MERCHANT PAGE - every page that is NOT one of the five recovered
   informational slugs (Contact Us today, anything a merchant creates later).
   Unchanged from before the informational foundation existed: these pages
   never adopted the source's informational template, so they keep the
   theme's own dark-canvas treatment rather than silently inheriting a layout
   built from five specific pages. */
.pr-legal {
  max-width: 780px;
  padding-block: var(--pr-section-py);
}
.pr-legal h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 24px; }
.pr-legal__body { color: #c7c7c7; line-height: 1.8; font-size: 14.5px; }
/* Structure emitted by PageView::bodyHtml() - headings, paragraphs, lists. */
.pr-legal__body h2 {
  color: #fff;
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 36px 0 12px;
}
.pr-legal__body h3 {
  color: #fff;
  font-size: clamp(16px, 2vw, 18px);
  margin: 24px 0 10px;
}
.pr-legal__body h2:first-child,
.pr-legal__body h3:first-child { margin-top: 0; }
.pr-legal__body p { margin: 0 0 14px; }
.pr-legal__body ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.pr-legal__body li { margin-bottom: 8px; }

/* No 1024px breakpoint: hero height, padding and both column proportions are
   identical at 1440 and 1024 in the source - only the mobile block differs. */
@media (max-width: 767px) {
  /* Source mobile: hero inset 10px, padding 60px 20px, 450px tall, and both
     the title column and the title itself go full width. */
  .pr-info-hero { min-height: 450px; margin: 10px 10px 0; padding: 60px 20px; }
  .pr-info-hero__content { width: 100%; min-height: 330px; }
  .pr-info-hero h1 { width: 100%; font-size: 45px; line-height: 45px; }
  .pr-info-hero--sm-title h1 { font-size: 35px; line-height: 35px; }
  /* Source mobile content inset is 10px, matching the hero's own inset. */
  .pr-info-container { width: calc(100% - 20px); }
  .pr-info-content { padding: 40px 0 60px; }
  /* Body typography is NOT scaled down at mobile: the source keeps h2 at
     40/40, paragraphs at 16/26 and list indent at 40px, measured at 430. */
}

/* ============================================================================
   ABOUT US
   ============================================================================ */
.pr-about-hero { min-height: 800px; }
.pr-about-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.pr-about-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; }
.pr-about-hero__intro { color: #b8b8b8; font-size: 15px; line-height: 1.7; max-width: 520px; }
.pr-about-hero__image {
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: var(--cf-radius);
  object-fit: cover;
}
.pr-about-divider { display: block; width: 100%; max-width: 900px; margin: 0 auto; opacity: 0.5; }
.pr-about-intro { max-width: none; }
.pr-about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.pr-about-intro__layout > div { max-width: 560px; }
.pr-about-intro__image { width: 100%; height: auto; }
.pr-about-intro p { color: var(--cf-muted); font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
.pr-about-intro__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.pr-about-approach__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: center;
}
.pr-about-approach__image {
  width: 100%;
  height: auto;
  border-radius: var(--cf-radius);
  object-fit: cover;
}
.pr-about-approach__accent { height: 12px; width: auto; margin-right: 6px; vertical-align: middle; }

/* ============================================================================
   COLLECTION PAGE
   ============================================================================ */
.pr-page-head { padding-top: 48px; padding-bottom: 24px; }
.pr-page-head h1 { color: #fff; font-size: clamp(26px, 4vw, 38px); }
.pr-collection {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding-bottom: var(--pr-section-py);
  align-items: start;
}
.pr-filter {
  background: var(--cf-panel);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  padding: 20px;
  position: sticky;
  top: 108px;
}
.pr-filter h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin-bottom: 14px; }
.pr-filter__group { margin-bottom: 24px; }
.pr-filter__group:last-child { margin-bottom: 0; }
.pr-filter__accordion { padding: 0; }
.pr-filter__accordion summary {
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 14px;
}
.pr-filter__accordion summary::after {
  content: '+';
  color: var(--cf-muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.pr-filter__accordion[open] summary::after { content: '\\2212'; }
.pr-filter__accordion summary::-webkit-details-marker { display: none; }
.pr-filter__accordion:not([open]) .pr-filter__list { display: none; }
.pr-filter__group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pr-filter__group-head h2 { margin-bottom: 0; }
.pr-filter__clear { font-size: 12px; color: var(--cf-muted); text-decoration: underline; }
.pr-filter__clear:hover { color: #fff; }
.pr-filter__list { display: flex; flex-direction: column; gap: 4px; }
.pr-filter__list a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #cfcfcf;
}
.pr-filter__list a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.pr-filter__list a.is-active { background: #fff; color: #000; font-weight: 700; }
.pr-filter__checklist { display: flex; flex-direction: column; gap: 8px; }
.pr-filter__checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cfcfcf;
  cursor: pointer;
}
.pr-filter__checklist label:hover { color: #fff; }
.pr-filter__checklist input { accent-color: #fff; }

/* ============================================================================
   PRODUCT DETAIL
   ============================================================================ */
body.pr-product-page { background: #fff; color: #333; }
.pr-product-page .pr-main { background: #fff; color: #333; overflow: hidden; }
.pr-product-page__canvas { background: #fff; }
.pr-product-source-container { width: min(100%, 1140px); margin-inline: auto; }
.pr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pr-product-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 60px;
  margin-bottom: 16px;
  color: #000;
  font-size: 16px;
  line-height: 26px;
}
.pr-product-breadcrumb a { color: #000; }
.pr-product-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding: 20px 0 60px;
}
.pr-product-source__media-main {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}
.pr-product-source__media-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pr-product-source__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pr-product-source__thumbs button {
  width: 64px;
  height: 64px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  border: 1px solid #b7b7b7;
  border-radius: 6px;
  background: #fff;
}
.pr-product-source__thumbs button.is-active { border-color: #000; }
.pr-product-source__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pr-product-source__summary { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.pr-product-source__summary h1 {
  margin: 0;
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 45px;
  font-weight: 500;
  line-height: 50px;
}
.pr-product-source__price {
  margin: 0;
  color: #958e09;
  font-family: var(--pr-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
}
.pr-product-source__short-description { margin: 0; color: #000; font-size: 16px; line-height: 26px; }
.pr-product-source__stock { margin: 0; color: #958e09; font-size: 14.72px; line-height: 22.08px; }
.pr-product-source__stock--unavailable { color: #7a1d1d; }
.pr-product-source__cart { display: flex; align-items: stretch; width: 100%; height: 39px; margin: 0; }
.pr-product-source__quantity {
  flex: 0 0 58px;
  width: 58px;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font: inherit;
  text-align: center;
}
.pr-product-source__add {
  flex: 1 1 auto;
  margin-left: 10px;
  padding: 6px 18px;
  border: 1px solid #000;
  border-radius: 20px;
  background: #000;
  color: #fff;
  font-family: var(--pr-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  cursor: pointer;
}
.pr-product-source__trust-badge { display: block; width: min(400px, 100%); height: auto; margin: 0; }
.cf-price--was { margin-left: 8px; color: #777; }
.cf-price { color: inherit; }

.pr-product-tabs-source { background: #fff; color: #333; }
.pr-product-tabs-source__list {
  display: flex;
  align-items: end;
  gap: 0;
  padding-left: 16px;
  border-bottom: 1px solid #d3d3d3;
}
.pr-product-tabs-source__list button {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  color: #333;
  font-family: var(--pr-font-body);
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.pr-product-tabs-source__list button[aria-selected="true"] {
  border-color: #d3d3d3;
  background: #fff;
  color: #000;
}
.pr-product-tabs-source__panel { padding: 20px; color: #333; font-size: 16px; line-height: 24px; }
.pr-product-tabs-source__panel[hidden] { display: none; }
.pr-product-tabs-source__panel h2 {
  margin: 0 0 20px;
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 45px;
  font-weight: 500;
  line-height: 54px;
}
.pr-product-tabs-source__panel h3 {
  margin: 20px 0 12px;
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
}
.pr-product-tabs-source__panel p { margin: 0 0 16px; }
.pr-product-tabs-source__panel ul { margin: 0 0 16px; padding-left: 24px; }
.pr-product-tabs-source__panel table { width: 100%; border-collapse: collapse; }
.pr-product-tabs-source__panel th,
.pr-product-tabs-source__panel td { padding: 10px 14px; border: 1px solid #dedede; text-align: left; }
.pr-product-tabs-source__panel th { width: 32%; color: #000; font-weight: 700; }

.pr-product-related-source { padding: 60px 0; background: #fff; }
.pr-product-related-source > h2 {
  margin: 8px 0 16px;
  color: #000;
  font-family: var(--pr-font-heading);
  font-size: 45px;
  font-weight: 500;
  line-height: 54px;
}
body.pr-product-page .pr-product-related-source .pr-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px;
}
.pr-product-page .pr-product-related-source .pr-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 10px;
  background: transparent;
}
.pr-product-page .pr-product-related-source .pr-card:hover { background: transparent; }
.pr-product-page .pr-product-related-source .pr-card__link { padding: 0; }
.pr-product-page .pr-product-related-source .pr-card__media { margin-bottom: 5px; border-radius: 0; background: transparent; }
.pr-product-page .pr-product-related-source .pr-card__media img { object-fit: contain; }
.pr-product-page .pr-product-related-source .pr-card__body { display: block; }
.pr-product-page .pr-product-related-source .pr-card__title {
  margin: 0;
  padding: 8px 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
}
.pr-product-page .pr-product-related-source .pr-card__price { color: #000; font-size: 13.712px; line-height: 20.568px; }
.pr-product-page .pr-product-related-source .pr-card__arrow { display: none; }
.pr-product-page .pr-product-related-source .pr-card__stock,
.pr-product-page .pr-product-related-source .pr-card__add-form,
.pr-product-page .pr-product-related-source .pr-card__status { padding-left: 0; padding-right: 0; }
.pr-product-page .pr-product-related-source .pr-card__add-form { margin-top: auto; padding-bottom: 0; }
.pr-product-page .pr-product-related-source .pr-card__add-btn {
  width: auto;
  margin-top: 16px;
  padding: 6px 16px;
  justify-content: center;
  border-radius: 50px;
  background: #000;
  color: #fff;
  font-family: var(--pr-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.pr-footer {
  background: #1e1e1e;
  padding-top: 60px;
  padding-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.pr-footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-bottom: 48px;
  position: relative;
  z-index: 1;
}
.pr-footer__inner .pr-footer__col { flex: 1 1 0; min-width: 0; }
.pr-footer__inner .pr-footer__col--brand { flex: 1 1 0; }
/* The source's desktop-only column dividers (Line-19.svg) - hidden below
   1024px where columns stack, exactly like the source's own
   elementor-hidden-tablet/mobile classes on the same element. */
.pr-footer__divider { width: 1px; height: 284px; align-self: center; opacity: 1; }
.pr-footer__col:not(.pr-footer__col--brand) { padding: 30px 30px 0 7%; }
.pr-footer__col:last-of-type { padding-left: 30px; }
.pr-footer__col h3 {
  font-size: 25px;
  line-height: 30px;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 18px;
}
.pr-footer__col a { display: block; color: #fff; font-size: 14px; line-height: 26px; margin-bottom: 5px; }
.pr-footer__col a:hover { color: #fff; }
/* Source renders the footer wordmark at 271px; the earlier 190px cap shrank it. */
.pr-footer__brand-logo { display: block; width: 90%; max-width: 271px; height: auto; margin-bottom: 18px; }
.pr-footer__social,
.pr-footer__social svg { display: block; width: 55px; height: 55px; }
.pr-footer__note { display: block; color: #fff; font-size: 14px; line-height: 26px; margin-bottom: 5px; }
.pr-footer__text { color: #8a8a8a; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.pr-footer__contact-link { color: #d1b056 !important; margin-top: 10px; }
.pr-footer__legal {
  padding-block: 18px 28px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.pr-footer__wordmark { display: block; width: 100%; height: auto; margin: 0 auto 26px; opacity: 1; }
.pr-footer__disclaimer { width: 70%; margin-inline: auto; }
.pr-footer__legal h3 { color: #fff; font-size: 14px; margin-bottom: 10px; }
.pr-footer__legal p { color: #fff; font-size: 15px; line-height: 23px; margin-bottom: 8px; }
.pr-footer__bottom {
  border-top: 1px solid #fff;
  padding-top: 20px;
  color: #fff;
  /* Source: Instrument Sans 16px/26px. */
  font-size: 16px;
  line-height: 26px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pr-footer__policy-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.pr-footer__policy-links a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pr-footer__policy-links a > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.pr-footer__glow {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Source: Ellipse-3-3 renders 800x483 in the footer's bottom-right. */
  width: 800px;
  max-width: 60%;
  height: auto;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  /* Source hides the desktop header below its own tablet breakpoint and shows
     a solid black bar in normal flow instead. */
  .pr-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    background: #000;
  }
  .pr-header__nav { display: none; }
  .pr-menu-toggle { display: flex; }
  .pr-header__brand { flex-basis: 47%; }
  .pr-header__actions { flex: 1 1 auto; }
  /* Source keeps all six tiles on ONE row at tablet (--width:15.5%, no wrap);
     auto-fit reproduces that without assuming six categories exist. */
  .pr-category-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .pr-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* Source loop grid: --grid-columns:2 at this breakpoint. The earlier pass
     forced four, cramming four ~230px cards into a tablet row. */
  .pr-home .pr-grid--four { grid-template-columns: repeat(2, 1fr) !important; }
  .pr-feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .pr-feature-grid--three { grid-template-columns: 1fr; }
  .pr-feature-grid--side { gap: 32px; }
  .pr-collection { grid-template-columns: 1fr; }
  .pr-filter { position: static; }
  .pr-product { grid-template-columns: 1fr; gap: 28px; }
  .pr-product-details { grid-template-columns: repeat(2, 1fr); }
  .pr-footer__inner { gap: 22px; }
  .pr-footer__inner .pr-footer__col { flex: 1 1 25%; }
  .pr-footer__col:not(.pr-footer__col--brand) { padding: 24px 0 0; }
  .pr-footer__divider { display: none; }
  .pr-about-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .pr-about-hero__intro { margin-inline: auto; }
  .pr-about-hero__image { justify-self: center; }
  .pr-about-intro__layout { grid-template-columns: 1fr; }
  .pr-about-intro__layout > div { max-width: none; text-align: center; }
  .pr-about-approach__layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pr-search input { width: 130px; }
  .pr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  /* Source: --grid-columns:1 with a 5px gutter below 768. */
  .pr-home .pr-grid--four { grid-template-columns: 1fr !important; gap: 22px; }
  .pr-category-grid { grid-template-columns: repeat(2, 1fr); gap: 15px 5px; }
  .pr-home .pr-section { padding-block: 48px; }
  .pr-home-band--dark { padding-block: 60px; }
  /* Source drops its 60px section padding to 20px below 768. */
  body.pr-home .pr-container { padding-inline: 20px; }
  .pr-section-divider { padding-top: 42px; gap: 18px; }
  .pr-section-divider span { font-size: 20px; }
  .pr-section-divider--faq span { font-size: 20px; }
  .pr-footer__glow { width: 320px; }
  .pr-why__layout { grid-template-columns: 1fr; }
  /* width:60% shrinks this block-level image inside its 307px-max wrapper;
     without margin-inline:auto it hugs the wrapper's left edge, and the
     scroll-linked rotation (site.js, applied to this element) then expands
     its bounding box around that off-center point instead of the wrapper's
     center - reproducing exactly as a leftward drift. Centering the image
     itself, not the transform, is what the wrapper's own justify-self:center
     already assumes. */
  .pr-why__image { width: 60%; margin-inline: auto; }
  .pr-why__layout { margin-top: 34px; gap: 30px; }
  /* Source stacks the Why cards one per row below its mobile breakpoint - two
     up leaves a 50px icon and 25px heading in about 180px of width. */
  .pr-why .pr-feature-grid--side {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  /* Source stacks the icon above the text below its mobile breakpoint
     (elementor-mobile-position-block-start) AND centres the whole card -
     icon, heading and copy all measure text-align:center on the live site at
     430. Desktop keeps the inline-start icon and left-aligned text. */
  .pr-why .pr-feature {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .pr-why .pr-feature__text { width: 100%; }
  .pr-why .pr-feature h3,
  .pr-why .pr-feature p { text-align: center; }
  .pr-how-it-works__layout { grid-template-columns: 1fr; gap: 30px; }
  .pr-how-it-works__intro h2 { width: 100%; text-align: center; }
  .pr-how-it-works__artwork { max-width: 600px; margin-inline: auto; }
  /* One column: sticky stacking has nowhere to travel, so the cards return to
     a normal flow list and the badge stops overhanging off-canvas. `relative`
     rather than `static` - the numeral overlay is an absolutely positioned
     ::before, so a static card would let it resolve against the whole dark
     band and paint one giant numeral at the page's bottom-right. */
  .pr-how-it-works__step { position: relative; }
  .pr-order-icon { margin: 0 0 6px 0; }
  .pr-how-it-works__step-body { width: 100%; }
  .pr-how-it-works__grid { padding-top: 0; }
  .pr-faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .pr-footer__inner { flex-direction: column; align-items: stretch; gap: 30px; }
  .pr-footer__inner .pr-footer__col { flex: 1 1 100%; text-align: center; padding: 0; }
  .pr-footer__brand-logo { margin-inline: auto; }
  .pr-footer__social { margin-inline: auto; }
  .pr-footer__disclaimer { width: 100%; }
  .pr-footer__bottom { flex-direction: column-reverse; justify-content: center; text-align: center; }
  .pr-footer__policy-links { justify-content: center; }
}

/* Source shrinks the header's icon pills at ITS mobile breakpoint (767px),
   not at 430 - between those two widths the earlier pass kept full-size pills
   the original had already collapsed. */
@media (max-width: 767px) {
  .pr-header__inner { min-height: 86px; gap: 8px; }
  .pr-header__brand { flex-basis: 50%; }
  .pr-header__account a,
  .cf-cart-badge { min-width: 34px; min-height: 34px; padding: 5px; }
  .pr-header__account svg,
  .cf-cart-badge svg { height: 20px; }
  .pr-search { display: none; }
  /* Source mobile: the ordering heading drops to 40px. */
  .pr-home .pr-how-it-works h2,
  .pr-home .pr-faq-layout__heading { font-size: 40px; }
  .pr-home .pr-btn { padding: 8px 5px 8px 22px; font-size: 14px; gap: 12px; }
  .pr-btn__icon,
  .pr-btn__icon svg { width: 40px; height: 40px; }
}

@media (max-width: 430px) {
  .pr-header__brand img { width: 85%; max-width: 150px; height: auto; }
  .pr-hero h1 { font-size: 32px; }
  .pr-hero__actions { flex-direction: column; align-items: stretch; }
  .pr-home .pr-btn { justify-content: space-between; }
  .pr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .pr-home .pr-grid--four { grid-template-columns: 1fr !important; gap: 20px; }
  .pr-category-grid { grid-template-columns: repeat(2, 1fr); }
  .pr-category-tile { min-height: 168px; padding-inline: 10px; }
  .pr-category-tile__name { font-size: 18px; line-height: 24px; }
  .pr-category-tile__sub { font-size: 14px; line-height: 22px; }
  .pr-why .pr-feature { padding: 14px 12px; }
  .pr-why .pr-feature h3 { font-size: 20px; line-height: 26px; }
  .pr-why .pr-feature p { font-size: 13px; line-height: 22px; }
  .pr-how-it-works__step h3 { font-size: 21px; line-height: 25px; }
  .pr-product-details { grid-template-columns: 1fr; }
  .pr-footer__inner .pr-footer__col { flex: 1 1 100%; }
  .pr-footer__glow { width: 240px; right: -60px; bottom: -40px; }
  .pr-home .pr-card__link { padding: 12px; }
}

/* CartFly mobile product-display contract. PeakPhorm's `theme` mode keeps
   the existing one-column listing rules above; only explicit mode 2 adds a
   two-up listing, and only within the theme's mobile range. */
@media (max-width: 767px) {
  body[data-cf-mobile-products-per-row="2"].pr-home .pr-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  /* Keep the explicit two-product display readable at common phone widths:
     compact titles stay on one line without widening the card grid. */
  body[data-cf-mobile-products-per-row="2"].pr-home .pr-card__text,
  body[data-cf-mobile-products-per-row="2"].pr-shop .pr-card__text {
    min-width: 0;
  }
  body[data-cf-mobile-products-per-row="2"].pr-home .pr-card__title {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-cf-mobile-products-per-row="2"].pr-shop .pr-card__title {
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Tablet/mobile nav dropdown panel (the recovered source switches at 1024px). */
@media (max-width: 1024px) {
  .pr-header__nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #000;
    border-bottom: 1px solid var(--cf-line);
    padding: 20px var(--pr-px) 26px;
    gap: 16px;
    border-radius: 0;
    z-index: 20;
  }
  .pr-header__nav.is-open a { padding: 8px 0; }
  .pr-nav-dropdown__panel { position: static; border: none; padding-left: 12px; }
}

/* ============================================================================
   PHASE 3 — SOURCE-SPECIFIC ABOUT + SHOP PAGES
   ============================================================================ */
.pr-source-container { width: min(100% - 120px, 1320px); margin-inline: auto; }
body.pr-about,
body.pr-shop { background: #fff; color: #000; }
.pr-about .pr-main,
.pr-shop .pr-main { overflow: hidden; }
.pr-inner-hero {
  position: relative;
  min-height: 800px;
  margin: 20px 30px 0;
  border-radius: 50px 50px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}
.pr-inner-hero__media,
.pr-inner-hero__media img,
.pr-inner-hero__media video,
.pr-inner-hero__overlay { position: absolute; inset: 0; }
.pr-inner-hero__media { z-index: 0; }
.pr-inner-hero__media { background: #000; }
.pr-inner-hero__media img,
.pr-inner-hero__media video { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.pr-inner-hero__media video { z-index: 1; }
.pr-inner-hero__overlay { z-index: 2; background: linear-gradient(139deg, #000 26%, rgba(0,0,0,0) 100%); }
/* The content column is wide enough to hold the source's two side-by-side hero
   buttons (source spans x90-x667); each heading keeps its own source measure so
   widening the column cannot change where a headline wraps. */
.pr-inner-hero__content { position: relative; z-index: 3; margin-left: max(60px, calc((100vw - 1320px) / 2)); max-width: 640px; }
.pr-inner-hero h1,
.pr-inner-hero h2 { max-width: 543px; color: #fff; font-size: 65px; line-height: 75px; margin: 0 0 20px; }
.pr-inner-hero p { max-width: 467px; color: #fff; font-size: 16px; line-height: 26px; margin: 0; }
.pr-inner-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
/* Source buttons measure 68-70px tall. The arrow is an inline SVG, so its span
   is laid out as a flex box - an inline box would add font leading under the
   49px glyph and push the control past 80px. */
.pr-source-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 12px; min-height: 68px; padding: 4px 4px 4px 30px; border: 1px solid #fff; border-radius: 999px; color: #fff; font-family: Inter, sans-serif; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; transition: background .2s, color .2s; }
.pr-source-btn > span { display: flex; align-items: center; }
.pr-source-btn--primary { color: #000; background: #fff; border-color: #fff; }
.pr-source-btn--primary:hover { color: #fff; background: transparent; }
.pr-source-btn:hover { background: #fff; color: #000; }
.pr-source-btn svg { display: block; width: 49px; height: 49px; flex: none; }
.pr-source-btn--dark { border-color: #000; color: #000; }
.pr-source-btn--dark:hover { background: #000; color: #fff; }
.pr-eyebrow { margin: 0; color: #000; font-family: var(--pr-font-heading); font-size: 22px; line-height: 30px; font-weight: 700; }
.pr-eyebrow--light { color: #fff; }
.pr-eyebrow--upper { text-transform: uppercase; }

/* About: white story and values followed by the source's dark approach panel. */
.pr-about-story { padding: 60px 0 0; background: #fff; }
.pr-about-story__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; min-height: 529px; }
.pr-about-story__copy { padding-top: 84px; max-width: 613px; }
.pr-about-story__line { display: block; width: 463px; max-width: 100%; height: 1px; margin: 30px 0; }
.pr-about-story h2,
.pr-about-values h2 { color: #000; font-size: 55px; line-height: 55px; margin: 0 0 20px; }
.pr-about-story__copy > p:last-child,
.pr-about-value p { color: #000; font-size: 16px; line-height: 26px; margin: 0; }
.pr-about-story__image { width: min(100%, 613px); aspect-ratio: 613 / 470; height: auto; object-fit: contain; justify-self: end; }
.pr-about-values { padding: 0 0 60px; }
.pr-about-values h2 { margin: 0 0 61px; }
.pr-about-values__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
.pr-about-value { padding: 0 21px; min-height: 238px; }
.pr-about-value__icon { display: block; width: 75px; height: 75px; margin: 0 0 30px; }
.pr-about-value__icon svg { display: block; width: 100%; height: 100%; }
.pr-about-value h3 { color: #000; font-size: 25px; line-height: 30px; margin: 0 0 16px; }
.pr-about-approach-source { background: #1e1e1e; padding: 90px 0 60px; color: #fff; }
/* Source lead column is 628px wide - the exact width of the recovered artwork -
   with the step column starting at x757 of a 1305px panel. */
.pr-about-approach-source__inner { display: grid; grid-template-columns: minmax(0, 628px) minmax(360px, 1fr); gap: 70px; }
.pr-about-approach-source__heading,
.pr-shop-ordering__heading { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: 70px; }
.pr-about-approach-source__heading img,
.pr-shop-ordering__heading img { display: block; width: 100%; height: 1px; }
.pr-about-approach-source h2,
.pr-shop-ordering h2 { color: #fff; font-size: 55px; line-height: 55px; margin: 0 0 70px; }
.pr-about-approach-source__image { width: min(100%, 628px); display: block; margin-top: 70px; }
.pr-about-approach-source__steps { display: flex; flex-direction: column; gap: 20px; padding-top: 260px; }
.pr-about-approach-source__steps article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(76,75,77,.44);
  border-radius: 14px;
  background: linear-gradient(90deg, #32302a 0%, #3e3e3e 100%);
}
.pr-about-approach-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 30% auto;
  pointer-events: none;
}
.pr-about-approach-card--1::before { background-image: url('../images/how-it-works-01.svg'); }
.pr-about-approach-card--2::before { background-image: url('../images/how-it-works-02.svg'); }
.pr-about-approach-card--3::before { background-image: url('../images/how-it-works-03.svg'); }
.pr-about-approach-card > .pr-order-icon,
.pr-about-approach-card__body { position: relative; z-index: 1; }
.pr-about-approach-card__body { box-sizing: border-box; width: 73%; padding: 0 18px; }
.pr-about-approach-source__steps h3,
.pr-shop-ordering__steps h3 { color: #fff; font-family: var(--pr-font-heading); font-size: 26px; font-weight: 600; line-height: 30px; margin: 0 0 10px; }
.pr-about-approach-source__steps p,
.pr-shop-ordering__steps p { max-width: 362px; color: #fff; font-size: 14px; line-height: 26px; margin: 0; }

/* Shop: source hero, research notice, white catalogue and dark ordering area. */
/* Source Shop headline measures 623px and breaks onto two lines. */
.pr-shop-hero h1 { max-width: 623px; }
.pr-shop-notice-frame { margin: 30px; }
.pr-shop-notice { background: #1e1e1e; padding: 40px; color: #fff; }
.pr-shop-notice__inner { display: flex; align-items: center; gap: 24px; max-width: 1320px; margin: auto; }
.pr-shop-notice__icon { display: block; width: 116px; height: 116px; flex: none; }
.pr-shop-notice__icon svg { display: block; width: 100%; height: 100%; }
.pr-shop-notice h2 { color: #fff; font-size: 22px; font-weight: 700; line-height: 28px; text-transform: uppercase; margin: 0 0 10px; }
.pr-shop-notice p { max-width: 562px; color: #fff; font-size: 16px; line-height: 26px; margin: 0; }
.pr-shop-notice .pr-source-btn { margin-left: auto; flex: none; }
.pr-shop-catalog { display: grid; grid-template-columns: 257px minmax(0, 1fr); gap: 20px; align-items: start; padding: 30px 0 70px; }
.pr-shop-filter { position: sticky; top: 24px; padding: 30px; background: #000; color: #fff; }
.pr-shop-filter__group { border: 0; padding: 0 0 26px; margin: 0 0 26px; }
.pr-shop-filter__group summary, .pr-shop-filter__group > p { margin: 0; cursor: pointer; color: #b8b8b8; font-family: var(--pr-font-heading); font-size: 16px; line-height: 20px; list-style: none; }
.pr-shop-filter__group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; padding: 10px 0; margin: -10px 0; }
.pr-shop-filter__group summary::-webkit-details-marker { display: none; }
.pr-shop-filter__group summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid #b8b8b8; border-bottom: 2px solid #b8b8b8; transform: rotate(45deg); transition: transform 0.15s ease; }
.pr-shop-filter__group[open] summary::after { transform: rotate(-135deg); }
.pr-shop-filter__group summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pr-shop-filter ul,
.pr-shop-filter form { display: grid; gap: 10px; margin: 18px 0 0; }
.pr-shop-filter li { list-style: none; }
.pr-shop-filter li a,
.pr-shop-filter__all,
.pr-shop-filter__check { color: #fff; font-size: 13px; line-height: 18px; }
.pr-shop-filter li a.is-active,
.pr-shop-filter__all:hover { text-decoration: underline; font-weight: 700; }
.pr-shop-filter__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pr-shop-filter__check input { width: 14px; height: 14px; accent-color: #fff; }
.pr-shop-filter__empty { color: #b8b8b8; font-size: 12px; line-height: 18px; margin: 18px 0 0 !important; }
.pr-shop-filter__clear-all { display: inline-block; color: #fff; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; text-decoration: underline; text-transform: uppercase; }
.pr-shop-products__head { margin: 15px 0 46px; }
.pr-shop-products__head h2 { color: #000; font-size: 45px; line-height: 45px; margin: 0 0 20px; }
.pr-shop-products__head p { color: #000; font-size: 16px; line-height: 26px; margin: 0; }
.pr-shop-products__results { margin-top: 12px !important; }
.pr-shop-products__results a { text-decoration: underline; }
/* The catalogue grid carries both `pr-grid` and `pr-shop-products__grid`. The
   generic `.pr-grid` responsive rules further up this file declare their column
   counts with !important, so a plain `.pr-shop-products__grid` rule loses the
   cascade no matter where it sits. These are scoped to body.pr-shop and marked
   important so the Shop catalogue - and only the Shop catalogue - wins; the
   homepage and every other `.pr-grid` keep the generic behaviour untouched. */
body.pr-shop .pr-shop-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px; }
.pr-shop .pr-card { border-radius: 0; }
.pr-shop .pr-card:hover { background: transparent; }
.pr-shop .pr-card__link { padding: 0; }
.pr-shop .pr-card__media { border-radius: 0; background: transparent; margin-bottom: 20px; }
.pr-shop .pr-card__media img { object-fit: contain; }
.pr-shop .pr-card__title { color: #000; font-size: 22px; line-height: 28px; }
/* Source loop titles are uppercase. Scoped to the Shop body so product titles
   on the homepage, product detail and every other theme stay as authored. */
body.pr-shop .pr-card__title { text-transform: uppercase; }
.pr-shop .pr-card__price { color: #000; font-size: 16px; }
.pr-shop .pr-card__add-form,
.pr-shop .pr-card__stock,
.pr-shop .pr-card__status { padding-left: 0; padding-right: 0; }
.pr-shop .pr-card__add-btn { justify-content: center; padding: 10px 20px; color: #fff; background: #000; }
.pr-shop-ordering { background: #1e1e1e; color: #fff; padding: 100px 0 60px; }
.pr-shop-ordering__head { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.pr-shop-ordering__head h2 { margin-bottom: 40px; }
.pr-shop-ordering__inner { display: grid; grid-template-columns: minmax(0, 628px) minmax(360px, 1fr); gap: 70px; }
.pr-shop-ordering__art { display: block; width: min(100%, 628px); margin-top: 70px; }
.pr-shop-ordering__steps { list-style: none; counter-reset: order; margin: 255px 0 0; padding: 0; }
.pr-shop-ordering__steps li { display: flex; gap: 24px; position: relative; min-height: 180px; padding: 26px 0; }
.pr-shop-ordering__cta-card { margin-top: 70px; padding: 100px 20px; text-align: center; border-radius: 20px; background: radial-gradient(circle at 50% 120%, rgba(255,255,255,.23), transparent 52%); }
.pr-shop-ordering__cta-card h2 { max-width: 600px; margin: 0 auto 30px; }
.pr-shop-ordering__cta-card p { max-width: 676px; color: #fff; font-size: 16px; line-height: 26px; margin: 0 auto 36px; }

@media (max-width: 1024px) {
  .pr-source-container { width: min(100% - 80px, 900px); }
  .pr-inner-hero { min-height: 680px; margin-inline: 20px; }
  .pr-inner-hero__content { margin-left: 50px; }
  .pr-inner-hero h1 { font-size: 56px; line-height: 64px; }
  .pr-about-story__intro,
  .pr-about-approach-source__inner,
  .pr-shop-ordering__inner { grid-template-columns: 1fr; gap: 48px; }
  .pr-about-story__image { justify-self: start; width: min(100%, 600px); }
  .pr-about-approach-source__steps,
  .pr-shop-ordering__steps { padding-top: 0; margin-top: 0; }
  .pr-shop-notice__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pr-shop-notice h2,
  .pr-shop-notice p { width: auto; }
  .pr-shop-catalog { grid-template-columns: 179px minmax(0, 1fr); gap: 20px; }
  body.pr-shop .pr-shop-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  .pr-source-container { width: min(100% - 40px, 600px); }
  .pr-inner-hero { display: block; min-height: 0; margin: 10px 10px 0; border-radius: 20px 20px 0 0; overflow: visible; background: #000; }
  .pr-inner-hero__media { position: relative; aspect-ratio: 16 / 9; }
  .pr-inner-hero__content { margin: 0; max-width: 470px; padding: 28px 20px 34px; background: #000; }
  .pr-inner-hero__overlay { bottom: auto; height: 100%; }
  .pr-inner-hero h1 { font-size: 42px; line-height: 47px; margin-bottom: 32px; }
  .pr-inner-hero p { font-size: 15px; line-height: 24px; }
  .pr-source-btn { min-height: 58px; padding-left: 22px; font-size: 14px; }
  .pr-source-btn svg { width: 42px; height: 42px; }
  .pr-inner-hero__actions { gap: 10px; }
  .pr-about-story { padding-top: 48px; }
  .pr-about-story__intro { gap: 36px; min-height: 0; }
  .pr-about-story h2,
  .pr-about-values h2,
  .pr-about-approach-source h2,
  .pr-shop-ordering h2 { font-size: 40px; line-height: 42px; margin-bottom: 36px; }
  .pr-about-story__line { margin: 20px 0; }
  .pr-about-story__image { height: auto; }
  .pr-about-values { padding: 50px 0; }
  .pr-about-values h2 { margin-bottom: 38px; }
  .pr-about-values__grid { grid-template-columns: 1fr; gap: 12px; }
  .pr-about-value { min-height: 0; padding-top: 74px; }
  .pr-about-approach-source { padding: 60px 0; }
  .pr-about-approach-source__image,
  .pr-shop-ordering__art { margin-top: 36px; }
  .pr-about-approach-source__steps article { min-height: 180px; }
  .pr-about-approach-card__body { width: 100%; }
  .pr-shop-ordering__steps li { min-height: 0; }
  .pr-shop-notice-frame { margin: 10px; }
  .pr-shop-notice { padding: 30px 20px; }
  .pr-shop-notice__inner { align-items: flex-start; }
  .pr-shop-notice__icon { width: 84px; height: 84px; }
  .pr-shop-notice .pr-source-btn { margin-left: 0; }
  .pr-shop-catalog { display: block; padding: 34px 0 52px; }
  .pr-shop-filter { position: static; display: grid; gap: 0; margin-bottom: 42px; padding: 30px 20px; }
  .pr-shop-filter__group { border-bottom: 1px solid #555; margin-bottom: 0; padding: 16px 0; }
  .pr-shop-products__head { margin: 0 0 28px; }
  .pr-shop-products__head h2 { font-size: 36px; line-height: 39px; }
  body.pr-shop .pr-shop-products__grid { grid-template-columns: 1fr !important; gap: 28px; }
  .pr-shop .pr-card__title { font-size: 22px; line-height: 28px; }
  .pr-shop .pr-card__arrow,
  .pr-shop .pr-card__arrow svg { width: 38px; height: 38px; }
  .pr-shop-ordering { padding: 60px 0 40px; }
  /* Source stacks the eyebrow above a full-width divider on small screens
     rather than squeezing the rule into the leftover inline space. */
  .pr-about-approach-source__heading,
  .pr-shop-ordering__heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .pr-shop-ordering__head { display: block; }
  .pr-shop-ordering__head .pr-source-btn { margin-bottom: 36px; }
  .pr-shop-ordering__cta-card { margin-top: 45px; padding: 70px 20px; }
}

/* The source product remains a two-column 50/50 composition at tablet width,
   then stacks below its 768px breakpoint. Kept after the shared grid rules so
   those frozen Home/About/Shop rules cannot override the product geometry. */
@media (max-width: 1024px) {
  .pr-product-source-container { width: 100%; }
  body.pr-product-page .pr-product-related-source .pr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 40px 20px;
  }
}

@media (max-width: 767px) {
  .pr-product-breadcrumb,
  .pr-product-source,
  .pr-product-related-source { width: calc(100% - 40px); }
  .pr-product-breadcrumb { padding-top: 30px; margin-bottom: 16px; }
  .pr-product-source { grid-template-columns: 1fr; gap: 52px; padding: 0 0 30px; }
  .pr-product-tabs-source__inner { width: 100%; }
  .pr-product-tabs-source__list { overflow-x: auto; padding-left: 0; }
  .pr-product-tabs-source__list button { white-space: nowrap; }
  .pr-product-tabs-source__panel { padding: 20px; }
  .pr-product-related-source { padding: 30px 0; }
  .pr-product-related-source > h2 { margin-top: 0; font-size: 35px; line-height: 42px; }
  body.pr-product-page .pr-product-related-source .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px 20px;
  }
  .pr-product-page .pr-product-related-source .pr-card__title { font-size: 13px; line-height: 16px; }
  .pr-product-page .pr-product-related-source .pr-card__add-btn { font-size: 11px; line-height: 20px; }
}

/* =============================================================================
   PEAKPHORM CUSTOMER UI
   Cart, checkout, confirmation, registration and account routes keep their
   inherited default-theme templates. The layout adds `.pr-customer-ui` only
   on those routes, allowing a light ecommerce composition without changing
   the approved marketing pages or any other CartFly tenant.
   ============================================================================= */
body.pr-customer-ui {
  --cf-bg: #f5f6f5;
  --cf-surface: #ffffff;
  --cf-fg: #151515;
  --cf-muted: #686c69;
  --cf-line: #e3e5e3;
  --cf-line-strong: #cfd3cf;
  --cf-panel: #f3f4f3;
  --cf-warn: #8a4b0f;
  --cf-warn-bg: #fff8e8;
  --cf-ok: #176b45;
  --cf-ok-bg: #edf9f3;
  --cf-shadow: 0 18px 55px rgba(0,0,0,.08);
  background: var(--cf-bg);
  color: var(--cf-fg);
}

/* Header/footer stay on the approved black brand treatment even though their
   page uses the light customer tokens. */
.pr-customer-ui .pr-header,
.pr-customer-ui .pr-footer {
  --cf-fg: #f5f5f5;
  --cf-muted: #9a9a9a;
  --cf-line: rgba(255,255,255,.12);
  --cf-line-strong: rgba(255,255,255,.22);
  --cf-panel: #121212;
}

.pr-customer-ui .pr-main {
  min-height: 62vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 3%, rgba(0,0,0,.035), transparent 26rem),
    var(--cf-bg);
}
.pr-customer-shell {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 86px) clamp(20px, 4vw, 48px) clamp(70px, 8vw, 112px);
}
.pr-customer-shell > h1,
.pr-customer-shell .cf-page-head h1,
.pr-customer-shell .cf-narrow > h1 {
  margin: 0 0 32px;
  color: #111;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.05;
}
.pr-customer-ui .pr-main a { color: #111; }
.pr-customer-ui .pr-main :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.pr-customer-ui .cf-panel,
.pr-customer-ui .cf-cart-line,
.pr-customer-ui .cf-cart-summary,
.pr-customer-ui .cf-checkout__section,
.pr-customer-ui .cf-checkout__summary,
.pr-customer-ui .cf-narrow {
  border: 1px solid var(--cf-line);
  background: #fff;
  box-shadow: var(--cf-shadow);
}
.pr-customer-ui .cf-panel {
  margin-bottom: 20px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 16px;
}
.pr-customer-ui .cf-panel h2,
.pr-customer-ui .cf-checkout__section h2,
.pr-customer-ui .cf-checkout__summary h2,
.pr-customer-ui .cf-cart-summary h2 { color: #111; }
.pr-customer-ui .cf-muted,
.pr-customer-ui .cf-hint,
.pr-customer-ui .cf-cart-line__meta,
.pr-customer-ui .cf-checkout__line-meta { color: var(--cf-muted); }

/* Cart */
.pr-customer-ui .cf-cart { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(28px, 4vw, 54px); }
.pr-customer-ui .cf-cart-lines { gap: 18px; }
.pr-customer-ui .cf-cart-line {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
}
.pr-customer-ui .cf-cart-line:first-child { padding-top: 20px; }
.pr-customer-ui .cf-cart-line__media { width: 112px; height: 112px; background: #f2f3f2; border-radius: 12px; }
.pr-customer-ui .cf-cart-line__title { color: #111; font-size: 18px; line-height: 1.3; }
.pr-customer-ui .cf-cart-line__controls { row-gap: 10px; }
.pr-customer-ui .cf-cart-line__controls form { flex-wrap: wrap; }
.pr-customer-ui .cf-cart-line__total { color: #111; font-size: 18px; }
.pr-customer-ui .cf-cart-summary,
.pr-customer-ui .cf-checkout__summary {
  padding: clamp(24px, 3vw, 32px);
  border-radius: 16px;
  background: #fff;
}
.pr-customer-ui .cf-cart-summary { top: 24px; }

/* Forms, registration and account editing */
.pr-customer-ui .cf-narrow {
  box-sizing: border-box;
  max-width: 620px;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 18px;
}
.pr-customer-ui .cf-field { min-width: 0; }
.pr-customer-ui .cf-field label { color: #202220; font-size: 15px; }
.pr-customer-ui input[type="text"],
.pr-customer-ui input[type="email"],
.pr-customer-ui input[type="password"],
.pr-customer-ui input[type="tel"],
.pr-customer-ui input[type="search"],
.pr-customer-ui input[type="number"],
.pr-customer-ui select,
.pr-customer-ui textarea {
  box-sizing: border-box;
  min-height: 50px;
  border-color: var(--cf-line-strong);
  background: #fff;
  color: #111;
  -webkit-text-fill-color: #111;
}
.pr-customer-ui textarea { min-height: 112px; resize: vertical; }
.pr-customer-ui input:disabled { background: #f0f1f0; color: #666; -webkit-text-fill-color: #666; }
.pr-customer-ui input[type="checkbox"],
.pr-customer-ui input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #000; }
.pr-customer-ui .cf-field--check { align-items: flex-start; gap: 10px; }
.pr-customer-ui .cf-field--check label { padding-top: 1px; line-height: 1.45; }
.pr-customer-ui .cf-button {
  min-height: 48px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-radius: 10px;
}
.pr-customer-ui .cf-button--secondary {
  border-color: var(--cf-line-strong);
  background: #fff;
  color: #111;
  -webkit-text-fill-color: #111;
}
.pr-customer-ui .cf-button--secondary:hover { background: #f1f2f1; }
.pr-customer-ui .cf-button:disabled { cursor: not-allowed; opacity: .48; }
.pr-customer-ui .cf-linkish { min-height: 40px; padding: 8px 2px; color: #4f5350; }

/* Checkout */
.pr-customer-ui .cf-checkout { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: clamp(28px, 4vw, 52px); }
.pr-customer-ui .cf-checkout__form { min-width: 0; }
.pr-customer-ui .cf-checkout__section {
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 16px;
}
.pr-customer-ui .cf-checkout__section h2,
.pr-customer-ui .cf-checkout__summary h2 { margin-bottom: 20px; font-size: 21px; }
.pr-customer-ui .cf-checkout__shipping-option { min-height: 54px; border-color: var(--cf-line-strong); background: #fafbfa; }
.pr-customer-ui .cf-checkout__summary { top: 24px; }
.pr-customer-ui .cf-checkout__line { align-items: flex-start; }
.pr-customer-ui .cf-checkout__place-order { min-height: 54px; }

/* Account */
.pr-customer-ui .cf-account-nav {
  gap: 8px;
  margin-bottom: 30px;
  padding: 8px;
  border: 1px solid var(--cf-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.pr-customer-ui .cf-account-nav a { padding: 10px 14px; border-radius: 9px; color: #5e625f; white-space: nowrap; }
.pr-customer-ui .cf-account-nav a:hover { background: #f2f3f2; color: #111; }
.pr-customer-ui .cf-account-nav [aria-current="page"] { background: #111; color: #fff; }
.pr-customer-ui .cf-account-nav__logout .cf-linkish {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 9px;
  color: #5e625f;
  white-space: nowrap;
}
.pr-customer-ui .cf-account-nav__logout .cf-linkish:hover { background: #f2f3f2; color: #111; }
.pr-customer-ui .cf-order-row { transition: transform .15s ease, box-shadow .15s ease; }
.pr-customer-ui .cf-order-row:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.11); }
.pr-customer-ui .cf-tag { background: #f2f3f2; color: #292b29; }
.pr-customer-ui .cf-table { min-width: 560px; }
.pr-customer-ui .cf-table th { color: #565a57; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pr-customer-ui .cf-code { background: #f1f2f1; color: #111; }
.pr-customer-ui .cf-details { border-top: 1px solid var(--cf-line); margin-top: 20px; padding-top: 8px; }

/* =============================================================================
   PEAKPHORM ACCESS WALL
   This standalone inherited view deliberately has no storefront header or
   cart data. PeakPhorm's stylesheet alone supplies the dark compliance
   backdrop and light form; the native select and server-owned form remain.
   ============================================================================= */
.cf-wall-body {
  --cf-bg: #f5f6f5;
  --cf-surface: #fff;
  --cf-fg: #171817;
  --cf-muted: #666b67;
  --cf-line: #e1e4e1;
  --cf-line-strong: #cbd0cc;
  --cf-panel: #f2f3f2;
  --cf-warn: #a43d30;
  --cf-warn-bg: #fff1ef;
  --cf-shadow: 0 30px 90px rgba(0,0,0,.42);
  min-width: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.13), transparent 34rem),
    #050505;
  color: var(--cf-fg);
}
.cf-wall-body .cf-wall {
  box-sizing: border-box;
  min-height: 100svh;
  padding: clamp(28px, 6vw, 72px) 20px;
}
.cf-wall-body .cf-wall__panel {
  box-sizing: border-box;
  max-width: 700px;
  padding: clamp(28px, 5vw, 52px);
  border-color: rgba(255,255,255,.18);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--cf-shadow);
}
.cf-wall-body .cf-wall__store { margin-bottom: 14px; color: #626762; }
.cf-wall-body .cf-wall__headline { margin-bottom: 24px; color: #111; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; }
.cf-wall-body .cf-wall__body {
  max-height: clamp(260px, 38svh, 380px);
  margin-bottom: 30px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--cf-line);
  border-radius: 14px;
  background: #f3f4f3;
  color: #292b29;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.cf-wall-body .cf-form { min-width: 0; }
.cf-wall-body .cf-wall__section {
  min-width: 0;
  margin: 0 0 30px;
  padding: 24px;
  border: 1px solid var(--cf-line);
  border-radius: 14px;
}
.cf-wall-body .cf-wall__section legend,
.cf-wall-body .cf-wall__section-title {
  color: #171817;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.cf-wall-body .cf-wall__section legend { padding: 0 8px; }
.cf-wall-body .cf-wall__section-title { margin: 30px 0 20px; }
.cf-wall-body .cf-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-wall-body .cf-field { min-width: 0; margin-bottom: 20px; }
.cf-wall-body .cf-field label { color: #202220; font-size: 15px; line-height: 1.45; }
.cf-wall-body input[type="text"],
.cf-wall-body input[type="email"],
.cf-wall-body input[type="password"],
.cf-wall-body input[type="tel"],
.cf-wall-body input[type="date"],
.cf-wall-body select,
.cf-wall-body textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--cf-line-strong);
  border-radius: 10px;
  background: #fff;
  color: #111;
  -webkit-text-fill-color: #111;
  font: inherit;
}
.cf-wall-body input[type="checkbox"],
.cf-wall-body input[type="radio"] { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: #000; }
.cf-wall-body .cf-field--check { align-items: flex-start; gap: 12px; min-height: 44px; }
.cf-wall-body .cf-field--check label { margin: 0; padding-top: 0; }
.cf-wall-body .cf-hint { margin: -12px 0 20px 34px; color: var(--cf-muted); line-height: 1.5; }
.cf-wall-body .cf-field:not(.cf-field--check) .cf-hint { margin: 6px 0 0; }
.cf-wall-body .cf-button,
.cf-wall-body .cf-wall__submit {
  min-height: 54px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #000;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.cf-wall-body .cf-wall__submit { margin-top: 14px; }
.cf-wall-body :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.cf-wall-body .cf-wall__account a { color: #111; }

@media (max-width: 900px) {
  .pr-customer-ui .cf-cart,
  .pr-customer-ui .cf-checkout { grid-template-columns: 1fr; }
  .pr-customer-ui .cf-cart-summary,
  .pr-customer-ui .cf-checkout__summary { position: static; }
}

@media (max-width: 560px) {
  .pr-customer-shell { padding: 38px 16px 70px; }
  .pr-customer-shell > h1,
  .pr-customer-shell .cf-page-head h1,
  .pr-customer-shell .cf-narrow > h1 { margin-bottom: 24px; font-size: 38px; }
  .pr-customer-ui .cf-page-head { margin-bottom: 24px; }
  .pr-customer-ui .cf-cart-line {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }
  .pr-customer-ui .cf-cart-line:first-child { padding-top: 16px; }
  .pr-customer-ui .cf-cart-line__media { width: 84px; height: 84px; }
  .pr-customer-ui .cf-cart-line__totals { grid-column: 1 / -1; align-items: center; }
  .pr-customer-ui .cf-cart-line__controls { align-items: flex-start; }
  .pr-customer-ui .cf-cart-line__controls form:first-child { width: 100%; }
  .pr-customer-ui .cf-cart-summary,
  .pr-customer-ui .cf-checkout__section,
  .pr-customer-ui .cf-checkout__summary,
  .pr-customer-ui .cf-panel,
  .pr-customer-ui .cf-narrow { padding: 22px 18px; border-radius: 14px; }
  .pr-customer-ui .cf-field-row { grid-template-columns: 1fr; gap: 0; }
  .pr-customer-ui .cf-account-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .pr-customer-ui .cf-order-row { align-items: flex-start; flex-wrap: wrap; }
  .pr-customer-ui .cf-order-row__total { width: 100%; }
  .pr-customer-ui .cf-panel:has(.cf-table) { overflow-x: auto; }
  .cf-wall-body .cf-wall { align-items: flex-start; padding: 18px 14px 32px; }
  .cf-wall-body .cf-wall__panel { padding: 28px 20px; border-radius: 18px; }
  .cf-wall-body .cf-wall__headline { font-size: 40px; }
  .cf-wall-body .cf-wall__body { max-height: min(42svh, 320px); padding: 20px 18px; font-size: 15px; line-height: 1.65; }
  .cf-wall-body .cf-wall__section { padding: 20px 16px; }
  .cf-wall-body .cf-field-row { grid-template-columns: 1fr; gap: 0; }
  .cf-wall-body .cf-hint { margin-left: 34px; }
}

/* This must follow the source's final mobile one-column shop rule above so
   explicit two-up mode wins the equal-specificity !important cascade. */
@media (max-width: 767px) {
  body[data-cf-mobile-products-per-row="2"].pr-shop .pr-shop-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
}

/* --- Promo bar --------------------------------------------------------
   Inherits default's .cf-promo structure and animation; only the surface
   is restated, so the bar reads as PeakPhorm rather than as a white strip
   above a dark page. Reduced-motion and overflow rules come from the
   default sheet and are not repeated here. */

.cf-promo {
  background: #ffffff;
  color: #000000;
  font-family: var(--pr-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cf-promo__inner {
  padding: 9px var(--pr-px);
}

.cf-promo__cta {
  margin-left: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

@media (max-width: 768px) {
  .cf-promo {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

/* --- Below-hero promo strip: merchant-driven states --------------------
   The strip itself is unchanged. These add only what the merchant can now
   choose, plus the reduced-motion rule the original never carried. */

/* Linked strip keeps the plain look; the whole bar is the target. */
a.pr-marquee {
  text-decoration: none;
  color: #000000;
}

/* Static: one message, no track movement. */
.pr-marquee--static .pr-marquee__track {
  animation: none;
  width: 100%;
  justify-content: center;
}

/* Someone who asked their device to reduce motion still needs to read the
   message, so it stops rather than disappears. The duplicate group is hidden
   because it exists only to make movement seamless. */
@media (prefers-reduced-motion: reduce) {
  .pr-marquee__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .pr-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .pr-marquee__group .pr-marquee__item:not(:first-child) {
    display: none;
  }
}

/* Contact ticker: the merchant-chosen states, same treatment otherwise. */
.pr-contact-ticker__track--static {
  animation: none;
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .pr-contact-ticker__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .pr-contact-ticker__track span:not(:first-child) {
    display: none;
  }
}