/* ==========================================================================
   ProPurity storefront
   Bootstrap 5.3 + brand layer. Tokens mirror the Figma variables.
   ========================================================================== */

:root {
  /* Colour tokens (Figma: text/*, background/*, colors/*) */
  --pp-navy: #0b223f;            /* text-primary, button-primary */
  --pp-teal: #139091;            /* background-secondary, accents */
  --pp-teal-dark: #0f7c7d;
  --pp-teal-08: rgba(19, 144, 145, 0.08);
  --pp-teal-10: rgba(19, 144, 145, 0.10);
  --pp-teal-30: rgba(19, 144, 145, 0.30);
  --pp-navy-60: rgba(11, 34, 63, 0.60);
  --pp-navy-10: rgba(11, 34, 63, 0.10);
  --pp-navy-08: rgba(11, 34, 63, 0.08);
  --pp-ink: #161616;             /* text-default */
  --pp-ink-display: #1f2020;     /* text-display */
  --pp-text-paragraph: #38393a;  /* text-primary-paragraph */
  --pp-text-secondary: #727374;  /* text-secondary-paragraph */
  --pp-surface: #ebeef2;         /* cards, story */
  --pp-surface-mint: #e9f2f1;    /* promo + CTA */
  --pp-surface-25: #f8f8f9;      /* primary-sky/25 */
  --pp-border: #b6b7b9;          /* border-neutral-secondary */
  --pp-border-strong: #9fa0a2;   /* border-neutral-primary */
  --pp-border-soft: #cfcfd1;     /* border-background-white */
  --pp-border-card: #e6e7e8;     /* neutral/50 */
  --pp-star: #f79009;
  --pp-white: #ffffff;

  /* Type */
  --pp-font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radii */
  --pp-radius-2xl: 32px;
  --pp-radius-xl: 24px;
  --pp-radius-lg: 22px;
  --pp-radius-md: 16px;
  --pp-radius-sm: 12px;
  --pp-radius-xs: 8px;
  --pp-radius-pill: 100px;

  /* Rhythm: 80px at desktop, tightening on small screens */
  --pp-section-y: clamp(48px, 5.5vw, 80px);
  --pp-gutter: clamp(16px, 2.5vw, 24px);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--pp-font-sans);
  --bs-body-color: var(--pp-navy);
  --bs-body-bg: var(--pp-white);
  --bs-link-color: var(--pp-navy);
  --bs-link-hover-color: var(--pp-teal);
  --bs-border-color: var(--pp-border);
}

body {
  font-family: var(--pp-font-sans);
  color: var(--pp-navy);
  background: var(--pp-white);
  -webkit-font-smoothing: antialiased;
}

/* Design is 1200px content on a 1440 canvas (120px side padding).
   Bootstrap's xl/xxl containers are 1140/1320: pin both to 1200. */
.container { --bs-gutter-x: calc(var(--pp-gutter) * 2); }
@media (min-width: 1200px) { .container { max-width: 1200px; } }

img { display: block; }
a { text-decoration: none; }
button { font-family: inherit; }
::placeholder { color: var(--pp-text-secondary); opacity: 1; }

/* --------------------------------------------------------------------------
   Type scale (Figma text styles)
   -------------------------------------------------------------------------- */
.pp-display-2xl {           /* 72/1.2 */
  font-size: clamp(2.5rem, 1.4rem + 3.9vw, 4.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.055em;
}
.pp-display-xl {            /* Display xl/Bold · 60/1.2 */
  font-size: clamp(2.25rem, 1.25rem + 3.3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.pp-display-lg {            /* Display lg/Semibold · 48/1.2 */
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
}
.pp-display-lg--bold { font-weight: 700; }
.pp-display-md {            /* Display md/Semibold · 36/1.2 */
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
}
.pp-display-sm {            /* Display sm/Medium · 30/1.4 */
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem);
  font-weight: 500;
  line-height: 1.4;
}
.pp-display-xs {            /* Display xs/Semibold · 24/1.2 */
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.pp-lead {                  /* Text lg/Regular · 18/1.4 */
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--pp-text-secondary);
}
.pp-body {                  /* Text md/Regular · 16/1.4 */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--pp-text-paragraph);
}
.pp-body--secondary { color: var(--pp-text-secondary); }
.pp-small { font-size: 0.875rem; line-height: 1.4; }
.pp-xs { font-size: 0.75rem; line-height: 1.4; }
.pp-ink { color: var(--pp-ink); }
.pp-muted { color: var(--pp-text-secondary); }
.pp-teal { color: var(--pp-teal); }

/* Section kicker: "SHOP BY CATEGORY", "BEST SELLERS", ... */
.pp-kicker {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pp-text-secondary);
}
.pp-kicker--teal { color: var(--pp-teal); }

/* Eyebrow pill: "ABOUT PROPURITY" */
.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-teal-08);
  color: var(--pp-teal);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Category tag on product detail */
.pp-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-surface-mint);
  color: var(--pp-teal);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.pp-hr {
  height: 1px;
  background: var(--pp-border-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.pp-btn {
  --bs-btn-bg: var(--pp-navy);
  --bs-btn-color: var(--pp-white);
  --bs-btn-border-color: var(--pp-navy);
  --bs-btn-hover-bg: #12325a;
  --bs-btn-hover-border-color: #12325a;
  --bs-btn-hover-color: var(--pp-white);
  --bs-btn-active-bg: #081a30;
  --bs-btn-active-border-color: #081a30;
  --bs-btn-active-color: var(--pp-white);
  --bs-btn-disabled-bg: var(--pp-navy);
  --bs-btn-disabled-border-color: var(--pp-navy);
  --bs-btn-disabled-color: var(--pp-white);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(19, 144, 145, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.pp-btn--sm { padding: 10px 16px; font-size: 0.875rem; border-radius: var(--pp-radius-sm); }
.pp-btn--lg { padding: 16px 24px; font-size: 1rem; border-radius: var(--pp-radius-md); }
.pp-btn--pill { padding: 16px 24px; border-radius: var(--pp-radius-pill); }
.pp-btn--outline {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--pp-text-paragraph);
  --bs-btn-border-color: var(--pp-border-strong);
  --bs-btn-hover-bg: var(--pp-navy-08);
  --bs-btn-hover-border-color: var(--pp-border-strong);
  --bs-btn-hover-color: var(--pp-navy);
  --bs-btn-active-bg: var(--pp-navy-10);
  --bs-btn-active-border-color: var(--pp-border-strong);
  --bs-btn-active-color: var(--pp-navy);
}
.pp-btn--teal {
  --bs-btn-bg: var(--pp-teal);
  --bs-btn-border-color: var(--pp-teal);
  --bs-btn-hover-bg: var(--pp-teal-dark);
  --bs-btn-hover-border-color: var(--pp-teal-dark);
}
.pp-btn .pp-icon img { display: block; }

.pp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pp-radius-pill);
  transition: background-color .15s ease;
}
.pp-icon-btn:hover,
.pp-icon-btn:focus-visible { background: var(--pp-navy-08); }

/* Fixed icon boxes; the exported vectors keep their natural size inside.
   Transforms mirror the frame orientation Figma exported them in. */
.pp-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-icon--14 { width: 14px; height: 14px; }
.pp-icon--16 { width: 16px; height: 16px; }
.pp-icon--20 { width: 20px; height: 20px; }
.pp-icon--22 { width: 22px; height: 22px; }
.pp-icon--24 { width: 24px; height: 24px; }
.pp-icon--40 { width: 40px; height: 40px; }
.pp-flip-x { transform: scaleX(-1); }
.pp-flip-y { transform: rotate(180deg) scaleX(-1); }
.pp-rot-l { transform: rotate(-90deg); }
.pp-arrow-right { transform: rotate(-90deg) scaleX(-1); }

/* --------------------------------------------------------------------------
   Promo banner
   -------------------------------------------------------------------------- */
.pp-promo {
  background: var(--pp-surface-mint);
  padding: 12px 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.pp-promo__link {
  font-family: var(--pp-font-display);
  font-weight: 700;
  color: var(--pp-teal);
  white-space: nowrap;
}
.pp-promo__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.pp-header {
  background: var(--pp-white);
  border-bottom: 1px solid var(--pp-navy-08);
}
.pp-header .navbar { min-height: 68px; }
.pp-header .navbar-brand { line-height: 0; }

.pp-nav .nav-link {
  padding: 10px 16px;
  border-radius: var(--pp-radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pp-navy);
  transition: background-color .15s ease, color .15s ease;
}
.pp-nav .nav-link:hover,
.pp-nav .nav-link:focus-visible { background: var(--pp-navy-08); }
.pp-nav .nav-link.active { color: var(--pp-navy); background: var(--pp-teal-08); }

.pp-header .navbar-toggler { border-color: var(--pp-navy-08); padding: 6px 8px; }
.pp-header .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem var(--pp-teal-08); }

.pp-cart-btn { position: relative; }
.pp-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--pp-teal);
  color: var(--pp-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

@media (min-width: 992px) { .pp-nav { gap: 16px; } }
@media (max-width: 991.98px) {
  .pp-header .navbar-collapse { padding: 8px 0 12px; }
  .pp-nav .nav-link { padding: 12px 16px; }
}
@media (max-width: 575.98px) {
  .pp-header .navbar-brand { margin-right: 0; }
  .pp-header .pp-logo { --s: 0.85; }
  .pp-btn--sm { padding-inline: 12px; }
}

/* Logo: four exported vector layers composed exactly as in Figma.
   Base size 145×32; the footer variant scales by 1.5. */
.pp-logo {
  --s: 1;
  position: relative;
  display: block;
  width: calc(145.04px * var(--s));
  height: calc(32px * var(--s));
}
.pp-logo img { position: absolute; }
.pp-logo__wordmark { left: calc(35.97px * var(--s)); top: calc(7.45px * var(--s)); width: calc(109.07px * var(--s)); height: calc(24.55px * var(--s)); }
.pp-logo__mark-1   { left: calc(4.74px  * var(--s)); top: calc(3.98px * var(--s)); width: calc(21.43px  * var(--s)); height: calc(24.02px * var(--s)); }
.pp-logo__mark-2   { left: 0;                          top: 0;                         width: calc(28.54px  * var(--s)); height: calc(31.99px * var(--s)); }
.pp-logo__mark-3   { left: calc(8.88px  * var(--s)); top: calc(8.01px * var(--s)); width: calc(13.52px  * var(--s)); height: calc(15.96px * var(--s)); }
.pp-logo--footer { --s: 1.5; }

/* --------------------------------------------------------------------------
   Sections and shared blocks
   -------------------------------------------------------------------------- */
.pp-section { padding-block: var(--pp-section-y); }
.pp-section--surface { background: var(--pp-surface); }
.pp-section--mint { background: var(--pp-surface-mint); }

.pp-cover { width: 100%; height: 100%; object-fit: cover; }

.pp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pp-section-head .pp-kicker { margin-bottom: 16px; }
.pp-section-head h2 { margin: 0; }

/* Value card (About, Why ProPurity) */
.pp-value-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
}
.pp-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pp-radius-md);
  background: var(--pp-teal-10);
}
.pp-value-card__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: var(--pp-navy); }
.pp-value-card__text { font-size: 0.875rem; line-height: 1.4; color: var(--pp-navy-60); }

/* Product card */
.pp-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--pp-border-card);
  border-radius: var(--pp-radius-xl);
  background: var(--pp-surface);
  color: var(--pp-ink-display);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pp-product:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(11, 34, 63, 0.08); }
.pp-product__media {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--pp-radius-sm);
}
.pp-product__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-product__body { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.pp-product__name { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: inherit; }
.pp-product__name a { color: inherit; }
.pp-product__name a:hover { color: var(--pp-teal); }
.pp-product__price { display: flex; align-items: center; gap: 8px; }
.pp-product__from { font-size: 0.75rem; line-height: 1.4; opacity: 0.5; }
.pp-product__amount { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.pp-product__badge {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 6px 12px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-teal);
  color: var(--pp-white);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}
.pp-product--lg .pp-product__name { font-size: 1.25rem; font-weight: 600; }
.pp-product--tint { background: var(--pp-navy-10); border-color: rgba(255, 255, 255, 0.16); color: var(--pp-navy); }
.pp-product--glass {
  background: var(--pp-navy-10);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--pp-white);
  backdrop-filter: blur(6px);
}
.pp-product--glass .pp-product__from { opacity: 1; }
.pp-product--glass .pp-product__badge { background: var(--pp-teal-30); }
.pp-product--glass .pp-product__name a:hover { color: var(--pp-white); text-decoration: underline; }

.pp-product-grid { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
.pp-product-grid--tight { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

/* Filter chips */
.pp-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: var(--pp-radius-pill);
  background: rgba(230, 231, 232, 0.5);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chips__btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  color: var(--pp-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pp-chips__btn:hover { color: var(--pp-navy); }
.pp-chips__btn.active { background: var(--pp-teal); color: var(--pp-surface-25); }
.pp-chips--dark { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.pp-chips--dark .pp-chips__btn { color: rgba(255, 255, 255, 0.8); }
.pp-chips--dark .pp-chips__btn:hover { color: var(--pp-white); }
.pp-chips--dark .pp-chips__btn.active { background: var(--pp-white); color: var(--pp-navy); }

/* Sort dropdown */
.pp-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-xs);
  background: var(--pp-white);
  color: var(--pp-text-paragraph);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.pp-sort strong { font-family: var(--pp-font-display); font-weight: 700; }
.pp-sort::after { display: none; }
.pp-dropdown-menu { --bs-dropdown-border-color: var(--pp-border); --bs-dropdown-border-radius: var(--pp-radius-xs); --bs-dropdown-link-active-bg: var(--pp-teal); font-size: 0.875rem; }

/* Pagination */
.pp-pagination { display: flex; align-items: center; gap: 8px; }
.pp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-xs);
  background: transparent;
  color: var(--pp-ink);
  font-size: 0.875rem;
  line-height: 1.4;
}
.pp-page.active { background: var(--pp-navy); border-color: var(--pp-navy); color: var(--pp-white); font-weight: 700; }
.pp-page:disabled { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.pp-home-hero { padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: 24px; }
.pp-home-hero__title { margin: 0 0 40px; }
.pp-hero-wrap { position: relative; }
.pp-hero-card {
  position: relative;
  aspect-ratio: 1200 / 580;
  min-height: 320px;
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 72% 78%, rgba(149, 163, 180, 0.9), rgba(175, 189, 208, 0) 70%),
    linear-gradient(177deg, #95a3b4 3%, #afbdd0 35%, #dde0e4 67%),
    #95a3b4;
}
.pp-hero-card::before {                 /* teal wash standing in for the animated shader fill */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(19, 144, 145, 0.55) 0%, rgba(19, 144, 145, 0.35) 45%, rgba(19, 144, 145, 0.05) 100%);
}
.pp-hero-card__dots {                 /* Figma export carries the card fill, so it covers the whole card */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pp-hero-card__bottle {
  position: absolute;
  z-index: 2;
  left: 52.5%;
  top: 86.6%;
  width: 130.5%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(39.57deg);
  pointer-events: none;
}
.pp-hero-card__label {
  position: absolute;
  z-index: 3;
  left: 40px;
  top: 40px;
  color: var(--pp-white);
}
.pp-hero-card__label strong { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.pp-hero-card__label span { display: block; font-size: 1rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.pp-hero-list {
  position: absolute;
  z-index: 3;
  right: 32px;
  top: 32px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-hero-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--pp-radius-xs);
  background: rgba(241, 248, 248, 0.75);
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(11, 34, 63, 0.7);
  white-space: nowrap;
}
.pp-hero-list li::before { content: "✓"; font-size: 0.75rem; color: var(--pp-teal); }
@media (max-width: 767.98px) {
  .pp-hero-card { aspect-ratio: 4 / 3; }
  .pp-hero-card__label { left: 20px; top: 20px; }
  .pp-hero-card__bottle { width: 160%; top: 92%; }
  .pp-hero-list { position: static; grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
  .pp-hero-list li { background: var(--pp-surface); white-space: normal; }
}

/* Category rows */
.pp-cat-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 30px 16px;
  border-top: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  color: var(--pp-navy);
  transition: background-color .15s ease;
}
.pp-cat-row:hover { background: var(--pp-surface-25); color: var(--pp-navy); }
.pp-cat-row__num { width: 40px; font-size: 1rem; font-weight: 500; color: var(--pp-text-secondary); }
.pp-cat-row__title { flex: 1 1 0; margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 500; line-height: 1.4; color: #07172b; }
.pp-cat-row__desc { width: 460px; max-width: 40%; margin: 0; font-size: 1rem; line-height: 1.4; color: var(--pp-text-paragraph); }
@media (max-width: 767.98px) {
  .pp-cat-row { flex-wrap: wrap; gap: 12px 16px; padding: 20px 8px; }
  .pp-cat-row__num { width: auto; }
  .pp-cat-row__desc { flex-basis: 100%; width: auto; max-width: none; order: 5; }
}

/* Promo block ("Play on hard mode") */
.pp-promo-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--pp-radius-2xl);
  color: var(--pp-white);
  background: var(--pp-navy);
}
.pp-promo-block__bg {
  position: absolute;
  inset: 0;
  background: url("../assets/promo-bg.jpg") center / cover no-repeat;
}
.pp-promo-block__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 34, 63, 0.72) 0%, rgba(11, 34, 63, 0.32) 50%, rgba(11, 34, 63, 0.68) 100%);
}
.pp-promo-block .container { position: relative; }
.pp-promo-block__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 64px 0;
}
.pp-promo-block__title {
  margin: 0 0 16px;
  font-size: clamp(2.5rem, 1.4rem + 3.9vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.028em;
}
.pp-promo-block__text { max-width: 435px; margin: 0; font-size: 1rem; line-height: 1.4; }
@media (max-width: 767.98px) { .pp-promo-block__row { margin: 40px 0; } }

/* Why ProPurity grid */
.pp-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
.pp-why-col { display: flex; flex-direction: column; gap: 16px; }
.pp-why-col .pp-value-card { flex: 1 1 0; }
.pp-why-col .pp-value-card__text { max-width: 220px; }
.pp-why-media { height: 578px; border-radius: var(--pp-radius-xl); overflow: hidden; }
@media (max-width: 991.98px) {
  .pp-why-grid { grid-template-columns: 1fr 1fr; }
  .pp-why-media { grid-column: 1 / -1; grid-row: 1; height: auto; aspect-ratio: 584 / 460; }
}
@media (max-width: 575.98px) { .pp-why-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.pp-reviews-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pp-reviews-track::-webkit-scrollbar { display: none; }
.pp-review {
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  background: var(--pp-white);
  scroll-snap-align: start;
}
.pp-review__quote { margin: 0; font-size: 1.125rem; line-height: 1.4; color: var(--pp-ink); }
.pp-review__author { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pp-review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.pp-review__name { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--pp-ink); }
.pp-review__meta { font-size: 0.875rem; line-height: 1.4; color: var(--pp-text-secondary); }
@media (max-width: 991.98px) { .pp-review { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575.98px) { .pp-review { flex-basis: 88%; } }
.pp-dots { display: flex; align-items: center; gap: 4px; padding: 0 16px; }
.pp-dot {
  display: inline-flex;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 32px;
  background: transparent;
  opacity: 0.5;
}
.pp-dot::before { content: ""; width: 6px; height: 6px; border-radius: 16px; background: #85909f; }
.pp-dot.active { opacity: 1; border-color: var(--pp-navy); }
.pp-dot.active::before { background: var(--pp-navy); }

/* FAQ */
.pp-faq { display: flex; gap: 64px; align-items: flex-start; }
.pp-faq__aside { width: 380px; flex: 0 0 auto; }
.pp-faq__list { flex: 1 1 0; min-width: 0; }
.pp-faq__aside .pp-display-lg { margin: 16px 0 24px; }
.pp-faq__aside p { margin: 0 0 16px; font-size: 1rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-faq__aside a { font-size: 1rem; font-weight: 600; color: var(--pp-ink); }
.pp-faq__aside a:hover { color: var(--pp-teal); }
.pp-faq-item { border-top: 1px solid var(--pp-border); padding: 24px 0; }
.pp-faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pp-ink);
}
.pp-faq-item__btn .pp-icon img:last-child { display: none; }
.pp-faq-item__btn[aria-expanded="true"] .pp-icon img:first-child { display: none; }
.pp-faq-item__btn[aria-expanded="true"] .pp-icon img:last-child { display: block; }
.pp-faq-item__body { padding-top: 16px; font-size: 1rem; line-height: 1.4; color: var(--pp-text-secondary); }
@media (max-width: 991.98px) {
  .pp-faq { flex-direction: column; gap: 32px; }
  .pp-faq__aside { width: auto; }
}

/* --------------------------------------------------------------------------
   Products
   -------------------------------------------------------------------------- */
.pp-page-hero { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: 40px; }
.pp-page-hero .pp-kicker { margin-bottom: 8px; }
.pp-page-hero h1 { margin: 0 0 16px; }
.pp-page-hero .pp-lead { max-width: 640px; margin: 0; }
.pp-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 24px; }
.pp-results { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 var(--pp-section-y); font-size: 0.875rem; color: var(--pp-text-secondary); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */
.pp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0 8px; font-size: 0.875rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-crumbs a { color: inherit; }
.pp-crumbs a:hover { color: var(--pp-teal); }
.pp-crumbs strong { font-weight: 600; color: var(--pp-navy); }
.pp-pdp { padding: 32px 0 64px; }
.pp-gallery__main {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--pp-border-soft);
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  background: var(--pp-white);
}
.pp-gallery__thumbs { display: flex; gap: 12px; margin-top: 16px; }
.pp-thumb {
  width: 136px;
  max-width: calc(25% - 9px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid #b6bdc5;
  border-radius: var(--pp-radius-sm);
  overflow: hidden;
  background: var(--pp-white);
}
.pp-thumb.active { border: 2px solid var(--pp-teal); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-pdp__spec { font-size: 0.875rem; font-weight: 700; color: var(--pp-text-secondary); }
.pp-price-xl { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
.pp-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 16px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-white);
  cursor: pointer;
  text-align: left;
  color: var(--pp-navy);
  box-shadow: inset 0 0 0 0 var(--pp-teal);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pp-option.selected { border-color: var(--pp-teal); box-shadow: inset 0 0 0 1px var(--pp-teal); }
.pp-option__radio { width: 20px; height: 20px; border: 2px solid var(--pp-border-strong); border-radius: 50%; flex: 0 0 auto; }
.pp-option.selected .pp-option__radio { border: 0; background: url("../assets/icon-radio-selected.svg") center / 20px no-repeat; }
.pp-option__label { flex: 1 1 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.pp-option__hint { display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 500; color: var(--pp-text-secondary); }
.pp-option__price { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.pp-save-pill { display: inline-flex; padding: 2px 8px; margin-left: 8px; border-radius: 99px; background: var(--pp-teal); color: var(--pp-white); font-size: 0.75rem; font-weight: 700; line-height: 1.4; vertical-align: middle; }
.pp-qty {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-sm);
  font-size: 0.875rem;
  line-height: 1.4;
}
.pp-qty button { padding: 0; border: 0; background: transparent; font-weight: 500; color: var(--pp-text-paragraph); line-height: 1.4; }
.pp-qty output { min-width: 1ch; font-weight: 700; color: var(--pp-navy); text-align: center; }
.pp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 0.875rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-trust li::before { content: "✓ "; font-weight: 700; color: var(--pp-teal); }

.pp-tabs { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0; gap: 32px; border-bottom: 1px solid var(--pp-border-soft); }
.pp-tabs .nav-link {
  padding-bottom: 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--pp-text-secondary);
}
.pp-tabs .nav-link:hover { color: var(--pp-navy); }
.pp-tabs .nav-link.active { border-bottom-color: var(--pp-teal); font-weight: 700; color: var(--pp-navy); background: transparent; }
@media (max-width: 575.98px) {
  .pp-tabs { gap: 20px; }
  .pp-tabs .nav-link { font-size: 1rem; padding-bottom: 12px; }
}
.pp-tab-panel { padding-top: 32px; }
.pp-tab-panel h3 { margin: 0 0 20px; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.pp-detail-list { display: flex; gap: 40px; margin-top: 20px; font-size: 0.875rem; line-height: 1.4; }
.pp-detail-list > div { flex: 1 1 0; }
.pp-detail-list strong { display: block; margin-bottom: 8px; color: var(--pp-navy); }
.pp-detail-list span { color: var(--pp-text-paragraph); }
@media (max-width: 575.98px) { .pp-detail-list { flex-direction: column; gap: 20px; } }

.pp-facts { width: 100%; max-width: 760px; font-size: 0.875rem; line-height: 1.4; border-collapse: collapse; }
.pp-facts th, .pp-facts td { padding: 12px 0; border-bottom: 1px solid var(--pp-border-soft); vertical-align: top; }
.pp-facts th { font-weight: 700; color: var(--pp-navy); }
.pp-facts td { color: var(--pp-text-paragraph); }
.pp-facts .num { width: 140px; text-align: right; white-space: nowrap; }
.pp-facts .dv { width: 70px; text-align: right; font-weight: 700; color: var(--pp-navy); }
.pp-facts__note { margin: 12px 0 0; font-size: 0.75rem; color: var(--pp-text-secondary); }

.pp-rating-summary { display: flex; gap: 40px; align-items: stretch; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--pp-border-soft); }
.pp-score { font-family: var(--pp-font-display); font-size: 3.5rem; font-weight: 700; line-height: 1; }
.pp-stars { display: inline-flex; gap: 2px; }
.pp-stars img { width: 20px; height: 20px; }
.pp-stars--sm img { width: 16px; height: 16px; }
.pp-dist { display: flex; flex-direction: column; gap: 8px; min-width: 260px; flex: 1 1 260px; font-size: 0.875rem; color: var(--pp-text-secondary); }
.pp-dist__row { display: flex; align-items: center; gap: 12px; }
.pp-dist__row > span:first-child { width: 48px; }
.pp-dist__track { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--pp-border-card); overflow: hidden; }
.pp-dist__fill { height: 100%; background: var(--pp-teal); }
.pp-dist__row > span:last-child { width: 40px; text-align: right; }
.pp-review-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); }
.pp-review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-review-card__name { font-weight: 700; }
.pp-review-card__date { margin-left: 12px; font-size: 0.875rem; color: var(--pp-text-secondary); }
.pp-review-card__title { margin: 0; font-size: 1rem; font-weight: 600; }
.pp-review-card__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--pp-text-paragraph); }

/* --------------------------------------------------------------------------
   Cart / checkout shared
   -------------------------------------------------------------------------- */
.pp-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-xs);
  background: var(--pp-white);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pp-navy);
  outline: 0;
}
.pp-input:focus { border-color: var(--pp-teal); box-shadow: 0 0 0 3px var(--pp-teal-08); }

.pp-summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  background: var(--pp-surface-25);
}
.pp-summary h2 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.pp-summary__lines { display: flex; flex-direction: column; gap: 12px; font-size: 0.875rem; line-height: 1.4; }
.pp-summary__line { display: flex; justify-content: space-between; gap: 12px; }
.pp-summary__line span:first-child { color: var(--pp-text-paragraph); }
.pp-summary__line span:last-child { font-weight: 600; }
.pp-summary--checkout .pp-summary__lines { gap: 10px; }
.pp-summary--checkout .pp-summary__line span:first-child { color: var(--pp-text-secondary); }
.pp-summary--checkout .pp-summary__line span:last-child { font-weight: 400; color: var(--pp-text-paragraph); }
.pp-summary--checkout .pp-summary__line--total span:last-child { font-weight: 700; color: var(--pp-navy); }
.pp-summary__total { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.pp-summary__total span:first-child { font-size: 1rem; }
.pp-summary__total span:last-child { font-size: 1.5rem; line-height: 1.2; }
.pp-summary__items { display: flex; flex-direction: column; gap: 16px; }
.pp-summary__item { display: flex; align-items: center; gap: 12px; }
.pp-summary__item img { width: 64px; height: 64px; border-radius: var(--pp-radius-xs); object-fit: cover; }
.pp-summary__item-body { flex: 1 1 0; min-width: 0; font-size: 0.875rem; line-height: 1.4; }
.pp-summary__item-body strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-summary__item-body span { font-size: 0.75rem; color: var(--pp-text-secondary); }
.pp-summary__item-price { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.pp-summary__promo-label { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--pp-teal); }
.pp-perks { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-perks li { display: flex; align-items: center; gap: 12px; }
.pp-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xs);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pp-text-secondary);
}
.pp-free { color: var(--pp-teal) !important; }
.pp-sidebar { width: 380px; flex: 0 0 auto; }
.pp-sidebar--wide { width: 420px; }
@media (max-width: 991.98px) { .pp-sidebar, .pp-sidebar--wide { width: 100%; } }

/* Cart page */
.pp-cart-head { padding: 40px 0 16px; }
.pp-cart-head h1 { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 0; }
.pp-cart-head h1 small { font-size: 1.125rem; font-weight: 400; color: var(--pp-text-secondary); }
.pp-cart-layout { display: flex; gap: 40px; align-items: flex-start; padding: 16px 0 var(--pp-section-y); }
.pp-cart-list { flex: 1 1 0; min-width: 0; }
.pp-cart-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--pp-border-soft); }
.pp-cart-row__info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pp-cart-row__thumb { width: 80px; height: 80px; border-radius: var(--pp-radius-xs); object-fit: cover; flex: 0 0 auto; }
.pp-cart-row__name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.pp-cart-row__name a { color: inherit; }
.pp-cart-row__name a:hover { color: var(--pp-teal); }
.pp-cart-row__sub { font-size: 0.75rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-cart-row__remove { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: transparent; font-size: 0.75rem; font-weight: 500; color: var(--pp-teal); }
.pp-cart-row__remove:hover { text-decoration: underline; }
.pp-cart-row__figures { display: flex; align-items: center; gap: 48px; }
.pp-cart-row__figures dl { margin: 0; text-align: right; font-size: 0.875rem; line-height: 1.4; }
.pp-cart-row__figures dt { font-weight: 400; color: var(--pp-text-secondary); }
.pp-cart-row__figures dd { margin: 0; font-size: 1rem; font-weight: 600; }
.pp-cart-row__figures .total { width: 80px; }
.pp-cart-row__figures .total dd { font-size: 1.125rem; font-weight: 700; }
.pp-qty-sm {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xs);
}
.pp-qty-sm button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; }
.pp-qty-sm output { min-width: 1ch; font-size: 1rem; font-weight: 600; text-align: center; }
.pp-cart-promo { display: flex; gap: 12px; align-items: center; padding-top: 16px; }
.pp-cart-promo .pp-input { width: 280px; max-width: 100%; }
.pp-cart-empty { padding: 48px 0; text-align: center; }
@media (max-width: 991.98px) { .pp-cart-layout { flex-direction: column; } }
@media (max-width: 767.98px) {
  .pp-cart-row { flex-wrap: wrap; }
  .pp-cart-row__figures { width: 100%; justify-content: space-between; gap: 16px; }
  .pp-cart-row__figures .total { width: auto; }
}

/* Checkout */
.pp-checkout { padding: 48px 0 var(--pp-section-y); }
.pp-stepper { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 16px 0; margin-bottom: 32px; }
.pp-step { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pp-border-soft); color: var(--pp-ink); font-size: 0.75rem; font-weight: 500; }
.pp-step.is-active, .pp-step.is-done { font-weight: 700; color: var(--pp-navy); }
.pp-step.is-active .pp-step__num, .pp-step.is-done .pp-step__num { background: var(--pp-teal); color: var(--pp-white); }
.pp-step__line { width: 80px; height: 1px; background: var(--pp-border); }
.pp-checkout__grid { display: flex; gap: 48px; align-items: flex-start; }
.pp-checkout__form { flex: 1 1 0; min-width: 0; }
.pp-checkout__form h2 { margin: 0 0 24px; }
.pp-form .form-label { margin-bottom: 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.4; color: var(--pp-navy); }
.pp-form .form-control, .pp-form .form-select {
  padding: 12px 16px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xs);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pp-navy);
}
.pp-form .form-select { background-image: url("../assets/icon-chevron-down-sm.svg"); background-size: 14px; background-position: right 16px center; }
.pp-form .form-control:focus, .pp-form .form-select:focus { border-color: var(--pp-teal); box-shadow: 0 0 0 3px var(--pp-teal-08); }
.pp-form .form-control.is-invalid, .pp-form .form-select.is-invalid { border-color: #d92d20; background-image: none; }
.pp-form .invalid-feedback { font-size: 0.75rem; }
.pp-form .row { --bs-gutter-x: 16px; --bs-gutter-y: 24px; }
.pp-form--lg .form-control, .pp-form--lg .form-select { height: 48px; font-size: 1rem; }
@media (max-width: 991.98px) { .pp-checkout__grid { flex-direction: column; } }

/* Payment */
.pp-pay-option { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-white); }
.pp-pay-option.selected { border-color: var(--pp-teal); }
.pp-pay-option__head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px; border: 0; background: transparent; text-align: left; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--pp-ink); }
.pp-pay-option__head .pp-icon--24 { margin-right: -4px; }
.pp-pay-option__radio { width: 20px; height: 20px; border: 1px solid var(--pp-border); border-radius: 50%; flex: 0 0 auto; }
.pp-pay-option.selected .pp-pay-option__radio { border: 0; background: url("../assets/icon-radio-checked.svg") center / 20px no-repeat; }
.pp-pay-option__body { padding: 0 24px 24px; }
.pp-pay-option__body .form-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--pp-text-secondary); }
.pp-pay-option__body .form-control { height: 48px; border-color: var(--pp-border-strong); }
.pp-pay-option__body .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.pp-pay-note { padding: 0 24px 24px; font-size: 0.875rem; color: var(--pp-text-secondary); }
.pp-check { display: inline-flex; align-items: center; gap: 12px; font-size: 0.875rem; font-weight: 500; color: var(--pp-ink); cursor: pointer; }
.pp-check input { position: absolute; opacity: 0; }
.pp-check__box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--pp-border); border-radius: 4px; background: var(--pp-white); }
.pp-check input:checked + .pp-check__box { border-color: var(--pp-teal); background: var(--pp-teal) url("../assets/icon-check-white.svg") center / 14px no-repeat; }
.pp-check input:focus-visible + .pp-check__box { box-shadow: 0 0 0 3px var(--pp-teal-08); }

/* Order confirmation */
.pp-confirm { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 48px 0 var(--pp-section-y); }
.pp-success { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pp-success__circle { display: inline-flex; padding: 16px; border-radius: 50%; background: var(--pp-surface-mint); }
.pp-notice { display: flex; align-items: center; gap: 16px; width: 640px; max-width: 100%; padding: 16px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-surface-25); font-size: 0.875rem; line-height: 1.4; }
.pp-notice__icon { display: inline-flex; padding: 10px; border-radius: 50%; background: var(--pp-surface-mint); }
.pp-notice strong { display: block; font-weight: 600; }
.pp-notice span { color: var(--pp-text-secondary); }
.pp-confirm__grid { display: flex; gap: 24px; align-items: flex-start; width: 850px; max-width: 100%; }
.pp-confirm__grid > * { flex: 1 1 0; min-width: 0; }
.pp-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-white); }
.pp-card__head { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.pp-address { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--pp-text-secondary); }
.pp-address dt { font-weight: 600; color: var(--pp-navy); }
.pp-address dd { margin: 0; }
.pp-alert-mint { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--pp-radius-xs); background: var(--pp-surface-mint); font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.pp-alert-mint strong { font-family: var(--pp-font-display); font-weight: 700; color: var(--pp-teal); }
@media (max-width: 767.98px) { .pp-confirm__grid { flex-direction: column; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.pp-contact { display: flex; gap: 80px; align-items: flex-start; padding: 40px 0 var(--pp-section-y); }
.pp-contact__form { flex: 1 1 0; min-width: 0; }
.pp-contact__form h2 { margin: 0 0 8px; }
.pp-contact__form .pp-form .form-label { font-weight: 600; }
.pp-contact__aside { display: flex; flex-direction: column; gap: 16px; width: 440px; flex: 0 0 auto; }
.pp-contact-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--pp-radius-md); background: var(--pp-surface); }
.pp-contact-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--pp-radius-sm); background: var(--pp-teal-10); }
.pp-contact-card h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.pp-contact-card p { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--pp-text-paragraph); }
.pp-contact-card p + p { margin-top: 6px; font-size: 0.875rem; color: var(--pp-text-secondary); }
@media (max-width: 991.98px) {
  .pp-contact { flex-direction: column; gap: 40px; }
  .pp-contact__aside { width: 100%; }
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.pp-hero__copy { max-width: 960px; }
.pp-hero .pp-lead { max-width: 820px; }
.pp-hero__media { margin-top: 40px; height: clamp(220px, 33vw, 480px); border-radius: var(--pp-radius-xl); overflow: hidden; }
.pp-story { background: var(--pp-surface); border-radius: var(--pp-radius-xl); }
.pp-story__media { max-width: 500px; aspect-ratio: 500 / 420; border-radius: var(--pp-radius-xl); overflow: hidden; }
@media (max-width: 991.98px) { .pp-story__media { max-width: none; } }
.pp-values__grid { margin-top: 48px; }
.pp-cta { background: var(--pp-surface-mint); }
.pp-cta__text { max-width: 640px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.pp-toast { --bs-toast-bg: var(--pp-navy); --bs-toast-color: var(--pp-white); --bs-toast-border-radius: var(--pp-radius-sm); --bs-toast-border-color: transparent; font-size: 0.875rem; }
.pp-toast .btn-close { filter: invert(1); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pp-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--pp-white);
  background: var(--pp-navy);
  border-top-left-radius: var(--pp-radius-xl);
  border-top-right-radius: var(--pp-radius-xl);
  padding-top: var(--pp-section-y);
}
/* Figma blend stack, bottom to top: navy fill → #068e8a in "color" mode →
   photo in "luminosity" mode at 50%. Reproduced with two pseudo layers. */
.pp-footer__bg { position: absolute; inset: auto 0 0 0; height: 720px; max-height: 100%; pointer-events: none; }
.pp-footer__bg::before { content: ""; position: absolute; inset: 0; background: #068e8a; mix-blend-mode: color; }
.pp-footer__bg::after { content: ""; position: absolute; inset: 0; background: url("../assets/footer-bg.jpg") center / cover no-repeat; mix-blend-mode: luminosity; opacity: 0.5; }
.pp-footer__heading { max-width: 576px; margin: 0; font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.2; }
.pp-footer__lede { max-width: 576px; padding-top: 16px; font-family: var(--pp-font-display); font-size: 1rem; line-height: 24px; color: rgba(255, 255, 255, 0.7); }
.pp-subscribe {
  display: flex;
  align-items: center;
  max-width: 414px;
  height: 52px;
  padding-left: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--pp-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color .15s ease;
}
.pp-subscribe:focus-within { border-color: rgba(255, 255, 255, 0.5); }
.pp-subscribe__input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--pp-font-display); font-size: 15px; color: var(--pp-white); }
.pp-subscribe__input::placeholder { color: var(--pp-white); opacity: 1; }
.pp-subscribe__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 24px; border: 0; border-radius: var(--pp-radius-pill); background: var(--pp-teal); transition: background-color .15s ease; }
.pp-subscribe__btn:hover, .pp-subscribe__btn:focus-visible { background: var(--pp-teal-dark); }
.pp-subscribe__done { margin: 8px 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
.pp-footer__brand-row { margin-top: var(--pp-section-y); }
.pp-footer__tagline { max-width: 320px; padding-top: 16px; font-family: var(--pp-font-display); font-size: 0.875rem; line-height: 22.75px; color: rgba(255, 255, 255, 0.55); }
.pp-social { gap: 16px; }
.pp-social a { display: inline-flex; padding: 8px; border-radius: var(--pp-radius-pill); transition: background-color .15s ease; }
.pp-social a:hover, .pp-social a:focus-visible { background: rgba(255, 255, 255, 0.1); }
.pp-social img { width: 24px; height: 24px; object-fit: contain; }
.pp-social__flip { transform: rotate(180deg) scaleX(-1); }
.pp-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.pp-footer__nav a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; font-size: 0.875rem; line-height: 1.4; color: var(--pp-white); white-space: nowrap; transition: opacity .15s ease; }
.pp-footer__nav a:hover { opacity: 0.75; color: var(--pp-white); }
.pp-footer__divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.2); }
@media (max-width: 767.98px) {
  .pp-footer__nav { gap: 0; }
  .pp-footer__nav a { flex-basis: 50%; }
  .pp-footer__divider { display: none; }
}
.pp-footer__legal { margin-top: 32px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--pp-font-display); font-size: 13px; line-height: 19.5px; color: rgba(255, 255, 255, 0.45); }
.pp-footer__legal a { color: inherit; }
.pp-footer__legal a:hover { color: var(--pp-white); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}