/* ==========================================================================
   PureVive theme
   Tokens taken from the Figma file a7gj2pOQNkLfze3oQUVbdp (page Design 2092:9138).
   One theme only. No light/dark variants, no theme toggle.
   ========================================================================== */

:root {
  /* Brand ramp */
  --pv-green-25: #fbfcf9;
  --pv-green-50: #f7f8f4;
  --pv-green-300: #bbc6a0;
  --pv-green-600: #788d42;   /* Figma: button/button-background-primary-default */
  --pv-green-800: #5f7136;   /* hover, darkened from the primary */
  --pv-green-950: #2f4020;   /* Figma: heading and price green */

  /* Neutrals */
  --pv-ink: #161616;
  --pv-body: #68705f;        /* Figma: secondary text */
  --pv-border: #d8dad3;
  --pv-border-strong: #9fa0a2;
  --pv-surface: #ffffff;
  --pv-surface-muted: #f0f1ea;  /* Figma: card media surface */
  --pv-card-border: #e6e8e0;    /* Figma: card media border */
  --pv-tab-track: #e2e6dc;      /* Figma: filter underline track */

  /* Alpha */
  --pv-white-10: rgba(255, 255, 255, 0.1);
  --pv-white-20: rgba(255, 255, 255, 0.2);
  --pv-white-40: rgba(255, 255, 255, 0.4);
  --pv-white-80: rgba(255, 255, 255, 0.8);
  --pv-black-30: rgba(22, 22, 22, 0.3);

  /* Radii and rhythm */
  --pv-radius-sm: 8px;
  --pv-radius: 16px;
  --pv-radius-lg: 24px;
  --pv-radius-pill: 999px;
  --pv-section-y: 96px;

  /* Bootstrap overrides */
  --bs-primary: var(--pv-green-600);
  --bs-primary-rgb: 90, 106, 49;
  --bs-body-color: var(--pv-body);
  --bs-body-bg: var(--pv-surface);
  --bs-border-color: var(--pv-border);
  --bs-link-color: var(--pv-green-800);
  --bs-link-hover-color: var(--pv-green-600);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-focus-ring-color: rgba(90, 106, 49, 0.45);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip; /* backstop only, layout must not need it */
}

body {
  background: var(--pv-surface);
  color: var(--pv-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .pv-display {
  color: var(--pv-green-950);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

strong, b { color: var(--pv-green-950); font-weight: 600; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Accessible focus. Visible on every interactive element, keyboard only. */
:focus-visible {
  outline: 3px solid var(--pv-green-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.pv-on-dark :focus-visible,
.pv-footer :focus-visible,
.pv-header :focus-visible {
  outline-color: #ffffff;
}

/* Skip link */
.pv-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 1080;
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--pv-green-950);
  color: #fff;
  border-radius: var(--pv-radius-pill);
  transition: top 0.15s ease;
}
.pv-skip:focus { top: 12px; text-decoration: none; color: #fff; }

/* Every tap target clears 44px */
.btn,
.pv-nav a,
.pv-footer-nav a,
.pv-legal-links button,
.pv-legal-links a,
.form-control,
.form-select,
.pv-qty button,
.pv-tab,
.pv-accordion-trigger {
  min-height: 44px;
}

::selection { background: var(--pv-green-300); color: var(--pv-green-950); }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.pv-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 992px) {
  .pv-shell { padding-inline: 64px; }
}

.pv-section { padding-block: 56px; }
@media (min-width: 768px) { .pv-section { padding-block: 80px; } }
@media (min-width: 1200px) { .pv-section { padding-block: var(--pv-section-y); } }

.pv-band { background: var(--pv-green-50); }

.pv-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-green-600);
  margin: 0 0 14px;
}
.pv-eyebrow--muted { color: var(--pv-body); }
.pv-eyebrow--light { color: rgba(255, 255, 255, 0.82); }

.pv-h1 { font-size: clamp(2.4rem, 7.4vw, 4rem); }
.pv-h2 { font-size: clamp(1.9rem, 5.2vw, 3rem); }
.pv-h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.pv-lead { font-size: 1.0625rem; color: var(--pv-body); }
.pv-accent { color: var(--pv-green-600); }
.pv-accent-soft { color: var(--pv-green-300); }
.pv-ink { color: var(--pv-green-950); }
.pv-muted { color: var(--pv-body); }
.pv-tiny { font-size: 0.8125rem; }

/* Any grid or flex child that can hold wide content */
.row > *,
.pv-min0 { min-width: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--pv-radius-pill);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-pv {
  background: var(--pv-green-600);
  border: 1px solid var(--pv-green-600);
  color: #fff;
}
.btn-pv:hover, .btn-pv:focus { background: var(--pv-green-800); border-color: var(--pv-green-800); color: #fff; }

.btn-pv-outline {
  background: transparent;
  border: 1px solid var(--pv-border-strong);
  color: var(--pv-green-950);
}
.btn-pv-outline:hover, .btn-pv-outline:focus {
  border-color: var(--pv-green-600);
  color: var(--pv-green-800);
  background: var(--pv-green-25);
}

.btn-pv-glass {
  background: var(--pv-white-20);
  border: 1px solid var(--pv-white-40);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-pv-glass:hover, .btn-pv-glass:focus { background: rgba(255, 255, 255, 0.32); color: #fff; }

.btn-pv-ghost-dark {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid transparent;
  color: #fff;
}
.btn-pv-ghost-dark:hover, .btn-pv-ghost-dark:focus { background: rgba(255, 255, 255, 0.24); color: #fff; }

.pv-icon { width: 1em; height: 1em; flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.pv-header {
  position: relative;
  z-index: 30;
  /* Same rhythm as .pv-shell, so the bar lines up with the page content. */
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 8px 16px;
}
/* Figma: the bar is inset 64px from the page edge on desktop. */
@media (min-width: 992px) { .pv-header { padding: 8px 64px; } }

.pv-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
}
.pv-header-bar {
  min-height: 64px;
  border-radius: 12px;
  /* Figma: a solid bar on the pages that start on a light background. The
     overlay variant below swaps in the translucent treatment, which only reads
     when there is a photograph behind it. */
  background: linear-gradient(97deg, #2b3317 0%, #3c4522 46%, #4a5329 100%);
  border: 1px solid transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
}
@media (min-width: 992px) { .pv-header-bar { padding: 8px 24px; } }

/* Figma: rgba(47,64,32,0.5) behind a 22px blur, with a hairline white border.
   The hero photo reads through it. Browsers without backdrop-filter keep the
   solid bar above, so the nav is legible either way. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pv-header--overlay .pv-header-bar {
    background: rgba(47, 64, 32, 0.5);
    border-color: rgba(255, 255, 255, 0.19);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }
}

.pv-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-height: 44px;
}
.pv-logo:hover { text-decoration: none; color: #fff; }
.pv-logo-mark { width: 30px; height: 30px; flex: none; }
.pv-logo-word { height: 19px; width: auto; }

.pv-nav { display: none; gap: 6px; margin-inline: auto; }
@media (min-width: 992px) { .pv-nav { display: flex; } }
/* Figma: 6px/12px inside a 100px pill, 14px, white, active at 10% white. The
   44px minimum tap target is held by the line box rather than the pill, so the
   pill keeps the design's size and the target still passes. */
.pv-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--pv-radius-pill);
  color: #fff;
  font-size: 0.875rem;
}
.pv-nav a:hover { background: var(--pv-white-10); color: #fff; text-decoration: none; }
.pv-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; }

.pv-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (min-width: 992px) { .pv-header-actions { margin-left: 0; } }

.pv-bag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--pv-radius-pill);
  min-height: 44px;
  font-size: 0.9375rem;
}
.pv-bag:hover { background: var(--pv-white-10); color: #fff; text-decoration: none; }
.pv-bag-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-green-300);
  color: var(--pv-green-950);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Added to the bag for one beat when the count goes up, so the header
   acknowledges an add-to-cart that happens further down the page. */
@keyframes pv-bag-bump {
  30% { transform: scale(1.14) rotate(-4deg); }
  60% { transform: scale(0.96) rotate(2deg); }
  100% { transform: scale(1); }
}
@keyframes pv-bag-count-pop {
  0% { transform: scale(0.4); }
  55% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes pv-bag-glow {
  0% { box-shadow: 0 0 0 0 var(--pv-green-300); }
  100% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}
.pv-bag.is-bumping { animation: pv-bag-bump 0.5s ease; }
.pv-bag.is-bumping .pv-icon { animation: pv-bag-bump 0.5s ease 0.04s; }
.pv-bag.is-bumping .pv-bag-count {
  animation: pv-bag-count-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), pv-bag-glow 0.6s ease-out;
}
/* Respect a reduced-motion preference: keep the cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .pv-bag.is-bumping,
  .pv-bag.is-bumping .pv-icon,
  .pv-bag.is-bumping .pv-bag-count { animation: none; }
  .pv-bag.is-bumping .pv-bag-count { outline: 2px solid var(--pv-green-300); outline-offset: 2px; }
}

.pv-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pv-radius-pill);
  background: transparent;
  border: 1px solid var(--pv-white-20);
  color: #fff;
}
@media (min-width: 992px) { .pv-burger { display: none; } }

/* Mobile menu */
.pv-mobile-nav {
  border: 0;
  padding: 0;
  width: min(92vw, 380px);
  max-width: 100%;
  border-radius: var(--pv-radius);
  background: var(--pv-green-950);
  color: #fff;
  margin-left: auto;
  margin-right: 16px;
  margin-top: 88px;
}
.pv-mobile-nav::backdrop { background: rgba(22, 22, 22, 0.55); }
.pv-mobile-nav-inner { padding: 20px; }
.pv-mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--pv-radius-sm);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
}
.pv-mobile-nav a:hover { background: var(--pv-white-10); color: #fff; text-decoration: none; }
.pv-mobile-nav a[aria-current="page"] { background: var(--pv-white-10); color: #fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.pv-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--pv-green-950);
}
@media (min-width: 992px) { .pv-hero { min-height: 780px; } }
@media (min-width: 1200px) { .pv-hero { min-height: 900px; } }

.pv-hero--inset {
  margin: 0 16px;
  border-radius: var(--pv-radius-lg);
  min-height: 480px;
}
@media (min-width: 992px) {
  .pv-hero--inset { margin: 0 16px; min-height: 620px; }
}

.pv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  z-index: -2;
}
.pv-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(101deg, rgba(20, 26, 10, 0.92) 0%, rgba(20, 26, 10, 0.72) 34%, rgba(20, 26, 10, 0.18) 62%, rgba(20, 26, 10, 0.05) 100%),
    linear-gradient(180deg, rgba(20, 26, 10, 0.55) 0%, rgba(20, 26, 10, 0) 32%);
}
/* Below the desktop breakpoint the hero is a single column, so the 101deg
   scrim — built for a text block sitting in the left third — has already
   faded out by the time a line of copy reaches the right edge, leaving the
   lead and the foot strip on the bare photo. A vertical wash takes over
   there: clear across the top, where the face is, and deepening under the
   whole text stack. */
@media (max-width: 991.98px) {
  .pv-hero-scrim {
    background: linear-gradient(180deg,
      rgba(20, 26, 10, 0.58) 0%,
      rgba(20, 26, 10, 0.26) 20%,
      rgba(20, 26, 10, 0.60) 48%,
      rgba(20, 26, 10, 0.86) 100%);
  }
}

.pv-hero-body { width: 100%; padding-block: 120px 40px; color: #fff; }
@media (min-width: 992px) { .pv-hero-body { padding-block: 200px 48px; } }

.pv-hero h1 { color: #fff; margin: 0 0 18px; }
.pv-hero p { color: rgba(255, 255, 255, 0.86); }

.pv-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.pv-hero-foot a { color: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Stats under the About hero */
.pv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--pv-white-20);
}
.pv-stat-n { font-size: clamp(1.75rem, 5vw, 2.25rem); color: #fff; line-height: 1; }
.pv-stat-l {
  margin: 10px 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   Marquee strip
   -------------------------------------------------------------------------- */

.pv-strip { background: var(--pv-green-50); border-block: 1px solid var(--pv-border); }
.pv-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-block: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pv-strip-lead { color: var(--pv-green-950); }
.pv-strip-item { color: var(--pv-body); display: flex; align-items: center; gap: 28px; }
.pv-strip-item::before {
  content: "";
  width: 56px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--pv-border-strong) 0 6px, transparent 6px 12px);
}
@media (max-width: 575.98px) { .pv-strip-item::before { display: none; } }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.pv-head {
  display: grid;
  gap: 16px 40px;
  align-items: end;
  margin-bottom: 36px;
}
@media (min-width: 992px) {
  .pv-head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .pv-head-note { text-align: right; }
}
.pv-head h2 { margin: 0; }
.pv-head-note { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Collection cards
   -------------------------------------------------------------------------- */

.pv-collections { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pv-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pv-collection {
  position: relative;
  display: block;
  border-radius: var(--pv-radius);
  overflow: hidden;
  min-height: 430px;
  color: #fff;
  isolation: isolate;
  background: var(--pv-green-950);
}
@media (min-width: 768px) { .pv-collection { min-height: 460px; } }
.pv-collection:hover { text-decoration: none; color: #fff; }
.pv-collection img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.5s ease;
}
.pv-collection:hover img { transform: scale(1.04); }
.pv-collection::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 26, 10, 0.3) 0%, rgba(20, 26, 10, 0) 38%, rgba(20, 26, 10, 0.78) 100%);
}
.pv-collection-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--pv-white-20);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}
.pv-collection-leaf { position: absolute; right: 18px; bottom: 20px; width: 30px; height: 30px; opacity: 0.9; }
.pv-collection-body { position: absolute; left: 20px; right: 70px; bottom: 18px; }
.pv-collection-body h3 { color: #fff; font-size: 1.4rem; margin: 0 0 4px; }
.pv-collection-body p { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   Tabs and filters
   -------------------------------------------------------------------------- */

.pv-tabs {
  display: flex;
  gap: 23px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--pv-tab-track);
  margin-bottom: 28px;
}
.pv-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 0 13px;
  color: var(--pv-body);
  font-size: 1rem;
  line-height: 1.4;
}
/* The collection filter keeps to a single line on phones: shorter labels at
   13px usually fit outright, and anything longer scrolls sideways rather than
   stacking into a second row. */
@media (max-width: 767.98px) {
  .pv-tabs[data-filter] {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    scrollbar-width: none;
  }
  .pv-tabs[data-filter]::-webkit-scrollbar { display: none; }
  .pv-tabs[data-filter] .pv-tab { font-size: 0.8125rem; white-space: nowrap; }
}

.pv-tab:hover { color: var(--pv-green-800); }
.pv-tab[aria-selected="true"], .pv-tab[aria-pressed="true"] { color: var(--pv-green-950); border-bottom-color: var(--pv-green-600); }

.pv-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}
.pv-sort { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.pv-sort select {
  border-radius: var(--pv-radius-pill);
  border: 1px solid var(--pv-border);
  background-color: var(--pv-green-50);
  padding: 8px 36px 8px 16px;
  min-height: 44px;
  color: var(--pv-green-950);
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.pv-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Rail: the home lineup scrolls sideways inside its own box, never the page. */
.pv-grid[data-rail] {
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 24px;
  /* Each card holds its width so the row overflows and scrolls. A minmax()
     with a zero minimum lets every track shrink to fit the container instead,
     which is what crushed eight cards into one screen. */
  grid-auto-columns: calc((100% - 24px) / 1.6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The pager arrows drive this, and the design shows no scrollbar. Dragging,
     the arrows and keyboard scrolling all still work. */
  scrollbar-width: none;
}
.pv-grid[data-rail]::-webkit-scrollbar { display: none; }
.pv-grid[data-rail] > * { scroll-snap-align: start; }
@media (min-width: 768px) { .pv-grid[data-rail] { grid-auto-columns: calc((100% - 48px) / 2.4); } }
/* Figma: four 310px cards with 24px gaps inside a 1312px container. */
@media (min-width: 1200px) { .pv-grid[data-rail] { grid-auto-columns: calc((100% - 72px) / 4); } }

.pv-card { min-width: 0; display: flex; flex-direction: column; }
.pv-card-media {
  position: relative;
  display: block;
  border-radius: 10px;
  background: var(--pv-surface-muted);
  border: 1px solid var(--pv-card-border);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  overflow: hidden;
}
.pv-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform 0.4s ease;
}
.pv-card-media:hover img { transform: scale(1.05); }
.pv-card-badge {
  position: absolute;
  top: 17px;
  left: 17px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--pv-green-950);
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
}
.pv-card h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 400; margin: 16px 0 8px; }
/* The title repeats the image link, so it gets its own 44px hit area without
   shifting the layout: the padding is cancelled by an equal negative margin. */
.pv-card h3 a { color: inherit; display: flex; align-items: center; min-height: 44px; margin-block: -12px; }
.pv-card-meta { font-size: 0.875rem; line-height: 1.4; margin: 0 0 16px; }
/* A single price sits beside the button, as in the template. A range like
   "$119.48 - $225.50" is far wider, so the row is allowed to wrap instead of
   splitting the price down the middle and pushing the button out of line. */
.pv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: auto; flex-wrap: wrap; min-height: 44px; }
.pv-price { font-weight: 700; color: var(--pv-green-950); font-size: 1.25rem; line-height: 1.4; white-space: nowrap; }
/* Figma: 16px/10px padding, 8px gap, 100px radius, 14px label that never wraps. */
.pv-card .btn { padding: 10px 16px; font-size: 0.875rem; gap: 8px; border-radius: 100px; white-space: nowrap; }
.pv-card .btn .pv-icon { width: 20px; height: 20px; flex: none; }



/* Horizontal rail on small screens for the home lineup */
.pv-rail { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pv-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pv-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pv-pager { display: flex; gap: 16px; }
/* `display:flex` outranks the hidden attribute, so the arrows would stay on
   screen when the script hides them for a row that does not scroll. */
.pv-pager[hidden] { display: none; }
.pv-pager button {
  min-width: 52px;
  height: 44px;
  border-radius: 100px;
  border: 1px solid var(--pv-border-strong);
  background: #fff;
  color: var(--pv-green-950);
  display: grid;
  place-items: center;
}
.pv-pager button:hover:not(:disabled) { border-color: var(--pv-green-600); color: var(--pv-green-800); }
.pv-pager button:disabled { opacity: 0.4; }

/* --------------------------------------------------------------------------
   Statement block
   -------------------------------------------------------------------------- */

.pv-statement { text-align: center; max-width: 960px; margin-inline: auto; }
.pv-statement h2 {
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  line-height: 1.16;
}
.pv-statement-leaf {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.08em;
  margin-inline: 0.12em;
  color: var(--pv-green-600);
}

.pv-story { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 992px) { .pv-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pv-story-card {
  position: relative;
  border-radius: var(--pv-radius);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  color: #fff;
  isolation: isolate;
  background: var(--pv-green-950);
}
.pv-story-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pv-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The step label reads against the top wash; the heading, copy and button
     all sit in the lower half, so the gradient darkens again from mid-card
     and keeps deepening to the bottom edge. */
  background: linear-gradient(180deg, rgba(20, 26, 10, 0.74) 0%, rgba(20, 26, 10, 0.30) 20%, rgba(20, 26, 10, 0.72) 52%, rgba(20, 26, 10, 0.90) 100%);
}
.pv-story-step {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
}
.pv-story-card h3 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 0 12px; }
.pv-story-card p { color: rgba(255, 255, 255, 0.92); max-width: 34ch; }
.pv-story-card .btn { align-self: flex-start; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.pv-quotes {
  position: relative;
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  padding: 36px 24px;
  color: #fff;
  isolation: isolate;
  background: var(--pv-green-950);
}
@media (min-width: 992px) { .pv-quotes { padding: 56px 48px; } }
.pv-quotes img.pv-quotes-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.pv-quotes h2 { color: #fff; }
.pv-quote-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 768px) { .pv-quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-quote {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--pv-white-10);
  border-radius: var(--pv-radius);
  padding: 24px;
  backdrop-filter: blur(4px);
  min-width: 0;
}
.pv-quote-mark { font-size: 2rem; line-height: 1; color: rgba(255, 255, 255, 0.7); display: block; margin-bottom: 8px; }
.pv-quote p { color: #fff; margin: 0 0 22px; }
.pv-quote-person { display: flex; align-items: center; gap: 12px; }
.pv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pv-green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}
.pv-quote-person p { margin: 0; font-size: 0.875rem; }
.pv-quote-person .pv-quote-role { color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.pv-faq { display: grid; gap: 24px 48px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .pv-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

.pv-accordion { border-top: 1px solid var(--pv-border); }
.pv-accordion-item { border-bottom: 1px solid var(--pv-border); }
.pv-accordion-trigger {
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  text-align: left;
  color: var(--pv-green-950);
  font-size: 1.0625rem;
}
.pv-accordion-trigger:hover { color: var(--pv-green-800); }
.pv-accordion-sign { flex: none; width: 20px; height: 20px; position: relative; }
.pv-accordion-sign::before,
.pv-accordion-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pv-accordion-sign::before { inset: 9px 0 9px 0; height: 2px; }
.pv-accordion-sign::after { inset: 0 9px 0 9px; width: 2px; }
.pv-accordion-trigger[aria-expanded="true"] .pv-accordion-sign::after { opacity: 0; transform: rotate(90deg); }
.pv-accordion-panel { padding: 0 0 22px; max-width: 72ch; }
.pv-accordion-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.pv-cta {
  position: relative;
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  padding: 40px 24px;
  color: #fff;
  isolation: isolate;
  background: #10160a;
}
@media (min-width: 992px) { .pv-cta { padding: 72px 56px; min-height: 400px; display: flex; align-items: center; } }
.pv-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: -2;
}
.pv-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(10, 16, 4, 0.96) 0%, rgba(10, 16, 4, 0.86) 38%, rgba(10, 16, 4, 0.2) 72%, rgba(10, 16, 4, 0.05) 100%);
}
.pv-cta h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 12px; }
.pv-cta p { color: rgba(255, 255, 255, 0.84); }
.pv-cta-inner { max-width: 620px; width: 100%; }

.pv-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--pv-white-20);
  border-radius: var(--pv-radius-pill);
  padding: 6px;
  margin-top: 26px;
  max-width: 480px;
  flex-wrap: wrap;
}
.pv-inline-form input {
  flex: 1 1 200px;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 12px 18px;
  min-height: 44px;
}
.pv-inline-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
.pv-inline-form input:focus { outline: none; }
.pv-inline-form:focus-within { outline: 3px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
.pv-inline-form .btn { flex: 0 0 auto; }
/* The single capsule needs room for a 200px field plus the button beside it,
   which a phone does not have: the button wrapped to a second row while the
   pill and its 6px padding stayed, leaving it jammed in a corner of a box it
   no longer fit. Below the point where they sit side by side, the capsule is
   dropped and the two controls stack as full-width pills of their own. */
@media (max-width: 575.98px) {
  .pv-inline-form {
    display: grid;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }
  .pv-inline-form input {
    /* A white wash reads as a field only over the dark left side of the CTA,
       which is where the desktop capsule sits. Standing on its own over the
       lit half of the photo it disappears, so the field carries its own dark
       fill here and the placeholder is lifted to match. */
    background: rgba(10, 16, 4, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--pv-radius-pill);
    padding: 14px 20px;
  }
  .pv-inline-form input::placeholder { color: rgba(255, 255, 255, 0.72); }
  /* The ring belongs on the field once the wrapper is gone, or it would
     outline the button along with it. */
  .pv-inline-form:focus-within { outline: none; }
  .pv-inline-form input:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
  }
  .pv-inline-form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.pv-footer {
  /* Figma paints the footer as a brushed photograph under a colour blend over
     #2e3619. The blend is baked into the webp by scripts/bake-blends.mjs, so
     the rule here is a plain image over the same base colour and every browser
     renders it identically. The colour still shows while the image loads. */
  background: #2e3619 url('../img/footer-texture.webp') center bottom / cover no-repeat;
  color: #fff;
  padding-block: 48px 28px;
  margin-top: 0;
}
.pv-footer-top {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) { .pv-footer-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pv-footer-logo { display: inline-flex; align-items: center; gap: 14px; color: #fff; }
.pv-footer-logo:hover { text-decoration: none; color: #fff; }
.pv-footer-logo .pv-logo-mark { width: 52px; height: 52px; }
.pv-footer-logo .pv-logo-word { height: 30px; }
.pv-footer-tag { margin: 18px 0 0; max-width: 46ch; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }

.pv-socials { display: flex; gap: 8px; }
@media (min-width: 768px) { .pv-socials { justify-content: flex-end; } }
.pv-socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.pv-socials a:hover { background: var(--pv-white-10); }
.pv-socials svg { width: 20px; height: 20px; }

.pv-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}
.pv-footer-nav li { flex: 1 1 33%; display: flex; justify-content: center; }
@media (min-width: 768px) { .pv-footer-nav li { flex: 1 1 0; border-left: 1px solid var(--pv-white-20); } }
@media (min-width: 768px) { .pv-footer-nav li:first-child { border-left: 0; } }
.pv-footer-nav a { color: #fff; display: inline-flex; align-items: center; padding: 10px 14px; font-size: 0.9375rem; }

.pv-footer-rule { border: 0; border-top: 1px solid var(--pv-white-20); margin: 28px 0 20px; }
.pv-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}
.pv-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pv-legal-links button,
.pv-legal-links a {
  appearance: none;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 10px 14px;
  font-size: 0.8125rem;
  border-radius: var(--pv-radius-sm);
}
.pv-legal-links button:hover,
.pv-legal-links a:hover { color: #fff; background: var(--pv-white-10); }
/* Tighter side padding on phones so three legal links fit the row. */
@media (max-width: 767.98px) {
  .pv-legal-links button,
  .pv-legal-links a { padding: 10px 5px; }
}

/* --------------------------------------------------------------------------
   Legal modals
   -------------------------------------------------------------------------- */

.pv-modal {
  width: min(880px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100vh - 64px);
  border: 0;
  border-radius: var(--pv-radius);
  padding: 0;
  background: #fff;
  color: var(--pv-body);
  overflow: hidden;
}
.pv-modal::backdrop { background: rgba(22, 22, 22, 0.6); }
.pv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--pv-border);
  position: sticky;
  top: 0;
  background: #fff;
}
.pv-modal-head h2 { margin: 0; font-size: 1.25rem; }
.pv-modal-close {
  appearance: none;
  border: 1px solid var(--pv-border);
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--pv-green-950);
  display: grid;
  place-items: center;
  flex: none;
}
.pv-modal-close:hover { border-color: var(--pv-green-600); color: var(--pv-green-800); }
.pv-modal-body { padding: 24px; overflow-y: auto; max-height: calc(100vh - 64px - 85px); }
.pv-modal-body h2 { font-size: 1.0625rem; margin: 26px 0 8px; }
.pv-modal-body h2:first-child { margin-top: 0; }
.pv-modal-body p, .pv-modal-body li { font-size: 0.9375rem; }
.pv-modal-body ul { padding-left: 20px; }

/* A legal page read in the dialog: wider than the CVV helper, and tall enough
   that a long policy scrolls inside the modal instead of moving the page. */
.pv-modal--legal { width: min(960px, calc(100vw - 32px)); }
.pv-modal--legal .pv-modal-body { min-height: 160px; }
.pv-modal--legal .pv-modal-body > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.pv-crumbs { padding-block: 18px; font-size: 0.875rem; }
.pv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pv-crumbs li { display: flex; gap: 8px; align-items: center; }
.pv-crumbs li + li::before { content: "/"; color: var(--pv-border-strong); }
.pv-crumbs a { color: var(--pv-body); }
.pv-crumbs [aria-current="page"] { color: var(--pv-green-600); font-weight: 600; }

/* Links sitting inside running text are underlined, so they never depend on
   colour alone to be recognisable. */
.pv-doc a,
.pv-modal-body a,
.pv-accordion-panel a,
.pv-field-note a,
main p a,
main dd a,
main li a {
  color: var(--pv-green-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pv-doc a:hover,
.pv-modal-body a:hover,
main p a:hover,
main li a:hover { color: var(--pv-green-950); }

/* Breadcrumbs and card links are standalone controls, not prose. */
.pv-crumbs a, .pv-card h3 a, .pv-collection a, .pv-card-media { text-decoration: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pv-green-950);
  margin-bottom: 6px;
}
.form-control, .form-select {
  border-radius: var(--pv-radius-pill);
  border: 1px solid var(--pv-border);
  padding: 12px 18px;
  color: var(--pv-green-950);
  background-color: #fff;
}
textarea.form-control { border-radius: var(--pv-radius); min-height: 140px; }
.form-control::placeholder { color: #a3a5a0; }
.form-control:focus, .form-select:focus {
  border-color: var(--pv-green-600);
  box-shadow: 0 0 0 4px rgba(120, 141, 66, 0.16);
}
.pv-field-note { font-size: 0.8125rem; margin-top: 8px; }
.pv-form-panel {
  background: #eceeea;
  border-radius: var(--pv-radius-lg);
  padding: 24px;
}
@media (min-width: 768px) { .pv-form-panel { padding: 40px; } }
.pv-form-panel h2 { margin: 0 0 6px; }

.pv-alert {
  border-radius: var(--pv-radius);
  padding: 14px 18px;
  font-size: 0.9375rem;
  margin-bottom: 18px;
}
.pv-alert--ok { background: #eef3e2; color: var(--pv-green-800); border: 1px solid var(--pv-green-300); }
.pv-alert--bad { background: #fbeceb; color: #8c2f26; border: 1px solid #e8b6b1; }
.pv-alert--note { background: var(--pv-surface-muted); color: var(--pv-body); border: 1px solid var(--pv-border); }
.pv-alert[hidden] { display: none; }

/* Contact info cards */
.pv-info-card {
  background: var(--pv-green-50);
  border-radius: var(--pv-radius);
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}
.pv-info-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--pv-green-600);
  flex: none;
}
.pv-info-card h3 { font-size: 1rem; color: var(--pv-green-600); margin: 0 0 6px; font-weight: 700; }
.pv-info-card p { margin: 0; }
.pv-info-card .pv-info-main { color: var(--pv-green-950); }
.pv-info-card .pv-info-sub { font-size: 0.8125rem; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.pv-pdp { display: grid; gap: 32px 48px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .pv-pdp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pv-gallery-main {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: #fff;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  display: grid;
  place-items: center;
  padding: 8%;
  overflow: hidden;
}
/* Product photography is shot on white with varied aspect ratios: contain
   keeps a tall bottle whole instead of cropping its label. Lifestyle imagery
   (hero, collections, story) stays on cover. */
.pv-gallery-main img,
.pv-receipt-image img,
.pv-line-media img,
.pv-card-media img,
.pv-thumb img,
.cart-thumb img,
.sum-thumb img {
  width: 100%;
  height: 100%;
  /* Several of these tiles are grid/flex items, whose default min-height:auto
     keeps the image's intrinsic height and lets a tall bottle overflow the
     tile — object-fit alone does not stop that. */
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.pv-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pv-thumb {
  appearance: none;
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  background: #fff;
  padding: 10%;
  aspect-ratio: 1 / 1;
  min-height: 44px;
}
.pv-thumb[aria-current="true"] { border-color: var(--pv-green-600); border-width: 2px; }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Four tiles across a phone leaves each about 80px, where a 10% inset shrinks
   the bottle to a smudge — a flat 6px gives the photo that room back. The
   image is also centred and capped at the tile rather than stretched to it,
   so it cannot outgrow its border however the browser resolves the square. */
@media (max-width: 767.98px) {
  .pv-thumb {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pv-thumb img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.pv-pdp h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 8px; }
.pv-pdp-sub { font-size: 0.8125rem; font-weight: 700; color: var(--pv-body); margin: 0 0 20px; }
/* Rich text from the cms: paragraphs already come wrapped. */
.pv-pdp-intro > :last-child { margin-bottom: 0; }
.pv-pdp-intro p { margin-bottom: 12px; }
.pv-pdp-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pv-pdp-price b { font-size: 2rem; font-weight: 400; color: var(--pv-green-950); }
.pv-pdp-price span { font-size: 0.875rem; }

.pv-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  min-height: 64px;
}
.pv-option:has(input:checked) { border-color: var(--pv-green-600); border-width: 2px; padding: 15px 17px; }
.pv-option input { accent-color: var(--pv-green-600); width: 20px; height: 20px; flex: none; }
.pv-option-main { flex: 1 1 auto; min-width: 0; }
.pv-option-main b { display: block; font-weight: 500; color: var(--pv-green-950); }
.pv-option-main span { font-size: 0.8125rem; }
.pv-option-price { font-weight: 600; color: var(--pv-green-950); white-space: nowrap; }
.pv-save {
  display: inline-block;
  background: var(--pv-green-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--pv-radius-pill);
  padding: 4px 10px;
  margin-left: 8px;
  vertical-align: 2px;
}

.pv-buy { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pv-buy .btn { flex: 1 1 200px; }

.pv-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-pill);
  padding: 4px;
  flex: none;
}
.pv-qty button {
  appearance: none;
  border: 0;
  background: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--pv-green-950);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.pv-qty button:hover { background: var(--pv-green-50); }
.pv-qty output, .pv-qty input, .pv-qty .qty-value {
  min-width: 36px;
  text-align: center;
  border: 0;
  color: var(--pv-green-950);
  font-weight: 600;
  background: none;
}

/* Checkout screens — checkout-steps.js toggles .is-active, so visibility
   comes from the class, not a hidden attribute. */
[data-checkout-screen] { display: none; }
[data-checkout-screen].is-active { display: block; }

.pv-summary-list { list-style: none; padding: 0; margin: 0; }
.pv-coupon { display: flex; gap: 8px; align-items: center; }
.pv-coupon .form-control { flex: 1 1 auto; }
.pv-coupon .btn { flex: none; }

/* Order summary lines, also rendered by cart.js. */
.summary-line { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.sum-thumb {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--pv-radius-sm);
  border: 1px solid var(--pv-border);
  background: #fff;
  padding: 5px;
  display: grid;
  place-items: center;
}
.sum-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sum-qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-green-950);
  color: #fff;
  font-size: 0.6875rem;
  display: grid;
  place-items: center;
}
.summary-line .sum-name { font-size: 0.875rem; color: var(--pv-green-950); }
.summary-line .sum-meta { font-size: 0.75rem; color: var(--pv-muted); }

/* Cart lines are rendered by the shared cart.js, which emits its own class
   names — style them here so the markup stays untouched. */
.cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--pv-border);
}
.cart-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--pv-radius-sm);
  border: 1px solid var(--pv-border);
  background: #fff;
  padding: 6px;
  display: grid;
  place-items: center;
}
/* min-height:0 lets the grid item shrink: without it a tall bottle keeps its
   intrinsic height and overflows the 96px tile, which is what object-fit was
   supposed to prevent. */
.cart-thumb img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.cart-name { font-weight: 600; color: var(--pv-green-950); margin: 0; }
.cart-meta { font-size: 0.8125rem; color: var(--pv-muted); margin: 2px 0 0; }
.cart-price { font-weight: 600; color: var(--pv-green-950); }
.cart-item .qty-value-fixed { min-width: 28px; text-align: center; }
.cart-remove {
  appearance: none;
  border: 0;
  background: none;
  color: var(--pv-muted);
  font-size: 0.8125rem;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

/* Subscribe switch: one row with the offer on the left, the toggle right. */
.pv-subscribe {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 14px 18px;
}
/* The text takes the free space so the switch is pinned to the right edge. */
.pv-subscribe > .pv-min0 { flex: 1 1 auto; min-width: 0; }
.pv-subscribe__title { display: block; color: var(--pv-green-950); }
.pv-subscribe__note { display: block; font-size: 0.8125rem; color: var(--pv-muted); margin-top: 2px; }
.pv-subscribe { cursor: pointer; }
.pv-subscribe__input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-switch__track {
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: var(--pv-radius-pill);
  background: var(--pv-border);
  display: inline-flex;
  align-items: center;
  padding: 3px;
  transition: background 0.18s ease;
}
.pv-switch__thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.pv-subscribe:has(.pv-subscribe__input:checked) .pv-switch__track { background: var(--pv-green-600, #5c7a29); }
.pv-subscribe:has(.pv-subscribe__input:checked) .pv-switch__thumb { transform: translateX(22px); }
.pv-subscribe:has(.pv-subscribe__input:focus-visible) .pv-switch__track { outline: 2px solid var(--pv-green-950); outline-offset: 2px; }
.pv-subscribe:has(.pv-subscribe__input:disabled) { opacity: 0.6; cursor: not-allowed; }

/* The summary's remove control: a quiet icon button, not a default one. */
.sum-remove {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  background-image: none;
  padding: 4px;
  line-height: 0;
  color: var(--pv-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.sum-remove:hover { color: #b3261e; background: rgba(179, 38, 30, 0.08); }

/* cart.js emits Font Awesome <i> tags, but the theme uses inline SVG and does
   not load that font — the glyphs collapsed to 0x0 and left an empty box next
   to "Remove". Drawing them as masked SVG keeps the shared script untouched. */
.cart-remove .fa-trash-can,
.sum-remove .fa-trash-can,
.cart-empty .fa-face-frown {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cart-remove .fa-trash-can,
.sum-remove .fa-trash-can {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  --pv-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--pv-trash);
  mask-image: var(--pv-trash);
}
.cart-empty .fa-face-frown {
  width: 48px;
  height: 48px;
  --pv-frown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 15.5a4.5 4.5 0 0 1 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--pv-frown);
  mask-image: var(--pv-frown);
}

/* CVV label with its "What is this?" helper pushed to the right of the field. */
.pv-cvv-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pv-cvv-help {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font-size: 0.75rem;
  color: var(--pv-muted);
  text-decoration: underline;
  cursor: pointer;
}
.pv-cvv-help:hover { color: var(--pv-green-950); }
.pv-modal--narrow { max-width: 440px; }
.pv-modal--narrow .pv-modal-body { text-align: center; }
.pv-modal--narrow .pv-modal-body img { width: 100%; height: auto; border-radius: var(--pv-radius-sm); }

/* "Same as shipping address": a 44px-tall row so it is comfortably tappable,
   with the checkbox tinted to the brand green instead of the OS blue. */
.pv-billing-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--pv-green-950);
}
.pv-billing-check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--pv-border);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pv-billing-check input::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}
.pv-billing-check input:checked {
  background: var(--pv-green-600);
  border-color: var(--pv-green-600);
}
.pv-billing-check input:checked::after { transform: rotate(-45deg) scale(1); }
.pv-billing-check input:focus-visible { outline: 2px solid var(--pv-green-950); outline-offset: 2px; }

.pv-checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.pv-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; }
.pv-checks svg { color: var(--pv-green-600); flex: none; margin-top: 3px; }
/* Inside a tab panel the list follows its own heading, so it drops the
   top margin that separates it from the buy controls on the product page. */
.pv-checks--tight { margin-top: 0; }

.pv-facts { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 520px; }
.pv-facts th, .pv-facts td { border-bottom: 1px solid var(--pv-border); padding: 12px 14px; text-align: left; vertical-align: top; }
.pv-facts thead th { color: var(--pv-green-950); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pv-facts td:nth-child(2), .pv-facts td:nth-child(3),
.pv-facts th:nth-child(2), .pv-facts th:nth-child(3) { white-space: nowrap; }
.pv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pv-rating-summary { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px) { .pv-rating-summary { grid-template-columns: 200px minmax(0, 1fr); } }
.pv-rating-score { font-size: 3rem; line-height: 1; color: var(--pv-green-950); }
.pv-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 0.8125rem; }
.pv-bar-row span:first-child { width: 58px; flex: none; }
.pv-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--pv-green-50); overflow: hidden; min-width: 0; }
.pv-bar i { display: block; height: 100%; background: var(--pv-green-600); }
.pv-bar-row span:last-child { width: 40px; text-align: right; flex: none; }

.pv-review { border-top: 1px solid var(--pv-border); padding: 24px 0; }
.pv-review-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.pv-review-head b { color: var(--pv-green-950); }
.pv-review h4 { font-size: 1rem; color: var(--pv-green-950); margin: 10px 0 8px; }
.pv-stars { color: var(--pv-green-600); letter-spacing: 2px; }

/* --------------------------------------------------------------------------
   Cart and checkout
   -------------------------------------------------------------------------- */

.pv-cart-layout { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .pv-cart-layout { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }

.pv-line {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--pv-border);
}
@media (min-width: 768px) {
  .pv-line { grid-template-columns: 72px minmax(0, 1fr) auto auto auto; }
}
.pv-line-media { width: 72px; height: 88px; border-radius: 10px; background: var(--pv-green-50); display: grid; place-items: center; padding: 8px; }
.pv-line-media img { max-height: 100%; object-fit: contain; }
.pv-line h3 { font-size: 1.0625rem; color: var(--pv-green-600); margin: 0 0 2px; font-weight: 700; }
.pv-line-sub { font-size: 0.8125rem; margin: 0 0 8px; }
.pv-line-remove {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 44px;
  color: var(--pv-green-800);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
}
.pv-line-remove:hover { color: var(--pv-green-600); }
.pv-line-cell { text-align: right; }
.pv-line-cell .pv-line-label { display: block; font-size: 0.75rem; color: var(--pv-body); }
.pv-line-cell b { color: var(--pv-green-950); font-size: 1.0625rem; }

.pv-summary {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 24px;
  background: #fff;
  position: sticky;
  top: 24px;
}
.pv-summary h2 { font-size: 1.125rem; font-weight: 700; color: var(--pv-green-600); margin: 0 0 18px; }
.pv-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 0.9375rem; }
.pv-summary-row b { color: var(--pv-green-950); }
.pv-summary-total { border-top: 1px solid var(--pv-border); margin-top: 12px; padding-top: 16px; }
.pv-summary-total .pv-summary-row { font-size: 1.125rem; }
.pv-summary-total b { font-size: 1.5rem; font-weight: 400; }
.pv-free { color: var(--pv-green-600); font-weight: 700; }
.pv-trust { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 0.8125rem; }
.pv-trust li { display: flex; gap: 10px; align-items: center; }
.pv-trust svg { color: var(--pv-body); flex: none; }

.pv-promo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pv-promo input { flex: 1 1 200px; min-width: 0; }

.pv-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  /* An ordered list keeps the steps in order for screen readers, but the
     numbers are already drawn in the dots, so the markers are removed. */
  list-style: none;
  padding-left: 0;
}
.pv-steps > li { display: flex; align-items: center; }
.pv-step { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; }
.pv-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e3e4e2;
  color: var(--pv-body);
  flex: none;
}
.pv-step[data-state="current"] .pv-step-dot { background: var(--pv-green-600); color: #fff; }
.pv-step[data-state="current"] { color: var(--pv-green-800); font-weight: 600; }
.pv-step[data-state="done"] .pv-step-dot { background: var(--pv-green-600); color: #fff; }
.pv-step-line { width: 64px; height: 1px; background: var(--pv-border-strong); }
@media (max-width: 575.98px) { .pv-step-line { width: 24px; } }

.pv-secure-bar {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 14px;
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
}

.pv-pay-option {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 18px;
  margin-bottom: 14px;
}
.pv-pay-option:has(input:checked) { border-color: var(--pv-green-600); border-width: 2px; padding: 17px; }
.pv-pay-head { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.pv-pay-head input { accent-color: var(--pv-green-600); width: 20px; height: 20px; flex: none; }
.pv-pay-head b { color: var(--pv-green-950); font-weight: 600; }
.pv-pay-body { margin-top: 18px; }
.pv-pay-body[hidden] { display: none; }

.pv-confirm { max-width: 860px; margin-inline: auto; text-align: center; }
.pv-confirm-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pv-green-600);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}
.pv-confirm h1 { font-size: clamp(2rem, 5.5vw, 3rem); margin: 0 0 24px; }
.pv-note-bar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--pv-border);
  background: var(--pv-green-25);
  border-radius: var(--pv-radius);
  padding: 16px 18px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.pv-note-bar b { display: block; color: var(--pv-green-800); font-size: 0.9375rem; }
.pv-note-bar p { margin: 2px 0 0; font-size: 0.875rem; }
.pv-panel-grid { display: grid; gap: 20px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 768px) { .pv-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-panel { border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 22px; min-width: 0; }
.pv-panel h2 { font-size: 1.0625rem; font-weight: 700; color: var(--pv-green-800); margin: 0 0 16px; display: flex; gap: 10px; align-items: center; }
.pv-panel dt { font-size: 0.8125rem; font-weight: 700; color: var(--pv-green-950); margin-top: 12px; }
.pv-panel dd { margin: 2px 0 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   About page pieces
   -------------------------------------------------------------------------- */

.pv-split { display: grid; gap: 32px 56px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) { .pv-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-split img { border-radius: var(--pv-radius); width: 100%; }

.pv-principles { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pv-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-principle {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  padding: 26px;
  min-width: 0;
}
.pv-principle-n { font-size: 0.8125rem; font-weight: 700; color: var(--pv-green-600); margin: 0 0 14px; }
.pv-principle h3 { font-size: 1.1875rem; margin: 0 0 10px; }
.pv-principle p { margin: 0; font-size: 0.9375rem; }

.pv-timeline {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 768px) { .pv-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-timeline > div { padding: 28px; border-top: 1px solid var(--pv-border); min-width: 0; }
.pv-timeline > div:first-child { border-top: 0; }
@media (min-width: 768px) {
  .pv-timeline > div { border-top: 0; border-left: 1px solid var(--pv-border); }
  .pv-timeline > div:first-child { border-left: 0; }
}
.pv-timeline-y { font-size: 2rem; color: var(--pv-green-600); margin: 0 0 12px; }
.pv-timeline h3 { font-size: 1.125rem; margin: 0 0 8px; }
.pv-timeline p { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Legal document pages
   -------------------------------------------------------------------------- */

.pv-doc { max-width: 76ch; }
.pv-doc h2 { font-size: 1.25rem; margin: 38px 0 12px; }
.pv-doc h2:first-child { margin-top: 0; }
.pv-doc h3 { font-size: 1.0625rem; margin: 26px 0 8px; }
.pv-doc p, .pv-doc li { font-size: 0.9375rem; }
.pv-doc ul, .pv-doc ol { padding-left: 22px; }
.pv-doc li { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Product image lightbox
   -------------------------------------------------------------------------- */

body.pv-lightbox-open { overflow: hidden; }

.pv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-lightbox[hidden] { display: none; }

.pv-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 15, 0.92);
}

.pv-lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 72px 24px;
  /* The stage handles pinch and drag itself, so the browser must not also
     scroll or zoom the page under it. */
  touch-action: none;
}

.pv-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}
.pv-lightbox__img.is-zoomed { cursor: grab; transition: none; }
.pv-lightbox__img.is-zoomed:active { cursor: grabbing; }

.pv-lightbox__close,
.pv-lightbox__nav,
.pv-lightbox__zoom {
  appearance: none;
  border: 0;
  border-radius: var(--pv-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}
.pv-lightbox__close:hover,
.pv-lightbox__nav:hover,
.pv-lightbox__zoom:hover { background: rgba(255, 255, 255, 0.24); }

.pv-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  font-size: 28px;
}

.pv-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  font-size: 30px;
}
.pv-lightbox__nav--prev { left: 24px; }
.pv-lightbox__nav--next { right: 24px; }
.pv-lightbox__nav[hidden] { display: none; }

.pv-lightbox__toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: var(--pv-radius-pill);
  background: rgba(255, 255, 255, 0.12);
}

.pv-lightbox__zoom {
  width: 34px;
  height: 34px;
  background: transparent;
  font-size: 20px;
}
.pv-lightbox__zoom:hover { background: rgba(255, 255, 255, 0.18); }

.pv-lightbox__level {
  min-width: 56px;
  text-align: center;
  font-size: 0.8125rem;
  color: #fff;
}

.pv-lightbox__counter {
  position: absolute;
  top: 26px;
  left: 24px;
  z-index: 2;
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}
.pv-lightbox__counter[hidden] { display: none; }

@media (max-width: 767.98px) {
  .pv-lightbox__stage { padding: 64px 12px; }
  .pv-lightbox__nav--prev { left: 8px; }
  .pv-lightbox__nav--next { right: 8px; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pv-collection:hover img,
  .pv-card-media:hover img { transform: none; }
}