/* =========================================================================
   Platinum Peptides — base stylesheet (V1 skeleton)
   Minimal foundation only: reset, tokens, basic layout/typography.
   No page designs yet — those get built per page, on direction.
   Shared by the WordPress theme and the local preview (index.html).
   ========================================================================= */

/* ---------- Tokens (placeholders — adjust to brand later) ---------- */
:root {
  --pp-bg:        #1a1a1e;
  --pp-fg:        #e7e7ea;
  --pp-muted:     #9a9aa2;
  --pp-crimson:   #b61313;
  --pp-crimson-text: #b61313; /* brand crimson for text/icons (per request) */
  --pp-line:      #2a2a30;

  /* Surfaces (flip with theme) */
  --pp-surface-top: #26262d;
  --pp-surface-bot: #1e1e23;
  --pp-surface:     #232329;
  --pp-media-top:   #1b1b21;
  --pp-media-bot:   #101013;
  --pp-header-bg:   rgba(24, 24, 28, .82);
  --pp-footer-bg:   #212127;

  --pp-container: 1200px;
  --pp-gutter:    20px;
  --pp-font:      "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pp-font-display: "Aldrich", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Display typeface for headings & hero text */
h1, h2, h3, h4, h5, h6,
.pp-hero__title,
.pp-section__title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--pp-font-display);
}

/* Keep product descriptions in the readable body font (not the display font) */
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel h1,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.woocommerce-Tabs-panel h5,
.woocommerce-Tabs-panel h6,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--pp-font);
}

/* Hide the categories list on single product pages */
.woocommerce div.product .product_meta .posted_in { display: none; }

/* Light theme */
:root[data-theme="light"] {
  --pp-bg:        #f4f4f7;
  --pp-fg:        #1c1c20;
  --pp-muted:     #6a6e76;
  --pp-line:      #e3e3e9;
  --pp-crimson-text: #b61313; /* darker crimson reads fine on light surfaces */

  --pp-surface-top: #ffffff;
  --pp-surface-bot: #f5f5f8;
  --pp-surface:     #ffffff;
  --pp-media-top:   #f0f0f4;
  --pp-media-bot:   #e6e6ec;
  --pp-header-bg:   rgba(255, 255, 255, .85);
  --pp-footer-bg:   #ededf1;
}

/* Keep the header (nav) and hero in the dark palette even when light mode is on */
:root[data-theme="light"] .pp-site-header,
:root[data-theme="light"] .pp-hero {
  --pp-bg:          #1a1a1e;
  --pp-fg:          #e7e7ea;
  --pp-muted:       #9a9aa2;
  --pp-line:        #2a2a30;
  --pp-surface-top: #26262d;
  --pp-surface-bot: #1e1e23;
  --pp-surface:     #232329;
  --pp-media-top:   #1b1b21;
  --pp-media-bot:   #101013;
  --pp-header-bg:   #17171b;
  --pp-crimson-text: #b61313;
  color: var(--pp-fg);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }

/* Skip-to-content link (WCAG 2.4.1) — hidden until keyboard-focused */
.pp-skip-link {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 2000;
  background: var(--pp-crimson);
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  transition: top .18s ease;
}
.pp-skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
#pp-main-content:focus { outline: none; }

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--pp-crimson-text); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.pp-chip-other:focus-visible,
.pp-widget .woocommerce-product-search input[type="search"]:focus-visible,
html .select2-container--default.select2-container--focus .select2-selection--single {
  outline: 2px solid var(--pp-crimson-text);
  outline-offset: 2px;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* ---------- Base ---------- */
body {
  font-family: var(--pp-font);
  background-color: var(--pp-bg);
  color: var(--pp-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1000px 620px at 100% -5%, rgba(182,19,19,.07), transparent 60%),
    radial-gradient(900px 600px at -8% 22%, rgba(72,74,86,.12), transparent 55%),
    radial-gradient(760px 600px at 60% 120%, rgba(182,19,19,.05), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1rem; }
a:hover { color: var(--pp-crimson); }

/* ---------- Layout helper ---------- */
.pp-container {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}

/* ---------- Announcement bar ---------- */
.pp-announce {
  background: var(--pp-crimson);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 9px 16px;
}
.pp-announce__sep { opacity: .55; margin: 0 10px; }
.pp-announce__link { color: inherit; text-decoration: none; }
.pp-announce__link:hover { text-decoration: underline; }

/* ---------- Minimal site shell (header / footer scaffolding) ---------- */
.pp-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Background + blur come from the glass layer below (the reduced-transparency
     fallback re-pins --pp-header-bg); kept out of here so they aren't a dead,
     misleading declaration. */
  border-bottom: 1px solid var(--pp-line);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.9);
}
.pp-site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.pp-site-title { font-weight: 700; font-size: 18px; }
.pp-site-logo,
.pp-site-header .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.pp-site-header img.custom-logo,
.pp-site-header .pp-logo-img {
  height: 46px !important;
  width: auto !important;
  max-width: none;
  display: block;
}
@media (max-width: 600px) {
  .pp-site-header img.custom-logo,
  .pp-site-header .pp-logo-img { height: 38px !important; }
}
.pp-site-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-site-nav li { margin: 0; }
.pp-site-nav a { color: var(--pp-fg); font-family: var(--pp-font-display); letter-spacing: .02em; }
.pp-site-nav a:hover { color: var(--pp-crimson); }

/* Dropdown sub-menus */
.pp-site-nav .menu-item-has-children { position: relative; }
.pp-site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 8px;
  min-width: 190px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 70;
}
.pp-site-nav .menu-item-has-children:hover > .sub-menu,
.pp-site-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pp-site-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.pp-site-nav .sub-menu a:hover { background: rgba(182, 19, 19, .14); color: var(--pp-crimson); }

/* Mobile nav toggle (hamburger) — hidden on desktop */
.pp-nav-toggle { display: none; }
.pp-nav-toggle .pp-icon-x { display: none; }

@media (max-width: 860px) {
  .pp-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    color: var(--pp-fg);
    cursor: pointer;
  }
  .pp-nav-toggle svg { width: 22px; height: 22px; }
  .pp-site-header.nav-open .pp-nav-toggle .pp-icon-bars { display: none; }
  .pp-site-header.nav-open .pp-nav-toggle .pp-icon-x { display: block; }

  /* Turn the centered desktop nav into a full-width dropdown panel */
  #pp-primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--pp-bg);
    border-bottom: 1px solid var(--pp-line);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .85);
    padding: 6px 0 10px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .pp-site-header.nav-open #pp-primary-nav { display: block; }
  #pp-primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  #pp-primary-nav li { width: 100%; margin: 0; }
  #pp-primary-nav a { display: block; padding: 13px 22px; font-size: 16px; }

  /* Submenus inline & always visible on touch (no hover) */
  #pp-primary-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  #pp-primary-nav .sub-menu a { padding-left: 40px; color: var(--pp-muted); }
  #pp-primary-nav .sub-menu a:hover { background: transparent; color: var(--pp-crimson); }
}

/* Wrapper holds the flex space; the logo link stays as narrow as the image
   so only the logo is clickable (not the empty area beside it). */
.pp-site-header__inner > .pp-site-branding { flex: 1; display: flex; align-items: center; }
.pp-site-branding > .pp-site-logo,
.pp-site-branding > .custom-logo-link { flex: 0 0 auto; }
.pp-site-header__actions { flex: 1; display: flex; gap: 16px; align-items: center; justify-content: flex-end; }
.pp-cart-link { position: relative; display: inline-flex; align-items: center; color: var(--pp-fg); }
.pp-cart-link:hover { color: var(--pp-crimson); }
.pp-cart-link svg { width: 22px; height: 22px; }
.pp-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--pp-crimson);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid var(--pp-bg);
}

.pp-site-main { min-height: 50vh; padding: 32px 0; }
/* Homepage hero sits flush — no main padding (matches the preview). */
.home .pp-site-main { padding: 0; }

.pp-site-footer {
  border-top: 1px solid var(--pp-line);
  padding: 24px 0;
  color: var(--pp-muted);
  font-size: 14px;
}

/* ---------- Footer ---------- */
.pp-footer {
  border-top: 1px solid var(--pp-line);
  background: var(--pp-footer-bg);
  padding: 56px 0 0;
  color: var(--pp-muted);
  font-size: 14px;
}
.pp-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 52px;
}
/* Brand left, link columns distributed with equal gaps (no big void). */
.pp-footer__brand { flex: 0 1 360px; }
.pp-footer__col { flex: 0 0 auto; min-width: 130px; }
.pp-footer .pp-footer__logo { height: 40px; width: auto; max-width: 200px; margin-bottom: 16px; }
.pp-footer__brand p { max-width: 340px; margin: 0 0 18px; line-height: 1.7; }
.pp-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-footer__pay span {
  border: 1px solid var(--pp-line);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--pp-muted);
}
.pp-footer__col h4 {
  color: var(--pp-fg);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.pp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-footer__col a { color: var(--pp-muted); }
.pp-footer__col a:hover { color: var(--pp-crimson); }
/* Legal links (left) + shipping note (right) share one row */
.pp-footer__legal-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  border-top: 1px solid var(--pp-line);
  padding: 20px 0;
  margin-top: 8px;
}
.pp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.pp-footer__ship { margin: 0 0 0 auto; font-size: 13px; color: var(--pp-muted); }
.pp-footer__legal a { color: var(--pp-muted); font-size: 13px; }
.pp-footer__legal a:hover { color: var(--pp-crimson-text); }
.pp-footer__bar {
  border-top: 1px solid var(--pp-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.pp-footer__bar p { margin: 0; font-size: 13px; color: var(--pp-muted); }
.pp-footer__bar .pp-footer__credit {
  border: 1px solid var(--pp-line);
  border-radius: 7px;
  padding: 6px 14px;
}
.pp-footer__credit a {
  position: relative;
  display: inline-block;
  color: var(--pp-crimson-text);
  text-decoration: none;
  /* slow, subtle crimson glow */
  animation: pp-rawth-glow 3.6s ease-in-out infinite;
}
/* A thin white stroke ON the letters, revealed by a light band that sweeps
   across the lettering once on hover (0.5s single pass — not looping). */
.pp-footer__credit a::before {
  content: "RAWTH";
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke: 0.6px #fff;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 55% 100%;
          mask-size: 55% 100%;
  -webkit-mask-position: -70% 0;
          mask-position: -70% 0;
  opacity: 0; /* fully hidden until hovered */
}
.pp-footer__credit a:hover::before { animation: pp-rawth-sweep .5s ease forwards; }
@keyframes pp-rawth-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(182, 19, 19, .40), 0 0 11px rgba(182, 19, 19, .20); }
  50%      { text-shadow: 0 0 9px rgba(214, 24, 24, .85), 0 0 20px rgba(214, 24, 24, .48); }
}
@keyframes pp-rawth-sweep {
  0%   { opacity: 1; -webkit-mask-position: -70% 0; mask-position: -70% 0; }
  80%  { opacity: 1; -webkit-mask-position: 170% 0; mask-position: 170% 0; }
  100% { opacity: 0; -webkit-mask-position: 170% 0; mask-position: 170% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-footer__credit a { animation: none; }
  .pp-footer__credit a:hover::before { animation: none; }
}
@media (max-width: 600px) {
  /* Content-sized box, centered on its own line */
  .pp-footer__bar .pp-footer__credit { width: auto; margin: 8px auto 0; text-align: center; }
}

@media (max-width: 860px) {
  .pp-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; justify-content: initial; }
  .pp-footer__brand { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 520px) {
  .pp-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.pp-hero {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  align-items: center;
  /* Pull the hero up under the floating nav so its background fills the space
     above it (no dead gap); the extra top padding keeps content below the nav. */
  margin-top: -72px;
  padding: 110px 0 48px;
  background-color: var(--pp-bg);
  background-image:
    radial-gradient(820px 460px at 80% -8%, rgba(182,19,19,.22), transparent 60%),
    radial-gradient(680px 480px at 8% 112%, rgba(182,19,19,.10), transparent 55%);
}
/* Subtle tech grid behind the hero */
.pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(78% 70% at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(78% 70% at 50% 0%, #000, transparent 76%);
  pointer-events: none;
}
/* Adobe Stock plexus backdrop — sits behind everything, faded out at the bottom */
.pp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/AdobeStock_243263456.jpeg") center / cover no-repeat;
  opacity: .32;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  pointer-events: none;
}
.pp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
/* Let grid items shrink below their content's intrinsic size (prevents the
   wide hero image from forcing the column — and the whole hero — past the viewport). */
.pp-hero__grid > * { min-width: 0; }
.pp-hero__inner { max-width: 640px; }
.pp-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.pp-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 38px;
  margin-top: 38px;
}
.pp-stat strong { display: block; font-size: 26px; font-weight: 700; color: #fff; line-height: 1; }
.pp-stat span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-hero__visual img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  display: block;
  transform: scale(1.2);
  transform-origin: right center;
}
.pp-hero__eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pp-crimson-text);
  margin-bottom: 20px;
}
.pp-hero h1 {
  font-size: clamp(44px, 7vw, 77px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  text-transform: uppercase;
}
.pp-hero h1 .pp-hero__accent { color: var(--pp-crimson-text); }
/* Metallic silver sheen on the lead hero phrase */
.pp-hero__silver {
  background: linear-gradient(176deg, #ffffff 0%, #e6e7ec 26%, #b4b5be 48%, #8f9099 60%, #d8d9df 78%, #ffffff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.pp-hero__sub {
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--pp-muted);
  max-width: 600px;
  margin: 0 0 36px;
}
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.pp-hero__cta .pp-btn { font-size: 17px; padding: 16px 32px; }
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.pp-btn:active { transform: translateY(1px); }
.pp-btn--primary {
  background: linear-gradient(180deg, #d81818, var(--pp-crimson));
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(182,19,19,.6);
}
.pp-btn--primary:hover {
  background: linear-gradient(180deg, #e62121, #c01414);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -12px rgba(182,19,19,.78);
}
/* The global crimson focus ring is invisible on a crimson-filled button — give
   filled crimson CTAs a white ring + crimson halo so keyboard focus is visible. */
.pp-btn--primary:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible,
.woocommerce a.checkout-button:focus-visible,
.woocommerce button.button.alt:focus-visible,
#place_order:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(182,19,19,.55), 0 10px 28px -10px rgba(182,19,19,.6);
}
.pp-btn--ghost { border-color: var(--pp-line); color: var(--pp-fg); }
.pp-btn--ghost:hover { border-color: var(--pp-crimson); color: var(--pp-crimson); }
.pp-btn--oos {
  background: transparent;
  border: 1px solid var(--pp-line);
  color: var(--pp-muted);
  box-shadow: none;
  cursor: default;
}
.pp-btn--oos:hover { background: transparent; border-color: var(--pp-muted); color: var(--pp-fg); transform: none; box-shadow: none; }

/* Section eyebrow label */
.pp-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pp-crimson);
  margin-bottom: 10px;
}

/* Scroll-reveal animations (only when JS is present, to avoid hiding content otherwise) */
.has-js .pp-features__grid,
.has-js .pp-cats__head,
.has-js .pp-cats__grid,
.has-js .pp-products__head,
.has-js .pp-products__grid,
.has-js .pp-faq__head,
.has-js .pp-faq__list {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.has-js .is-visible { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .has-js .pp-features__grid,
  .has-js .pp-cats__head,
  .has-js .pp-cats__grid,
  .has-js .pp-products__head,
  .has-js .pp-products__grid,
  .has-js .pp-faq__head,
  .has-js .pp-faq__list { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .pp-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .pp-hero__visual { min-height: 0; order: -1; }
  /* Drop the desktop 1.25x left-anchored zoom so the full image fits the column */
  .pp-hero__visual img { transform: none; width: 100%; height: auto; }
}
@media (max-width: 600px) {
  .pp-hero { min-height: 50vh; }
  /* Announcement bar: one line, with breathing room from the edges */
  .pp-announce { font-size: clamp(7px, 2.3vw, 13px); white-space: nowrap; padding: 8px 18px; }
  .pp-announce__sep { margin: 0 6px; }
  /* Hero trust badges: smaller, and allowed to wrap (no overflow) */
  .pp-hero__trust-item { align-items: flex-start; }
  .pp-hero__trust-item span { font-size: 11px; letter-spacing: .03em; }
  .pp-hero__leaf { width: 18px; height: 18px; }
}

/* ---------- Feature / trust strip ---------- */
.pp-features {
  padding: 56px 0;
  background: linear-gradient(180deg, #dfe2e6, #c6cace);
  color: #1a1a1d;
}
.pp-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pp-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pp-feature__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  color: var(--pp-crimson);
  box-shadow: 0 14px 28px -14px rgba(182,19,19,.5), inset 0 1px 0 rgba(255,255,255,.8);
  margin-bottom: 18px;
}
.pp-feature__icon svg { width: 28px; height: 28px; display: block; }
.pp-feature__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #14141a;
  margin: 0 0 8px;
}
.pp-feature p {
  font-size: 14px;
  color: #4a4d53;
  margin: 0;
  max-width: 250px;
}

@media (max-width: 860px) {
  .pp-features__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 520px) {
  .pp-features__grid { grid-template-columns: 1fr; }
}

/* ---------- Categories ---------- */
.pp-cats { padding: 80px 0; scroll-margin-top: 90px; }
.pp-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.pp-cats__head h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; margin: 0; }
.pp-cats__head p { color: var(--pp-muted); margin: 6px 0 0; }
.pp-cats__grid {
  display: grid;
  /* auto-fit + minmax so 1–4 cards always fill the row (no empty/lopsided
     columns when the catalog has fewer than 4 categories) and the column count
     adapts to width — replaces the scattered, easy-to-mis-order breakpoints. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
/* Give every category card the same min-height + bottom-anchored content so a
   plain card (no image) and a photo card line up identically in a row. */
.pp-cats__grid .pp-cat { padding: 16px 18px; min-height: 150px; justify-content: flex-end; }
.pp-cats__grid .pp-cat__name { font-size: 15px; }
.pp-cats__grid .pp-cat__count { font-size: 12px; }
.pp-cats__grid .pp-cat__link { font-size: 13px; }
.pp-cat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 24px;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  box-shadow: 0 12px 30px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.pp-cat:hover { border-color: var(--pp-crimson); transform: translateY(-3px); box-shadow: 0 16px 38px -24px rgba(182,19,19,.5); }
.pp-cat:not(.pp-cat--bg):hover { background: var(--pp-surface-top); }

/* Cards with a photo backdrop behind the text */
.pp-cat--bg {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pp-cat--bg::before {
  content: "";
  position: absolute;
  /* Over-cover the card (clipped by overflow:hidden) so the overlay reaches
     every edge — no antialiased hairline of the photo at the bottom. */
  inset: -2px;
  /* Ramp to fully opaque at the bottom so the bright photo can't bleed through. */
  background: linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,.70) 50%, rgba(8,8,10,.94) 85%, rgba(8,8,10,1) 100%);
  z-index: 0;
}
.pp-cat--bg > * { position: relative; z-index: 1; }
.pp-cat--bg.pp-cat:hover { background-color: transparent; }
.pp-cat--bg .pp-cat__name { color: #fff; }
.pp-cat--bg .pp-cat__count { color: rgba(255,255,255,.78); }

.pp-cat__name { font-size: 18px; font-weight: 700; color: var(--pp-fg); margin: 0; }
.pp-cat__count { color: var(--pp-muted); font-size: 13px; }
.pp-cat__link {
  margin-top: 10px;
  color: var(--pp-crimson-text);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pp-cat__link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.pp-cat:hover .pp-cat__link svg { transform: translateX(4px); }

/* ---------- Products ---------- */
.pp-products { padding: 80px 0; }
.pp-products--alt { border-top: 1px solid var(--pp-line); }
.pp-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.pp-products__viewall {
  color: var(--pp-crimson-text);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.pp-products__viewall:hover { text-decoration: underline; }
.pp-products__head h2 {
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -.02em;
  margin: 0;
}
.pp-products__head p { color: var(--pp-muted); margin: 6px 0 0; }
.pp-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pp-product {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.pp-product:hover { border-color: var(--pp-crimson); transform: translateY(-5px); box-shadow: 0 26px 56px -26px rgba(182,19,19,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.pp-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--pp-line);
  background:
    radial-gradient(80% 80% at 50% 25%, rgba(182,19,19,.16), transparent 60%),
    linear-gradient(160deg, var(--pp-media-top), var(--pp-media-bot));
}
.pp-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pp-product:hover .pp-product__media img { transform: scale(1.06); }
.pp-product__media svg { width: 44px; height: 44px; color: var(--pp-muted); }
.pp-product__tag {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pp-crimson);
  padding: 4px 9px;
  border-radius: 6px;
}
.pp-product__body { padding: 20px 18px; display: flex; flex-direction: column; flex: 1; text-align: center; align-items: center; }
.pp-product__cat {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-product__title {
  font-family: var(--pp-font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.35;
  margin: 2px 0 12px;
}
.pp-product__title a { color: var(--pp-fg); text-decoration: none; }
.pp-product__stock {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-family: var(--pp-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--pp-crimson-text);
  background: rgba(182, 19, 19, .12);
  border: 1px solid rgba(239, 83, 80, .38);
  padding: 4px 11px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.pp-product__stock::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--pp-crimson-text);
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
          mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.pp-product__body .pp-product__stock { align-self: center; }
/* Centered, stacked foot: price on top, full-width Add to Cart below */
.pp-product__foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; padding-top: 6px; }
.pp-product__price { font-weight: 800; font-size: 21px; color: var(--pp-crimson-text); text-align: center; }
.pp-product__price del { color: var(--pp-muted); font-weight: 500; text-decoration: line-through; margin-right: 7px; }
.pp-product__price ins { color: var(--pp-crimson-text); text-decoration: none; font-weight: 800; }
.pp-product__foot .pp-btn { width: 100%; padding: 13px 18px; font-size: 14px; }
.pp-btn--sm { padding: 9px 16px; font-size: 13px; }
.pp-products__all { text-align: center; margin-top: 30px; }

@media (max-width: 860px) {
  .pp-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pp-products__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pp-product__body { padding: 14px 12px; }
  .pp-product__title { font-size: 13px; }
  .pp-product__price { font-size: 18px; }
  .pp-product__foot .pp-btn { padding: 11px 10px; font-size: 12px; }
}

/* ---------- FAQ ---------- */
.pp-faq {
  scroll-margin-top: 90px;
  padding: 80px 0;
  background: linear-gradient(180deg, #dfe2e6, #c6cace);
  color: #1a1a1d;
}
.pp-faq__head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.pp-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pp-crimson);
}
.pp-faq__eyebrow::before,
.pp-faq__eyebrow::after {
  content: "";
  width: 14px;
  height: 11px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
}
.pp-faq__head h2 {
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #14141a;
  margin: 0;
}
.pp-faq__list {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-faq__item {
  background: #ffffff;
  border: 1px solid #c4c8ce;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.pp-faq__item.is-open { border-color: rgba(182, 19, 19, .55); }
.pp-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  background: none;
  border: 0;
  color: #14141a;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.pp-faq__icon {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--pp-crimson);
  color: var(--pp-crimson);
}
.pp-faq__icon::before,
.pp-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}
.pp-faq__icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.pp-faq__icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease; }
.pp-faq__item.is-open .pp-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.pp-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  /* visibility:hidden takes collapsed answers (and the support mailto link
     inside) out of the keyboard tab order. Delay it until the collapse
     animation finishes; reveal instantly on open. */
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.pp-faq__item.is-open .pp-faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s ease, visibility 0s;
}
.pp-faq__a-wrap { overflow: hidden; }
.pp-faq__a-inner {
  padding: 2px 24px 24px;
  color: #4a4d53;
  font-size: 15px;
  line-height: 1.75;
}
.pp-faq__a-inner p { margin: 0 0 12px; }
.pp-faq__a-inner p:last-child { margin: 0; }
.pp-faq__hl { color: var(--pp-crimson); font-weight: 600; }

@media (max-width: 520px) {
  .pp-faq__q { padding: 18px 16px; font-size: 14px; }
  .pp-faq__a-inner { padding: 2px 16px 18px; }
}

/* =========================================================================
   WooCommerce — visual overrides
   WooCommerce's own stylesheet handles structural layout (grid, single-product
   columns, cart table, responsive). These rules only restyle colours, borders,
   buttons and inputs to match the dark / crimson theme.
   ========================================================================= */
.woocommerce, .woocommerce-page { color: var(--pp-fg); }
.pp-shop, .pp-page { padding: 24px var(--pp-gutter) 64px; }
.pp-page__title { margin: 0 0 24px; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.01em; }

/* Titles */
.woocommerce-products-header { margin-bottom: 24px; }
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
  color: var(--pp-fg);
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: -.01em;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb { color: var(--pp-muted); font-size: 13px; margin-bottom: 18px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--pp-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pp-crimson); }

/* Result count + ordering / form fields */
.woocommerce .woocommerce-result-count { color: var(--pp-muted); }
.woocommerce .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty,
.woocommerce #respond input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  color: var(--pp-fg);
  border-radius: 8px;
  padding: 10px 12px;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus { outline: none; border-color: var(--pp-crimson); }
.woocommerce input::placeholder, .woocommerce textarea::placeholder { color: var(--pp-muted); }

/* Select2 dropdowns (Country / Province on checkout) — match the dark fields */
html .select2-container--default .select2-selection--single {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  height: 42px;
}
html .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--pp-fg);
  line-height: 40px;
  padding-left: 12px;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  right: 8px;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--pp-muted) transparent transparent transparent;
}
html .select2-container--open.select2-container--default .select2-selection--single {
  border-color: var(--pp-crimson);
}
html .select2-dropdown {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  color: var(--pp-fg);
}
html .select2-container--default .select2-results__option { color: var(--pp-fg); background: transparent; }
html .select2-container--default .select2-results__option--highlighted[aria-selected],
html .select2-container--default .select2-results__option--highlighted {
  background: var(--pp-crimson);
  color: #fff;
}
html .select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(182, 19, 19, .18);
  color: var(--pp-fg);
}
html .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  color: var(--pp-fg);
  border-radius: 6px;
}

/* Product cards (shop loop) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  /* Surface/border/radius/shadow come from the glass layer below (!important);
     only structural + transition bits live here. */
  overflow: hidden;
  padding-bottom: 16px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--pp-crimson); transform: translateY(-5px); box-shadow: 0 26px 56px -26px rgba(182,19,19,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.woocommerce ul.products li.product a img { margin: 0 0 12px; border-bottom: 1px solid var(--pp-line); transition: transform .5s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 16px; color: var(--pp-fg); font-size: 16px; font-weight: 600; }
.woocommerce ul.products li.product .price { padding: 6px 16px 0; color: var(--pp-fg); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--pp-crimson-text); font-weight: 400; text-decoration: line-through; }
.woocommerce ul.products li.product .price ins { color: var(--pp-fg); text-decoration: none; font-weight: 700; }
.woocommerce ul.products li.product .button { margin: 12px 16px 0; display: inline-block; }

/* Low-stock badge in shop loop */
.woocommerce ul.products li.product .pp-product__stock {
  margin: 6px 16px 10px;
}

/* Shop toolbar (result count + grid/list toggle + ordering) */
.pp-shop-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.pp-shop-toolbar .woocommerce-result-count { margin: 0 auto 0 0; }
.pp-shop-toolbar .woocommerce-ordering { margin: 0; }
.pp-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--pp-line);
  border-radius: 10px;
}
.pp-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--pp-muted);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pp-view-btn svg { width: 18px; height: 18px; }
.pp-view-btn:hover { color: var(--pp-fg); }
.pp-view-btn.is-active { background: var(--pp-crimson); color: #fff; }

/* List view — horizontal rows (image left, details right, button far right) */
.woocommerce ul.products.pp-list { display: block; }
.woocommerce ul.products.pp-list::before,
.woocommerce ul.products.pp-list::after { content: none; display: none; }
.woocommerce ul.products.pp-list li.product {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  text-align: left;
  position: relative;
}
.woocommerce ul.products.pp-list li.product a.woocommerce-LoopProduct-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.woocommerce ul.products.pp-list li.product a.woocommerce-LoopProduct-link img {
  flex: 0 0 100px;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 !important;
  border: 0 !important;
}
.woocommerce ul.products.pp-list li.product .woocommerce-loop-product__title {
  flex: 1 1 140px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
}
/* Right-aligned price column so prices line up across rows (sale or not) */
.woocommerce ul.products.pp-list li.product .price {
  order: 2;
  flex: 0 0 auto;
  min-width: 120px;
  text-align: right;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.25;
}
/* "Only N left" reordered to the right of the price (scarcity beside the CTA) */
.woocommerce ul.products.pp-list li.product .pp-product__stock {
  order: 3;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
}
.woocommerce ul.products.pp-list li.product .star-rating { flex: 0 0 auto; }
/* Tidy qty + button cluster on the far right */
.woocommerce ul.products.pp-list li.product .pp-addrow {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px;
}
.woocommerce ul.products.pp-list li.product .button { flex: 0 0 auto; margin: 0 !important; align-self: center; }
/* Sale badge sits on the thumbnail instead of floating in the row corner */
.woocommerce ul.products.pp-list li.product .onsale {
  position: absolute;
  top: 20px;
  left: 22px;
  right: auto;
  bottom: auto;
  margin: 0;
}
@media (max-width: 640px) {
  /* List view on phones: image left, title/price/stock stacked beside it, and
     Add-to-cart full-width below. The product link wraps img+title+stock+price,
     so flatten it (display:contents) and grid-place each piece on the <li>. */
  .woocommerce ul.products.pp-list li.product {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      "img title"
      "img price"
      "img stock"
      "btn btn";
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    padding: 14px;
  }
  .woocommerce ul.products.pp-list li.product a.woocommerce-LoopProduct-link { display: contents; }
  .woocommerce ul.products.pp-list li.product a.woocommerce-LoopProduct-link img {
    grid-area: img;
    width: 76px !important;
    height: 76px !important;
    align-self: start;
  }
  .woocommerce ul.products.pp-list li.product .woocommerce-loop-product__title {
    grid-area: title; margin: 0 !important; font-size: 15px; line-height: 1.25;
  }
  .woocommerce ul.products.pp-list li.product .price {
    grid-area: price; text-align: left; min-width: 0; font-size: 15px;
  }
  .woocommerce ul.products.pp-list li.product .pp-product__stock {
    grid-area: stock; justify-self: start; margin: 0 !important;
  }
  .woocommerce ul.products.pp-list li.product .button {
    grid-area: btn; width: 100%; text-align: center; margin: 10px 0 0 !important; align-self: stretch;
  }
}

/* Free-shipping progress (cart) */
.pp-freeship {
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.pp-freeship p { margin: 0 0 10px; color: var(--pp-fg); font-size: 14px; }
.pp-freeship strong { color: var(--pp-fg); }
.pp-freeship__bar { height: 8px; border-radius: 999px; background: var(--pp-glass-border); overflow: hidden; }
.pp-freeship__bar span { display: block; height: 100%; background: linear-gradient(90deg, #d81818, var(--pp-crimson)); border-radius: inherit; transition: width .4s ease; }

/* Sale badge */
.woocommerce span.onsale {
  background: var(--pp-crimson);
  color: #fff;
  border-radius: 6px;
  min-height: auto;
  min-width: auto;
  padding: 4px 10px;
  line-height: 1.4;
  font-weight: 700;
}
/* Keep the loop sale badge inside the card so overflow:hidden doesn't clip it */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  margin: 0;
  z-index: 2;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--pp-crimson); }
.woocommerce .star-rating { color: var(--pp-crimson); }

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--pp-crimson);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  transition: background .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover { background: #d81818; color: #fff; }
.woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .55; }
/* Out-of-stock loop button — muted/outlined, clearly not a buy button */
.woocommerce ul.products li.product.outofstock .button {
  background: transparent;
  border: 1px solid var(--pp-line);
  color: var(--pp-muted);
  box-shadow: none;
}
.woocommerce ul.products li.product.outofstock .button:hover {
  background: transparent;
  border-color: var(--pp-muted);
  color: var(--pp-fg);
}

/* Single product price + meta */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--pp-fg); font-size: 24px; font-weight: 700; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: var(--pp-fg); text-decoration: none; font-weight: 700; }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--pp-crimson-text); text-decoration: line-through; }
.woocommerce div.product .product_meta { color: var(--pp-muted); font-size: 13px; }
.woocommerce div.product .product_meta a { color: var(--pp-crimson); }

/* Related / up-sell products */
.woocommerce .related.products,
.woocommerce .upsells.products {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--pp-line);
  clear: both;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  color: var(--pp-fg);
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -.01em;
  margin-bottom: 22px;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--pp-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--pp-surface);
  border-color: var(--pp-line);
  border-radius: 8px 8px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--pp-bg); border-bottom-color: var(--pp-bg); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--pp-fg); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--pp-crimson); }
/* Kill WooCommerce's default white corner "curve" pseudo-elements on the tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }

/* In-stock status: a more flattering green than WooCommerce's default */
.woocommerce .stock.in-stock,
.woocommerce p.stock.in-stock,
.woocommerce div.product .stock.in-stock { color: #34c759 !important; }
/* Light mode: the bright green fails contrast on the light surface — use a darker green */
:root[data-theme="light"] .woocommerce .stock.in-stock,
:root[data-theme="light"] .woocommerce p.stock.in-stock,
:root[data-theme="light"] .woocommerce div.product .stock.in-stock { color: #1a7f37 !important; }
/* Success-notice checkmark uses the same green (WooCommerce defaults to #8fae1b) */
.woocommerce .woocommerce-message::before { color: #34c759 !important; }
/* Remove WooCommerce's blue info-notice icon (Cart cleared / empty cart, etc.) */
.woocommerce .woocommerce-info::before { display: none !important; }
.woocommerce .woocommerce-info { padding-left: 2em !important; }

/* Description tab: clamp with a soft fade into the page + a centered Read more */
.pp-desc-clamp { max-height: 230px; overflow: hidden; position: relative; }
.pp-desc-clamp.is-open { max-height: none; }
.pp-desc-clamp:not(.is-open)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, #0c0c10 86%);
  pointer-events: none;
}
:root[data-theme="light"] .pp-desc-clamp:not(.is-open)::after {
  background: linear-gradient(180deg, transparent, #eef0f4 86%);
}
.pp-desc-more {
  display: block;
  width: 100%;
  text-align: center;
  margin: -36px 0 0;
  position: relative;
  z-index: 2;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--pp-crimson-text);
  font-family: var(--pp-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
}
.pp-desc-clamp.is-open + .pp-desc-more { margin-top: 12px; }
.pp-desc-more:hover { text-decoration: underline; }

/* Tables (cart / order review) */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  background: var(--pp-surface);
}
.woocommerce table.shop_table th { color: var(--pp-fg); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th { border-top-color: var(--pp-line); color: var(--pp-fg); }
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce .cart-collaterals h2 { color: var(--pp-fg); }
.woocommerce a.remove { color: var(--pp-crimson) !important; }
.woocommerce a.remove:hover { background: var(--pp-crimson); color: #fff !important; }

/* Hide the "Shipping to <address>." line on the cart — address is collected at checkout */
.woocommerce-cart .woocommerce-shipping-destination { display: none; }

/* Cart coupon area — give it room so it isn't cramped */
.woocommerce .cart .actions .coupon { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.woocommerce .cart .actions .coupon label { display: none; }
.woocommerce .cart .actions .coupon .input-text {
  flex: 0 1 220px;
  min-width: 140px;
  width: auto;
  margin: 0;
  padding: 11px 14px;
}
.woocommerce .cart .actions .coupon .button { margin: 0; white-space: nowrap; }

/* Clear cart — subtle outline button beside "Update cart" */
.woocommerce .cart .actions .pp-clear-cart {
  background: transparent;
  color: var(--pp-muted);
  border: 1px solid var(--pp-line);
  margin-left: 10px;
}
.woocommerce .cart .actions .pp-clear-cart:hover {
  background: transparent;
  border-color: var(--pp-crimson);
  color: var(--pp-crimson-text);
}

/* Clear-cart confirm bubble */
.pp-clear-wrap { position: relative; display: inline-block; }
.pp-confirm-pop {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: 220px;
  padding: 13px 15px;
  text-align: center;
  background: var(--pp-surface-top);
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .75);
}
.pp-confirm-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--pp-surface-top);
}
.pp-confirm-pop p { margin: 0 0 11px; font-size: 13px; font-weight: 700; color: var(--pp-fg); }
.pp-confirm-pop__btns { display: flex; gap: 8px; justify-content: center; }
.pp-confirm-pop button {
  border: 0;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  font-family: inherit;
  cursor: pointer;
}
.pp-confirm-yes { background: var(--pp-crimson); color: #fff; }
.pp-confirm-yes:hover { background: #c81616; }
.pp-confirm-no { background: transparent; color: var(--pp-muted); border: 1px solid var(--pp-line); }
.pp-confirm-no:hover { color: var(--pp-fg); border-color: var(--pp-fg); }

/* "Undo" link inside the cart-cleared notice */
.woocommerce-info .pp-undo-cart,
.woocommerce-message .pp-undo-cart {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 13px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-info .pp-undo-cart:hover,
.woocommerce-message .pp-undo-cart:hover { background: rgba(182, 19, 19, .14); }

/* Coupon "Remove" → small red button */
.woocommerce .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 9px;
  padding: 3px 12px;
  background: var(--pp-crimson) !important;
  color: #fff !important;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  vertical-align: middle;
  transition: background .15s ease;
}
.woocommerce .woocommerce-remove-coupon:hover { background: #c81616 !important; color: #fff !important; }

/* ---------- Checkout (classic) — two-column, themed ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--pp-surface);
  border-top: 3px solid var(--pp-crimson);
  border-radius: 8px;
  color: var(--pp-fg);
}
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 14px 40px;
  align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 100px; }

/* Stack billing + notes within the left column */
.woocommerce-checkout #customer_details .col2-set { display: block; width: 100%; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; margin: 0 0 8px; }

.woocommerce-checkout h3 { color: var(--pp-fg); font-size: 18px; }
.woocommerce-checkout .form-row label { color: var(--pp-fg); font-size: 13px; font-weight: 600; }

/* Order summary card */
.woocommerce-checkout #order_review {
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 22px;
}
.woocommerce-checkout #order_review .shop_table { background: transparent; border: 0; box-shadow: none; }
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td { border-top-color: var(--pp-line); }

/* Payment box */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--pp-bg);
  color: var(--pp-muted);
  border-radius: 8px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 16px 0 0; }
.woocommerce-checkout #place_order { width: 100%; }
.woocommerce-checkout .woocommerce-privacy-policy-text { color: var(--pp-muted); font-size: 12.5px; }

/* Checkout cross-sell — "Complete your order" */
.pp-xsell { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--pp-line); }
.pp-xsell__title {
  font-family: var(--pp-font-display);
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pp-muted); margin: 0 0 12px;
}
.pp-xsell__items { display: flex; flex-direction: column; gap: 10px; }
.pp-xsell__item { display: flex; align-items: center; gap: 11px; }
.pp-xsell__item img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--pp-line); flex-shrink: 0; margin: 0;
}
.pp-xsell__info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.pp-xsell__name {
  font-size: 13px; color: var(--pp-fg); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-xsell__price { font-size: 12.5px; color: var(--pp-muted); }
.pp-xsell__price .amount,
.pp-xsell__price ins { color: var(--pp-fg); text-decoration: none; }
.pp-xsell__add {
  flex-shrink: 0;
  border: 1px solid var(--pp-crimson); background: transparent; color: var(--pp-crimson);
  font-family: var(--pp-font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 15px; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.pp-xsell__add:hover { background: var(--pp-crimson); color: #fff; }
.pp-xsell__add.is-loading { opacity: .6; cursor: default; }

/* Research-use disclaimer (single product + checkout) */
.pp-ruo-note { font-size: 12.5px; line-height: 1.5; color: var(--pp-muted); margin: 14px 0 0; }
.woocommerce div.product form.cart .pp-ruo-note { margin: 14px 0 0; clear: both; }
.pp-ruo-note--checkout { margin: 0 0 14px; padding-top: 4px; }

/* ---------- 404 page ---------- */
.pp-404 { padding: 90px 0; }
.pp-404__inner { max-width: 620px; margin: 0 auto; text-align: center; }
.pp-404__code { font-size: 18px; }
.pp-404__title { font-family: var(--pp-font-display); font-size: clamp(30px, 6vw, 52px); text-transform: uppercase; margin: 8px 0 14px; color: var(--pp-fg); }
.pp-404__text { color: var(--pp-muted); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
.pp-404__search { margin: 0 0 26px; }
.pp-404 .search-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.pp-404 .search-form label { flex: 1; margin: 0; }
.pp-404 .search-field {
  width: 100%;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  color: var(--pp-fg);
  border-radius: 8px;
  padding: 11px 14px;
}
.pp-404 .search-submit {
  background: var(--pp-crimson);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 700;
  font-family: var(--pp-font-display);
  cursor: pointer;
}
.pp-404 .search-submit:hover { background: #c81616; }
.pp-404__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Order received / thank-you page ---------- */
.woocommerce-order { max-width: 860px; margin: 0 auto; }
.woocommerce-thankyou-order-received {
  font-family: var(--pp-font-display);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--pp-fg);
  margin: 0 0 10px;
}
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  list-style: none;
  margin: 22px 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  border: 1px solid var(--pp-line);
  border-radius: 14px;
}
.woocommerce ul.order_details li {
  border: 0;
  margin: 0;
  color: var(--pp-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pp-fg);
}
.woocommerce-order h2,
.woocommerce-column__title,
.woocommerce-order-details__title {
  font-family: var(--pp-font-display);
  color: var(--pp-fg);
  font-size: 18px;
  margin: 30px 0 14px;
}
.woocommerce-customer-details address {
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--pp-fg);
}
/* Direct bank transfer / Interac e-Transfer details — big crimson callout so buyers can't miss how to pay */
.woocommerce-bacs-bank-details,
.woocommerce-order .wc-bacs-bank-details {
  background: linear-gradient(180deg, rgba(182, 19, 19, .12), rgba(182, 19, 19, .05));
  border: 2px solid var(--pp-crimson);
  border-left-width: 6px;
  border-radius: 12px;
  padding: 24px 26px;
  margin: 28px 0;
  list-style: none;
  box-shadow: 0 0 0 1px rgba(182, 19, 19, .25), 0 24px 60px -30px rgba(182, 19, 19, .7);
}
.wc-bacs-bank-details-heading,
.woocommerce-bacs-bank-details h2 {
  font-family: var(--pp-font-display);
  color: var(--pp-crimson-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 14px;
  font-size: 20px;
}
.woocommerce-bacs-bank-details li,
.wc-bacs-bank-details li { color: var(--pp-fg); margin: 7px 0; border: 0; font-size: 15.5px; }
.woocommerce-bacs-bank-details li strong,
.wc-bacs-bank-details li strong { color: var(--pp-crimson-text); }

/* Order-received payment callout (e-Transfer awaiting payment) */
.pp-payinfo {
  margin: 0 0 28px;
  padding: 24px 26px;
  background: linear-gradient(180deg, rgba(182, 19, 19, .16), rgba(182, 19, 19, .06));
  border: 2px solid var(--pp-crimson);
  border-radius: 12px;
  box-shadow: 0 24px 60px -30px rgba(182, 19, 19, .75);
}
.pp-payinfo__badge {
  display: inline-block;
  font-family: var(--pp-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pp-crimson);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.pp-payinfo__title {
  font-family: var(--pp-font-display);
  text-transform: uppercase;
  color: var(--pp-fg);
  font-size: clamp(20px, 4vw, 26px);
  margin: 0 0 8px;
}
.pp-payinfo__lead { color: var(--pp-fg); margin: 0 0 6px; font-size: 15px; }
.pp-payinfo__email {
  display: inline-block;
  font-family: var(--pp-font);
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  color: var(--pp-crimson-text);
  text-decoration: none;
  margin: 0 0 16px;
  word-break: break-all;
}
.pp-payinfo__email:hover { text-decoration: underline; }
.pp-payinfo__list { margin: 6px 0 0; padding: 0; list-style: none; }
.pp-payinfo__list li {
  position: relative;
  padding-left: 20px;
  margin: 0 0 9px;
  color: var(--pp-fg);
  font-size: 14.5px;
  line-height: 1.55;
}
.pp-payinfo__list li:last-child { margin-bottom: 0; }
.pp-payinfo__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-crimson);
}
.pp-payinfo__list li strong { color: var(--pp-crimson-text); }

/* Category photo cards: guarantee the image covers (never tiles), and drop the
   backdrop blur on the scrim — it caused a rendering artifact at the card's
   bottom edge on mobile (inside the overflow:hidden rounded card). */
.pp-cat--bg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* No translucent white border — it let the bright photo bleed through as a
     thin white line at the bottom (where the scrim is darkest). */
  border: 0 !important;
}
.pp-cat--bg::before {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  /* Bulletproof the overlay: over-cover every edge + fully opaque at the bottom
     so no bright photo bleeds through as a white line. */
  inset: -2px !important;
  background: linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,.70) 50%, rgba(8,8,10,.94) 85%, rgba(8,8,10,1) 100%) !important;
}

@media (max-width: 860px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-noreviews {
  background: var(--pp-surface);
  border-top: 3px solid var(--pp-crimson);
  color: var(--pp-fg);
  border-radius: 8px;
}
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button) { color: var(--pp-crimson); }

/* Pagination — modern separated pills */
.woocommerce nav.woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border: 0 !important;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
  margin: 0;
  float: none;
  display: inline-flex;
  background: transparent;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid var(--pp-glass-border);
  background: var(--pp-glass-soft);
  color: var(--pp-fg);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  border-color: var(--pp-crimson);
  color: var(--pp-crimson-text);
  transform: translateY(-2px);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pp-crimson);
  border-color: var(--pp-crimson);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(182, 19, 19, .85);
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev { font-size: 17px; }

/* ---------- Theme toggle ---------- */
.pp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: 0;
  color: var(--pp-fg);
  cursor: pointer;
}
.pp-theme-toggle:hover { color: var(--pp-crimson); }
.pp-theme-toggle svg { width: 20px; height: 20px; }
.pp-theme-toggle .pp-icon-sun { display: none; }
:root[data-theme="light"] .pp-theme-toggle .pp-icon-sun { display: block; }
:root[data-theme="light"] .pp-theme-toggle .pp-icon-moon { display: none; }
:root[data-theme="light"] .pp-logo-img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* ---------- Peptide calculator ---------- */
.pp-calc { max-width: 1000px; margin: 8px auto 0; }
.pp-calc__grid2 {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: start;
  padding: 30px;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
  box-shadow: 0 12px 30px -24px rgba(0,0,0,.9);
}
.pp-calc__q { font-size: 15px; font-weight: 700; color: var(--pp-fg); margin: 0 0 14px; }
.pp-calc__field { margin-bottom: 26px; }
.pp-calc__field:last-child { margin-bottom: 0; }
.pp-calc__qrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-calc__qrow .pp-calc__q { margin: 0; }
.pp-unit-toggle { display: inline-flex; border: 1px solid var(--pp-line); border-radius: 8px; overflow: hidden; }
.pp-unit { padding: 6px 14px; background: var(--pp-bg); border: 0; color: var(--pp-muted); font-weight: 600; font-size: 13px; cursor: pointer; }
.pp-unit + .pp-unit { border-left: 1px solid var(--pp-line); }
.pp-unit.is-active { background: var(--pp-crimson); color: #fff; }

/* Syringe options */
.pp-syr-list { display: flex; flex-direction: column; gap: 12px; }
.pp-syr {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  color: var(--pp-fg);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pp-syr:hover { border-color: var(--pp-crimson); }
.pp-syr.is-active { border-color: var(--pp-crimson); box-shadow: inset 0 0 0 1px var(--pp-crimson); }
.pp-syr__vol { font-weight: 700; font-size: 16px; }
.pp-syr__svg { color: var(--pp-muted); display: block; }
.pp-syr__svg svg { width: 100%; height: 24px; display: block; }
.pp-syr.is-active .pp-syr__svg { color: var(--pp-crimson); }
.pp-syr__units { font-size: 12px; color: var(--pp-muted); white-space: nowrap; }

/* Chip groups */
.pp-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pp-chip {
  padding: 10px 18px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  color: var(--pp-fg);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.pp-chip:hover { border-color: var(--pp-crimson); }
.pp-chip.is-active { border-color: var(--pp-crimson); color: var(--pp-crimson); box-shadow: inset 0 0 0 1px var(--pp-crimson); }
.pp-chip-other {
  width: 104px;
  padding: 10px 14px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  color: var(--pp-fg);
  font-size: 14px;
}
.pp-chip-other:focus { outline: none; border-color: var(--pp-crimson); }
.pp-chip-other.is-active { border-color: var(--pp-crimson); color: var(--pp-crimson); box-shadow: inset 0 0 0 1px var(--pp-crimson); }

/* Result + ruler */
.pp-calc__result {
  margin-top: 34px;
  padding: 28px 30px;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
}
.pp-calc__sentence { font-size: clamp(18px, 2.4vw, 24px); color: var(--pp-fg); margin: 0 0 28px; }
.pp-calc__sentence b { color: var(--pp-crimson); font-weight: 800; }
.pp-calc__doses { margin: 18px 0 0; color: var(--pp-muted); font-size: 14px; }
.pp-calc__doses b { color: var(--pp-fg); font-weight: 700; }
.pp-calc__remaining::before { content: "·"; margin: 0 9px; opacity: .55; }
.pp-calc__warn {
  margin: 14px 0 0;
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pp-fg);
  background: rgba(182, 19, 19, .12);
  border: 1px solid rgba(182, 19, 19, .5);
  border-radius: 12px;
}
.pp-calc__warn::before { content: "⚠ "; }
/* Syringe-style dose visualizer (needle · glass barrel · plunger) */
.pp-syringe { display: flex; align-items: center; margin-top: 12px; }
.pp-syringe__needle { position: relative; flex: 0 0 48px; align-self: stretch; min-height: 44px; }
.pp-syringe__needle::before { /* needle shaft */
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--pp-muted) 28%, #dcdce1);
}
.pp-syringe__needle::after { /* luer hub */
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid var(--pp-glass-border); border-right: 0;
}
.pp-syringe__barrel {
  flex: 1;
  padding: 11px 12px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 22%, rgba(0,0,0,.10) 52%, rgba(255,255,255,.03) 82%, rgba(255,255,255,.13));
  border: 1px solid var(--pp-glass-border);
  border-radius: 3px 12px 12px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.pp-syringe__plunger { position: relative; flex: 0 0 42px; align-self: stretch; min-height: 44px; }
.pp-syringe__plunger::before { /* plunger rod */
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid var(--pp-glass-border); border-left: 0;
}
.pp-syringe__plunger::after { /* thumb flange */
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 134%;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid var(--pp-glass-border); border-radius: 0 4px 4px 0;
}

.pp-ruler { position: relative; height: 52px; }
.pp-ruler__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; }
.pp-ruler__tick { width: 1px; height: 10px; background: rgba(255,255,255,.38); position: relative; flex: 0 0 auto; }
.pp-ruler__tick.is-major { height: 17px; background: rgba(255,255,255,.7); }
.pp-ruler__tick[data-label]::after {
  content: attr(data-label);
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--pp-muted);
  white-space: nowrap;
}
.pp-ruler__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  min-width: 2px;
  background: linear-gradient(180deg, #ef5350, var(--pp-crimson) 55%, #8d0f0f);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  transition: width .25s ease;
}
.pp-ruler__fill::after { /* liquid meniscus / plunger seal line */
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  bottom: -3px;
  width: 3px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}

/* Light mode: the syringe is built from white translucency, so give it dark
   outlines + a light-grey barrel/metal so it's visible on a light surface. */
:root[data-theme="light"] .pp-syringe__barrel {
  background: linear-gradient(180deg, #ffffff, #f1f2f6 22%, #e3e5ec 52%, #f1f2f6 82%, #ffffff);
  border-color: rgba(20, 20, 28, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(0, 0, 0, .05);
}
:root[data-theme="light"] .pp-syringe__needle::before {
  background: linear-gradient(90deg, transparent, #9a9ca5 28%, #5f616b);
}
:root[data-theme="light"] .pp-syringe__needle::after,
:root[data-theme="light"] .pp-syringe__plunger::before,
:root[data-theme="light"] .pp-syringe__plunger::after {
  background: linear-gradient(180deg, #ffffff, #e4e6ee);
  border-color: rgba(20, 20, 28, .26);
}
:root[data-theme="light"] .pp-ruler__tick { background: rgba(20, 20, 28, .34); }
:root[data-theme="light"] .pp-ruler__tick.is-major { background: rgba(20, 20, 28, .58); }
:root[data-theme="light"] .pp-ruler__fill::after {
  background: rgba(20, 20, 28, .5);
  box-shadow: none;
}
.pp-calc__cta { text-align: center; margin-top: 28px; }
.pp-calc-shop { margin-top: 56px; }
.pp-calc-page .pp-page__title { text-align: center; margin-bottom: 48px; }
.pp-calc__disclaimer { margin: 24px auto 0; max-width: 640px; font-size: 12px; color: var(--pp-muted); text-align: center; line-height: 1.6; }

@media (max-width: 820px) {
  .pp-calc__grid2 { grid-template-columns: 1fr; gap: 28px; }
}

/* Dosing & reconstitution charts (calculator page) */
.pp-charts { max-width: 1000px; margin: 60px auto 0; }
.pp-charts__title { text-align: center; font-size: clamp(22px, 3vw, 30px); color: var(--pp-fg); margin: 0 0 24px; }
.pp-charts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pp-charts__item {
  display: block;
  width: 100%;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .2s ease, transform .2s ease;
}
.pp-charts__item:hover { border-color: var(--pp-crimson); transform: translateY(-3px); }
.pp-charts__item img { width: 100%; height: auto; display: block; }
.pp-charts__note { text-align: center; color: var(--pp-muted); font-size: 13px; margin: 16px 0 0; }
@media (max-width: 760px) { .pp-charts__grid { grid-template-columns: 1fr; } }

/* Image spotlight / lightbox */
.pp-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); padding: 30px; cursor: zoom-out;
}
.pp-lightbox.is-open { display: flex; }
.pp-lightbox img {
  max-width: 95vw; max-height: 90vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default;
}
.pp-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.pp-lightbox__close:hover { background: rgba(255,255,255,.24); }

.pp-accent { color: var(--pp-crimson-text); }

/* Hero trust badges */
.pp-hero__trust { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.pp-hero__trust-item { display: flex; align-items: center; gap: 10px; }
.pp-hero__leaf { width: 22px; height: 22px; color: var(--pp-crimson-text); flex-shrink: 0; }
.pp-hero__trust-item span {
  font-family: var(--pp-font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--pp-fg);
  line-height: 1.3;
}

/* Homepage split feature (text + 2x2 image grid) */
.pp-makeover { padding: 80px 0; }
.pp-makeover__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.pp-makeover__title {
  font-family: var(--pp-font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--pp-fg);
  margin: 0 0 20px;
}
.pp-makeover__lead { color: var(--pp-muted); font-size: 16px; line-height: 1.65; margin: 0 0 22px; max-width: 540px; }
.pp-makeover__list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 11px; }
.pp-makeover__list li { position: relative; padding-left: 20px; color: var(--pp-fg); font-size: 15px; line-height: 1.45; }
.pp-makeover__list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pp-crimson);
}
.pp-makeover__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-makeover__grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 880px) {
  .pp-cats, .pp-products, .pp-makeover { padding: 56px 0; }
  .pp-makeover__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* Site-wide trust strip (above footer) */
.pp-trust {
  background: var(--pp-surface);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
  padding: 22px 0;
}
.pp-trust__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.pp-trust__item { display: flex; align-items: center; gap: 14px; }
.pp-trust__leaf { width: 30px; height: 30px; color: var(--pp-crimson-text); flex-shrink: 0; }
.pp-trust__item span {
  font-family: var(--pp-font-display);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--pp-fg);
  line-height: 1.3;
}
.pp-trust__divider { width: 2px; height: 36px; background: var(--pp-crimson); opacity: .6; border-radius: 2px; }
@media (max-width: 640px) {
  .pp-trust__inner { gap: 18px; }
  .pp-trust__divider { display: none; }
  /* Footer trust band: keep each badge on one line, just smaller */
  .pp-trust__item span { font-size: clamp(10px, 2.6vw, 13px); letter-spacing: .04em; white-space: nowrap; }
  .pp-trust__leaf { width: 22px; height: 22px; }
}

/* How-to steps */
.pp-howto { max-width: 1000px; margin: 60px auto 0; }
.pp-howto__title { font-size: clamp(24px, 3.4vw, 32px); color: var(--pp-fg); margin: 0 0 12px; text-align: center; }
.pp-howto__intro { color: var(--pp-muted); max-width: 720px; margin: 0 auto 30px; text-align: center; }
.pp-howto__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pp-howto__step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
}
.pp-howto__num {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pp-crimson);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
}
.pp-howto__step h3 { margin: 4px 0 6px; font-size: 17px; color: var(--pp-fg); }
.pp-howto__step p { margin: 0; color: var(--pp-muted); font-size: 14.5px; line-height: 1.7; }

@media (max-width: 720px) {
  .pp-howto__steps { grid-template-columns: 1fr; }
}

/* ---------- Shop layout with sidebar ---------- */
.pp-shop--sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.pp-shop__main { min-width: 0; }
.pp-shop__sidebar { display: flex; flex-direction: column; gap: 24px; }

.pp-widget {
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot));
}
.pp-widget__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-fg);
  margin: 0 0 14px;
}
.pp-widget ul { list-style: none; margin: 0; padding: 0; }
.pp-widget li { padding: 8px 0; border-bottom: 1px solid var(--pp-line); }
.pp-widget li:last-child { border-bottom: 0; }
.pp-widget a { color: var(--pp-muted); font-size: 14px; }
.pp-widget a:hover { color: var(--pp-crimson); }
.pp-widget .count { color: var(--pp-muted); opacity: .7; }

/* Category list nesting */
.pp-widget ul.product-categories ul.children { margin: 6px 0 0 14px; }
.pp-widget ul.product-categories ul.children li { border-bottom: 0; padding: 5px 0; }
.pp-widget .product-categories .is-active > a { color: var(--pp-crimson); font-weight: 700; }

/* Product search */
.pp-widget .woocommerce-product-search { display: flex; gap: 8px; }
.pp-widget .woocommerce-product-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  color: var(--pp-fg);
  font-size: 14px;
}
.pp-widget .woocommerce-product-search input[type="search"]:focus { outline: none; border-color: var(--pp-crimson); }
.pp-widget .woocommerce-product-search button {
  padding: 10px 16px;
  background: var(--pp-crimson);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Best Sellers widget — thumbnail + name/price/add per row (scoped to beat the
   generic .pp-widget li/a rules above). */
.pp-bestsellers .pp-bs__list { list-style: none; margin: 0; padding: 0; display: block; }
.pp-bestsellers .pp-bs__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-line);
}
.pp-bestsellers .pp-bs__item:first-child { padding-top: 0; }
.pp-bestsellers .pp-bs__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-bestsellers .pp-bs__thumb { flex: 0 0 56px; width: 56px; line-height: 0; }
.pp-bestsellers .pp-bs__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.pp-bestsellers .pp-bs__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pp-bestsellers .pp-bs__name { color: var(--pp-fg); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.pp-bestsellers .pp-bs__name:hover { color: var(--pp-crimson); }
.pp-bestsellers .pp-bs__price { color: var(--pp-crimson-text); font-weight: 800; font-size: 14.5px; }
.pp-bestsellers .pp-bs__price del { color: var(--pp-muted); font-weight: 500; margin-right: 5px; }
.pp-bestsellers .pp-bs__price ins { color: var(--pp-crimson-text); text-decoration: none; }
.pp-bestsellers .pp-bs__add {
  margin-top: 2px;
  display: inline-block;
  background: var(--pp-crimson);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 15px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.pp-bestsellers .pp-bs__add:hover { background: #c81616; color: #fff; transform: translateY(-1px); }
.pp-bestsellers .pp-bs__add.is-loading { opacity: .6; pointer-events: none; }
.pp-bestsellers .pp-bs__add--view { background: transparent; color: var(--pp-crimson-text); border: 1px solid var(--pp-line); }
.pp-bestsellers .pp-bs__add--view:hover { background: transparent; border-color: var(--pp-crimson); color: var(--pp-crimson); }

/* Top rated products list */
.pp-widget .product_list_widget li { display: flex; align-items: center; gap: 12px; }
.pp-widget .product_list_widget li a { color: var(--pp-fg); display: flex; align-items: center; gap: 12px; font-weight: 600; }
.pp-widget .product_list_widget img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pp-line); float: none; margin: 0; }
.pp-widget .product_list_widget .amount { color: var(--pp-crimson); font-weight: 700; }
.pp-widget .product_list_widget del .amount { color: var(--pp-muted); font-weight: 400; }
.pp-widget .product_list_widget .star-rating { margin: 4px 0 0; }

/* Tag cloud */
.pp-widget .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-widget .tagcloud a {
  font-size: 12px !important;
  padding: 6px 12px;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  color: var(--pp-muted);
}
.pp-widget .tagcloud a:hover { border-color: var(--pp-crimson); color: var(--pp-crimson); }

@media (max-width: 900px) {
  .pp-shop--sidebar { grid-template-columns: 1fr; gap: 24px; }
  /* Flow the sidebar widgets into the shop grid so they can be ordered
     individually: search + categories ABOVE the products, Best Sellers BELOW. */
  .pp-shop__sidebar { display: contents; }
  .pp-shop__main { order: 0; }
  .pp-shop__sidebar > .pp-widget { order: -1; }
  .pp-shop__sidebar > .pp-bestsellers { order: 1; }
}

/* ===== GLASSMORPHISM OVERHAUL ===== */
/* =========================================================================
   Platinum Peptides — Glassmorphism override layer (APPEND-ONLY)
   ---------------------------------------------------------------------------
   Synthesized from three design explorations:
     • Depth & layering   — two translucency levels, inset top sheen,
                            crimson edge-glow on interactive hover.
     • Aurora backdrop    — one fixed crimson/deep-magenta mesh on near-black
                            so the glass has real colour to refract through.
     • Refined minimal    — disciplined token set, hairline borders, soft
                            large-radius corners, colour used as accent only.
   ---------------------------------------------------------------------------
   This block is appended LAST in main.css, so later source order + sufficient
   specificity win over the base rules. Nothing above is rewritten.

   ONE shared glass recipe (the --pp-glass-* tokens) is reused on EVERY surface
   for cohesion. Every backdrop-filter is paired with -webkit-backdrop-filter
   AND a translucent background (blur is a no-op without a translucent fill).
   An @supports fallback raises fill opacity where blur is unsupported, and
   prefers-reduced-transparency opts fully out to the base solid surfaces.

   TWEAKING INTENSITY (read me):
     • Frostiness / blur strength ........ --pp-glass-blur (+ -strong / -soft)
     • See-through-ness / translucency ... the alpha in --pp-glass / -strong /
                                           -soft (lower alpha = more aurora
                                           bleeds through)
     • Aurora vividness .................. the rgba alphas in body::before
     • Corner softness ................... --pp-glass-radius
     • Crimson CTA intensity ............. --pp-glass-crimson(-strong) + -glow
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) GLASS RECIPE TOKENS  (dark default; light + dark-pin overrides follow)
   ------------------------------------------------------------------------- */
:root {
  /* Translucent obsidian fills — two interactive levels + a faint well + lift */
  --pp-glass:         rgba(26, 26, 32, 0.52);  /* standard panel / card        */
  --pp-glass-strong:  rgba(20, 20, 26, 0.70);  /* header, modal, dense card     */
  --pp-glass-soft:    rgba(34, 34, 42, 0.38);  /* inputs, wells, faint chips    */
  --pp-glass-raise:   rgba(46, 46, 56, 0.50);  /* hover lift for flat cards     */

  /* Hairline light borders + the inset top "lit edge" that sells glass */
  --pp-glass-border:        rgba(255, 255, 255, 0.12);
  --pp-glass-border-strong: rgba(255, 255, 255, 0.18);
  --pp-glass-hi:            rgba(255, 255, 255, 0.14);   /* inset top highlight */
  --pp-glass-sheen:         inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Blur radii — kept modest for GPU cost (sane 12–20px, never stacked) */
  --pp-glass-blur:        16px;
  --pp-glass-blur-strong: 20px;
  --pp-glass-blur-soft:   12px;
  --pp-glass-sat:         135%;   /* saturation boost makes the glow read richer */

  /* Soft layered depth */
  --pp-glass-shadow:        0 18px 48px -26px rgba(0, 0, 0, 0.85);
  --pp-glass-shadow-lift:   0 30px 66px -28px rgba(0, 0, 0, 0.9);
  --pp-glass-shadow-crimson: 0 30px 64px -26px rgba(182, 19, 19, 0.5);
  --pp-glass-radius:    4px;  /* squared off — slight corners (only change kept) */
  --pp-glass-radius-sm: 3px;

  /* Crimson glass accent (primary CTA only — colour stays an accent) */
  --pp-glass-crimson:        rgba(182, 19, 19, 0.66);
  --pp-glass-crimson-strong: rgba(216, 24, 24, 0.92);
  --pp-glass-crimson-glow:   0 0 0 1px rgba(239, 83, 80, 0.32),
                             0 14px 38px -12px rgba(182, 19, 19, 0.65);
}

/* Light mode: page lightens → glass needs a brighter milky fill + darker
   hairlines to keep separation. (Header + hero are re-pinned dark below.) */
:root[data-theme="light"] {
  --pp-glass:         rgba(255, 255, 255, 0.56);
  --pp-glass-strong:  rgba(255, 255, 255, 0.72);
  --pp-glass-soft:    rgba(255, 255, 255, 0.42);
  --pp-glass-raise:   rgba(255, 255, 255, 0.80);
  --pp-glass-border:        rgba(20, 20, 28, 0.10);
  --pp-glass-border-strong: rgba(20, 20, 28, 0.16);
  --pp-glass-hi:            rgba(255, 255, 255, 0.70);
  --pp-glass-sheen:         inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --pp-glass-shadow:        0 18px 48px -28px rgba(30, 18, 28, 0.34);
  --pp-glass-shadow-lift:   0 30px 66px -30px rgba(30, 18, 28, 0.40);
}

/* Header + Hero stay DARK-PINNED even in light mode. Re-declare the dark glass
   recipe inside the EXACT scope the base file already uses for the dark pin,
   so it inherits cleanly and the toggle keeps working. */
:root[data-theme="light"] .pp-site-header,
:root[data-theme="light"] .pp-hero {
  --pp-glass:         rgba(26, 26, 32, 0.52);
  --pp-glass-strong:  rgba(20, 20, 26, 0.72);
  --pp-glass-soft:    rgba(34, 34, 42, 0.38);
  --pp-glass-raise:   rgba(46, 46, 56, 0.50);
  --pp-glass-border:        rgba(255, 255, 255, 0.12);
  --pp-glass-border-strong: rgba(255, 255, 255, 0.18);
  --pp-glass-hi:            rgba(255, 255, 255, 0.14);
  --pp-glass-sheen:         inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* -------------------------------------------------------------------------
   2) AURORA PAGE BACKDROP
   A single FIXED, GPU-cheap mesh (no blur on this layer) painted behind
   everything so the glass has crimson/magenta colour to refract. A second
   fixed vignette kills gradient banding. Sits at z -2 / -1, below all content.
   ------------------------------------------------------------------------- */
body { position: relative; background-color: #0c0c10; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 84% -6%,  rgba(214, 26, 60, 0.15), transparent 60%),
    radial-gradient(54% 52% at 8% 10%,   rgba(124, 18, 22, 0.14), transparent 58%),
    radial-gradient(48% 48% at 60% 112%, rgba(182, 19, 19, 0.12), transparent 60%),
    radial-gradient(64% 60% at 20% 92%,  rgba(70, 24, 24, 0.08), transparent 62%),
    radial-gradient(70% 60% at 50% 50%,  rgba(150, 20, 30, 0.05), transparent 70%),
    linear-gradient(180deg, #0d0d11 0%, #0b0b0f 55%, #0a0a0d 100%);
}
/* Vignette to stop banding and ground the top of the page under the header. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}
/* Slow aurora drift — gentle, GPU-light, disabled for reduced motion (§16). */
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  body::before { animation: pp-aurora-drift 28s ease-in-out infinite alternate; }
  @keyframes pp-aurora-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -1.4%, 0) scale(1.04); }
  }
}
/* Light mode: a softer, lighter aurora so it reads airy, not muddy. */
:root[data-theme="light"] body { background-color: #eef0f4; }
:root[data-theme="light"] body::before {
  background:
    radial-gradient(58% 48% at 84% -8%,  rgba(214, 26, 60, 0.16), transparent 62%),
    radial-gradient(54% 52% at 8% 8%,    rgba(150, 36, 40, 0.13), transparent 60%),
    radial-gradient(48% 48% at 62% 112%, rgba(182, 19, 19, 0.10), transparent 62%),
    linear-gradient(180deg, #f3f3f8 0%, #ececf3 60%, #e8e8f0 100%);
}
:root[data-theme="light"] body::after {
  background: radial-gradient(120% 92% at 50% 0%, transparent 60%, rgba(40, 20, 30, 0.10) 100%);
}

/* Make the big section wrappers transparent so the aurora bleeds through.
   (Cards inside keep their own glass fill.) */
.pp-features,
.pp-faq,
.pp-cats,
.pp-products,
.pp-makeover,
.pp-trust,
.pp-howto,
.woocommerce-checkout #payment {
  background: transparent !important;
}
.pp-products--alt { border-top-color: var(--pp-glass-border); }

/* -------------------------------------------------------------------------
   3) REUSABLE GLASS UTILITY
   The single source of the "glass look": translucent fill + paired
   backdrop-filter + hairline border + inset top highlight + soft shadow.
   Applied across most card-like surfaces so the whole site stays cohesive.
   ------------------------------------------------------------------------- */
.pp-cat:not(.pp-cat--bg),
.pp-product,
.pp-feature,
.pp-faq__item,
.pp-widget,
.pp-freeship,
.pp-calc__grid2,
.pp-calc__result,
.pp-howto__step,
.pp-charts__item,
.pp-404__inner,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce table.shop_table,
.woocommerce ul.order_details,
.woocommerce-customer-details address {
  background: var(--pp-glass) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border) !important;
  border-radius: var(--pp-glass-radius);
  box-shadow: var(--pp-glass-shadow), var(--pp-glass-sheen) !important;
}

/* Shared hover for interactive cards: lift to the brighter glass, crimson
   edge-glow (depth/layering angle). */
.pp-cat:hover,
.pp-product:hover,
.pp-feature:hover,
.pp-charts__item:hover,
.woocommerce ul.products li.product:hover {
  border-color: rgba(239, 83, 80, 0.48) !important;
  box-shadow:
    var(--pp-glass-shadow-crimson),
    inset 0 1px 0 var(--pp-glass-hi) !important;
}
.pp-cat:not(.pp-cat--bg):hover,
.pp-feature:hover { background: var(--pp-glass-raise) !important; }

/* -------------------------------------------------------------------------
   4) HEADER / NAV — thin glass bar, dark-pinned in BOTH modes
   ------------------------------------------------------------------------- */
.pp-site-header {
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
  border-bottom: 1px solid var(--pp-glass-border);
  box-shadow: 0 18px 48px -32px rgba(0, 0, 0, 0.9), var(--pp-glass-sheen);
}

/* Floating nav bar — detach the header into a rounded glass pill that floats
   below the top edge with side gaps, sticky on scroll. */
.pp-site-header {
  top: 14px;
  width: calc(100% - 28px);
  max-width: var(--pp-container);
  margin: 14px auto 0;
  border: 1px solid var(--pp-glass-border);
  border-radius: 16px;
  box-shadow: 0 22px 52px -22px rgba(0, 0, 0, 0.82), var(--pp-glass-sheen);
}
.pp-site-header__inner { min-height: 56px; }
@media (max-width: 860px) {
  /* The mobile dropdown hangs off the pill — round its bottom to match. */
  #pp-primary-nav { border-radius: 0 0 16px 16px; overflow: hidden; }
}

/* Announcement bar — translucent crimson glass so the aurora joins it. */
.pp-announce {
  background: linear-gradient(180deg, rgba(214, 24, 24, 0.92), rgba(150, 12, 12, 0.88));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Cart count pill border picks up the near-black base. */
.pp-cart-count { border-color: rgba(12, 12, 16, 0.9); }

/* Desktop dropdown sub-menus → frosted glass panels. */
.pp-site-nav .sub-menu {
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px;
  box-shadow: var(--pp-glass-shadow), var(--pp-glass-sheen);
}

/* Mobile nav panel + toggle → dark frosted glass (base used solid --pp-bg).
   #pp-primary-nav lives inside .pp-site-header so it inherits the dark pin. */
@media (max-width: 860px) {
  #pp-primary-nav {
    background: var(--pp-glass-strong);
    -webkit-backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
            backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
    border-bottom: 1px solid var(--pp-glass-border);
    box-shadow: var(--pp-glass-shadow);
  }
  .pp-nav-toggle {
    background: var(--pp-glass-soft);
    -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
            backdrop-filter: blur(var(--pp-glass-blur-soft));
    border-color: var(--pp-glass-border);
  }
}

/* -------------------------------------------------------------------------
   5) HERO — glass content card over the existing plexus backdrop
   .pp-hero__bg (plexus image) stays BEHIND the glass; hero stays dark-pinned.
   ------------------------------------------------------------------------- */
.pp-hero { background-color: transparent; }
.pp-hero__inner {
  max-width: 660px;
  padding: 36px 38px 40px;
  background: rgba(18, 18, 24, 0.42);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border);
  border-radius: 22px;
  box-shadow: var(--pp-glass-shadow), var(--pp-glass-sheen);
}
@media (max-width: 600px) {
  .pp-hero__inner { padding: 26px 22px 30px; border-radius: 18px; }
}

/* Hero stats → individual mini glass chips. */
.pp-hero__stats { gap: 14px 16px; }
.pp-stat {
  padding: 12px 18px;
  border-radius: var(--pp-glass-radius-sm);
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border: 1px solid var(--pp-glass-border);
}

/* Hero trust badges → a frosted inset glass well. */
.pp-hero__trust {
  padding: 16px 18px;
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px;
}

/* -------------------------------------------------------------------------
   6) BUTTONS — crimson glass primary (with glow) + frosted ghost / oos
   Primary kept high-contrast / legible (vivid crimson, white text).
   ------------------------------------------------------------------------- */
.pp-btn--primary {
  background: linear-gradient(180deg, var(--pp-glass-crimson-strong), var(--pp-glass-crimson));
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 120, 120, 0.32);
  color: #fff;
  box-shadow: var(--pp-glass-crimson-glow), var(--pp-glass-sheen);
}
.pp-btn--primary:hover {
  background: linear-gradient(180deg, #e62121, #c41616);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(239, 83, 80, 0.5),
    0 20px 48px -14px rgba(182, 19, 19, 0.82),
    var(--pp-glass-sheen);
}
.pp-btn--ghost {
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur-soft)) saturate(var(--pp-glass-sat));
  border-color: var(--pp-glass-border-strong);
  color: var(--pp-fg);
}
.pp-btn--ghost:hover {
  background: rgba(182, 19, 19, 0.12);
  border-color: rgba(239, 83, 80, 0.55);
  color: var(--pp-crimson-text);
}
.pp-btn--oos {
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border-color: var(--pp-glass-border);
}

/* WooCommerce buttons → crimson glass to match .pp-btn--primary. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.pp-404 .search-submit,
.pp-widget .woocommerce-product-search button {
  background: linear-gradient(180deg, var(--pp-glass-crimson-strong), var(--pp-glass-crimson));
  border: 1px solid rgba(255, 120, 120, 0.28);
  box-shadow: var(--pp-glass-crimson-glow), var(--pp-glass-sheen);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.pp-404 .search-submit:hover {
  background: linear-gradient(180deg, #e62121, #c41616);
}
/* Out-of-stock loop button stays a muted frosted chip, not a buy button. */
.woocommerce ul.products li.product.outofstock .button {
  background: var(--pp-glass-soft) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border: 1px solid var(--pp-glass-border) !important;
  box-shadow: none !important;
  color: var(--pp-muted);
}

/* -------------------------------------------------------------------------
   7) CARDS — category (incl. photo-backed), product media, tags/badges
   Base card glass + hover come from §3. Here we refine the special cases.
   ------------------------------------------------------------------------- */
/* Photo-backed category cards: KEEP the image (don't blur it); only add a
   lit hairline + a slightly heavier scrim so white text keeps contrast. */
.pp-cat--bg {
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  /* No translucent edge — the bright photo bled through it as a white line. */
  border: 0 !important;
  border-radius: var(--pp-glass-radius);
}
.pp-cat--bg::before {
  /* The darkening gradient now lives in the card's OWN background (layered with
     the photo in the inline style: gradient first, photo second). Because both
     share a single border-radius clip, the photo can't leak at the rounded
     corners — which a separate overlay element couldn't avoid. So this
     pseudo-element overlay is retired. */
  display: none !important;
}
.pp-cat--bg.pp-cat:hover { background-color: transparent !important; }
.pp-cat--bg:hover { box-shadow: var(--pp-glass-shadow-crimson) !important; }

/* Product media well: translucent so the aurora glints behind the image. */
.pp-product__media {
  background:
    radial-gradient(80% 80% at 50% 24%, rgba(182, 19, 19, 0.20), transparent 60%),
    linear-gradient(160deg, rgba(40, 40, 50, 0.30), rgba(12, 12, 18, 0.46));
  border-bottom: 1px solid var(--pp-glass-border);
}
.woocommerce ul.products li.product a img { border-bottom-color: var(--pp-glass-border); }

/* Product tag / sale badge → crimson glass chip. */
.pp-product__tag,
.woocommerce span.onsale {
  background: var(--pp-glass-crimson-strong);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 120, 120, 0.30);
  box-shadow: 0 6px 18px -8px rgba(182, 19, 19, 0.7);
}

/* -------------------------------------------------------------------------
   8) FEATURES STRIP — convert SILVER → DARK GLASS + light text
   Section already transparent (§2); cards already glass (§3). Recolour text.
   ------------------------------------------------------------------------- */
.pp-features { color: var(--pp-fg); border-block: 1px solid var(--pp-glass-border); }
.pp-feature { padding: 28px 22px; }
.pp-feature__icon {
  background: var(--pp-crimson);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 0;
  color: #fff;
  box-shadow: none;
}
.pp-feature__title { color: var(--pp-fg); }
.pp-feature p { color: var(--pp-muted); }

/* -------------------------------------------------------------------------
   9) FAQ — convert SILVER → DARK GLASS + light text
   ------------------------------------------------------------------------- */
.pp-faq { color: var(--pp-fg); border-block: 1px solid var(--pp-glass-border); }
.pp-faq__head h2 { color: var(--pp-fg); }
.pp-faq__eyebrow,
.pp-faq__hl { color: var(--pp-crimson-text); }
.pp-faq__item { border-radius: 14px; }   /* fill/border/shadow from §3 */
.pp-faq__item.is-open { border-color: rgba(239, 83, 80, 0.5) !important; }
.pp-faq__q { color: var(--pp-fg); }
.pp-faq__icon { border-color: var(--pp-crimson-text); color: var(--pp-crimson-text); }
.pp-faq__a-inner { color: var(--pp-muted); }

/* -------------------------------------------------------------------------
   10) MAKEOVER + TRUST STRIP
   ------------------------------------------------------------------------- */
.pp-makeover__grid img {
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-glass-radius-sm);
  box-shadow: var(--pp-glass-shadow);
}
/* Trust strip → full-width frosted glass band (section transparent in §2). */
.pp-trust {
  background: var(--pp-glass-soft) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border-top: 1px solid var(--pp-glass-border);
  border-bottom: 1px solid var(--pp-glass-border);
}
.pp-trust__divider { background: var(--pp-crimson-text); }

/* -------------------------------------------------------------------------
   11) FORMS / INPUTS / SELECT2 — frosted dark fields + glass dropdown
   ------------------------------------------------------------------------- */
.woocommerce .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty,
.woocommerce #respond input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.pp-404 .search-field,
.pp-chip,
.pp-chip-other,
.pp-syr,
.pp-unit,
.pp-widget .woocommerce-product-search input[type="search"],
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--pp-glass-soft) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft)) saturate(125%);
          backdrop-filter: blur(var(--pp-glass-blur-soft)) saturate(125%);
  border: 1px solid var(--pp-glass-border) !important;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.pp-chip-other:focus { border-color: rgba(239, 83, 80, 0.6) !important; }

/* Select2 dropdown panel + highlighted state → frosted. */
html .select2-dropdown {
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border);
}
html .select2-container--default .select2-results__option--highlighted[aria-selected],
html .select2-container--default .select2-results__option--highlighted {
  background: var(--pp-glass-crimson-strong);
}

/* Calculator chip / syringe / unit active states keep a crimson ring on glass. */
.pp-chip.is-active,
.pp-chip-other.is-active { color: var(--pp-crimson-text); border-color: rgba(239, 83, 80, 0.6) !important; }
.pp-syr.is-active { border-color: rgba(239, 83, 80, 0.6) !important; }
.pp-unit.is-active { background: var(--pp-glass-crimson-strong) !important; border-color: rgba(239, 83, 80, 0.6); }

/* -------------------------------------------------------------------------
   12) CHECKOUT / CART / CROSS-SELL / NOTICES / TABS / PAGINATION
   Order summary, tables, widgets, calc, charts, 404 inner all use §3 glass.
   ------------------------------------------------------------------------- */
/* Checkout order-summary card — denser glass; inner table stays transparent. */
.woocommerce-checkout #order_review {
  background: var(--pp-glass-strong) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur-strong)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border) !important;
  border-radius: var(--pp-glass-radius);
  box-shadow: var(--pp-glass-shadow-lift), var(--pp-glass-sheen) !important;
}
.woocommerce-checkout #order_review .shop_table {
  background: transparent !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
}

/* Payment methods + payment box → faint glass wells. */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.payment_box {
  background: var(--pp-glass-soft) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border: 1px solid var(--pp-glass-border) !important;
}

/* Notices → glass with the crimson accent edge preserved. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-noreviews {
  background: var(--pp-glass) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border);
  border-top: 3px solid var(--pp-crimson);
  border-radius: var(--pp-glass-radius-sm);
  box-shadow: var(--pp-glass-shadow);
}

/* Free-shipping bar (cart) — glass shell (§3) + glowing crimson fill. */
.pp-freeship__bar { background: var(--pp-glass-border); }
.pp-freeship__bar span {
  background: linear-gradient(90deg, #e62121, var(--pp-glass-crimson));
  box-shadow: 0 0 16px -2px rgba(182, 19, 19, 0.7);
}

/* Cross-sell add button → frosted crimson-outline. */
.pp-xsell { border-top-color: var(--pp-glass-border); }
.pp-xsell__add {
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: rgba(239, 83, 80, 0.50);
  color: var(--pp-crimson-text);
}
.pp-xsell__add:hover { background: var(--pp-glass-crimson-strong); color: #fff; }
.pp-xsell__item img { border-color: var(--pp-glass-border); }

/* Sidebar widget list dividers + calc/charts radii (cards glass from §3). */
.pp-widget li { border-bottom-color: var(--pp-glass-border); }

/* Product tabs → frosted pills. */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
  border-color: var(--pp-glass-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--pp-glass);
  border-bottom-color: transparent;
}

/* Pagination: the container stays transparent; the pills carry the frost. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
}

/* -------------------------------------------------------------------------
   13) FOOTER
   ------------------------------------------------------------------------- */
.pp-footer {
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border-top: 1px solid var(--pp-glass-border);
}
.pp-footer__pay span,
.pp-footer__legal-row,
.pp-footer__bar { border-color: var(--pp-glass-border); }
.pp-footer__pay span { background: var(--pp-glass-soft); }
.pp-footer__legal a:hover { color: var(--pp-crimson-text); }

/* -------------------------------------------------------------------------
   14) 404 + ORDER-RECEIVED / BANK DETAILS
   404 inner, order_details, customer address all use §3 glass. Refine here.
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .pp-404__inner { padding: 30px 22px; border-radius: 18px; }
}
/* Bank-transfer / e-Transfer details — glass, but KEEP the crimson border so
   payment instructions are unmissable. */
.woocommerce-bacs-bank-details,
.woocommerce-order .wc-bacs-bank-details {
  background: var(--pp-glass) !important;
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid rgba(239, 83, 80, 0.55) !important;
  border-radius: var(--pp-glass-radius-sm);
  box-shadow: 0 0 0 1px rgba(182, 19, 19, 0.12) inset, var(--pp-glass-shadow);
}

/* Lightbox stays an intentional opaque scrim (no glass) — left untouched. */

/* -------------------------------------------------------------------------
   15) @supports FALLBACK — no backdrop-filter
   If the browser can't blur, raise fill opacity everywhere so text stays
   legible (no see-through mush). Token-only swap covers all §3 surfaces.
   ------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --pp-glass:        rgba(24, 24, 30, 0.92);
    --pp-glass-strong: rgba(18, 18, 24, 0.96);
    --pp-glass-soft:   rgba(30, 30, 38, 0.90);
    --pp-glass-raise:  rgba(44, 44, 54, 0.94);
  }
  :root[data-theme="light"] {
    --pp-glass:        rgba(255, 255, 255, 0.94);
    --pp-glass-strong: rgba(255, 255, 255, 0.97);
    --pp-glass-soft:   rgba(248, 248, 252, 0.95);
    --pp-glass-raise:  rgba(255, 255, 255, 0.97);
  }
  :root[data-theme="light"] .pp-site-header,
  :root[data-theme="light"] .pp-hero {
    --pp-glass:        rgba(24, 24, 30, 0.94);
    --pp-glass-strong: rgba(18, 18, 24, 0.97);
    --pp-glass-soft:   rgba(30, 30, 38, 0.92);
  }
  .pp-site-header { background: rgba(18, 18, 24, 0.96); }
  .pp-hero__inner { background: rgba(18, 18, 24, 0.88); }
  .pp-announce { background: linear-gradient(180deg, #d61818, #960c0c); }
}

/* -------------------------------------------------------------------------
   16) ACCESSIBILITY — focus, reduced transparency, reduced motion
   ------------------------------------------------------------------------- */
/* Re-assert the visible focus ring so blur never swallows it (WCAG 2.4.7). */
:focus-visible { outline: 2px solid var(--pp-crimson-text); outline-offset: 2px; }

/* Reduced transparency: opt OUT of glass — drop every blur and fall back to
   the base SOLID surface tokens so contrast never dips below the dark-mode
   baseline. Also stop the aurora drift. */
@media (prefers-reduced-transparency: reduce) {
  body::before { animation: none; }

  .pp-site-header, #pp-primary-nav, .pp-site-nav .sub-menu, .pp-nav-toggle,
  .pp-hero__inner, .pp-hero__trust, .pp-stat,
  .pp-feature, .pp-feature__icon, .pp-cat, .pp-product,
  .pp-faq__item, .pp-trust, .pp-footer, .pp-widget,
  .pp-freeship, .pp-calc__grid2, .pp-calc__result, .pp-howto__step,
  .pp-charts__item, .pp-404__inner, .pp-xsell__add,
  .pp-btn--primary, .pp-btn--ghost, .pp-btn--oos,
  .woocommerce ul.products li.product,
  .woocommerce table.shop_table, .woocommerce ul.order_details,
  .woocommerce-customer-details address,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout #payment div.payment_box,
  .woocommerce .woocommerce-message, .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-error, .woocommerce .woocommerce-noreviews,
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #place_order,
  .woocommerce .woocommerce-ordering select,
  .woocommerce form .form-row input.input-text,
  .woocommerce textarea, .woocommerce select,
  .woocommerce input[type="text"], .woocommerce input[type="email"],
  .woocommerce input[type="tel"], .woocommerce input[type="password"],
  .woocommerce input[type="number"], .woocommerce input[type="search"],
  .pp-chip, .pp-chip-other, .pp-unit, .pp-syr,
  .pp-404 .search-field,
  .pp-widget .woocommerce-product-search input[type="search"],
  html .select2-container--default .select2-selection--single,
  html .select2-dropdown {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  /* Solid surfaces from the base token set. */
  .pp-site-header, #pp-primary-nav { background: var(--pp-header-bg) !important; }
  .pp-hero__inner { background: var(--pp-surface) !important; }
  .pp-feature, .pp-cat:not(.pp-cat--bg), .pp-product, .pp-faq__item, .pp-widget,
  .pp-calc__grid2, .pp-calc__result, .pp-howto__step, .pp-charts__item,
  .pp-404__inner, .pp-freeship,
  .woocommerce ul.products li.product, .woocommerce table.shop_table,
  .woocommerce ul.order_details, .woocommerce-checkout #order_review {
    background: linear-gradient(180deg, var(--pp-surface-top), var(--pp-surface-bot)) !important;
  }
  .pp-features, .pp-faq, .pp-trust, .pp-footer { background: var(--pp-surface) !important; }
}

/* Reduced motion: stop the aurora drift entirely. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}
/* ====================== END GLASSMORPHISM OVERHAUL ======================= */

/* --- Keep the nav + hero looking like DARK mode even when light mode is on.
   The glass layer makes them transparent/translucent, so over a light page they
   would wash out — here we re-establish a dark backdrop in light mode only. --- */
:root[data-theme="light"] .pp-site-header { background: rgba(17, 17, 22, 0.94); }
:root[data-theme="light"] #pp-primary-nav { background: rgba(17, 17, 22, 0.96); }
:root[data-theme="light"] .pp-hero {
  background-color: #0d0d12;
  background-image:
    radial-gradient(820px 460px at 80% -8%, rgba(182, 19, 19, .24), transparent 60%),
    radial-gradient(680px 480px at 8% 112%, rgba(182, 19, 19, .12), transparent 55%);
}

/* --- Keep the footer (and the trust band directly above it) dark in light mode --- */
:root[data-theme="light"] .pp-trust,
:root[data-theme="light"] .pp-footer {
  --pp-fg:           #e7e7ea;
  --pp-muted:        #9a9aa2;
  --pp-line:         #2a2a30;
  --pp-surface-top:  #26262d;
  --pp-surface-bot:  #1e1e23;
  --pp-surface:      #232329;
  --pp-crimson-text: #b61313;
  --pp-glass:         rgba(26, 26, 32, 0.52);
  --pp-glass-strong:  rgba(20, 20, 26, 0.72);
  --pp-glass-soft:    rgba(34, 34, 42, 0.38);
  --pp-glass-border:  rgba(255, 255, 255, 0.12);
  --pp-glass-hi:      rgba(255, 255, 255, 0.14);
  --pp-glass-sheen:   inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: var(--pp-fg);
}
:root[data-theme="light"] .pp-footer { background: rgba(17, 17, 22, 0.96); }
:root[data-theme="light"] .pp-trust { background: rgba(20, 20, 26, 0.90) !important; }

/* Native <select> dropdowns need a SOLID background or the OS option list renders
   washed-out grey in dark mode (the glass fill broke it). Style the options too. */
.woocommerce select,
.woocommerce .woocommerce-ordering select {
  background-color: var(--pp-bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.woocommerce select option {
  background-color: var(--pp-bg);
  color: var(--pp-fg);
}

/* ---------- Conversion: add-to-cart toast, free-ship hints, recently viewed ---------- */
.pp-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px;
  box-shadow: var(--pp-glass-shadow-lift), var(--pp-glass-sheen);
  color: var(--pp-fg);
  transform: translateY(18px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.pp-toast.is-in { transform: translateY(0); opacity: 1; }
.pp-toast__check {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--pp-crimson); color: #fff;
  border-radius: 50%; font-size: 14px; font-weight: 700;
}
.pp-toast__body { min-width: 0; line-height: 1.25; }
.pp-toast__body strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-toast__body span { font-size: 12px; color: var(--pp-muted); }
.pp-toast__actions { display: flex; flex-direction: column; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.pp-toast__actions .pp-btn { padding: 6px 12px; }
.pp-toast__dismiss { background: transparent; border: 0; color: var(--pp-muted); font-size: 12px; cursor: pointer; text-align: center; }
.pp-toast__dismiss:hover { color: var(--pp-fg); }
@media (prefers-reduced-motion: reduce) { .pp-toast { transition: opacity .2s ease; transform: none; } }
@media (max-width: 520px) { .pp-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

.pp-xsell__ship-badge {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--pp-crimson); padding: 2px 6px; border-radius: 6px;
}

.pp-freeship--single { margin: 14px 0; }
.pp-freeship-note { margin: 12px 0; color: var(--pp-muted); font-size: 13px; }

.pp-rv-rail { padding: 56px 0 60px; }
.pp-rv__head { margin-bottom: 16px; }
/* Fill the container width: one equal column per item, capped + centered. */
.pp-rv__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: center;
}
.pp-rv__card {
  width: 100%;
  max-width: 220px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 12px;
  background: var(--pp-glass); border: 1px solid var(--pp-glass-border);
  color: var(--pp-fg);
  transition: border-color .2s ease, transform .2s ease;
}
.pp-rv__card:hover { border-color: var(--pp-crimson); transform: translateY(-3px); }
/* Mobile: revert to a horizontal scroll rail. */
@media (max-width: 680px) {
  .pp-rv__track {
    grid-auto-columns: 44%;
    overflow-x: auto;
    padding-bottom: 8px;
    justify-items: stretch;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .pp-rv__card { max-width: none; scroll-snap-align: start; }
}
.pp-rv__img { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--pp-bg); }
.pp-rv__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-rv__name { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-rv__price { font-size: 13px; color: var(--pp-muted); margin-top: auto; }
.pp-rv__price--sale { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pp-rv__price--sale del { color: var(--pp-crimson-text); text-decoration: line-through; font-size: 12px; }
.pp-rv__price--sale ins { color: var(--pp-fg); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.pp-rv__link { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; color: inherit; text-decoration: none; }
.pp-rv__add {
  margin-top: 4px;
  width: 100%;
  background: var(--pp-crimson);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pp-rv__add:hover { background: #c81616; color: #fff; transform: translateY(-1px); }
.pp-rv__add.is-loading { opacity: .6; pointer-events: none; }

/* Quantity +/- stepper around WooCommerce quantity inputs */
.woocommerce .quantity.pp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pp-glass-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
}
.pp-qty__btn {
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--pp-fg);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.pp-qty__btn:hover { background: rgba(182, 19, 19, .16); color: var(--pp-crimson-text); }
.woocommerce .quantity.pp-qty input.qty {
  width: 46px !important;
  min-width: 0;
  text-align: center;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 2px !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  -moz-appearance: textfield;
       appearance: textfield;
}
.woocommerce .quantity.pp-qty input.qty::-webkit-outer-spin-button,
.woocommerce .quantity.pp-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Compact mini stepper (product cards + cross-sell rows) */
.pp-qty--mini {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-glass-soft);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur-soft));
          backdrop-filter: blur(var(--pp-glass-blur-soft));
}
.pp-qty--mini .pp-qty__btn { width: 26px; height: 30px; font-size: 15px; }
.pp-qty__num {
  width: 26px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--pp-fg);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  -moz-appearance: textfield;
       appearance: textfield;
}
.pp-qty__num::-webkit-outer-spin-button,
.pp-qty__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Beat WooCommerce's .woocommerce input[type="text"] form styling (padding hid the number). */
.pp-qty--mini .pp-qty__num,
.woocommerce .pp-qty--mini .pp-qty__num {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pp-fg);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

/* Homepage card: price full-width, then [stepper] [Add] on one tidy row */
.pp-product__foot.has-qty { flex-wrap: wrap; gap: 10px; align-items: center; }
.pp-product__foot.has-qty .pp-product__price { flex: 1 1 100%; }

/* Shop/home card: stepper + Add button share one vertically-centered row */
.pp-addrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-addrow > .pp-btn,
.pp-addrow > .button,
.pp-addrow > .add_to_cart_button { margin: 0; }
.woocommerce ul.products li.product .pp-addrow { margin-top: 14px; padding: 0 16px; }

/* Single product: center the quantity stepper with Add to cart (simple products) */
.woocommerce div.product form.cart:not(.variations_form) {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart:not(.variations_form) .quantity { margin: 0; }

/* Cross-sell rows: tighten so stepper + Add fit without crowding */
.pp-xsell__item { gap: 9px; }
.pp-xsell__add { padding: 7px 12px; }

/* ---------- Slide-in mini-cart drawer ---------- */
body.pp-noscroll { overflow: hidden; }
.pp-minicart {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.pp-minicart.is-open { visibility: visible; pointer-events: auto; }
.pp-minicart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .28s ease;
}
.pp-minicart.is-open .pp-minicart__backdrop { opacity: 1; }
.pp-minicart__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 380px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  background: var(--pp-glass-strong);
  -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
          backdrop-filter: blur(var(--pp-glass-blur)) saturate(var(--pp-glass-sat));
  border-left: 1px solid var(--pp-glass-border);
  box-shadow: -24px 0 70px -24px rgba(0, 0, 0, .8);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.pp-minicart.is-open .pp-minicart__panel { transform: translateX(0); }
.pp-minicart.is-loading .pp-minicart__inner { opacity: .55; pointer-events: none; }

.pp-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--pp-glass-border);
  flex: 0 0 auto;
}
.pp-minicart__title {
  font-family: var(--pp-font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pp-minicart__close {
  background: transparent;
  border: 0;
  color: var(--pp-fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pp-minicart__close:hover { color: var(--pp-crimson-text); }

.pp-minicart__inner {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}
.pp-minicart__empty {
  text-align: center;
  padding: 48px 12px;
  color: var(--pp-muted);
}
.pp-minicart__empty .pp-btn { margin-top: 16px; }

.pp-freeship--mini { margin-bottom: 16px; }
.pp-freeship--mini p { margin: 0 0 8px; font-size: 13px; color: var(--pp-muted); }
.pp-freeship--mini strong { color: var(--pp-fg); }

.pp-minicart__items { list-style: none; margin: 0; padding: 0; }
.pp-minicart__item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-glass-border);
}
.pp-minicart__thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pp-bg);
}
.pp-minicart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-minicart__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-minicart__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-fg);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.pp-minicart__name:hover { color: var(--pp-crimson-text); }
.pp-minicart__price { font-size: 13px; color: var(--pp-muted); }
.pp-minicart__low { font-size: 12px; color: var(--pp-crimson-text); }
.pp-minicart__qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  overflow: hidden;
}
.pp-mc-qbtn {
  width: 32px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--pp-fg);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.pp-mc-qbtn:hover { background: rgba(182, 19, 19, .16); color: var(--pp-crimson-text); }
.pp-mc-num { min-width: 30px; text-align: center; font-size: 13px; font-weight: 600; }

.pp-minicart__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.pp-minicart__clear {
  background: transparent;
  border: 0;
  color: var(--pp-muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pp-minicart__clear:hover { color: var(--pp-crimson-text); }

.pp-minicart__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 15px;
}
.pp-minicart__subtotal strong { font-size: 18px; color: var(--pp-crimson-text); }

.pp-minicart__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--pp-glass-border);
}
.pp-minicart__foot .pp-btn { flex: 1 1 50%; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pp-minicart__panel { transition: none; }
  .pp-minicart__backdrop { transition: none; }
}

/* Mini-cart recommendations (up-sell / cross-sell) */
.pp-minicart__recs { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--pp-glass-border); }
.pp-minicart__recs-title {
  font-family: var(--pp-font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-muted);
  margin: 0 0 12px;
}
.pp-minicart__recs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-minicart__rec { display: flex; align-items: center; gap: 10px; }
.pp-minicart__rec-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-bg);
}
.pp-minicart__rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-minicart__rec-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-minicart__rec-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pp-fg);
  text-decoration: none;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.pp-minicart__rec-name:hover { color: var(--pp-crimson-text); }
.pp-minicart__rec-price { font-size: 12px; color: var(--pp-muted); }
.pp-minicart__rec-add {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--pp-crimson);
  color: var(--pp-crimson-text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.pp-minicart__rec-add:hover { background: var(--pp-crimson); color: #fff; }
.pp-minicart__rec-add.is-loading { opacity: .6; pointer-events: none; }

/* ---- Shop/archive GRID cards → match the homepage product card (grid view only) ---- */
.woocommerce ul.products:not(.pp-list) li.product {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 18px;
}
.woocommerce ul.products:not(.pp-list) li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
  width: 100%;
}
.woocommerce ul.products:not(.pp-list) li.product a img { width: 100%; }
.woocommerce ul.products:not(.pp-list) li.product .woocommerce-loop-product__title {
  font-family: var(--pp-font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pp-fg);
  padding: 4px 16px 0;
}
.woocommerce ul.products:not(.pp-list) li.product .price {
  margin-top: auto;
  padding: 12px 16px 0;
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  color: var(--pp-crimson-text);
}
.woocommerce ul.products:not(.pp-list) li.product .price del { color: var(--pp-muted); font-weight: 500; text-decoration: line-through; margin-right: 7px; }
.woocommerce ul.products:not(.pp-list) li.product .price ins { color: var(--pp-crimson-text); text-decoration: none; font-weight: 800; }
.woocommerce ul.products:not(.pp-list) li.product .pp-product__stock { align-self: center; }
.woocommerce ul.products:not(.pp-list) li.product .button {
  display: block;
  width: calc(100% - 32px);
  margin: 16px auto 0;
  text-align: center;
  padding: 13px 18px;
  font-size: 14px;
}

/* Checkout: "information is correct" confirmation gate */
.pp-confirm-check { margin: 6px 0 16px; }
.pp-confirm-check__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pp-fg);
}
.pp-confirm-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--pp-crimson);
}
#place_order:disabled,
#place_order.pp-place-disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.35);
  box-shadow: none;
}

/* =====================================================================
   SQUARED-OFF CORNERS (slight, 4px) — radius only; glass/glow look unchanged.
   Overrides hardcoded radii the design tokens don't reach.
   ===================================================================== */
.pp-product,
.pp-product__media,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a img,
.pp-cat,
.pp-makeover__grid img,
.pp-faq__item,
.pp-calc__grid2,
.pp-calc__result,
.pp-howto__step,
.pp-charts__item,
.pp-minicart__panel,
.pp-toast,
.pp-rv__card,
.pp-rv__img,
.pp-xsell,
.pp-xsell__item img,
.pp-qty,
.pp-qty--mini,
.pp-chip,
.pp-chip-other,
.pp-syr,
.pp-unit-toggle,
.pp-product__stock,
.pp-product__tag,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.single_add_to_cart_button,
.woocommerce form .form-row input.input-text,
.woocommerce .quantity .qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce table.shop_table,
.pp-page,
.pp-shop__sidebar .pp-widget,
.pp-minicart__rec-add,
.pp-view-toggle,
.pp-view-btn,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 4px !important;
}

/* ===== Mobile: compact features → icon row + tap-to-spotlight ===== */
@media (max-width: 600px) {
  .pp-features__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .pp-feature {
    flex: 0 0 auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .pp-feature:hover { background: transparent !important; transform: none !important; }
  .pp-feature__icon { margin-bottom: 0; }
  .pp-feature__title,
  .pp-feature p { display: none; }
}
/* Feature spotlight modal */
.pp-feat-spot {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transition: opacity .2s ease;
}
.pp-feat-spot.is-in { opacity: 1; }
.pp-feat-spot__card {
  position: relative;
  width: 100%;
  max-width: 320px;
  text-align: center;
  padding: 34px 24px 28px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-glass-border);
  border-radius: 8px;
  transform: scale(.94);
  transition: transform .2s ease;
}
.pp-feat-spot.is-in .pp-feat-spot__card { transform: scale(1); }
.pp-feat-spot__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--pp-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.pp-feat-spot__icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: var(--pp-crimson);
  color: #fff;
  margin-bottom: 16px;
}
.pp-feat-spot__icon svg { width: 30px; height: 30px; }
.pp-feat-spot__title {
  font-family: var(--pp-font-display);
  font-size: 16px;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--pp-fg);
}
.pp-feat-spot__desc { margin: 0; color: var(--pp-muted); font-size: 14.5px; line-height: 1.6; }

/* ===== Nav search (icon + overlay) ===== */
.pp-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  color: var(--pp-fg);
  cursor: pointer;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.pp-search-toggle:hover { color: var(--pp-crimson); }
.pp-search-toggle svg { width: 21px; height: 21px; }

.pp-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 17vh 20px 20px;
  background: rgba(8, 8, 12, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .2s ease;
}
.pp-search-overlay.is-open { opacity: 1; }
.pp-search-overlay[hidden] { display: none; }
.pp-search-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  transform: translateY(-10px);
  transition: transform .25s ease;
}
.pp-search-overlay.is-open .pp-search-overlay__panel { transform: translateY(0); }
.pp-search-overlay__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--pp-muted);
  cursor: pointer;
}
.pp-search-overlay__close:hover { color: var(--pp-fg); }
.pp-search-overlay__close svg { width: 24px; height: 24px; }
.pp-search-form__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-crimson-text);
  margin-bottom: 12px;
}
.pp-search-form__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-glass-border);
  border-radius: 12px;
  padding: 6px 6px 6px 16px;
}
.pp-search-form__icon { width: 20px; height: 20px; color: var(--pp-muted); flex: 0 0 auto; }
.pp-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--pp-fg);
  font-size: 17px;
  padding: 12px 0;
}
.pp-search-form__input::placeholder { color: var(--pp-muted); }
.pp-search-form__submit {
  flex: 0 0 auto;
  background: var(--pp-crimson);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .15s ease;
}
.pp-search-form__submit:hover { background: #c81616; }
@media (max-width: 600px) {
  .pp-search-overlay { padding: 12vh 14px 14px; }
  .pp-search-toggle { width: 36px; height: 36px; }
  .pp-search-form__submit { padding: 11px 14px; }
}

/* ===== Cart totals: fill the card — labels left, amounts right ===== */
/* WooCommerce's shop_table_responsive stacks/narrows the cells on mobile with
   higher specificity, so override with deeper selectors + !important: each row is
   a flex line — label pinned left, amount pinned right, across the full card. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; max-width: none; }
.woocommerce .cart_totals > table,
.woocommerce .cart_totals > table > tbody { display: block !important; width: 100%; }
.woocommerce .cart_totals > table > tbody > tr {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
}
.woocommerce .cart_totals > table > tbody > tr + tr { border-top: 1px solid var(--pp-line); }
.woocommerce .cart_totals > table > tbody > tr > th,
.woocommerce .cart_totals > table > tbody > tr > td {
  display: block !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
}
.woocommerce .cart_totals > table > tbody > tr > th { text-align: left !important; white-space: nowrap; flex: 0 0 auto; }
.woocommerce .cart_totals > table > tbody > tr > td { text-align: right !important; white-space: nowrap; flex: 1 1 auto; }
.woocommerce .cart_totals > table > tbody > tr > th::before,
.woocommerce .cart_totals > table > tbody > tr > td::before { content: none !important; display: none !important; }

/* Home "New Arrivals" → 2 rows of 4 on desktop + tablet, 2-up on phones (Featured stays 3-up). */
@media (min-width: 401px) {
  .pp-products--alt .pp-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .pp-products--alt .pp-products__grid { grid-template-columns: repeat(4, 1fr); }
}

/* "Shop all products" button shown under a no-results search / archive. */
.pp-no-products-cta { margin: 22px 0 0; }

/* ===== Contact form ([pp_contact_form]) ===== */
.pp-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.pp-contact-form__row { display: flex; gap: 16px; }
.pp-contact-form__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pp-contact-form__field > span { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--pp-muted); }
.pp-contact-form input[type="text"],
.pp-contact-form input[type="email"],
.pp-contact-form textarea {
  width: 100%;
  background: var(--pp-surface);
  border: 1px solid var(--pp-glass-border);
  border-radius: 10px;
  color: var(--pp-fg);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
}
.pp-contact-form input:focus,
.pp-contact-form textarea:focus { outline: none; border-color: var(--pp-crimson); }
.pp-contact-form textarea { resize: vertical; min-height: 130px; }
.pp-contact-form .pp-btn { align-self: flex-start; }
.pp-contact-form__notice { border-radius: 10px; padding: 12px 16px; font-size: 14px; margin: 0; }
.pp-contact-form__notice--ok { background: rgba(52, 199, 89, .12); border: 1px solid rgba(52, 199, 89, .4); color: var(--pp-fg); }
.pp-contact-form__notice--err { background: rgba(182, 19, 19, .12); border: 1px solid rgba(182, 19, 19, .4); color: var(--pp-fg); }
@media (max-width: 560px) {
  .pp-contact-form__row { flex-direction: column; }
}

/* ===== Responsive hardening (audit) ===== */
/* Appended last: later source order + sufficient specificity win over the
   base rules above. Selectors verified against the existing stylesheet. */

/* ---------- Global overflow safety net (all viewports) ---------- */
/* clip (not hidden) so it does not create a scroll container that would
   break position:sticky on .pp-site-header. */
html, body { overflow-x: clip; }

/* Generic page / product-tab author content: never let a wide table,
   <pre>, embed or long unbreakable string widen the page. */
.pp-page__content { overflow-wrap: anywhere; word-break: break-word; }
.pp-page__content img,
.pp-page__content iframe,
.pp-page__content video { max-width: 100%; height: auto; }
.pp-page__content pre,
.pp-page__content code { white-space: pre-wrap; word-break: break-word; }
.pp-page__content table,
.woocommerce-Tabs-panel table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.woocommerce-Tabs-panel { overflow-wrap: anywhere; }
.woocommerce-Tabs-panel pre,
.woocommerce-Tabs-panel img,
.woocommerce-Tabs-panel iframe { max-width: 100%; }

/* Best Sellers long product names wrap inside the narrow sidebar. */
.pp-bestsellers .pp-bs__name { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Tablet band (<=1024px) — standardize off-spec breakpoints ---------- */
@media (max-width: 1024px) {
  /* Hero: stack + un-zoom the image across the whole tablet band
     (promotes the existing 860px rule to the standard breakpoint). */
  .pp-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  /* Let the content card fill the width instead of a 640px card stranded on the
     left with dead plexus space to its right. */
  .pp-hero__inner { max-width: none; }
  .pp-hero__visual { min-height: 0; order: -1; }
  /* Cap + center so the vial image doesn't fill the whole tablet screen
     and push the headline below the fold. */
  .pp-hero__visual img {
    transform: none;
    width: 100%;
    max-width: 420px;
    max-height: 48vh;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
  }

  /* Features strip: 2-up on tablet (promotes the existing 860px rule). */
  .pp-features__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

  /* FAQ: match the 56px section padding its peers already use below 880px. */
  .pp-faq { padding: 56px 0; }

  /* Checkout: single column for all tablets (promotes the 860px collapse). */
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }

  /* Order-summary table: wrap long product names below desktop, keep totals
     on one line (promotes the proven 600px rules to the tablet breakpoint). */
  .woocommerce-checkout table.shop_table .product-name {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
  .woocommerce-checkout table.shop_table .product-total,
  .woocommerce-checkout table.shop_table tfoot th,
  .woocommerce-checkout table.shop_table tfoot td { white-space: nowrap; }

  /* Recently-viewed rail: horizontal scroll/snap track for the whole tablet
     range so cards keep a usable width instead of squeezing 6 into one row.
     Supersedes the redundant 680px block above. */
  .pp-rv__track {
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    padding-bottom: 8px;
    justify-items: stretch;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .pp-rv__card { max-width: none; scroll-snap-align: start; }
}

/* ---------- Mobile (<=600px) — tap targets, stacking, alignment ---------- */
@media (max-width: 600px) {
  /* Header controls: 42px square hit area (icon unchanged, just centered). */
  .pp-theme-toggle {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
  }
  /* Cart link stays ICON-SIZED so the count badge anchors to the icon — a 42px
     box shoved the badge up into the pill's rounded corner. The tap target
     comes from an invisible overlay instead. */
  .pp-cart-link { display: inline-flex; align-items: center; }
  .pp-cart-link::after { content: ""; position: absolute; inset: -11px; }
  /* Features: all four icons on ONE row, big enough to span the container width. */
  .pp-features__grid { grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
  .pp-feature__icon { width: clamp(58px, 19vw, 82px); height: clamp(58px, 19vw, 82px); border-radius: 16px; margin-bottom: 8px; }
  .pp-feature__icon svg { width: 44%; height: 44%; }
  .pp-feature__title { font-size: 10.5px; letter-spacing: .02em; margin-bottom: 0; }
  .pp-feature p { display: none; } /* hide the verbose copy on phones — icons + titles only */

  /* Announcement bar: keep on one line, scale the text down instead of wrapping. */
  .pp-announce { white-space: nowrap; font-size: clamp(9px, 2.7vw, 13px); overflow: hidden; }
  .pp-announce__sep { margin: 0 6px; }

  /* Footer: center everything; each link group becomes one centered row. */
  .pp-footer__grid { text-align: center; }
  .pp-footer__brand { margin-inline: auto; }
  .pp-footer__col h4 { text-align: center; }
  .pp-footer__col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .pp-footer__legal { justify-content: center; }
  .pp-footer__legal-row { justify-content: center; }   /* center the legal nav within its row */
  .pp-footer__logo { display: block; margin-left: auto; margin-right: auto; } /* center the block logo */

  /* Products section head: stack heading block above the View-all link. */
  .pp-products__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
  }
  .pp-products__head h2 { font-size: clamp(22px, 6vw, 28px); }
  .pp-products__viewall { align-self: flex-start; }

  /* Categories section head: same stacking treatment. */
  .pp-cats__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
  }
  .pp-cats__head .pp-products__viewall { align-self: flex-start; }

  /* Card "Add to Cart" reaches a 44px tap target. */
  .pp-product__foot .pp-btn { min-height: 44px; padding: 11px 12px; font-size: 13px; }

  /* FAQ: trim padding further on phones. */
  .pp-faq { padding: 44px 0; }

  /* Footer bottom bar: center the stacked copyright + credit together. */
  .pp-footer__bar { justify-content: center; text-align: center; }
  .pp-footer__bar p { text-align: center; width: 100%; }

  /* Sidebar Best Sellers CTA: 40px tap target. */
  .pp-bestsellers .pp-bs__add {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
  }

  /* Grid/List view-toggle buttons: 40px square. */
  .pp-view-btn { width: 40px; height: 40px; }

  /* Recently-viewed: phone width + 40px-tall Add button. */
  .pp-rv__track { grid-auto-columns: 44%; }
  .pp-rv__add { padding-top: 11px; padding-bottom: 11px; min-height: 40px; }

  /* Cross-sell mini stepper: enlarge the +/- hit area (scoped to xsell rows
     so dense home/shop card steppers stay compact). */
  .pp-xsell__item .pp-qty--mini .pp-qty__btn { width: 36px; height: 40px; }
  .pp-xsell__item .pp-qty--mini .pp-qty__num,
  .woocommerce .pp-xsell__item .pp-qty--mini .pp-qty__num { height: 40px; }

  /* Cart coupon + actions: stack to full width so they never overflow. */
  .woocommerce .cart .actions .coupon { flex-wrap: wrap; gap: 10px; }
  .woocommerce .cart .actions .coupon .input-text { flex: 1 1 100%; width: 100%; min-width: 0; }
  .woocommerce .cart .actions .coupon .button { flex: 1 1 100%; width: 100%; text-align: center; }
}

/* Mobile cart card: long names wrap instead of overflowing (the 768px breakpoint
   matches the card layout above; mirrors the checkout table fix). */
@media (max-width: 768px) {
  .woocommerce-cart-form td.product-name,
  .woocommerce-cart-form td.product-name a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ---------- Small mobile (<=400px) ---------- */
@media (max-width: 400px) {
  /* Logo: shrink + cap width so logo + 3 action controls fit the header pill.
     !important required to beat the existing height:38px !important. */
  .pp-site-header img.custom-logo,
  .pp-site-header .pp-logo-img {
    height: 32px !important;
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
  }
  .pp-site-header__inner { gap: 12px; }
  .pp-site-header__actions { gap: 10px; }

  /* Announcement bar: one line, scaled to fit even the smallest phones. */
  .pp-announce { white-space: nowrap; font-size: clamp(8px, 2.7vw, 12px); line-height: 1.35; padding: 7px 12px; overflow: hidden; }
  .pp-announce__sep { margin: 0 5px; }
  /* Features: keep the title legible on tiny screens (icon size handled by clamp). */
  .pp-feature__title { font-size: 9px; }

  /* Hero headline: lower the clamp floor on the smallest phones. */
  .pp-hero h1 { font-size: clamp(32px, 9vw, 44px); }

  /* Products grid: keep 2 per row even on the narrowest phones (compact). */
  .pp-products__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ===== Mobile: collapsible Categories widget (sidebar stacks at <=900px) ===== */
@media (max-width: 900px) {
  .pp-widget--collapsible .pp-widget__title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }
  .pp-widget--collapsible .pp-widget__title::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--pp-crimson-text);
    border-bottom: 2px solid var(--pp-crimson-text);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: 0 0 auto;
    margin-left: 12px;
  }
  .pp-widget--collapsible:not(.is-collapsed) .pp-widget__title::after {
    transform: rotate(-135deg);
  }
  .pp-widget--collapsible.is-collapsed .product-categories { display: none; }
}

/* ===== Mobile checkout: fit the order review + form to the screen ===== */
@media (max-width: 600px) {
  /* Order-review panel: tighter padding so the table has room */
  .woocommerce-checkout #order_review { padding: 16px 12px; }
  .woocommerce-checkout table.shop_table { font-size: 13px; width: 100%; }
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td { padding: 10px 8px; }
  /* Long product names WRAP instead of pushing the Subtotal column off-screen */
  .woocommerce-checkout table.shop_table .product-name {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
  .woocommerce-checkout table.shop_table .product-total,
  .woocommerce-checkout table.shop_table tfoot th,
  .woocommerce-checkout table.shop_table tfoot td { white-space: nowrap; }

  /* Cross-sell "Complete your order" rows: wrap so qty + Add never overflow,
     and keep the thumbnail visible (explicit flex basis so it can't collapse). */
  .pp-xsell__item { flex-wrap: wrap; row-gap: 10px; align-items: center; }
  .pp-xsell__item img { width: 44px; height: 44px; flex: 0 0 44px; display: block; }
  .pp-xsell__info { flex: 1 1 0; min-width: 0; }
  .pp-xsell__name { white-space: normal; }
  .pp-xsell__item .pp-qty--mini { flex: 0 0 auto; }
  .pp-xsell__add { order: 4; flex: 1 1 100%; text-align: center; }

  /* Billing fields: stack the first/last name pair + keep inputs full-width */
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 100%; float: none; }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea { width: 100%; }

  /* Confirm checkbox + place order comfortable */
  .pp-confirm-check input[type="checkbox"] { width: 22px; height: 22px; }
  #place_order { width: 100%; }
}

/* ===========================================================================
   MOBILE CART — compact item cards
   WooCommerce's default responsive cart stacks every field as its own labeled
   row ("Product:", "Price:", "Quantity:", "Subtotal:") and hides the thumbnail,
   so a few items become a tall, repetitive wall. Rebuild each item as one tidy
   card: thumbnail | name + unit price + stepper | remove + line total.
   =========================================================================== */
@media (max-width: 768px) {
  .woocommerce-cart-form table.cart { border: 0; display: block; }
  .woocommerce-cart-form table.cart thead { display: none; }
  .woocommerce-cart-form table.cart tbody { display: block; }

  .woocommerce-cart-form table.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name     remove"
      "thumb price    price"
      "thumb qty      subtotal";
    column-gap: 14px;
    row-gap: 11px;
    align-items: center;
    padding: 16px;
    margin: 0 0 16px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    background: var(--pp-surface-top);
  }

  .woocommerce-cart-form table.cart tbody tr.cart_item td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 14px;
  }
  /* Kill the "Product:" / "Price:" / … data-title labels inside the card. */
  .woocommerce-cart-form table.cart tbody tr.cart_item td::before { display: none !important; }

  .woocommerce-cart-form td.product-thumbnail {
    grid-area: thumb;
    display: block !important;      /* WooCommerce hides this on mobile — bring it back */
    align-self: start;
  }
  .woocommerce-cart-form td.product-thumbnail img {
    width: 60px; height: 60px; min-width: 60px;
    object-fit: cover; border-radius: 9px; display: block; margin: 0;
  }

  .woocommerce-cart-form td.product-name {
    grid-area: name;
    font-weight: 600; line-height: 1.3;
  }
  .woocommerce-cart-form td.product-name a { color: var(--pp-fg); }

  .woocommerce-cart-form td.product-price {
    grid-area: price;
    color: var(--pp-muted); font-size: 13px;
  }

  .woocommerce-cart-form td.product-quantity { grid-area: qty; }

  .woocommerce-cart-form td.product-subtotal {
    grid-area: subtotal;
    text-align: right !important;
    font-weight: 700; font-size: 15px; white-space: nowrap;
  }

  .woocommerce-cart-form td.product-remove {
    grid-area: remove;
    text-align: right !important;
    align-self: start;
  }
  .woocommerce-cart-form td.product-remove a.remove {
    margin: 0 0 0 auto; font-size: 20px; line-height: 1;
  }

  /* Coupon + Update + Clear actions: stacked with breathing room. */
  .woocommerce-cart-form table.cart tbody tr:not(.cart_item) td.actions {
    display: block !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .woocommerce .cart .actions .coupon { margin-bottom: 14px; }
  .woocommerce .cart .actions .pp-clear-wrap { display: block; margin-top: 12px; }
  .woocommerce .cart .actions .pp-clear-cart { display: block; width: 100%; text-align: center; margin-left: 0; }
}