/*
 Theme Name: Oasis Child
 Version: 1.0.0
 Description: Oasis Labs USA — luxury peptide spa redesign. Built from scratch atop Kadence.
 Author: Oasis Labs
*/

html,
body { margin: 0; padding: 0; }
body.home { background: #f5f2ec; }

/* ============================================================
   DESIGN SYSTEM TOKENS
   ============================================================ */
:root {
  /* Colors — earth-tone palette: olive, taupe, sand, stone */
  --ol-cream-50:  #f5f3ee;
  --ol-cream-100: #edeae3;
  /* Consolidated mid-neutral: cream-200 is the canonical token.
     cream-300 (was #CEC7BB) and --ol-sand (was #C9B99A) now both
     alias to cream-200 so there's one mid-deep tone instead of
     three slightly different ones. */
  --ol-cream-200: #dfdad0;
  --ol-cream-300: var(--ol-cream-200);
  --ol-sand:      var(--ol-cream-200);
  --ol-sage-100:  #d2d0c6;
  --ol-sage-300:  #B8B09E;
  --ol-sage-500:  #6B6F52;
  --ol-forest-700: #535740;
  --ol-forest-800: #424530;
  --ol-forest-900: #353525;
  --ol-ink-900:   #252518;
  --ol-ink-700:   #3e3d30;
  --ol-gold-500:  #C9B99A;
  --ol-gold-400:  #d6c8a8;

  --ol-bg:        var(--ol-cream-100);
  --ol-surface:   var(--ol-cream-50);
  --ol-text:      var(--ol-ink-900);
  --ol-text-soft: color-mix(in oklab, var(--ol-ink-900) 72%, transparent);
  --ol-text-inv:  var(--ol-cream-50);
  --ol-border:    color-mix(in oklab, var(--ol-ink-900) 12%, transparent);

  /* Typography */
  --ol-font-display: "Cormorant Garamond", Georgia, serif;
  --ol-font-body:    "Jost", -apple-system, system-ui, sans-serif;

  --ol-fs-xs:   0.75rem;
  --ol-fs-sm:   0.875rem;
  --ol-fs-base: 1rem;
  --ol-fs-lg:   1.125rem;
  --ol-fs-xl:   1.25rem;
  --ol-fs-2xl:  1.5rem;
  --ol-fs-3xl:  2rem;
  --ol-fs-4xl:  2.75rem;
  --ol-fs-5xl:  4rem;
  --ol-fs-6xl:  5.75rem;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --ol-radius-sm: 6px;
  --ol-radius-md: 12px;
  --ol-radius-lg: 20px;
  --ol-radius-pill: 999px;

  /* Product-card radius system. Inner curves are derived from the outer
     curve and the actual inset so adjacent corners remain concentric. */
  --ol-radius-card: var(--ol-radius-lg);
  --ol-card-padding: 10px;
  --ol-radius-plate: calc(var(--ol-radius-card) - var(--ol-card-padding));
  --ol-radius-control: var(--ol-radius-plate);
  --ol-radius-badge: var(--ol-radius-sm);
  --ol-radius-feature-card: 26px;
  --ol-feature-card-padding: 12px;
  --ol-radius-feature-plate: calc(
    var(--ol-radius-feature-card) - var(--ol-feature-card-padding)
  );

  --ol-shadow-sm: 0 1px 2px rgba(20,32,26,.08);
  --ol-shadow-md: 0 10px 30px -12px rgba(20,32,26,.18);
  --ol-shadow-lg: 0 30px 80px -20px rgba(20,32,26,.28);

  --ol-ease: cubic-bezier(.2,.7,.2,1);
  --ol-dur:  .4s;

  --ol-z-base: 1;
  --ol-z-raised: 10;
  --ol-z-sticky: 100;
  --ol-z-header: 500;
  --ol-z-modal:  1000;

  --ol-wrap: 1280px;
}

/* Base body typography */
body { background: var(--ol-cream-100);font-family: var(--ol-font-body);color: var(--ol-text);font-size: var(--ol-fs-base);line-height: 1.55;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

h1,
h2,
h3,
h4 {
  font-family: var(--ol-font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.oasis-wrap {
  max-width: var(--ol-wrap);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-5), 4vw, var(--sp-12));
}

/* Temporary diagnostic block so we can visually confirm full-width wrappers. */

/* ============================================================
   MOBILE NAVIGATION — hamburger + drawer
   ============================================================ */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link.screen-reader-text:focus {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: var(--ol-z-modal);
  width: auto;
  height: auto;
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
}
.ol-navtoggle {
  display: none;
  position: absolute;
  top: 50%;
  right: clamp(var(--sp-4), 5vw, var(--sp-8));
  transform: translateY(-50%);
  z-index: 520;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 22%, transparent);
  background: color-mix(in oklab, var(--ol-cream-50) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--ol-radius-pill);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.ol-navtoggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.ol-navtoggle__bars span {
  display: block;
  height: 2px;
  background: var(--ol-ink-900);
  border-radius: 2px;
  transition: transform .3s var(--ol-ease), opacity .2s var(--ol-ease);
}
.ol-navtoggle[aria-expanded="true"] .ol-navtoggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ol-navtoggle[aria-expanded="true"] .ol-navtoggle__bars span:nth-child(2) { opacity: 0; }
.ol-navtoggle[aria-expanded="true"] .ol-navtoggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ol-drawer {
  position: fixed;
  inset: 0;
  z-index: 800;
  visibility: hidden;
  pointer-events: none;
}
.ol-drawer.is-open { visibility: visible; pointer-events: auto; }
.ol-drawer__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--ol-ink-900) 55%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s var(--ol-ease);
}
.ol-drawer.is-open .ol-drawer__scrim { opacity: 1; }
.ol-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: var(--ol-cream-50);
  border-left: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  box-shadow: -40px 0 80px -20px rgba(20,32,26,.4);
  padding: var(--sp-16) var(--sp-6) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .4s var(--ol-ease);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.ol-drawer.is-open .ol-drawer__panel { transform: translateX(0); }
.ol-drawer__close,
body.oasis-redesign .ol-drawer__close,
body.oasis-redesign button.ol-drawer__close {
  position: absolute !important;
  top: var(--sp-4) !important;
  right: var(--sp-4) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 22%, transparent) !important;
  background: var(--ol-cream-100) !important;
  color: var(--ol-ink-900) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--ol-dur) var(--ol-ease);
  z-index: 10;
}
.ol-drawer__close:hover { background: var(--ol-cream-200) !important; }
.ol-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ol-drawer__menu a {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-base);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-ink-900);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 6%, transparent);
}

.ol-drawer__menu .menu-item-has-children.is-open > a::after { content: "－"; }

.ol-drawer__menu .menu-item-has-children.is-open > .sub-menu { display: block; }

.ol-drawer__account {
  margin-top: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  display: flex;
  flex-direction: column;
}
.ol-drawer__account-link {
  padding: var(--sp-3) 0;
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-ink-900);
  text-decoration: none;
}
.ol-drawer__account-link + .ol-drawer__account-link {
  border-top: 1px solid color-mix(in oklab, var(--ol-forest-900) 6%, transparent);
}
.ol-drawer__cart-count:empty { display: none; }
.ol-drawer__cart-count {
  margin-left: 6px;
  font-size: 0.85em;
  color: var(--ol-forest-700);
}
.ol-drawer__cta {
  margin-top: auto;
  padding-top: var(--sp-6);
  border-top: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
}
.ol-drawer__cta .ol-btn {
  width: 100%;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
}

/* Defensive: kill ALL inherited backgrounds/borders from Kadence/plugins so
   menu items don't render as solid dark pills. The drawer is a clean
   light surface; only the SHOP NOW CTA at the bottom uses the dark fill. */
.ol-drawer__menu,
.ol-drawer__menu * {
  box-shadow: none !important;
}
.ol-drawer__menu li,
.ol-drawer__menu .menu-item,
.ol-drawer__menu .menu-item-has-children,
.ol-drawer__nav .menu-item,
.ol-drawer__nav li {
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}
.ol-drawer__menu a,
.ol-drawer__menu .menu-item > a,
.ol-drawer__menu .menu-item-has-children > a,
.ol-drawer__nav a {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent) !important;
  color: var(--ol-ink-900) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: 100% !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 4px !important;
}
.ol-drawer__menu .sub-menu { display: none;list-style: none;padding: 4px 0 8px var(--sp-4) !important;margin: 4px 0 var(--sp-2) !important;background: color-mix(in oklab, var(--ol-cream-100) 60%, transparent) !important;border-radius: 8px !important; }
.ol-drawer__menu .sub-menu a { font-size: 0.82rem !important;padding: 12px 4px !important;letter-spacing: 0.1em !important;border: 0;color: var(--ol-forest-800) !important;border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 6%, transparent) !important; }
.ol-drawer__menu .sub-menu li:last-child a { border-bottom: 0 !important; }
.ol-drawer__menu .menu-item-has-children > a::after { content: "＋";float: right;font-weight: 300;color: var(--ol-forest-700) !important;font-size: 1.1rem;margin-left: auto; }

/* Custom My Account + Cart pills, injected by oasis_header_extras_markup
   so they appear on every page (Kadence customizer doesn't render them). */
body.oasis-redesign .ol-header-extras {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
}
body.oasis-redesign .ol-header-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent);
  border-radius: var(--ol-radius-pill);
  background: color-mix(in oklab, var(--ol-cream-50) 60%, transparent);
  color: var(--ol-ink-900);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--ol-dur) var(--ol-ease),
              color var(--ol-dur) var(--ol-ease),
              transform var(--ol-dur) var(--ol-ease);
}
body.oasis-redesign .ol-header-extra:hover,
body.oasis-redesign .ol-header-extra:focus-visible {
  color: var(--ol-forest-800);
  background: color-mix(in oklab, var(--ol-cream-50) 80%, white);
  transform: translateY(-1px);
}
body.oasis-redesign .ol-header-extra svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
body.oasis-redesign .ol-header-extra__label {
  display: inline-block;
}
body.oasis-redesign .ol-header-extra__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .5em;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
body.oasis-redesign .ol-header-extra__count:empty,
body.oasis-redesign .ol-header-extra--cart [data-ol-cart-count]:empty {
  display: none;
}

/* Compact at narrow desktop, hide labels on tablet, hide entirely below mobile-nav breakpoint
   so the hamburger drawer carries account/cart links instead. */
@media (max-width: 1100px) {
  body.oasis-redesign .ol-header-extra__label {
    display: none;
  }
  body.oasis-redesign .ol-header-extra {
    padding: 8px 10px;
  }
}
@media (max-width: 900px) {
  body.oasis-redesign .ol-header-extras {
    display: none;
  }
}

/* Hide the top "free shipping" info bar on home — distracts from the luxe feel.
   Re-enable site-wide elsewhere by not scoping to .home if desired. */
/* Keep the rotating announcement ticker but restyle it to match the
   luxury palette. Original JS may or may not exist — we provide our
   own rotation below just in case. */

.ol-ticker-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.ol-ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ol-ease), transform .5s var(--ol-ease);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--sp-3);
}
.ol-ticker-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ol-ticker-item em {
  font-style: normal;
  opacity: .75;
  margin-left: .4em;
}
/* Hide any legacy broken ticker DOM that the prior theme may still inject */

/* Our fresh ticker sits above the fixed header */
.ol-ticker { position: fixed;z-index: 600;background: var(--ol-forest-900);color: var(--ol-cream-50);font-family: var(--ol-font-body);font-size: var(--ol-fs-xs);font-weight: 400;letter-spacing: 0.14em;text-transform: uppercase;text-align: center;padding: var(--sp-3) var(--sp-4);height: 34px;box-sizing: border-box;overflow: hidden;display: flex;align-items: center;justify-content: center;top: 0;left: 0;right: 0; }

/* Push the hero up under the transparent header */
body.home .ol-hero { padding-top: 34px;margin-top: 0; }

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.ol-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--ol-radius-pill);
  font-family: var(--ol-font-body);
  font-weight: 500;
  font-size: var(--ol-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--ol-dur) var(--ol-ease);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.ol-btn--dark {
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  box-shadow: var(--ol-shadow-md);
}
.ol-hero .ol-btn--dark {
  padding: var(--sp-5) var(--sp-10);
  font-size: var(--ol-fs-base);
  letter-spacing: 0.14em;
}
.ol-btn--dark:hover {
  background: var(--ol-forest-800);
  transform: translateY(-1px);
  box-shadow: var(--ol-shadow-lg);
}

.ol-eyebrow {
  display: inline-block;
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ol-forest-800);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid color-mix(in oklab, var(--ol-forest-800) 25%, transparent);
  border-radius: var(--ol-radius-pill);
  background: color-mix(in oklab, var(--ol-cream-50) 70%, transparent);
  backdrop-filter: blur(6px);
}

/* ============================================================
   HERO
   ============================================================ */
.ol-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.ol-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-bg-v7.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.02);
}
.ol-hero__bg--video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--ol-cream-100);
  pointer-events: none;
  border: 0;
}
/* Desktop video shows by default, mobile video hidden */
.ol-hero__bg--mobile { display: none; }
@media (max-width: 768px) {
  .ol-hero__bg--desktop { display: none; }
  .ol-hero__bg--mobile { display: block; }
}

/* Soft readability veil over the hero image — cream on the copy
   side fading to transparent, keeping the silk alive on the right.
   A second radial pass concentrates a softer cream halo directly
   behind the headline so dark text remains legible against any
   frame of the video. */
.ol-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 50%,
      color-mix(in oklab, var(--ol-cream-100) 75%, transparent) 0%,
      color-mix(in oklab, var(--ol-cream-100) 45%, transparent) 28%,
      color-mix(in oklab, var(--ol-cream-100) 15%, transparent) 50%,
      transparent 70%),
    linear-gradient( 95deg,
      color-mix(in oklab, var(--ol-cream-100) 70%, transparent) 0%,
      color-mix(in oklab, var(--ol-cream-100) 45%, transparent) 38%,
      color-mix(in oklab, var(--ol-cream-100) 15%, transparent) 62%,
      transparent 100%);
}

.ol-hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: var(--sp-12);
  padding-block: var(--sp-24);
}

.ol-hero__copy { max-width: 38rem; }

.ol-hero__title {
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-block: var(--sp-6) var(--sp-6);
  color: var(--ol-ink-900);
  font-weight: 500;
  text-shadow:
    0 0 24px rgba(245,243,238,0.85),
    0 2px 18px rgba(245,243,238,0.7),
    0 0 60px rgba(245,243,238,0.5);
}
.ol-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--ol-forest-800);
}

.ol-hero__lede {
  font-size: var(--ol-fs-base);
  line-height: 1.55;
  color: var(--ol-text-soft);
  max-width: 34rem;
  margin-block: 0 var(--sp-10);
  text-shadow:
    0 0 14px rgba(245,243,238,0.85),
    0 1px 12px rgba(245,243,238,0.65);
  letter-spacing: 0.01em;
}

.ol-hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

/* Floating cards column */

/* Trust card removed from hero */

/* Style the Woo [products] output inside the card so it feels native.
   Woo wraps in .woocommerce > ul.products > li.product. */

/* Featured product card — match the catalog grid style */

/* Hide variants + native button in hero card */

/* ============================================================
   PROOF — consolidated trust section (replaces Mission + Leaders + How It Works)
   ============================================================ */
.ol-proof {
  position: relative;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  padding: clamp(var(--sp-20), 10vw, var(--sp-32)) 0;
  overflow: hidden;
  isolation: isolate;
}
.ol-proof__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/footer-bg.jpg");
  background-size: cover;
  background-position: center;
}
.ol-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ol-forest-900) 80%, transparent) 0%,
      color-mix(in oklab, var(--ol-forest-900) 60%, transparent) 50%,
      color-mix(in oklab, var(--ol-forest-900) 85%, transparent) 100%);
  pointer-events: none;
}
.ol-proof__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-12), 6vw, var(--sp-20));
  align-items: center;
}
.ol-proof__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.98;
  color: var(--ol-cream-50);
  margin: 0 0 var(--sp-5);
  letter-spacing: -0.02em;
}
.ol-proof__title em {
  font-style: italic;
  color: var(--ol-gold-400);
}

.ol-proof__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ol-proof__point {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.ol-proof__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-top: 2px;
  background: color-mix(in oklab, var(--ol-forest-700) 28%, transparent);
  color: var(--ol-gold-400);
  border: 1px solid color-mix(in oklab, var(--ol-gold-400) 32%, transparent);
  border-radius: 999px;
}

@media (max-width: 700px) {
  .ol-proof__num {
    width: 34px;
    height: 34px;
    margin-top: 1px;
  }
  
}
.ol-proof__point h3 {
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 2px;
  color: var(--ol-cream-50);
}
.ol-proof__point p {
  font-size: var(--ol-fs-xs);
  color: color-mix(in oklab, var(--ol-cream-50) 65%, transparent);
  line-height: 1.5;
  margin: 0;
}
.ol-proof__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ol-proof__img {
  width: 100%;
  max-width: 480px;
  border-radius: var(--ol-radius-lg);
  box-shadow: var(--ol-shadow-lg);
}
@media (max-width: 820px) {
  .ol-proof__inner { grid-template-columns: 1fr; text-align: center; }
  .ol-proof__visual { order: -1; margin-bottom: var(--sp-6); }
  .ol-proof__img { max-width: 160px; margin: 0 auto; border-radius: var(--ol-radius-md); }
  
  .ol-proof__point { text-align: left; }
  .ol-proof__title { font-size: 2rem; }
}

/* ============================================================
   FOOTER — dark forest, atmospheric
   ============================================================ */

.ol-footer {
  position: relative;
  color: var(--ol-cream-50);
  padding: clamp(var(--sp-20), 10vw, var(--sp-24)) 0 var(--sp-10);
  overflow: hidden;
  isolation: isolate;
}
.ol-footer__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/footer-bg.jpg");
  background-size: cover;
  background-position: center;
}
.ol-footer__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ol-forest-900) 82%, transparent) 0%,
      color-mix(in oklab, var(--ol-forest-900) 65%, transparent) 40%,
      color-mix(in oklab, var(--ol-forest-900) 92%, transparent) 100%);
}

.ol-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ol-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
}
.ol-footer__wordmark {
  font-family: "Jost", -apple-system, system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ol-cream-50);
  margin: 0;
}
.ol-footer__tag {
  font-family: var(--ol-font-display);
  font-size: var(--ol-fs-lg);
  font-style: italic;
  color: var(--ol-cream-50);
  margin: 0;
}
.ol-footer__tag em {
  color: var(--ol-gold-400);
  font-style: italic;
}

.ol-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: clamp(var(--sp-12), 6vw, var(--sp-24));
  width: 100%;
  margin-bottom: var(--sp-16);
  text-align: center;
}
.ol-footer__col h4 {
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ol-gold-400);
  margin: 0 0 var(--sp-5);
}
.ol-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ol-footer__col a {
  font-size: var(--ol-fs-sm);
  color: color-mix(in oklab, var(--ol-cream-50) 85%, transparent);
  text-decoration: none;
  transition: color var(--ol-dur) var(--ol-ease);
}
.ol-footer__col a:hover {
  color: var(--ol-cream-50);
}

.ol-footer__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ol-gold-400) 30%, transparent), transparent);
  margin-bottom: var(--sp-10);
}

.ol-footer__disclaimer {
  max-width: 58rem;
  font-size: var(--ol-fs-xs);
  line-height: 1.7;
  color: color-mix(in oklab, var(--ol-cream-50) 62%, transparent);
  margin: 0 auto var(--sp-12);
  letter-spacing: 0.01em;
}

.ol-footer__bar {
  width: 100%;
  max-width: 56rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  border-top: 1px solid color-mix(in oklab, var(--ol-cream-50) 10%, transparent);
}
.ol-footer__copy,
.ol-footer__legal {
  font-size: var(--ol-fs-xs);
  color: color-mix(in oklab, var(--ol-cream-50) 70%, transparent);
  margin: 0;
  letter-spacing: 0.04em;
}
.ol-footer__legal a {
  color: color-mix(in oklab, var(--ol-cream-50) 70%, transparent);
  text-decoration: none;
  margin: 0 var(--sp-2);
}
.ol-footer__legal a:hover { color: var(--ol-gold-400); }
.ol-footer__legal span { color: color-mix(in oklab, var(--ol-cream-50) 30%, transparent); }

@media (max-width: 720px) {
  .ol-footer { padding: var(--sp-10) 0 var(--sp-6) !important; }
  .ol-footer__brand { margin-bottom: var(--sp-6) !important; }
  .ol-footer__wordmark { font-size: 2rem !important; }
  .ol-footer__tag { font-size: var(--ol-fs-sm) !important; }
  .ol-footer__nav { grid-template-columns: repeat(3, 1fr) !important; text-align: center; gap: var(--sp-4) !important; margin-bottom: var(--sp-8) !important; }
  .ol-footer__col h4 { font-size: 0.6rem !important; margin-bottom: var(--sp-2) !important; }
  .ol-footer__col ul { align-items: center; gap: var(--sp-1) !important; }
  .ol-footer__col a { font-size: var(--ol-fs-xs) !important; }
  .ol-footer__disclaimer { font-size: 0.6rem !important; line-height: 1.5 !important; margin-bottom: var(--sp-6) !important; }
  .ol-footer__bar { justify-content: center; text-align: center; flex-direction: column; gap: var(--sp-1); }
  .ol-footer__copy,
.ol-footer__legal { font-size: 0.6rem !important; }
  .ol-footer__divider { margin-bottom: var(--sp-4) !important; }
}

/* ============================================================
   HOW IT WORKS — dark forest accordion
   ============================================================ */

.ol-eyebrow--dark {
  color: var(--ol-gold-400);
  background: transparent;
  border-color: color-mix(in oklab, var(--ol-gold-400) 35%, transparent);
  backdrop-filter: none;
}

/* Accordion items */

/* ============================================================
   LEADERS IN PRECISION
   ============================================================ */
.ol-leaders {
  background: var(--ol-cream-100);
  padding: clamp(var(--sp-20), 10vw, var(--sp-32)) 0;
}
.ol-leaders__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-12), 6vw, var(--sp-20));
  align-items: center;
}
.ol-leaders__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.02;
  color: var(--ol-ink-900);
  margin: var(--sp-5) 0 var(--sp-5);
  letter-spacing: -0.015em;
}
.ol-leaders__title em {
  font-style: italic;
  color: var(--ol-forest-800);
  font-weight: 500;
}
.ol-leaders__lede {
  font-size: var(--ol-fs-lg);
  line-height: 1.55;
  color: var(--ol-text-soft);
  margin: 0 0 var(--sp-10);
  max-width: 36rem;
}
.ol-leaders__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.ol-leaders__list li {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding-left: 0;
}
.ol-leaders__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--ol-forest-900);
  color: var(--ol-gold-500);
  font-size: var(--ol-fs-base);
  flex: 0 0 auto;
  margin-top: 2px;
}
.ol-leaders__list h3 {
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-1);
  color: var(--ol-ink-900);
}
.ol-leaders__list p {
  font-size: var(--ol-fs-sm);
  color: var(--ol-text-soft);
  line-height: 1.55;
  margin: 0;
}
.ol-leaders__gallery {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ol-leaders__img {
  border-radius: var(--ol-radius-lg);
  box-shadow: var(--ol-shadow-lg);
}
.ol-leaders__img--solo {
  width: 400px !important;
  max-width: 400px !important;
  height: auto !important;
  border-radius: var(--ol-radius-lg);
  box-shadow: var(--ol-shadow-md);
  display: block !important;
}
@media (max-width: 900px) {
  .ol-leaders__inner { grid-template-columns: 1fr; text-align: center; }
  .ol-leaders__gallery { order: -1; margin-bottom: var(--sp-4); }
  .ol-leaders__img--solo { width: 220px !important; max-width: 220px !important; margin: 0 auto; }
  .ol-leaders__list { text-align: left; }
}

/* ============================================================
   HERO FEATURED PRODUCT — clean floating card, no tilt
   ============================================================ */
.ol-hero__feature {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Force cream on every inner element — kill any white from Kadence/Woo */

/* "Featured Product" tag */

/* ============================================================
   ABOUT — brief brand context with trust badges
   ============================================================ */
.ol-about {
  background: var(--ol-cream-100);
  padding: clamp(var(--sp-16), 8vw, var(--sp-24)) 0;
}
.ol-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16));
  align-items: center;
}
.ol-about__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  color: var(--ol-ink-900);
  margin: var(--sp-4) 0 var(--sp-6);
  letter-spacing: -0.015em;
}
.ol-about__title em {
  font-style: italic;
  color: var(--ol-forest-800);
}
.ol-about__text p {
  font-size: var(--ol-fs-sm);
  line-height: 1.65;
  color: var(--ol-text-soft);
  margin: 0 0 var(--sp-4);
  max-width: 34rem;
}
.ol-about__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.ol-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  /* Shared card language: white pop on the cream section, tan hairline, forest
     left-accent (matches the checkout cards). */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: var(--ol-radius-lg);
  transition: all var(--ol-dur) var(--ol-ease);
}
.ol-badge:hover {
  box-shadow: var(--ol-shadow-md);
  transform: translateY(-2px);
}
.ol-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--ol-forest-900);
  color: var(--ol-gold-400);
  font-size: var(--ol-fs-base);
  flex: 0 0 auto;
}
.ol-badge__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.ol-badge__label {
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ol-ink-900);
  line-height: 1.3;
}
@media (max-width: 768px) {
  .ol-about__inner { grid-template-columns: 1fr; text-align: center; }
  .ol-about__text p { max-width: none; }
  .ol-about__badges { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .ol-badge {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-3) var(--sp-2);
    gap: var(--sp-2);
  }
  .ol-badge__icon {
    width: 2rem;
    height: 2rem;
  }
  
  .ol-badge__label {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   FEATURED PRODUCTS GRID
   ============================================================ */
.ol-products {
  background: var(--ol-cream-50);
  padding: clamp(var(--sp-20), 10vw, var(--sp-32)) 0 clamp(var(--sp-16), 8vw, var(--sp-24));
}
.ol-products__header {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto var(--sp-10);
}
.ol-products__title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.05;
  color: var(--ol-ink-900);
  margin: var(--sp-5) 0 var(--sp-4);
}

/* Category tabs */
.ol-products__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 auto var(--sp-12);
  padding: var(--sp-2);
  background: var(--ol-cream-100);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent);
  border-radius: var(--ol-radius-pill);
  width: fit-content;
  max-width: 100%;
}
.ol-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--ol-radius-pill);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-ink-900);
  text-decoration: none;
  transition: all var(--ol-dur) var(--ol-ease);
  white-space: nowrap;
  background: var(--ol-cream-50);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent);
  cursor: pointer;
}
.ol-tab:hover {
  color: var(--ol-forest-800);
  background: var(--ol-cream-200);
  border-color: color-mix(in oklab, var(--ol-forest-900) 30%, transparent);
}

.ol-tab.is-active {
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  border-color: var(--ol-forest-900);
  box-shadow: var(--ol-shadow-sm);
}

/* Grid — override Woo's default loop styling */
.ol-products__grid .woocommerce {
  margin: 0 !important;
}
.ol-products__grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--sp-6) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* [removed in card sweep] home li base (radius 24px, cream-100, text-align
   center, overflow visible). Superseded by the UNIFIED CARD block in
   product-cards.css, which matches shop (radius 20px, left, hidden). */

/* Empty state when no products match a filter */
.ol-products__grid.is-empty::after {
  content: "No products in this category yet. Check back soon.";
  display: block;
  text-align: center;
  font-family: var(--ol-font-display);
  font-style: italic;
  font-size: var(--ol-fs-lg);
  color: var(--ol-sage-500);
  padding: var(--sp-16) 0;
  grid-column: 1 / -1;
}
/* Hover motion (lift + photo zoom) is owned entirely by product-cards.css so it
   stays identical to the shop and related-products grids. Anchor links keep
   their reset. */
.ol-products__grid ul.products li.product a:hover,
.ol-products__grid ul.products li.product .woocommerce-loop-product__title:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* The actual product photograph gets rounded corners directly on the
   <img> element — this rounds the vial image itself, not just a
   background container. */

.ol-products__grid ul.products li.product a.woocommerce-LoopProduct-link { display: block !important;flex-direction: column !important;text-decoration: none !important;color: inherit !important;padding: var(--sp-3) var(--sp-3) 0 !important; }

/* Product info wrapper — Kadence's .product-details div */

/* [removed in card sweep] home title (center/min-height 0) + price (sage/center)
   duplicates. Dead: product-cards.css wins with ink title / forest price,
   left-aligned and 2-line min-height — matching shop and related. */
.ol-products__grid ul.products li.product .price del { opacity: .5; margin-right: 4px; }
.ol-products__grid ul.products li.product .price ins { text-decoration: none; }

/* Hide variant selectors + native Add to Cart in the grid —
   replaced by a single "Select Size →" link to the product page */
.ol-products__grid ul.products li.product .variations_form,
.ol-products__grid ul.products li.product .variations,
.ol-products__grid ul.products li.product .add_to_cart_button,
.ol-products__grid ul.products li.product .button[name="add-to-cart"],
.ol-products__grid ul.products li.product form.cart {
  display: none !important;
}

/* Hide native Woo buttons EXCEPT our injected .ol-select-size */
.ol-products__grid ul.products li.product .button:not(.ol-select-size),
.ol-products__grid ul.products li.product .add_to_cart_button:not(.ol-select-size) {
  display: none !important;
}
/* [removed in card sweep] home .ol-select-size forest-pill styling. Dead:
   product-cards.css renders the CTA as the shared transparent/outlined button
   used on shop + related. */

.ol-products__grid ul.products li.product .onsale {
  background: var(--ol-gold-500) !important;
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: var(--ol-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: var(--ol-radius-pill) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
}

.ol-products__footer {
  text-align: center;
  margin-top: var(--sp-12);
}
.ol-btn--lg {
  padding: var(--sp-5) var(--sp-10) !important;
  font-size: var(--ol-fs-base) !important;
}

@media (max-width: 1100px) {
  .ol-products__grid ul.products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 820px) {
  .ol-products__grid ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 480px) {
  .ol-products__tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: var(--ol-radius-md) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ol-tab {
    justify-content: center !important;
    padding: var(--sp-2) var(--sp-2) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.06em !important;
  }
  .ol-products__grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-2) !important; }
  .ol-products__grid ul.products li.product { border-radius: 16px !important; }
  .ol-products__grid ul.products li.product a.woocommerce-LoopProduct-link { margin: 4px 4px 0 !important;  }
  
  .ol-products__grid ul.products li.product .woocommerce-loop-product__title { font-size: 0.75rem !important; padding: var(--sp-2) var(--sp-2) 2px !important; min-height: 0 !important; }
  .ol-products__grid ul.products li.product .price { font-size: 0.7rem !important; margin-bottom: var(--sp-1) !important; }
  .ol-products__grid ul.products li.product .ol-select-size {
    margin: auto 6px 6px 6px !important;
    padding: 8px 6px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   MARQUEE — infinite trust-signal loop
   ============================================================ */
.ol-marquee {
  position: relative;
  width: 100%;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  overflow: hidden;
  padding: var(--sp-6) 0;
  border-block: 1px solid color-mix(in oklab, var(--ol-cream-50) 12%, transparent);
}
.ol-marquee::before,
.ol-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.ol-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--ol-forest-900), transparent);
}
.ol-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--ol-forest-900), transparent);
}
.ol-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  animation: ol-marquee-scroll 45s linear infinite;
  white-space: nowrap;
}
.ol-marquee__item {
  font-family: var(--ol-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: 0.01em;
  color: var(--ol-cream-50);
  line-height: 1;
}
.ol-marquee__dot {
  color: var(--ol-gold-500);
  font-size: 1rem;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .ol-marquee__track { animation-duration: 120s; }
}

/* ============================================================
   MISSION — Built on Trust
   ============================================================ */

/* Hero responsive — mobile */
@media (max-width: 768px) {
  .ol-hero { min-height: auto !important; }
  .ol-hero__bg { background-position: 60% center !important; }
  .ol-hero__veil {
    background:
      radial-gradient(ellipse at 50% 30%,
        color-mix(in oklab, var(--ol-cream-100) 70%, transparent) 0%,
        color-mix(in oklab, var(--ol-cream-100) 40%, transparent) 45%,
        color-mix(in oklab, var(--ol-cream-100) 15%, transparent) 75%,
        transparent 100%),
      linear-gradient(180deg,
        color-mix(in oklab, var(--ol-cream-100) 50%, transparent) 0%,
        color-mix(in oklab, var(--ol-cream-100) 30%, transparent) 50%,
        color-mix(in oklab, var(--ol-cream-100) 10%, transparent) 100%) !important;
  }
  .ol-hero__inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
    padding-block: calc(var(--sp-20) + 40px) var(--sp-10) !important;
    text-align: center;
  }
  .ol-hero__copy {
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ol-hero__copy .ol-eyebrow {
    font-size: 0.55rem !important;
    letter-spacing: 0.1em !important;
    padding: var(--sp-1) var(--sp-3) !important;
    white-space: nowrap !important;
  }
  .ol-hero__title {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    text-align: center !important;
  }
  .ol-hero__lede {
    font-size: var(--ol-fs-sm) !important;
    text-align: center !important;
  }
  .ol-hero__cta-row { justify-content: center; }
  .ol-hero .ol-btn--dark {
    width: 100%;
    justify-content: center;
    padding: var(--sp-4) var(--sp-8) !important;
  }
  .ol-hero__feature { justify-content: center !important; }
  
}

/* ============================================================
   PHASE 2 — SITE-WIDE PREMIUM ALIGNMENT
   Scoped away from the approved homepage so front-page visuals stay
   intact. This layer dresses WordPress, Kadence, and WooCommerce
   customer-facing pages without changing business logic.
   ============================================================ */

/* UNIFIED HEADER: removed Block A (ticker position:relative + duplicate header) — covered globally in lines 360-569 above. */

body.oasis-redesign:not(.home) .entry-title,
body.oasis-redesign:not(.home) .page-title,
body.oasis-redesign:not(.home) .product_title,
body.oasis-redesign:not(.home) .woocommerce-products-header__title {
  font-family: var(--ol-font-display) !important;
  font-size: clamp(2.4rem, 5vw, 4.7rem) !important;
  line-height: .98 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ol-guide-umber) !important;
  text-wrap: balance;
}

body.oasis-redesign:not(.home) .entry.single-entry,
body.oasis-redesign:not(.home) .woocommerce-cart-form,
body.oasis-redesign:not(.home) .cart_totals,
body.oasis-redesign:not(.home) .woocommerce-checkout-review-order,
body.oasis-redesign:not(.home) .woocommerce-MyAccount-content,
body.oasis-redesign:not(.home) .woocommerce-MyAccount-navigation,
body.oasis-redesign:not(.home) .woocommerce-form-login,
body.oasis-redesign:not(.home) .woocommerce-form-register,
body.oasis-redesign:not(.home) .oasis-coa-card {
  background: color-mix(in oklab, var(--ol-cream-50) 86%, white) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
  border-radius: var(--ol-radius-lg) !important;
  box-shadow: 0 24px 70px -54px rgba(20,32,26,.52) !important;
}

body.oasis-redesign:not(.home) .entry-content h2,
body.oasis-redesign:not(.home) .entry-content h3,
body.oasis-redesign:not(.home) .woocommerce div.product h2,
body.oasis-redesign:not(.home) .cart_totals h2,
body.oasis-redesign:not(.home) .woocommerce-billing-fields h3,
body.oasis-redesign:not(.home) .woocommerce-additional-fields h3,
body.oasis-redesign:not(.home) #order_review_heading {
  font-family: var(--ol-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  color: var(--ol-guide-umber) !important;
}

body.oasis-redesign:not(.home) .entry-content p,
body.oasis-redesign:not(.home) .entry-content li,
body.oasis-redesign:not(.home) .woocommerce-product-details__short-description,
body.oasis-redesign:not(.home) .woocommerce-Tabs-panel,
body.oasis-redesign:not(.home) .woocommerce-privacy-policy-text {
  color: color-mix(in oklab, var(--ol-ink-900) 74%, transparent);
  line-height: 1.72;
}

body.oasis-redesign:not(.home) a {
  color: var(--ol-forest-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.oasis-redesign:not(.home) a:hover {
  color: var(--ol-guide-olive);
}

body.oasis-redesign:not(.home) button,
body.oasis-redesign:not(.home) .button,
body.oasis-redesign:not(.home) input[type="button"],
body.oasis-redesign:not(.home) input[type="submit"],
body.oasis-redesign:not(.home) .wp-block-button__link,
body.oasis-redesign:not(.home) .single_add_to_cart_button,
body.oasis-redesign:not(.home) .checkout-button,
body.oasis-redesign:not(.home) .wc-block-components-button,
body.oasis-redesign:not(.home) .wc-block-cart__submit-button,
body.oasis-redesign:not(.home) .wc-block-components-checkout-place-order-button {
  min-height: 46px;
  border: 1px solid transparent !important;
  border-radius: var(--ol-radius-pill) !important;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  font-family: var(--ol-font-body) !important;
  font-size: var(--ol-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  box-shadow: 0 14px 34px -24px rgba(20,32,26,.52) !important;
  transition: transform .22s var(--ol-ease), background .22s var(--ol-ease), box-shadow .22s var(--ol-ease) !important;
}

body.oasis-redesign:not(.home) button:hover,
body.oasis-redesign:not(.home) .button:hover,
body.oasis-redesign:not(.home) input[type="submit"]:hover,
body.oasis-redesign:not(.home) .wp-block-button__link:hover,
body.oasis-redesign:not(.home) .single_add_to_cart_button:hover,
body.oasis-redesign:not(.home) .checkout-button:hover,
body.oasis-redesign:not(.home) .wc-block-components-button:hover {
  background: var(--ol-guide-olive) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px -28px rgba(20,32,26,.58) !important;
}

body.oasis-redesign:not(.home) a:focus-visible,
body.oasis-redesign:not(.home) button:focus-visible,
body.oasis-redesign:not(.home) input:focus-visible,
body.oasis-redesign:not(.home) select:focus-visible,
body.oasis-redesign:not(.home) textarea:focus-visible {
  outline: 2px solid var(--ol-guide-olive) !important;
  outline-offset: 3px;
}

body.oasis-redesign:not(.home) input[type="text"],
body.oasis-redesign:not(.home) input[type="email"],
body.oasis-redesign:not(.home) input[type="tel"],
body.oasis-redesign:not(.home) input[type="password"],
body.oasis-redesign:not(.home) input[type="number"],
body.oasis-redesign:not(.home) input[type="search"],
body.oasis-redesign:not(.home) select,
body.oasis-redesign:not(.home) textarea,
body.oasis-redesign:not(.home) .select2-container .select2-selection {
  min-height: 48px;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 88%, white) !important;
  color: var(--ol-ink-900) !important;
  box-shadow: none !important;
}

body.oasis-redesign:not(.home) textarea {
  min-height: 9rem;
}

body.oasis-redesign:not(.home) label,
body.oasis-redesign:not(.home) .form-row label {
  color: var(--ol-guide-umber);
  font-size: var(--ol-fs-xs);
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
}

body.oasis-redesign:not(.home) .woocommerce-breadcrumb {
  color: color-mix(in oklab, var(--ol-ink-900) 58%, transparent) !important;
  font-family: var(--ol-font-body) !important;
  font-size: var(--ol-fs-xs) !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* WooCommerce archive and Kadence product cards */
body.oasis-redesign:not(.home) .woocommerce ul.products {
  gap: var(--sp-6) !important;
}

/* [removed in card sweep] old :not(.home) .woocommerce card base + hover
   (gradient, radius-lg, .25s, olive lift). Dead — superseded by the UNIFIED
   CARD block. */

/* [removed in card sweep] :not(.home) loop title (redundant) + price (sage,
   dead). product-cards.css owns both across every surface. */

body.oasis-redesign:not(.home) .woocommerce-result-count,
body.oasis-redesign:not(.home) .woocommerce-ordering select {
  color: color-mix(in oklab, var(--ol-ink-900) 65%, transparent);
  font-size: var(--ol-fs-sm);
}

/* Single product */
body.oasis-redesign.single-product .wp-site-blocks .content-container,
body.oasis-redesign.single-product .entry-content {
  max-width: var(--ol-wrap) !important;
  margin-inline: auto !important;
}

body.oasis-redesign.single-product .woocommerce-product-gallery,
body.oasis-redesign.single-product .summary,
body.oasis-redesign.single-product .entry-summary {
  background: color-mix(in oklab, var(--ol-cream-50) 86%, white) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
  border-radius: var(--ol-radius-lg) !important;
  box-shadow: 0 24px 70px -54px rgba(20,32,26,.5) !important;
}

body.oasis-redesign.single-product .summary,
body.oasis-redesign.single-product .entry-summary {
  padding: var(--sp-5) !important;
}

body.oasis-redesign.single-product .product_title {
  margin-bottom: var(--sp-4) !important;
}

body.oasis-redesign.single-product .price {
  color: var(--ol-guide-olive) !important;
  font-family: var(--ol-font-body) !important;
  font-size: var(--ol-fs-xl) !important;
  font-weight: 600 !important;
}

body.oasis-redesign.single-product .quantity input.qty,
body.oasis-redesign:not(.home) .quantity input.qty {
  border-radius: var(--ol-radius-pill) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  background: var(--ol-cream-50) !important;
  min-height: 44px;
}

body.oasis-redesign.single-product .woocommerce-tabs,
body.oasis-redesign.single-product .related.products,
body.oasis-redesign.single-product .up-sells {
  max-width: var(--ol-wrap);
  margin-inline: auto;
}

body.oasis-redesign.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Cart, checkout, account */

/* Legal, FAQ, contact, and content pages */

body.oasis-redesign:not(.home) details summary {
  border-radius: var(--ol-radius-md) !important;
  color: var(--ol-guide-umber) !important;
  font-family: var(--ol-font-body) !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  

  body.oasis-redesign:not(.home) .woocommerce ul.products {
    gap: var(--sp-3) !important;
  }
}

@media (max-width: 640px) {
  body.oasis-redesign:not(.home) .entry-title,
body.oasis-redesign:not(.home) .page-title,
body.oasis-redesign:not(.home) .product_title,
body.oasis-redesign:not(.home) .woocommerce-products-header__title {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }

  body.oasis-redesign:not(.home) button,
body.oasis-redesign:not(.home) .button,
body.oasis-redesign:not(.home) input[type="submit"],
body.oasis-redesign:not(.home) .single_add_to_cart_button,
body.oasis-redesign:not(.home) .checkout-button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   PHASE 2B — FRESH PAGE/TEMPLATE BUILDS
   These classes are emitted by child-theme page and Woo templates.
   ============================================================ */

body.oasis-redesign:not(.home) .ol-page-shell,
body.oasis-redesign:not(.home) .ol-shop-shell,
body.oasis-redesign:not(.home) .ol-product-shell {
  background:
    radial-gradient(circle at 16% 0%, color-mix(in oklab, var(--ol-guide-cream) 24%, transparent), transparent 34rem),
    linear-gradient(180deg, var(--ol-cream-100) 0%, var(--ol-cream-50) 48%, var(--ol-cream-100) 100%);
  min-height: 70vh;
}

body.oasis-redesign:not(.home) .ol-page-body,
body.oasis-redesign:not(.home) .ol-shop-body,
body.oasis-redesign:not(.home) .ol-product-body {
  padding-block: clamp(var(--sp-12), 7vw, var(--sp-24));
}

body.oasis-redesign:not(.home) .ol-page-card {
  max-width: 980px;
  margin-inline: auto;
  background: color-mix(in oklab, var(--ol-cream-50) 90%, white);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  border-radius: var(--ol-radius-lg);
  box-shadow: 0 28px 82px -60px rgba(20,32,26,.56);
  overflow: hidden;
}

body.oasis-redesign:not(.home) .ol-page-content {
  padding: clamp(var(--sp-6), 5vw, var(--sp-14, 3.5rem));
}

body.oasis-redesign:not(.home) .ol-page-content > :first-child {
  margin-top: 0;
}

body.oasis-redesign:not(.home) .ol-page-content > :last-child {
  margin-bottom: 0;
}

body.oasis-redesign:not(.home) .ol-page-content p,
body.oasis-redesign:not(.home) .ol-page-content li {
  font-size: var(--ol-fs-base);
}

body.oasis-redesign:not(.home) .ol-shop-body ul.products::before,
body.oasis-redesign:not(.home) .ol-shop-body ul.products::after {
  content: none !important;
}

@media (max-width: 1100px) {
  body.oasis-redesign:not(.home) .ol-shop-body ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  

  
}

@media (max-width: 760px) {
  body.oasis-redesign:not(.home) .ol-page-hero__inner {
    padding-block: var(--sp-12);
  }

  body.oasis-redesign:not(.home) .ol-page-title {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  body.oasis-redesign:not(.home) .ol-page-card {
    border-radius: var(--ol-radius-md);
  }

  body.oasis-redesign:not(.home) .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-3) !important;
  }
}

/* ============================================================
   PHASE 2C — FRESH NON-HOME SURFACES
   Purpose-built presentation layers for admin content, WooCommerce
   archives, system pages, and Kadence Woo Template product pages.
   ============================================================ */

/* UNIFIED HEADER: removed Block C (sticky variant) — global rule applies. */

body.oasis-redesign:not(.home) .ol-page-content .wp-block-heading {
  color: var(--ol-guide-umber) !important;
}

body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .product-excerpt,
body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .wlr-product-message {
  display: none !important;
}

/* Older image rules removed — superseded by lean shop rules at end of file. */

/* Kadence Woo Template single product rebuild */

@media (max-width: 760px) {
  body.oasis-redesign:not(.home) .ol-shop-toolbar {
    align-items: stretch;
  }

  body.oasis-redesign:not(.home) .ol-shop-body .woocommerce-ordering,
body.oasis-redesign:not(.home) .ol-shop-body .woocommerce-ordering select {
    width: 100%;
  }

  

}

/* ============================================================
   PHASE 2D — SHARED HEADER / FOOTER PARITY
   Match the approved homepage chrome across every customer page.
   ============================================================ */

/* UNIFIED HEADER: PHASE 2D header chrome rules removed.
   Header styling is now globally applied via the body.oasis-redesign rules
   at lines ~338-569, so the home page and every other page share one
   source of truth. */

body.oasis-redesign:not(.home) .ol-footer {
  margin-top: 0;
}

body.oasis-redesign:not(.home) .ol-footer__col a,
body.oasis-redesign:not(.home) .ol-footer__copy,
body.oasis-redesign:not(.home) .ol-footer__legal,
body.oasis-redesign:not(.home) .ol-footer__legal a {
  color: color-mix(in oklab, var(--ol-cream-50) 86%, transparent) !important;
}

body.oasis-redesign:not(.home) .ol-footer__disclaimer {
  color: color-mix(in oklab, var(--ol-cream-50) 78%, transparent) !important;
}

body.oasis-redesign:not(.home) .ol-footer__veil {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ol-forest-900) 76%, transparent) 0%,
      color-mix(in oklab, var(--ol-forest-900) 70%, transparent) 42%,
      color-mix(in oklab, var(--ol-forest-900) 94%, transparent) 100%);
}

/* UNIFIED HEADER: 900px mobile-nav rules removed (now global at ~338). */

@media (max-width: 760px) {
  body.oasis-redesign:not(.home) .ol-page-shell,
body.oasis-redesign:not(.home) .ol-shop-shell {
    padding-top: 96px;
  }

}

/* ============================================================
   PHASE 2E — PRODUCTION AUDIT FIXES
   Conversion/state polish found during page-by-page QA.
   ============================================================ */

/* ============================================================
   PHASE 2F — REBUILD-QUALITY PAGE SYSTEM
   Final shared chrome and fresh page surfaces for non-home pages.
   ============================================================ */

/* UNIFIED HEADER: PHASE 2F header overrides removed.
   The top:0 / 80px padding-top values were fighting the global 34px ticker
   offset and creating the divergence between home and non-home headers. */

body.oasis-redesign:not(.home) .ol-page-shell,
body.oasis-redesign:not(.home) .ol-shop-shell { padding-top: 106px;background: radial-gradient(circle at 8% 8%, color-mix(in oklab, var(--ol-guide-tan) 20%, transparent), transparent 28rem), radial-gradient(circle at 92% 0%, color-mix(in oklab, var(--ol-guide-stone) 18%, transparent), transparent 34rem), linear-gradient(180deg, var(--ol-cream-100) 0%, var(--ol-cream-50) 44%, var(--ol-cream-100) 100%) !important; }

body.oasis-redesign:not(.home) .ol-page-layout {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-10));
}

body.oasis-redesign:not(.home) .ol-section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: var(--sp-3);
  color: var(--ol-guide-olive);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.oasis-redesign:not(.home) .ol-info-card,
body.oasis-redesign:not(.home) .ol-timeline-item,
body.oasis-redesign:not(.home) .ol-faq-item {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7, 1.75rem));
  border: 1px solid #D9D3C3;
  border-radius: var(--ol-radius-md);
  background: #fff;
  box-shadow: 0 20px 62px -56px rgba(20,32,26,.42);
}
/* Forest left-accent marks the open question (not every item, so 16 rows don't
   become 16 green stripes). */
body.oasis-redesign:not(.home) .ol-faq-item[open] {
  border-left: 3px solid var(--ol-forest-700);
}

body.oasis-redesign:not(.home) .ol-faq-group {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
}

body.oasis-redesign:not(.home) .ol-faq-list {
  display: grid;
  gap: var(--sp-3);
}

body.oasis-redesign:not(.home) .ol-shop-cat small {
  color: color-mix(in oklab, currentColor 68%, transparent);
  font-size: .68rem;
}

@media (max-width: 900px) {
  

  body.oasis-redesign:not(.home) .ol-page-shell,
body.oasis-redesign:not(.home) .ol-shop-shell {
    padding-top: 72px !important;
  }

  
}

@media (max-width: 640px) {
  body.oasis-redesign:not(.home) .ol-page-hero__inner {
    padding-block: var(--sp-8) !important;
  }

  body.oasis-redesign:not(.home) .ol-page-title {
    font-size: clamp(2.55rem, 13vw, 3.7rem);
  }

  

  body.oasis-redesign:not(.home) .ol-shop-cats {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--sp-2);
  }

  body.oasis-redesign:not(.home) .ol-shop-cat {
    flex: 0 0 auto;
  }

  

  
}

/* ============================================================
   PHASE 2G - LUXURY PAGE MASTER SYSTEM
   Final non-home art direction pass. Homepage remains untouched.
   ============================================================ */

body.oasis-redesign:not(.home) { --ol-guide-olive: #5d614b;--ol-guide-stone: #b9b09f;--ol-guide-umber: #383125;--ol-guide-tan: #cdbba8;--ol-guide-cream: #d8cfc2;background: var(--ol-cream-100) !important;color: var(--ol-ink-900);font-family: var(--ol-font-body);--ol-page-header-offset: 82px;--ol-page-wash: radial-gradient(circle at 14% 0%, color-mix(in oklab, var(--ol-guide-cream) 26%, transparent), transparent 28rem), radial-gradient(circle at 86% 4%, color-mix(in oklab, var(--ol-guide-stone) 18%, transparent), transparent 34rem), linear-gradient(180deg, var(--ol-cream-100) 0%, var(--ol-cream-50) 43%, var(--ol-cream-100) 100%); }

/* UNIFIED HEADER: Block G (~4490) removed.
   Was a third duplicate set of header rules forcing top:0 — fought the global
   34px ticker offset. Page-shell padding-top:0 here also broke header offset. */

body.oasis-redesign:not(.home) .ol-page-hero::before { content: "";position: absolute;inset: 0;z-index: -2;background: linear-gradient(115deg, color-mix(in oklab, var(--ol-cream-50) 92%, white) 0%, color-mix(in oklab, var(--ol-guide-cream) 30%, var(--ol-cream-50)) 68%, color-mix(in oklab, var(--ol-guide-stone) 18%, var(--ol-cream-50)) 100%) !important;background-image: linear-gradient(90deg, color-mix(in oklab, var(--ol-cream-50) 98%, white) 0%, color-mix(in oklab, var(--ol-cream-50) 88%, transparent) 42%, color-mix(in oklab, var(--ol-forest-900) 14%, transparent) 100%), url("../images/hero-bg-v7.jpg");background-position: center right;background-size: cover;opacity: .88; }

body.oasis-redesign:not(.home) .ol-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(245,243,238,.72), rgba(245,243,238,.18) 42%, rgba(237,234,227,.88) 100%),
    radial-gradient(circle at 78% 30%, color-mix(in oklab, var(--ol-guide-tan) 16%, transparent), transparent 26rem);
  pointer-events: none;
}

body.oasis-redesign:not(.home) .ol-page-eyebrow { display: inline-flex;align-items: center;min-height: 36px;padding: 0 var(--sp-5);border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 22%, transparent);border-radius: var(--ol-radius-pill);background: color-mix(in oklab, var(--ol-guide-cream) 60%, var(--ol-cream-50));color: var(--ol-guide-umber);font-family: var(--ol-font-body);font-size: var(--ol-fs-xs);font-weight: 700;letter-spacing: .15em;text-transform: uppercase;line-height: 1;box-shadow: 0 16px 42px -34px rgba(56,49,37,.42); }

body.oasis-redesign:not(.home) .ol-page-body,
body.oasis-redesign:not(.home) .ol-shop-body { padding-block: clamp(var(--sp-12), 7vw, var(--sp-24)) !important;background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--ol-cream-50) 72%, transparent) 34%, transparent 100%); }

body.oasis-redesign:not(.home) .ol-page-layout,
body.oasis-redesign:not(.home) .ol-page-custom {
  display: grid;
  gap: clamp(var(--sp-8), 5vw, var(--sp-14, 3.5rem));
}

body.oasis-redesign:not(.home) .ol-page-panel,
body.oasis-redesign:not(.home) .ol-page-card,
body.oasis-redesign:not(.home) .ol-info-card,
body.oasis-redesign:not(.home) .ol-timeline-item,
body.oasis-redesign:not(.home) .ol-faq-item,
body.oasis-redesign:not(.home) .woocommerce-cart-form,
body.oasis-redesign:not(.home) .cart_totals,
body.oasis-redesign:not(.home) .woocommerce-checkout-review-order,
body.oasis-redesign:not(.home) .woocommerce-MyAccount-navigation,
body.oasis-redesign:not(.home) .woocommerce-MyAccount-content,
body.oasis-redesign:not(.home) .woocommerce-form-login,
body.oasis-redesign:not(.home) .woocommerce-form-register {
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  background:
    linear-gradient(145deg,
      color-mix(in oklab, var(--ol-cream-50) 96%, white),
      color-mix(in oklab, var(--ol-guide-cream) 26%, var(--ol-cream-50))) !important;
  box-shadow: 0 28px 86px -68px rgba(20,32,26,.62) !important;
}

body.oasis-redesign:not(.home) .ol-page-panel,
body.oasis-redesign:not(.home) .ol-page-card {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
}

body.oasis-redesign:not(.home) .ol-page-panel::after,
body.oasis-redesign:not(.home) .ol-page-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 44%);
  pointer-events: none;
}

body.oasis-redesign:not(.home) .ol-page-panel > *,
body.oasis-redesign:not(.home) .ol-page-card > * {
  position: relative;
  z-index: 1;
}

body.oasis-redesign:not(.home) .ol-section-kicker,
body.oasis-redesign:not(.home) .ol-info-card span,
body.oasis-redesign:not(.home) .ol-timeline-item span {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-3);
  color: var(--ol-guide-olive);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.1;
  text-transform: uppercase;
}

body.oasis-redesign:not(.home) .ol-page-panel p,
body.oasis-redesign:not(.home) .ol-section-header p,
body.oasis-redesign:not(.home) .ol-page-content p,
body.oasis-redesign:not(.home) .ol-page-content li {
  color: color-mix(in oklab, var(--ol-ink-900) 73%, transparent);
  font-size: var(--ol-fs-base);
  line-height: 1.78;
}

body.oasis-redesign:not(.home) .ol-faq-list,
body.oasis-redesign:not(.home) .ol-timeline,
body.oasis-redesign:not(.home) .ol-support-list {
  display: grid;
  gap: var(--sp-3);
}

body.oasis-redesign:not(.home) .ol-faq-item { padding: 0 !important;overflow: hidden; }

body.oasis-redesign:not(.home) .ol-faq-item summary { display: flex;align-items: center;justify-content: space-between;gap: var(--sp-4);min-height: 62px;padding: var(--sp-4) var(--sp-5);color: var(--ol-guide-umber);background: color-mix(in oklab, var(--ol-guide-cream) 36%, var(--ol-cream-50));font-weight: 600;cursor: pointer;list-style: none; }

body.oasis-redesign:not(.home) .ol-faq-item summary::-webkit-details-marker { display: none; }

body.oasis-redesign:not(.home) .ol-faq-item summary::after { content: "+";color: var(--ol-guide-olive);font-size: 1.5rem;line-height: 1;font-family: var(--ol-font-display); }

body.oasis-redesign:not(.home) .ol-faq-item p { margin: 0;padding: var(--sp-5); }

body.oasis-redesign:not(.home) .ol-page-content--legal { max-width: 900px;margin-inline: auto; }

body.oasis-redesign:not(.home) .ol-page-content h2,
body.oasis-redesign:not(.home) .ol-page-content h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  color: var(--ol-guide-umber) !important;
  font-family: var(--ol-font-display) !important;
  letter-spacing: 0 !important;
}

body.oasis-redesign:not(.home) .ol-page-content h2 { margin-top: var(--sp-10);margin-bottom: var(--sp-4);font-size: clamp(2rem, 3.4vw, 3.25rem) !important;line-height: .98 !important; }

body.oasis-redesign:not(.home) .ol-page-content h3 { margin-top: var(--sp-8);margin-bottom: var(--sp-3);font-size: clamp(1.45rem, 2vw, 2rem) !important; }

body.oasis-redesign:not(.home) .ol-shop-cats { display: flex;flex-wrap: wrap;justify-content: flex-start;gap: var(--sp-2);max-width: 1060px;margin: var(--sp-7, 1.75rem) 0 0; }

/* [removed in pre-launch audit] old glassmorphic shop-filter pill (guide-umber/
   olive palette, backdrop-blur). Dead — the current sidebar cats render as clean
   forest/cream rows via the modern rules below + .ol-shop-shell scope. */

/* NOTE: `.ol-shop-cat:hover` was erroneously comma-grouped here, so hovering a
   category applied this toolbar's larger padding + margin + shadow — the row
   "expanded"/jumped on hover. Removed; category hover is handled by the clean
   `.ol-shop-shell .ol-shop-cat:hover` rule (background + border only). */
body.oasis-redesign:not(.home) .ol-shop-toolbar { display: flex;align-items: center;justify-content: space-between;gap: var(--sp-4);flex-wrap: wrap;margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-10));padding: var(--sp-4);background: color-mix(in oklab, var(--ol-cream-50) 78%, transparent);border: 1px solid color-mix(in oklab, var(--ol-forest-900) 9%, transparent);border-radius: var(--ol-radius-md);box-shadow: 0 18px 54px -48px rgba(20,32,26,.42);backdrop-filter: blur(18px);-webkit-backdrop-filter: blur(18px); }

body.oasis-redesign:not(.home) .woocommerce-result-count {
  margin: 0 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 64%, transparent) !important;
  font-size: var(--ol-fs-xs) !important;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body.oasis-redesign:not(.home) .woocommerce-ordering select,
body.oasis-redesign:not(.home) select.orderby {
  min-height: 44px;
  padding: 0 2.75rem 0 1rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 18%, transparent) !important;
  border-radius: var(--ol-radius-pill) !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--ol-guide-olive) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ol-guide-olive) 50%, transparent 50%) calc(100% - 14px) 52% / 6px 6px no-repeat,
    color-mix(in oklab, var(--ol-cream-50) 92%, white) !important;
  color: var(--ol-guide-umber) !important;
  font-size: var(--ol-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  appearance: none;
}

body.oasis-redesign:not(.home) .ol-shop-body ul.products { display: grid !important;grid-template-columns: repeat(3, minmax(0, 1fr)) !important;gap: clamp(var(--sp-4), 2.5vw, var(--sp-7, 1.75rem)) !important;width: 100% !important;margin: 0 !important; }

/* [removed in card sweep] old 3-column shop card li base + hover (gradient fill,
   radius-md, .28s, -4px lift). Dead: the live shop is 4-col cream/ink via the
   lean shop rules + the UNIFIED CARD block in product-cards.css, which
   out-specify this :not(.home) selector. */

/* Older image-surface rules removed — superseded by lean shop rules at end of file. */

/* [removed in card sweep] old 3-col shop title (umber) + price (olive). Dead:
   the live card uses ink title / forest price from product-cards.css. */

body.oasis-redesign:not(.home) .wlr-product-message {
  margin: 0 !important;
  padding: .62rem .75rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 12%, transparent) !important;
  border-radius: var(--ol-radius-sm) !important;
  background: color-mix(in oklab, var(--ol-guide-cream) 26%, var(--ol-cream-50)) !important;
  color: color-mix(in oklab, var(--ol-ink-900) 68%, transparent) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  text-align: center;
}

body.oasis-redesign:not(.home) main input,
body.oasis-redesign:not(.home) main textarea,
body.oasis-redesign:not(.home) main select {
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  border-radius: var(--ol-radius-sm) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white) !important;
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-body) !important;
}

body.oasis-redesign:not(.home) main input:focus,
body.oasis-redesign:not(.home) main textarea:focus,
body.oasis-redesign:not(.home) main select:focus,
body.oasis-redesign:not(.home) main a:focus-visible,
body.oasis-redesign:not(.home) main button:focus-visible {
  outline: 2px solid var(--ol-guide-olive) !important;
  outline-offset: 3px !important;
}

/* Mobile: more breathing room between NOTICE and Related products. */

body.oasis-redesign:not(.home) .woocommerce-message,
body.oasis-redesign:not(.home) .woocommerce-info,
body.oasis-redesign:not(.home) .woocommerce-error,
body.oasis-redesign:not(.home) .woocommerce-noreviews {
  border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 18%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  background: color-mix(in oklab, var(--ol-guide-cream) 30%, var(--ol-cream-50)) !important;
  color: var(--ol-guide-umber) !important;
}

body.oasis-redesign:not(.home) .oasis-lot-badge,
body.oasis-redesign:not(.home) .oasis-coa-download-btn {
  border-radius: var(--ol-radius-pill) !important;
  background: var(--ol-guide-olive) !important;
  color: var(--ol-cream-50) !important;
}

@media (max-width: 1024px) {
  body.oasis-redesign:not(.home) {
    --ol-page-header-offset: 72px;
  }

  

  

  

  body.oasis-redesign:not(.home) .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body.oasis-redesign:not(.home) .ol-page-hero {
    min-height: 0;
  }

  body.oasis-redesign:not(.home) .ol-page-hero__inner {
    padding-top: calc(var(--ol-page-header-offset) + var(--sp-8)) !important;
    padding-bottom: var(--sp-10) !important;
  }

  body.oasis-redesign:not(.home) .ol-page-title {
    max-width: 9.5ch;
    font-size: clamp(2.8rem, 15vw, 4.25rem) !important;
  }

  body.oasis-redesign:not(.home) .ol-shop-cats {
    flex-wrap: nowrap;
    max-width: calc(100vw - (clamp(var(--sp-5), 4vw, var(--sp-12)) * 2));
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }

  body.oasis-redesign:not(.home) .ol-shop-cat {
    flex: 0 0 auto;
  }

  /* Proofline: shrink pills to fit one row on mobile (no scroll).
     Use ellipsis so longer labels truncate gracefully instead of
     spilling past the viewport. */
  body.oasis-redesign:not(.home) .ol-page-proofline {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }
  body.oasis-redesign:not(.home) .ol-page-proofline span {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: .45rem .35rem;
    font-size: .52rem;
    letter-spacing: .04em;
    min-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.oasis-redesign:not(.home) .woocommerce-ordering,
body.oasis-redesign:not(.home) .woocommerce-ordering select {
    width: 100%;
  }

  

  body.oasis-redesign:not(.home) .ol-page-panel,
body.oasis-redesign:not(.home) .ol-page-card {
    padding: var(--sp-5);
  }
}

/* ============================================================
   SHOP — function-first catalog (2026-04-27)
   Compact header, sticky filter bar, dense product grid.
   ============================================================ */

/* ---------- Compact head (clears fixed ticker + header) ---------- */
.ol-shop-shell--lean {
  padding-top: calc(34px + 76px + var(--sp-6)) !important; /* ticker + header + breathing room */
}
.ol-shop-head {
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0 var(--sp-8);
  background: var(--ol-cream-100);
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent);
}
.ol-shop-head__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
}
.ol-shop-head__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ol-shop-head__title {
  margin: 0;
  font-family: var(--ol-font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 500;
  color: var(--ol-ink-900);
}
.ol-shop-head__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.ol-shop-head__line {
  margin: 0;
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-ink-900) 65%, transparent);
}
.ol-shop-head__note {
  margin: 0;
  font-family: var(--ol-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-style: italic;
  color: color-mix(in oklab, var(--ol-ink-900) 55%, transparent);
}

/* ---------- Sidebar + grid layout ---------- */
.ol-shop-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-10));
  align-items: start;
}
.ol-shop-sidebar {
  position: relative;
}
.ol-shop-sidebar__sticky {
  position: sticky;
  top: calc(34px + 76px + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ol-shop-sidebar__title {
  margin: 0 0 var(--sp-2);
  padding: 0;
  font-family: var(--ol-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in oklab, var(--ol-ink-900) 60%, transparent);
}
body.oasis-redesign .ol-shop-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  flex: 0 1 auto;
}
.ol-shop-main {
  min-width: 0;                              /* prevent grid blowout from wide woo content */
}
body.oasis-redesign .ol-shop-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  /* Without min-width:0 a flex item floors at its content width and overflows
     the column instead of shrinking. This is what put the pills under the grid. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--ol-radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: color-mix(in oklab, var(--ol-ink-900) 80%, transparent);
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  line-height: 1.3;
  transition: background .2s var(--ol-ease), color .2s var(--ol-ease), border-color .2s var(--ol-ease);
}
body.oasis-redesign .ol-shop-cat:hover {
  background: color-mix(in oklab, var(--ol-forest-900) 5%, transparent);
  color: var(--ol-ink-900);
}
body.oasis-redesign .ol-shop-cat.is-active {
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  border-color: var(--ol-forest-900);
}
body.oasis-redesign .ol-shop-cat span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  /* Long names (e.g. "GLP, GIP, Glcgn & Amylin Analogs") truncate with an
     ellipsis on one line instead of wrapping into the count badge. */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.oasis-redesign .ol-shop-cat small {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--ol-ink-900) 50%, transparent);
}
body.oasis-redesign .ol-shop-cat.is-active small {
  color: color-mix(in oklab, var(--ol-cream-50) 75%, transparent);
}
body.oasis-redesign .ol-shop-cat:hover small {
  color: color-mix(in oklab, var(--ol-ink-900) 70%, transparent);
}

/* ---------- Toolbar above grid (result count + sort) ---------- */
.ol-shop-shell--lean .ol-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 0;
  background: transparent !important;
  border: 0 !important;
}
.ol-shop-shell--lean .ol-shop-toolbar .woocommerce-result-count {
  margin: 0 !important;
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--ol-ink-900) 60%, transparent);
}
body.oasis-redesign .ol-shop-toolbar .woocommerce-ordering,
body.oasis-redesign .ol-shop-shell--lean .woocommerce-ordering {
  margin: 0 !important;
  flex: 0 0 auto;
}
body.oasis-redesign .ol-shop-shell--lean .woocommerce-ordering select,
body.oasis-redesign .ol-shop-toolbar select {
  padding: 8px 32px 8px 14px !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  border-radius: var(--ol-radius-pill) !important;
  background-color: color-mix(in oklab, var(--ol-cream-50) 88%, white) !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  color: var(--ol-ink-900) !important;
  text-transform: uppercase !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ol-forest-700) 50%), linear-gradient(135deg, var(--ol-forest-700) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* ---------- Body padding ---------- */
.ol-shop-shell--lean .ol-shop-body {
  padding: var(--sp-7) 0 clamp(var(--sp-14), 8vw, var(--sp-20));
}
.ol-shop-shell--lean .ol-shop-pagination {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}

/* ---------- Refined product loop cards (override Kadence/Woo defaults) ---------- */

/* Image surface: image IS the surface — rounded corners on the visible photo. */
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-image-link,
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  margin: var(--sp-3) !important;
  padding: 0 !important;
  background: transparent !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--ol-radius-md);
  border: 0 !important;
  box-sizing: border-box;
  position: relative;
}

body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign .ol-shop-body ul.products li.product h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ol-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--ol-ink-900) !important;
}

body.oasis-redesign .ol-shop-body ul.products li.product .price {
  font-family: var(--ol-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ol-forest-900) !important;
}
body.oasis-redesign .ol-shop-body ul.products li.product .product-excerpt,
body.oasis-redesign .ol-shop-body ul.products li.product .wlr-product-message {
  display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  
  
  
  .ol-shop-head__inner {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .ol-shop-head {
    padding-block: var(--sp-8) var(--sp-5);
  }
}

/* ============================================================
   SHOP — MOBILE OPTIMIZATION (2026-04-27)
   85% of customers are mobile. Categories collapses to a
   compact button + slide-in drawer; grid is 2-col; cards tight.
   ============================================================ */

/* Single-line ticker on mobile: tighter font + tracking so all
   four messages fit one line of the fixed 34px bar. */
@media (max-width: 640px) {
  .ol-ticker {
    padding: 6px 10px;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }
  .ol-ticker-item em {
    margin-left: .25em;
  }
}
@media (max-width: 380px) {
  .ol-ticker {
    font-size: 0.55rem;
    letter-spacing: 0.04em;
  }
}

/* Defaults: drawer-only elements hidden on desktop.
   Specificity matched (and !important added) to beat the global
   `body.oasis-redesign:not(.home) main button` inline-flex rule. */
.ol-shop-filter-trigger,
.ol-shop-drawer-backdrop,
.ol-shop-sidebar__head .ol-shop-drawer-close {
  display: none;
}
@media (min-width: 901px) {
  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger,
body.oasis-redesign:not(.home) .ol-shop-shell .ol-shop-filter-trigger,
body.oasis-redesign main .ol-shop-filter-trigger,
body.oasis-redesign:not(.home) main .ol-shop-filter-trigger {
    display: none !important;
  }
  body.oasis-redesign .ol-shop-drawer-backdrop {
    display: none !important;
  }
}

/* Registration fields: shared Oasis Accounts cutover presentation. */
body.oasis-redesign .ol-account-page .oa-register-fields,
body.oasis-redesign .ol-account-page .oa-register-fields .oa-field,
body.oasis-redesign .ol-account-page .oa-register-fields .oa-row {
  min-width: 0;
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

body.oasis-redesign .ol-account-page .oa-register-fields label:not(.oa-check--terms),
body.oasis-redesign .ol-account-page .oa-register-fields .oa-group-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ol-guide-umber);
  font-size: var(--ol-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-checkbox-grid .oa-check {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: .5rem .65rem;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent);
  border-radius: var(--ol-radius-md);
  background: color-mix(in oklab, var(--ol-cream-50) 82%, white);
  color: var(--ol-ink-900);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-checkbox-grid .oa-check:has(input:checked) {
  border-color: var(--ol-forest-900);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-checkbox-grid .oa-check:has(input:focus-visible) {
  outline: 3px solid rgba(53, 53, 37, .2);
  outline-offset: 2px;
}

body.oasis-redesign .ol-account-page .oa-register-fields .oa-check--terms {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 0;
  color: color-mix(in oklab, var(--ol-ink-900) 76%, transparent);
  font-size: var(--ol-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.65;
  text-transform: none;
}

body.oasis-redesign .ol-account-page .oa-register-fields .required {
  color: #9a463c;
}

@media (max-width: 639px) {
  body.oasis-redesign .ol-account-page .oa-register-fields .oa-row,
  body.oasis-redesign .ol-account-page .oa-register-fields .oa-checkbox-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* ---------- Layout: single column, sidebar floats over content ---------- */
  body.oasis-redesign .ol-shop-layout {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  /* ---------- Hero: tighten, stack meta below copy ---------- */
  body.oasis-redesign .ol-shop-shell--lean,
body.oasis-redesign:not(.home) .ol-shop-shell--lean {
    padding-top: calc(34px + 64px + var(--sp-5)) !important;
  }
  body.oasis-redesign .ol-shop-head {
    padding: var(--sp-7) 0 var(--sp-3) !important;
  }
  body.oasis-redesign .ol-shop-head__line--ship {
    margin-top: 2px !important;
  }
  body.oasis-redesign .ol-shop-head__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  body.oasis-redesign .ol-shop-head__title {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
  }
  body.oasis-redesign .ol-shop-head__meta {
    text-align: left;
  }
  body.oasis-redesign .ol-shop-head__line {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }
  body.oasis-redesign .ol-shop-head__note {
    font-size: 0.65rem;
  }

  /* ---------- Categories button (compact filter pill) ---------- */
  body.oasis-redesign .ol-shop-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    margin: 0 0 var(--sp-4);
    padding: 12px 14px;
    background: color-mix(in oklab, var(--ol-cream-50) 92%, white);
    border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent);
    border-radius: var(--ol-radius-pill);
    color: var(--ol-ink-900);
    font-family: var(--ol-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 4px 14px -10px rgba(20,32,26,.45);
    transition: background .2s var(--ol-ease), border-color .2s var(--ol-ease);
  }
  body.oasis-redesign .ol-shop-filter-trigger:hover,
body.oasis-redesign .ol-shop-filter-trigger[aria-expanded="true"] {
    background: var(--ol-cream-100);
    border-color: color-mix(in oklab, var(--ol-forest-900) 24%, transparent);
  }
  body.oasis-redesign .ol-shop-filter-trigger__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ol-forest-900);
  }
  body.oasis-redesign .ol-shop-filter-trigger__label {
    flex: 0 0 auto;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
  }
  body.oasis-redesign .ol-shop-filter-trigger__current {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: color-mix(in oklab, var(--ol-ink-900) 60%, transparent);
    font-style: italic;
    font-size: 0.78rem;
  }
  body.oasis-redesign .ol-shop-filter-trigger__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ol-forest-900);
    transition: transform .2s var(--ol-ease);
  }
  body.oasis-redesign .ol-shop-filter-trigger[aria-expanded="true"] .ol-shop-filter-trigger__chevron {
    transform: rotate(180deg);
  }

  /* ---------- Sidebar becomes a left-side drawer ---------- */
  body.oasis-redesign .ol-shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: min(86vw, 340px);
    max-width: 100%;
    margin: 0;
    background: var(--ol-cream-50);
    box-shadow: 0 24px 80px -16px rgba(20,32,26,.45);
    transform: translateX(-100%);
    transition: transform .32s var(--ol-ease);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.oasis-redesign .ol-shop-sidebar.is-open {
    transform: translateX(0);
  }
  body.oasis-redesign .ol-shop-sidebar__sticky {
    position: static;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
    top: auto;
    gap: var(--sp-2);
  }
  body.oasis-redesign .ol-shop-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  }
  body.oasis-redesign .ol-shop-sidebar__head .ol-shop-sidebar__title {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
  }
  body.oasis-redesign .ol-shop-sidebar__head .ol-shop-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent);
    border-radius: 50%;
    color: var(--ol-ink-900);
    cursor: pointer;
    transition: background .2s var(--ol-ease), border-color .2s var(--ol-ease);
  }
  body.oasis-redesign .ol-shop-sidebar__head .ol-shop-drawer-close:hover {
    background: var(--ol-cream-100);
    border-color: color-mix(in oklab, var(--ol-forest-900) 28%, transparent);
  }
  body.oasis-redesign .ol-shop-cat {
    padding: 14px 14px;
    font-size: 0.85rem;
  }

  /* ---------- Backdrop ---------- */
  body.oasis-redesign .ol-shop-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(20,32,26,.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s var(--ol-ease);
  }
  body.oasis-redesign .ol-shop-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  

  /* ---------- Body: tighten vertical padding around the toolbar ---------- */
  body.oasis-redesign .ol-shop-shell--lean .ol-shop-body {
    padding: var(--sp-3) 0 var(--sp-12) !important;
  }
  /* ---------- Toolbar: sort dropdown full-width, minimal dead space ---------- */
  body.oasis-redesign .ol-shop-shell--lean .ol-shop-toolbar {
    margin: 0 0 var(--sp-3) !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  body.oasis-redesign .ol-shop-shell--lean .ol-shop-toolbar .woocommerce-result-count {
    margin: 0 !important;
    font-size: 0.65rem;
    flex: 1 1 auto;
  }
  body.oasis-redesign .ol-shop-shell--lean .ol-shop-toolbar .woocommerce-ordering {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  body.oasis-redesign .ol-shop-shell--lean .woocommerce-ordering select,
body.oasis-redesign .ol-shop-toolbar select {
    padding: 7px 28px 7px 12px !important;
    font-size: 0.7rem !important;
  }

  /* ---------- 2-column product grid (specificity matches older :not(.home) overrides) ---------- */
  body.oasis-redesign:not(.home) .ol-shop-body ul.products,
body.oasis-redesign .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-3) !important;
  }
  body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product,
body.oasis-redesign .ol-shop-body ul.products li.product {
    border-radius: var(--ol-radius-md) !important;
  }
  body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .woocommerce-loop-image-link,
body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .woocommerce-loop-product__link,
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-image-link,
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__link {
    margin: var(--sp-2) !important;
    border-radius: 12px !important;
  }
  
  
  body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product h2,
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign .ol-shop-body ul.products li.product h2 {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }
  body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product .price,
body.oasis-redesign .ol-shop-body ul.products li.product .price {
    font-size: 0.88rem !important;
  }
  
  body.oasis-redesign:not(.home) .ol-shop-body ul.products li.product:hover,
body.oasis-redesign .ol-shop-body ul.products li.product:hover {
    transform: none !important;
  }
  
}

/* Smaller phones: still 2 col but tighter */
@media (max-width: 420px) {
  body.oasis-redesign .ol-shop-body ul.products {
    gap: var(--sp-2) !important;
  }
  body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-image-link,
body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__link {
    margin: 6px !important;
  }
  
  body.oasis-redesign .ol-shop-body ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign .ol-shop-body ul.products li.product h2 {
    font-size: 0.85rem !important;
  }
}

/* ============================================================
   FINAL OVERRIDES — ensure category drawer + close buttons stay
   readable regardless of older rule cascade.
   ============================================================ */
body.oasis-redesign .ol-shop-cat,
body.oasis-redesign:not(.home) .ol-shop-cat {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ol-ink-900) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
body.oasis-redesign .ol-shop-cat:hover,
body.oasis-redesign:not(.home) .ol-shop-cat:hover {
  background: color-mix(in oklab, var(--ol-forest-900) 6%, transparent) !important;
  border-color: transparent !important;
  color: var(--ol-ink-900) !important;
}
body.oasis-redesign .ol-shop-cat.is-active,
body.oasis-redesign:not(.home) .ol-shop-cat.is-active,
body.oasis-redesign .ol-shop-cat.is-active span,
body.oasis-redesign:not(.home) .ol-shop-cat.is-active span {
  background: var(--ol-forest-900) !important;
  border-color: var(--ol-forest-900) !important;
  color: #F5F0E6 !important;                                  /* hard-coded cream, no var dependency */
}
body.oasis-redesign .ol-shop-cat.is-active small,
body.oasis-redesign:not(.home) .ol-shop-cat.is-active small {
  color: rgba(245, 240, 230, 0.7) !important;
  background: transparent !important;
}
/* Categories drawer X-close — make unmistakably visible */
body.oasis-redesign .ol-shop-sidebar__head .ol-shop-drawer-close,
body.oasis-redesign button.ol-shop-drawer-close {
  background: var(--ol-cream-100) !important;
  color: #232823 !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 28%, transparent) !important;
}
body.oasis-redesign .ol-shop-sidebar__head .ol-shop-drawer-close svg,
body.oasis-redesign button.ol-shop-drawer-close svg {
  stroke: #232823 !important;
}

/* ============================================================
   FINAL CONTRAST + SPACING OVERRIDES (cascade-last so they win)
   The global `body.oasis-redesign:not(.home) button|a` rules are
   forcing forest-900 bg + forest-800 text on our drawer/trigger
   chrome, which renders dark-on-dark. Force cream text here.
   ============================================================ */

/* Categories trigger pill — internal label/value contrast.
   Bg is dark olive (forest-900); all internals must be cream. */
body.oasis-redesign .ol-shop-filter-trigger .ol-shop-filter-trigger__icon,
body.oasis-redesign .ol-shop-filter-trigger .ol-shop-filter-trigger__label,
body.oasis-redesign .ol-shop-filter-trigger .ol-shop-filter-trigger__current,
body.oasis-redesign .ol-shop-filter-trigger .ol-shop-filter-trigger__chevron,
body.oasis-redesign:not(.home) .ol-shop-filter-trigger .ol-shop-filter-trigger__current,
body.oasis-redesign:not(.home) .ol-shop-filter-trigger .ol-shop-filter-trigger__chevron {
  color: #F5F0E6 !important;
}
body.oasis-redesign .ol-shop-filter-trigger .ol-shop-filter-trigger__current,
body.oasis-redesign:not(.home) .ol-shop-filter-trigger .ol-shop-filter-trigger__current {
  color: rgba(245, 240, 230, 0.78) !important;
  font-style: normal !important;
}

/* Hamburger drawer Shop Now CTA — global :not(.home) a rule was
   forcing forest-800 text on our cream-on-dark CTA. Pin cream. */
body.oasis-redesign .ol-drawer .ol-drawer__cta a.ol-btn,
body.oasis-redesign .ol-drawer .ol-drawer__cta a.ol-btn--dark,
body.oasis-redesign:not(.home) .ol-drawer .ol-drawer__cta a.ol-btn,
body.oasis-redesign:not(.home) .ol-drawer .ol-drawer__cta a.ol-btn--dark {
  background: #2F3320 !important;
  color: #F5F0E6 !important;
  text-decoration: none !important;
  border: 1px solid #2F3320 !important;
}

/* Categories drawer X — make a clear cream pill against the dark
   sidebar header bar. Bump specificity above the global button rule. */
body.oasis-redesign .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close,
body.oasis-redesign:not(.home) .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close {
  background: #F5F0E6 !important;
  color: #1B2419 !important;
  border: 1px solid rgba(53, 53, 37, 0.28) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  padding: 0 !important;
}
body.oasis-redesign .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close svg,
body.oasis-redesign:not(.home) .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close svg {
  stroke: #1B2419 !important;
  width: 14px !important;
  height: 14px !important;
}

/* Tighten the sort/categories toolbar container — less dead space. */
@media (max-width: 900px) {
  body.oasis-redesign .ol-shop-shell--lean .ol-shop-toolbar,
body.oasis-redesign:not(.home) .ol-shop-shell--lean .ol-shop-toolbar {
    padding: 8px 10px !important;
    margin: 0 0 10px !important;
    gap: 8px !important;
  }
  body.oasis-redesign .ol-shop-filter-trigger,
body.oasis-redesign:not(.home) .ol-shop-filter-trigger {
    margin: 0 0 8px !important;
    padding: 10px 14px !important;
  }
  body.oasis-redesign .ol-shop-shell--lean .woocommerce-ordering,
body.oasis-redesign:not(.home) .ol-shop-shell--lean .woocommerce-ordering {
    margin: 0 !important;
  }
}

/* ============================================================
   SINGLE PRODUCT — legacy Kadence WooTemplate skin
   The product template is a Kadence Pro custom WooTemplate that
   renders legacy builder block markup.
   Rather than fight the template, we re-skin its output so the
   page reads premium + scientific without breaking block edits.
   ============================================================ */

/* Page background + room under the fixed ticker/header */

/* Breadcrumbs — slim top row */

/* Product gallery — premium cream card */
body.oasis-redesign div.product .woocommerce-product-gallery {
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent) !important;
  border-radius: var(--ol-radius-lg) !important;
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-8)) !important;
  box-shadow: 0 24px 50px -36px rgba(20,32,26,.28) !important;
  width: 100% !important;
  margin: 0 !important;
}
body.oasis-redesign .woocommerce-product-gallery .flex-viewport,
body.oasis-redesign .woocommerce-product-gallery__wrapper {
  border-radius: var(--ol-radius-md) !important;
  overflow: hidden !important;
}
body.oasis-redesign .woocommerce-product-gallery__image,
body.oasis-redesign .woocommerce-product-gallery__image img,
body.oasis-redesign .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--ol-radius-md) !important;
  display: block !important;
}

/* Title — Cormorant, large */
body.oasis-redesign div.product h1.product_title,
body.oasis-redesign .product_title.entry-title {
  font-family: var(--ol-font-display) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--ol-forest-900) !important;
  margin: 0 0 var(--sp-3) !important;
  padding: 0 !important;
}

/* Price */
body.oasis-redesign div.product p.price,
body.oasis-redesign div.product .price {
  font-family: var(--ol-font-body) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--ol-forest-900) !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

body.oasis-redesign div.product .price .woocommerce-Price-currencySymbol {
  font-size: 0.85em;
  margin-right: 1px;
  color: var(--ol-forest-700);
}

/* "Free shipping on orders over $150" inline mini-banner — tone down */

/* Variation form / cart — premium frame */

body.oasis-redesign div.product .variations {
  width: 100% !important;
  margin: 0 0 var(--sp-3) !important;
  border: 0 !important;
  background: transparent !important;
}
body.oasis-redesign div.product .variations tbody,
body.oasis-redesign div.product .variations tr,
body.oasis-redesign div.product .variations td,
body.oasis-redesign div.product .variations th {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
body.oasis-redesign div.product .variations tr {
  margin-bottom: var(--sp-3) !important;
}
body.oasis-redesign div.product .variations label {
  display: inline-block !important;
  margin: 0 0 6px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, var(--ol-ink-900) 64%, transparent) !important;
}
body.oasis-redesign div.product .variations select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 36px 0 14px !important;
  background: var(--ol-cream-50) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 16%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.92rem !important;
  color: var(--ol-ink-900) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ol-forest-700) 50%), linear-gradient(135deg, var(--ol-forest-700) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
body.oasis-redesign div.product .variations select:focus {
  outline: 0 !important;
  border-color: var(--ol-forest-700) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ol-forest-700) 18%, transparent) !important;
}
body.oasis-redesign div.product .reset_variations {
  font-size: 0.78rem;
  color: var(--ol-forest-700);
  text-decoration: underline;
}

/* Quantity stepper */
body.oasis-redesign div.product form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  margin-right: var(--sp-3) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent) !important;
  background: var(--ol-cream-50) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
body.oasis-redesign div.product form.cart input.qty {
  width: 60px !important;
  height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: var(--ol-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ol-forest-900) !important;
}

/* Add to cart button — premium dark pill */
body.oasis-redesign div.product form.cart .single_add_to_cart_button,
body.oasis-redesign:not(.home) div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 var(--sp-7) !important;
  background: var(--ol-forest-900) !important;
  background-color: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border: 1px solid var(--ol-forest-900) !important;
  border-radius: 999px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px -16px rgba(20,32,26,.5) !important;
  transition: transform .15s var(--ol-ease), box-shadow .2s var(--ol-ease), background .2s var(--ol-ease) !important;
}
body.oasis-redesign div.product form.cart .single_add_to_cart_button:hover {
  transform: translateY(-1px) !important;
  background: color-mix(in oklab, var(--ol-forest-900) 88%, black) !important;
  box-shadow: 0 16px 32px -14px rgba(20,32,26,.55) !important;
}

/* WC variation availability + description */

/* Product meta (SKU / cats / tags) */

/* Loyalty earn message — soften the hot orange callout */
body.oasis-redesign div.product .wlr-product-message {
  margin: var(--sp-3) 0 !important;
  padding: 8px 14px !important;
  background: color-mix(in oklab, var(--ol-guide-olive) 14%, transparent) !important;
  color: var(--ol-forest-800) !important;
  border: 1px dashed color-mix(in oklab, var(--ol-forest-700) 30%, transparent) !important;
  border-radius: 8px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
}

/* COA Manager card — keep its own styling but harmonize */
body.oasis-redesign .oasis-coa-card {
  /* Shared card language: white pop + tan hairline + forest left-accent. */
  background: #fff !important;
  border: 1px solid #D9D3C3 !important;
  border-left: 3px solid var(--ol-forest-700) !important;
  border-radius: var(--ol-radius-md) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
}
body.oasis-redesign .oasis-coa-download-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border-radius: 999px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
body.oasis-redesign .oasis-coa-download-btn:hover {
  background: color-mix(in oklab, var(--ol-forest-900) 88%, black) !important;
}

/* Tabs */

/* The "NOTICE" / RUO block — tone down to a soft compliance card.
   Target the Kadence row by id (this is the regulatory disclaimer row
   in the legacy WooTemplate) and any sibling row that wraps it. */

/* Related products — premium grid */

/* Dead my-classes */

/* ============================================================
   FINAL PRODUCT-PAGE CONTRAST + ATC OVERRIDES
   These selectors are intentionally extra-specific so they
   beat Kadence Pro's wootemplate `:not(.home) button` resets
   and stay correct on mobile + every variant state.
   ============================================================ */

body.oasis-redesign.single-product div.product .single_add_to_cart_button,
body.oasis-redesign.single-product:not(.home) div.product .single_add_to_cart_button,
body.oasis-redesign.single-product div.product form.cart button.single_add_to_cart_button,
body.oasis-redesign.single-product:not(.home) div.product form.cart button.single_add_to_cart_button {
  background: #2F3320 !important;
  background-color: #2F3320 !important;
  background-image: none !important;
  color: #F5F0E6 !important;
  border: 1px solid #2F3320 !important;
  border-radius: 999px !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 var(--sp-7) !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px -16px rgba(20,32,26,.5) !important;
}
body.oasis-redesign.single-product div.product .single_add_to_cart_button:hover,
body.oasis-redesign.single-product:not(.home) div.product .single_add_to_cart_button:hover {
  background: #1B2419 !important;
  background-color: #1B2419 !important;
  transform: translateY(-1px) !important;
}

/* "Free shipping over $150" inline tag */

/* Keep the price line clean: brief-shipping isn't a flex item that should
   wrap inline with the digits — push it onto its own row. */
body.oasis-redesign div.product .price:has(.brief-shipping-details) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

/* Mobile tightening for product page */
@media (max-width: 900px) {
  
  body.oasis-redesign div.product h1.product_title {
  }
  body.oasis-redesign div.product form.cart {
    padding: var(--sp-4) !important;
  }
}

/* ---- Breadcrumb ---- */

/* ---- Hero grid ---- */
body.oasis-redesign .ol-product-hero {
  padding: var(--sp-2) 0 var(--sp-12);
}
body.oasis-redesign .ol-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  align-items: start;
}

/* ---- Gallery card ---- */
body.oasis-redesign .ol-product-gallery {
  position: relative;
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent);
  border-radius: var(--ol-radius-lg);
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  box-shadow: 0 30px 60px -40px rgba(20,32,26,.25);
  overflow: hidden;
}
body.oasis-redesign .ol-product-gallery .woocommerce-product-gallery {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
body.oasis-redesign .ol-product-gallery .woocommerce-product-gallery__wrapper,
body.oasis-redesign .ol-product-gallery .woocommerce-product-gallery__image {
  border-radius: var(--ol-radius-md);
  overflow: hidden;
}
body.oasis-redesign .ol-product-gallery .woocommerce-product-gallery__image img,
body.oasis-redesign .ol-product-gallery img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--ol-radius-md);
  display: block;
}

body.oasis-redesign .ol-product-gallery__badge {
  position: absolute;
  bottom: clamp(var(--sp-4), 2vw, var(--sp-6));
  left: clamp(var(--sp-4), 2vw, var(--sp-6));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: color-mix(in oklab, var(--ol-forest-900) 92%, transparent);
  color: var(--ol-cream-50);
  font-family: var(--ol-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 24px -12px rgba(20,32,26,.5);
  z-index: 4;
}

/* ---- Buy panel ---- */
body.oasis-redesign .ol-product-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 0;
}
body.oasis-redesign .ol-product-info__eyebrow { align-self: flex-start; }

body.oasis-redesign .ol-product-info .product_title,
body.oasis-redesign .ol-product-info h1.product_title {
  font-family: var(--ol-font-display) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--ol-forest-900) !important;
  margin: var(--sp-2) 0 0 !important;
  padding: 0 !important;
}

body.oasis-redesign .ol-product-info .price,
body.oasis-redesign .ol-product-info p.price {
  font-family: var(--ol-font-body) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  color: var(--ol-forest-900) !important;
  margin: var(--sp-2) 0 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Variation form / cart ---- */

body.oasis-redesign .ol-product-info form.cart table.variations {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}
body.oasis-redesign .ol-product-info form.cart table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 var(--sp-2);
}
body.oasis-redesign .ol-product-info form.cart table.variations td,
body.oasis-redesign .ol-product-info form.cart table.variations th {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.oasis-redesign .ol-product-info form.cart table.variations label {
  font-family: var(--ol-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-ink-900) 64%, transparent);
  margin: 0;
}
body.oasis-redesign .ol-product-info form.cart .reset_variations { font-size: 0.75rem; color: var(--ol-forest-700); }

/* Variant selects -> pill look */
body.oasis-redesign .ol-product-info form.cart select {
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--ol-cream-50) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 16%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.9rem !important;
  color: var(--ol-ink-900) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ol-forest-700) 50%), linear-gradient(135deg, var(--ol-forest-700) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Quantity stepper */
body.oasis-redesign .ol-product-info form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent);
  border-radius: 999px;
  background: var(--ol-cream-50);
  overflow: hidden;
  height: 50px;
  flex: 0 0 auto;
}
body.oasis-redesign .ol-product-info form.cart .quantity input.qty {
  width: 56px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: var(--ol-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ol-forest-900) !important;
  -moz-appearance: textfield;
}
body.oasis-redesign .ol-product-info form.cart .quantity input::-webkit-outer-spin-button,
body.oasis-redesign .ol-product-info form.cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ATC button row */

body.oasis-redesign .ol-product-info form.cart .single_add_to_cart_button,
body.oasis-redesign:not(.home) .ol-product-info form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 var(--sp-6) !important;
  background: var(--ol-forest-900) !important;
  background-color: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border: 1px solid var(--ol-forest-900) !important;
  border-radius: 999px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 28px -16px rgba(20,32,26,.5) !important;
  transition: transform .15s var(--ol-ease), box-shadow .2s var(--ol-ease), background .2s var(--ol-ease) !important;
}
body.oasis-redesign .ol-product-info form.cart .single_add_to_cart_button:hover {
  background: color-mix(in oklab, var(--ol-forest-900) 86%, black) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 32px -14px rgba(20,32,26,.55) !important;
}
/* Wrap qty + ATC on a single row */
body.oasis-redesign .ol-product-info form.cart > .quantity,
body.oasis-redesign .ol-product-info form.cart > .single_add_to_cart_button {
  margin: 0 !important;
}
body.oasis-redesign .ol-product-info form.cart { margin: var(--sp-2) 0 0 !important;padding: var(--sp-5) !important;background: color-mix(in oklab, var(--ol-cream-50) 92%, white);border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent);border-radius: var(--ol-radius-md);display: flex;flex-direction: column;gap: var(--sp-3);align-items: stretch; }
body.oasis-redesign .ol-product-info form.cart::after {
  content: ""; display: block; height: 0;
}

/* Variations description */
body.oasis-redesign .ol-product-info .single_variation_wrap {
  margin-top: 0 !important;
}

/* SKU / cats / tags meta */

/* ---- Assurance pills row ---- */
body.oasis-redesign .ol-product-info__assurances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.oasis-redesign .ol-product-info__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--ol-cream-50) 86%, white);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent);
  border-radius: var(--ol-radius-sm);
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ol-forest-900);
}
body.oasis-redesign .ol-product-info__assurances svg {
  color: var(--ol-forest-700);
  flex: 0 0 auto;
}
body.oasis-redesign .ol-product-info__shipnote {
  font-family: var(--ol-font-body);
  font-size: 0.72rem;
  color: color-mix(in oklab, var(--ol-ink-900) 58%, transparent);
  margin: 0;
}

/* ---- Existing COA card (oasis-coa-manager output) ---- */
body.oasis-redesign .ol-product-info .oasis-coa-card,
body.oasis-redesign .ol-product-info [class*="coa-card"],
body.oasis-redesign .ol-product-info [class*="oasis-coa"] {
  margin: var(--sp-3) 0 0 !important;
}

/* ============================================================
   PRODUCT DETAIL — tabs + related
   ============================================================ */

body.oasis-redesign .ol-product-detail {
  padding: var(--sp-12) 0 0;
}
body.oasis-redesign .ol-product-detail .woocommerce-tabs {
  margin: 0 0 var(--sp-12) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs {
  display: flex !important;
  gap: 4px;
  list-style: none !important;
  margin: 0 0 var(--sp-6) !important;
  padding: 0 !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 12%, transparent) !important;
  background: transparent !important;
}
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li,
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li.active {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li::before,
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li::after { display: none !important; }
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li a {
  display: inline-flex !important;
  padding: 14px 20px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, var(--ol-ink-900) 60%, transparent) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  transition: color .2s var(--ol-ease), border-color .2s var(--ol-ease);
}
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li.active a,
body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li a:hover {
  color: var(--ol-forest-900) !important;
  border-bottom-color: var(--ol-forest-900) !important;
}
body.oasis-redesign .ol-product-detail .woocommerce-Tabs-panel {
  padding: var(--sp-4) 0 !important;
  font-family: var(--ol-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in oklab, var(--ol-ink-900) 86%, transparent);
}
body.oasis-redesign .ol-product-detail .woocommerce-Tabs-panel h2 {
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, var(--ol-ink-900) 56%, transparent) !important;
  margin: 0 0 var(--sp-4) !important;
}
body.oasis-redesign .ol-product-detail .woocommerce-Tabs-panel p {
  margin: 0 0 var(--sp-3);
}
body.oasis-redesign .ol-product-detail .woocommerce-Tabs-panel strong { color: var(--ol-forest-900); font-weight: 600; }

/* Related / upsell heading */
body.oasis-redesign .ol-product-detail .related > h2,
body.oasis-redesign .ol-product-detail .upsells > h2 {
  font-family: var(--ol-font-display) !important;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
  font-weight: 500 !important;
  color: var(--ol-forest-900) !important;
  margin: var(--sp-8) 0 var(--sp-6) !important;
  text-align: left;
}
body.oasis-redesign .ol-product-detail .related ul.products,
body.oasis-redesign .ol-product-detail .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---- Sticky mobile buy bar ---- */
body.oasis-redesign .ol-product-sticky { display: none; }

/* ============================================================
   PRODUCT — mobile
   ============================================================ */
@media (max-width: 900px) {
  body.oasis-redesign.single-product .ol-product-shell,
body.oasis-redesign:not(.home).single-product .ol-product-shell {
    padding-top: calc(34px + 64px + var(--sp-4)) !important;
    padding-bottom: calc(var(--sp-12) + 70px) !important; /* room for sticky bar */
  }
  body.oasis-redesign .ol-product-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }
  body.oasis-redesign .ol-product-hero {
    padding: 0 0 var(--sp-6);
  }
  body.oasis-redesign .ol-product-gallery {
    padding: var(--sp-4) !important;
  }
  body.oasis-redesign .ol-product-info .product_title {
  }
  body.oasis-redesign .ol-product-info__assurances {
    grid-template-columns: 1fr 1fr !important;
  }
  body.oasis-redesign .ol-product-detail .related ul.products,
body.oasis-redesign .ol-product-detail .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-4) !important;
  }
  body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  body.oasis-redesign .ol-product-detail ul.tabs.wc-tabs li a {
    padding: 12px 14px !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
  }

  /* Sticky bottom buy bar */
  body.oasis-redesign .ol-product-sticky {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 400;
    background: color-mix(in oklab, var(--ol-cream-50) 96%, white);
    border-top: 1px solid color-mix(in oklab, var(--ol-forest-900) 12%, transparent);
    box-shadow: 0 -8px 24px -16px rgba(20,32,26,.35);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  body.oasis-redesign .ol-product-sticky__inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body.oasis-redesign .ol-product-sticky__price {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  body.oasis-redesign .ol-product-sticky__title {
    font-family: var(--ol-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--ol-ink-900) 60%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.oasis-redesign .ol-product-sticky__amount {
    font-family: var(--ol-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ol-forest-900);
  }
  
  
  body.oasis-redesign .ol-product-sticky__btn,
body.oasis-redesign:not(.home) .ol-product-sticky__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 18px;
    background: var(--ol-forest-900);
    color: var(--ol-cream-50) !important;
    border: 1px solid var(--ol-forest-900);
    border-radius: 999px;
    font-family: var(--ol-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 8px 18px -10px rgba(20,32,26,.45);
  }
}

/* ============================================================
   PRODUCT — tablet
   ============================================================ */
@media (max-width: 1100px) and (min-width: 901px) {
  body.oasis-redesign .ol-product-grid {
    gap: var(--sp-8);
  }
  body.oasis-redesign .ol-product-info .product_title {
    font-size: 2.4rem !important;
  }
}

/* ============================================================
   SINGLE PRODUCT — tighten dead space, flatten frames, edge-to-edge
   Cascade-last overrides for the Kadence WooTemplate skin.
   Targets: top padding stack, breadcrumb pill, nested gallery
   frame, oversized horizontal gutters.
   ============================================================ */

/* 1. Kill the double header-offset stack on the first row.
      main#inner-wrap already reserves 34+76px; the row was adding
      another header-offset on top, creating ~140px dead space. */

/* 2. Tighten the outer template wrap so content reaches closer
      to viewport edges. */

/* 3. Tighten breadcrumb row + remove the cream pill frame around
      the breadcrumb so it reads as a slim navigation line. */

/* 4. Flatten gallery: keep one frame on the legacy gallery wrapper and
      strip the redundant inner column-wrap frame. */

/* 5. Flatten the buy-panel: the form.cart had its own cream
      card on top of the gallery card on top of the page bg —
      let it be borderless so the title/price/CTA stand alone. */
body.oasis-redesign div.product form.cart { margin: var(--sp-3) 0 0 !important;padding: 0 !important;background: transparent !important;border: 0 !important;border-radius: var(--ol-radius-md) !important;box-shadow: none !important; }

/* 6. Tighten the spacing between hero row and the rows below
      (tabs, COA, related). Only set top + inline so each block
      can keep its own bottom margin (the notice needs extra). */

/* 7. Mobile: edge-to-edge content, header-only top padding. */

/* ============================================================
   RELATED PRODUCTS — clean editorial tile (rebuild)
   The Kadence loop renders nested .content-bg surfaces:
   li.entry.content-bg > a.image + div.product-details.content-bg.
   That stacked two cream cards inside the outer wrap (3 frames).
   This block flattens it: ONE outer card, image flush to top,
   borderless title/price stack below, single CTA at the bottom.
   Also caps to 4 visible tiles so the row is never orphaned.
   ============================================================ */

/* Outer related section — drop the wrap card so tiles become the
   primary surface, and tighten the heading. */

/* Grid: 4 columns desktop, 3 tablet, 2 mobile. Cap to 4 visible
   tiles so we never get a single orphan in the last row. */
/* Cap to 4 visible tiles globally — never an orphaned last row.
   Specificity matched to the .entry.content-bg flex rule above. */

/* Tile: one frame, image flush to top, content stacks below. */

/* Image: flush to the top edge of the tile, soft cream backdrop. */

/* Strip the inner .product-details cream card — let title/price flow. */

/* Title and price */

/* Hide the loyalty "earn N points" pill — clutter on grid tiles. */

/* Action wrap + CTA: sticks to the bottom of the tile, full width. */

/* ============================================================
   SINGLE PRODUCT — buy panel reorder + density tightening
   On mobile especially, the customer should hit Add-to-Cart fast.
   Reorder via flex: title → shipping → badges → price → variants
   → qty/CTA → loyalty message (after CTA, not before it).
   Tighten title, shipping line, and badge sizes throughout.
   ============================================================ */

/* Flexify the inner buy column so we can re-order children. */
/* And flexify the add-to-cart wrap so the loyalty message can
   be re-ordered to render below the Add to Cart button. */

/* Reorder direct children of the legacy builder column.
   Lower numbers render earlier visually. */

/* The "Free Shipping" Kadence advanced heading block. */

/* Within the legacy add-to-cart wrapper: form (with cart button) FIRST,
   then the loyalty message AFTER the Add to Cart button, then
   the inline COA widget so it doesn't interrupt the buy flow. */

/* Style the "Free Shipping" Kadence advanced heading as a small
   inline pill instead of the giant page heading it defaults to. */

/* --- Tighter title -------------------------------------- */
body.oasis-redesign div.product h1.product_title { order: 2 !important;line-height: 1.05 !important;margin: var(--sp-2) 0 var(--sp-3) !important; }

/* --- Smaller, inline shipping line ---------------------- */

/* --- Compact trust badges row --------------------------- */

/* Tighter price block (and pull variants right under it) */
body.oasis-redesign div.product p.price { order: 5 !important;margin: var(--sp-2) 0 var(--sp-3) !important;font-size: clamp(1.25rem, 3.2vw, 1.65rem) !important; }

/* Mobile-only: tightest spacing + single-column trust badges */
@media (max-width: 700px) {
  body.oasis-redesign div.product h1.product_title {
    font-size: 1.7rem !important;
    margin: var(--sp-2) 0 8px !important;
  }
  
  /* One badge per row on mobile so they read at a glance. */
  /* Tighter gap between badges and price + below price */
  body.oasis-redesign div.product p.price {
    margin: 4px 0 8px !important;
    font-size: 1.4rem !important;
  }
  body.oasis-redesign div.product table.variations th.label {
    margin: 0 0 6px !important;
    font-size: 0.66rem !important;
  }
}

/* --- Hide the duplicate variant price block ---
   The top legacy price wrapper is JS-updated, so the variant price
   inside .single_variation is redundant. */

body.oasis-redesign div.product .single_variation {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* The single stock pill — only one, immediately under the price.
   Order 5 matches the price; DOM order keeps the pill after the
   price (render_block appends it as a sibling of the price <p>). */
body.oasis-redesign div.product .ol-stock-pill {
  order: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  align-self: flex-start !important;
  margin: 0 0 var(--sp-2) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
body.oasis-redesign div.product .ol-stock-pill--in-stock {
  background: color-mix(in oklab, #16A34A 12%, transparent) !important;
  color: #166534 !important;
  border: 1px solid color-mix(in oklab, #16A34A 30%, transparent) !important;
}
body.oasis-redesign div.product .ol-stock-pill--in-stock::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16A34A;
  box-shadow: 0 0 0 2px color-mix(in oklab, #16A34A 28%, transparent);
}

/* Hide every other stock-rendering element so there's exactly
   one pill on every product page (the .ol-stock-pill above). */

/* Tighten the entire form chain: variant pills → qty → ATC.
   Specificity boosted to beat the existing high-specificity
   table styles in earlier sections of this file. */
body.oasis-redesign.single-product div.product form.cart,
body.oasis-redesign.single-product:not(.home) div.product form.cart,
body.oasis-redesign div.product form.cart {
  margin-top: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.oasis-redesign.single-product div.product table.variations,
body.oasis-redesign.single-product:not(.home) div.product table.variations,
body.oasis-redesign div.product table.variations {
  margin: 0 !important;
}
body.oasis-redesign.single-product div.product table.variations tbody,
body.oasis-redesign.single-product div.product table.variations tr,
body.oasis-redesign div.product table.variations tbody,
body.oasis-redesign div.product table.variations tr {
  margin: 0 !important;
  padding: 0 !important;
}
body.oasis-redesign.single-product div.product table.variations td,
body.oasis-redesign.single-product div.product table.variations td.value,
body.oasis-redesign div.product table.variations td,
body.oasis-redesign div.product table.variations td.value {
  padding: 0 !important;
  margin: 0 !important;
}
body.oasis-redesign.single-product div.product table.variations th.label,
body.oasis-redesign div.product table.variations th.label {
  margin: 0 0 6px !important;
  padding: 0 !important;
}
/* Hide the "Clear" reset link — taking visible space and the
   user can simply click a different variant pill to switch.
   Also hide the screen-reader alert that contributes 1px gap. */
body.oasis-redesign div.product a.reset_variations,
body.oasis-redesign div.product .reset_variations_alert {
  display: none !important;
}
body.oasis-redesign div.product .single_variation_wrap { margin-top: var(--sp-3) !important;margin: 8px 0 0 !important;padding: 0 !important;gap: 0 !important; }
body.oasis-redesign div.product .woocommerce-variation-add-to-cart {
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}
body.oasis-redesign div.product .quantity,
body.oasis-redesign div.product .ol-qty-wrap {
  margin: 0 !important;
}
body.oasis-redesign div.product .single_add_to_cart_button {
  margin: 0 !important;
}

/* Loyalty message: hugged to ATC button, with breathing room
   below before the COA card so it visually belongs to the cart.
   Specificity boost to beat any inline / Kadence-wrap rules. */

/* ============================================================
   SINGLE PRODUCT — variant pills, sale visibility, qty +/-, tabs
   Same pill aesthetic as the shop catalog, plus stronger sale
   treatment and a stepper-style quantity control.
   ============================================================ */

/* --- Variant pills on the single product page -------------- */
body.oasis-redesign div.product form.cart .variations,
body.oasis-redesign div.product form.cart table.variations {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 0 var(--sp-3) !important;
  padding: 0 !important;
  width: 100% !important;
}
body.oasis-redesign div.product table.variations,
body.oasis-redesign div.product table.variations tbody,
body.oasis-redesign div.product table.variations tr,
body.oasis-redesign div.product table.variations td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* "Size:" label as a small uppercase eyebrow above the pill row */
body.oasis-redesign div.product table.variations th.label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, var(--ol-ink-900) 64%, transparent) !important;
}
body.oasis-redesign div.product table.variations th.label label {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide the fallback native <select> and the "Clear" link until needed */
body.oasis-redesign div.product a.reset_variations {
  display: none !important;
  margin-top: 8px !important;
  font-size: 0.7rem !important;
  color: color-mix(in oklab, var(--ol-ink-900) 56%, transparent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* --- Sale price visibility -------------------------------- */
/* The standard "Sale!" flash from woocommerce_show_product_sale_flash. */

/* Sale price markup: del + ins on the same line.
   The inner <span class="price"> wrapper, the <del>, and the <ins>
   all need to be inline so they sit horizontally. */

/* "You save $X (Y%)" pill rendered by JS below the price block. */

/* --- Quantity stepper (+ / −) ----------------------------- */
/* The .ol-qty-wrap class is added by the JS in functions.php. */

/* --- Description / COA tabs polish ------------------------
   Active = filled dark pill, Inactive = outlined muted pill.
   Reset Kadence's older "olive bg" active rule cleanly. */

/* [removed] "Product card hover lift — disabled everywhere" relic. This was a
   dead override from when hover was turned off site-wide; product-cards.css now
   owns the unified lift/zoom motion and out-orders it, so this block only added
   a conflicting transform:none / .2s transition that lost. Deleted in the card
   consolidation sweep. */

/* Kadence's "Action on Hover" pattern translates .product-details
   up ~32px on hover to reveal the Add-to-Cart button hidden below.
   Disable the slide entirely and keep the action wrap always
   visible. This was the actual "title/price/button moving up". */

/* Kill the image scale that lived inside .ol-shop-body cards
   and any product-card image hover effect across the site. */

/* ============================================================
   ABOUT US — editorial layout
   ============================================================ */

/* Title override — !important needed because the mobile rule
   `body.oasis-redesign:not(.home) .ol-page-title` outranks
   `.ol-page-title--about` on specificity. */
body.oasis-redesign .ol-page-title--about,
body.oasis-redesign:not(.home) .ol-page-title--about {
  max-width: 26ch !important;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
}

/* Hide the generic page intro on the about page — the founder
   copy below is the real intro. */

/* Trim hero padding for about so the founder copy isn't pushed
   way down the page after the title block. */
body.oasis-redesign .ol-page-about-us .ol-page-hero__inner {
  padding-top: calc(var(--ol-page-header-offset) + var(--sp-2)) !important;
  padding-bottom: var(--sp-6) !important;
}

body.oasis-redesign .ol-page-about-us .ol-page-hero {
  min-height: 0 !important;
}

/* Eyebrow → title gap, title → pills gap on about page. */
body.oasis-redesign .ol-page-about-us .ol-page-title--about {
  margin-top: var(--sp-3) !important;
}
body.oasis-redesign .ol-page-about-us .ol-page-proofline {
  margin-top: var(--sp-4) !important;
}

body.oasis-redesign .ol-page-about-us .ol-page-body {
  padding-block: clamp(var(--sp-8), 4vw, var(--sp-16)) !important;
}

body.oasis-redesign .ol-about-page {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* HERO ===================================================== */
/* The rebuild dropped the vial graphic entirely; the story runs beside it. */
body.oasis-redesign .ol-about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

body.oasis-redesign .ol-about-hero__copy {
  max-width: 62ch;
  min-width: 0;
}

body.oasis-redesign .ol-about-hero__figure {
  min-width: 0;
  margin: 0;
}

body.oasis-redesign .ol-about-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ol-radius-card, 20px);
  box-shadow: 0 30px 70px -45px rgba(20, 32, 26, .55);
}

@media (max-width: 860px) {
  body.oasis-redesign .ol-about-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  body.oasis-redesign .ol-about-hero__figure {
    order: -1;              /* graphic leads on narrow screens */
    max-width: 460px;
    margin-inline: auto;
  }
}

body.oasis-redesign .ol-about-hero__copy p {
  margin: 0 0 1.1em !important;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem) !important;
  line-height: 1.75 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 78%, transparent) !important;
}

body.oasis-redesign .ol-about-hero__copy .ol-about-hero__lead {
  margin-bottom: 1em !important;
  font-family: var(--ol-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  font-weight: 500;
  line-height: 1.42 !important;
  color: var(--ol-forest-900) !important;
}

body.oasis-redesign .ol-about-hero__copy p:last-child {
  margin-bottom: 0 !important;
}

body.oasis-redesign .ol-about-statement {
  position: relative;
  margin: 0;
  padding: clamp(1.8rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: 24px;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  text-align: center;
}

body.oasis-redesign .ol-about-statement::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in oklab, var(--ol-cream-50) 18%, transparent);
  border-radius: 18px;
  pointer-events: none;
}

body.oasis-redesign .ol-about-statement p {
  position: relative;
  max-width: 28ch;
  margin: 0 auto !important;
  font-family: var(--ol-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 600;
  line-height: 1.12 !important;
  color: inherit !important;
}

/* HOW IT WORKS ============================================= */
body.oasis-redesign .ol-about-process {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
  background: color-mix(in oklab, var(--ol-forest-900) 96%, #000);
  color: var(--ol-cream-50);
  border-radius: 28px;
  box-shadow: 0 32px 80px -40px rgba(20, 32, 26, 0.45);
}

body.oasis-redesign .ol-about-process__head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

body.oasis-redesign .ol-about-process__head .ol-section-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in oklab, var(--ol-cream-50) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ol-cream-50) 6%, transparent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-cream-50) 88%, transparent);
}

body.oasis-redesign .ol-about-process__head h2 {
  margin: 0 0 0.6rem !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  line-height: 1.15 !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-about-process__head p {
  margin: 0 !important;
  font-size: 1rem;
  color: color-mix(in oklab, var(--ol-cream-50) 75%, transparent);
}

body.oasis-redesign .ol-about-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.oasis-redesign .ol-about-process__step {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: color-mix(in oklab, var(--ol-cream-50) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--ol-cream-50) 14%, transparent);
  border-radius: 18px;
}

body.oasis-redesign .ol-about-process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  margin-bottom: 1rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--ol-cream-50);
  color: var(--ol-forest-900);
  font-family: var(--ol-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body.oasis-redesign .ol-about-process__step h3 {
  margin: 0 0 0.6rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-about-process__step p {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: color-mix(in oklab, var(--ol-cream-50) 72%, transparent) !important;
}

/* WHY OASIS LABS =========================================== */
body.oasis-redesign .ol-about-why__head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

body.oasis-redesign .ol-about-why__head .ol-section-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}

body.oasis-redesign .ol-about-why__head h2 {
  margin: 0 !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  line-height: 1.15 !important;
  color: var(--ol-ink-900) !important;
}

body.oasis-redesign .ol-about-proof .ol-about-why__head h2 {
  font-family: var(--ol-font-display, "Cormorant Garamond", Georgia, serif);
}

body.oasis-redesign .ol-about-why__head > p {
  margin: 0.7rem 0 0 !important;
  font-size: 1rem !important;
  color: color-mix(in oklab, var(--ol-ink-900) 68%, transparent) !important;
}

body.oasis-redesign .ol-about-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

body.oasis-redesign .ol-about-why__card {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  /* Shared card language: white pop + tan hairline + forest left-accent. */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: 20px;
  box-shadow: 0 14px 40px -28px rgba(20, 32, 26, 0.25);
  transition: box-shadow 0.25s var(--ol-ease), border-color 0.25s var(--ol-ease);
}

body.oasis-redesign .ol-about-why__card:hover {
  box-shadow: 0 20px 50px -28px rgba(20, 32, 26, 0.32);
  border-color: color-mix(in oklab, var(--ol-forest-900) 20%, transparent);
}

body.oasis-redesign .ol-about-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: color-mix(in oklab, var(--ol-forest-900) 92%, #000);
  color: var(--ol-cream-50);
}

body.oasis-redesign .ol-about-why__card h3 {
  margin: 0 0 0.7rem !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ol-ink-900) !important;
}

body.oasis-redesign .ol-about-why__card p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 72%, transparent) !important;
}

/* Native, searchable replacement for the former raster infographic. */
body.oasis-redesign .ol-about-proof__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

body.oasis-redesign .ol-about-proof__card {
  height: 100%;
}

/* RESPONSIVE =============================================== */
@media (max-width: 960px) {
  body.oasis-redesign .ol-about-hero {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  
  body.oasis-redesign .ol-about-process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.oasis-redesign .ol-about-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.oasis-redesign .ol-about-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  /* Title — fit "We Raise The Bar," / "For Scientific Research"
     on two clean lines on phones. Tighter tracking maximizes
     the size we can use without "For Scientific Research"
     wrapping to a third line. */
  body.oasis-redesign .ol-page-title--about,
body.oasis-redesign:not(.home) .ol-page-title--about {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.4vw, 2.9rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.022em !important;
  }

  body.oasis-redesign .ol-about-page {
    gap: 2.5rem;
  }

  
  

  body.oasis-redesign .ol-about-hero__copy p {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1em !important;
  }
  body.oasis-redesign .ol-about-hero__copy .ol-about-hero__lead {
    font-size: 1.3rem !important;
    line-height: 1.42 !important;
  }
  body.oasis-redesign .ol-about-statement {
    padding: 1.8rem 1.4rem;
    border-radius: 20px;
  }
  body.oasis-redesign .ol-about-statement::before {
    inset: 6px;
    border-radius: 15px;
  }

  body.oasis-redesign .ol-about-process {
    padding: 2rem 1.1rem;
    border-radius: 22px;
  }
  body.oasis-redesign .ol-about-process__head {
    margin-bottom: 1.6rem;
  }
  body.oasis-redesign .ol-about-process__head h2 {
    font-size: 1.5rem !important;
  }
  body.oasis-redesign .ol-about-process__head p {
    font-size: 0.92rem;
  }
  body.oasis-redesign .ol-about-process__grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  body.oasis-redesign .ol-about-process__step {
    padding: 1.1rem 1.1rem 1.2rem;
  }
  body.oasis-redesign .ol-about-process__num {
    height: 24px;
    min-width: 38px;
    margin-bottom: 0.6rem;
    font-size: 0.66rem;
  }
  body.oasis-redesign .ol-about-process__step h3 {
    margin-bottom: 0.4rem !important;
    font-size: 0.98rem !important;
  }
  body.oasis-redesign .ol-about-process__step p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }

  body.oasis-redesign .ol-about-why__head {
    margin-bottom: 1.6rem;
  }
  body.oasis-redesign .ol-about-why__head h2 {
    font-size: 1.5rem !important;
  }
  body.oasis-redesign .ol-about-why__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  body.oasis-redesign .ol-about-proof__grid {
    grid-template-columns: 1fr;
  }
  body.oasis-redesign .ol-about-why__card {
    padding: 1.25rem 1.25rem 1.4rem;
    border-radius: 16px;
  }
  body.oasis-redesign .ol-about-why__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 0.85rem;
    border-radius: 11px;
  }
  body.oasis-redesign .ol-about-why__card h3 {
    margin-bottom: 0.45rem !important;
    font-size: 1rem !important;
  }
  body.oasis-redesign .ol-about-why__card p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }
}

/* Desktop polish ============================================ */
@media (min-width: 961px) {
  /* Hero balance — copy gets the wider column, figure stays proportional.
     This was display:block while the figure was absent; that collapsed the
     grid and dropped the vial below the copy instead of beside it. */
  body.oasis-redesign .ol-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }

  body.oasis-redesign .ol-about-hero__copy {
    align-self: center;
  }
  body.oasis-redesign .ol-about-hero__copy p {
    font-size: 1.06rem !important;
    line-height: 1.78 !important;
    margin-bottom: 1.25em !important;
  }

  /* Process: a touch more breathing room around the cards. */
  body.oasis-redesign .ol-about-process__grid {
    gap: 1.2rem;
  }
  body.oasis-redesign .ol-about-process__step {
    padding: 1.8rem 1.6rem;
  }
}

/* ============================================================
   PRODUCT PAGE (Kadence WooTemplate) — desktop polish
   ============================================================ */

/* Price + savings pill inline on desktop. Pill is appended
   inside the legacy price wrapper by ol-savings-pill JS, so the flex
   wrap here puts del/ins on the left and the pill snug right
   beside them. min-height reserves space for the pill so the
   price block never grows / pushes the cart row down when a
   variant is selected. */
@media (min-width: 901px) {
  body.oasis-redesign div.product p.price {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
  }
  

  /* Trust pills — squeeze onto one row on desktop. */

  /* Form.cart uses a 2-col CSS grid (96px + rest) which pushes
     the variant table 96px right of the column edge. Override
     to flex-wrap so simple products lay out qty + ATC side by
     side, and variable products' table.variations + variation
     wrap span the full row above the cart row. */
  body.oasis-redesign.single-product div.product form.cart,
body.oasis-redesign.single-product form.cart,
body.oasis-redesign div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  /* Variant table + the inner variation wrap should always
     take the full row so the cart row sits below them. */
  body.oasis-redesign.single-product form.cart > table.variations,
body.oasis-redesign.single-product form.cart > .single_variation_wrap,
body.oasis-redesign.single-product form.cart > .woocommerce-variation,
body.oasis-redesign.single-product form.cart > .reset_variations_alert {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* Add-to-Cart row — lock qty stepper and button widths so
     they don't change between the disabled (no variant) and
     enabled (variant selected) states. Without these locks
     Kadence renders qty wider when disabled, which then shifts
     the button width and causes a visible jump on click. */
  body.oasis-redesign.single-product .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  body.oasis-redesign.single-product form.cart input.qty {
    width: 60px !important;
    flex: 0 0 60px !important;
  }
  body.oasis-redesign.single-product form.cart .single_add_to_cart_button,
body.oasis-redesign.single-product div.product form.cart button.single_add_to_cart_button,
body.oasis-redesign.single-product:not(.home) div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 220px !important;
    padding: 0 28px !important;
    white-space: nowrap !important;
  }
}

/* Related products — equalize card heights and align titles,
   prices, and CTAs across all 4 cards on desktop. Also kill
   Kadence's "action on hover" animation that hides the ATC
   below the card edge and reveals it on hover (which clips
   when overflow:hidden is applied). */
/* Disable the slide-up reveal on .product-details — keep the
   add-to-cart visible at all times. */
/* Kadence renders Continue/Loading/Done SVG icons side-by-side
   in the cart button, blowing out its width on narrow related
   cards. Hide them — text-only button keeps the row tidy. */

/* ============================================================
   EDITORIAL CONTENT PAGES
   Shared styling for COA Process, COA Library, FAQ, Contact,
   and My Account. Matches the About Us treatment: tightened
   hero spacing, kicker eyebrow, two-line title, and editorial
   body sections that scale gracefully on mobile.
   ============================================================ */

/* Editorial title — same scale + line-break behaviour as About */
body.oasis-redesign .ol-page-title--editorial,
body.oasis-redesign:not(.home) .ol-page-title--editorial {
  max-width: 26ch !important;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
}

body.oasis-redesign .ol-page-title--editorial br {
  display: block;
}

/* Tightened hero padding for every editorial page. */
body.oasis-redesign .ol-page-certifications .ol-page-hero__inner,
body.oasis-redesign .ol-page-coa-process .ol-page-hero__inner,
body.oasis-redesign .ol-page-faq .ol-page-hero__inner,
body.oasis-redesign .ol-page-contact .ol-page-hero__inner,
body.oasis-redesign .ol-page-my-account .ol-page-hero__inner {
  padding-top: calc(var(--ol-page-header-offset) + var(--sp-2)) !important;
  padding-bottom: var(--sp-6) !important;
}

body.oasis-redesign .ol-page-certifications .ol-page-hero,
body.oasis-redesign .ol-page-coa-process .ol-page-hero,
body.oasis-redesign .ol-page-faq .ol-page-hero,
body.oasis-redesign .ol-page-contact .ol-page-hero,
body.oasis-redesign .ol-page-my-account .ol-page-hero {
  min-height: 0 !important;
}

body.oasis-redesign .ol-page-certifications .ol-page-title--editorial,
body.oasis-redesign .ol-page-coa-process .ol-page-title--editorial,
body.oasis-redesign .ol-page-faq .ol-page-title--editorial,
body.oasis-redesign .ol-page-contact .ol-page-title--editorial,
body.oasis-redesign .ol-page-my-account .ol-page-title--editorial {
  margin-top: var(--sp-3) !important;
}

body.oasis-redesign .ol-page-certifications .ol-page-proofline,
body.oasis-redesign .ol-page-coa-process .ol-page-proofline,
body.oasis-redesign .ol-page-faq .ol-page-proofline {
  margin-top: var(--sp-4) !important;
}

body.oasis-redesign .ol-page-certifications .ol-page-body,
body.oasis-redesign .ol-page-coa-process .ol-page-body,
body.oasis-redesign .ol-page-faq .ol-page-body,
body.oasis-redesign .ol-page-contact .ol-page-body,
body.oasis-redesign .ol-page-my-account .ol-page-body {
  padding-block: clamp(var(--sp-8), 4vw, var(--sp-16)) !important;
}

/* ============================================================
   COA PROCESS PAGE
   ============================================================ */
body.oasis-redesign .ol-coa-process-page {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
}

body.oasis-redesign .ol-coa-process-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
body.oasis-redesign .ol-coa-process-hero__copy p {
  margin: 0 0 1.1em !important;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem) !important;
  line-height: 1.75 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 78%, transparent) !important;
}
body.oasis-redesign .ol-coa-process-hero__copy .ol-btn {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
body.oasis-redesign .ol-coa-process-hero__copy .ol-btn:hover {
  background: var(--ol-ink-900);
}
body.oasis-redesign .ol-coa-process-hero__signature {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-family: var(--ol-font-display, "Playfair Display", serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}
body.oasis-redesign .ol-coa-process-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 28px;
  background: linear-gradient(155deg,
    color-mix(in oklab, var(--ol-cream-50) 96%, transparent) 0%,
    color-mix(in oklab, var(--ol-guide-cream, #efe6d2) 88%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 12%, transparent);
  box-shadow: 0 28px 60px -32px rgba(20, 32, 26, 0.32);
  text-align: center;
}
body.oasis-redesign .ol-coa-process-hero__stat-num {
  font-family: var(--ol-font-display, "Playfair Display", serif);
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 1;
  color: var(--ol-forest-900);
  letter-spacing: -0.02em;
}
body.oasis-redesign .ol-coa-process-hero__stat-label {
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}

/* ============================================================
   COA LIBRARY PAGE
   ============================================================ */
body.oasis-redesign .ol-certifications-page {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
}
body.oasis-redesign .ol-coa-finds__head,
body.oasis-redesign .ol-coa-library__head {
  max-width: 720px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}
body.oasis-redesign .ol-coa-finds__head .ol-section-kicker,
body.oasis-redesign .ol-coa-library__head .ol-section-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}
body.oasis-redesign .ol-coa-finds__head h2,
body.oasis-redesign .ol-coa-library__head h2 {
  margin: 0 0 0.6rem !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  line-height: 1.15 !important;
  color: var(--ol-ink-900) !important;
}
body.oasis-redesign .ol-coa-library__head p,
body.oasis-redesign .ol-coa-finds__head p {
  margin: 0 !important;
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ol-ink-900) 70%, transparent);
}
body.oasis-redesign .ol-coa-finds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
body.oasis-redesign .ol-coa-finds__card {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  /* Shared card language: white pop + tan hairline + forest left-accent. */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: 20px;
  box-shadow: 0 14px 40px -28px rgba(20, 32, 26, 0.25);
}
body.oasis-redesign .ol-coa-finds__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: color-mix(in oklab, var(--ol-forest-900) 92%, #000);
  color: var(--ol-cream-50);
}
body.oasis-redesign .ol-coa-finds__card h3 {
  margin: 0 0 0.6rem !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  color: var(--ol-ink-900) !important;
}
body.oasis-redesign .ol-coa-finds__card p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 72%, transparent) !important;
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
body.oasis-redesign .ol-faq-page {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 920px;
  margin: 0 auto;
}
body.oasis-redesign .ol-faq-callout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  /* Shared callout language: white + tan hairline + forest left-accent. */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: 16px;
}
body.oasis-redesign .ol-faq-callout__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
}
body.oasis-redesign .ol-faq-callout p {
  margin: 0.25rem 0 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: var(--ol-guide-umber) !important;
}
body.oasis-redesign .ol-faq-callout .ol-section-kicker {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}
body.oasis-redesign .ol-faq-group__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.2rem !important;
}
body.oasis-redesign .ol-faq-group__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  border-radius: 10px;
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
body.oasis-redesign .ol-faq-group__head h2 {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ol-ink-900) !important;
}
body.oasis-redesign .ol-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
body.oasis-redesign .ol-faq-item {
  background: #fff;
  border: 1px solid #D9D3C3;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.oasis-redesign .ol-faq-item summary,
body.oasis-redesign:not(.home) .ol-faq-item summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1rem 1.3rem !important;
  cursor: pointer;
  list-style: none !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--ol-ink-900) !important;
  background: transparent !important;
  min-height: 0 !important;
}
/* Kill all default disclosure markers across browsers AND the
   legacy `::after { content: "+" }` rule from earlier sections. */
body.oasis-redesign .ol-faq-item summary::-webkit-details-marker,
body.oasis-redesign:not(.home) .ol-faq-item summary::-webkit-details-marker {
  display: none !important;
}
body.oasis-redesign .ol-faq-item summary::marker,
body.oasis-redesign:not(.home) .ol-faq-item summary::marker {
  display: none !important;
  content: "" !important;
}
body.oasis-redesign .ol-faq-item summary::after,
body.oasis-redesign:not(.home) .ol-faq-item summary::after {
  content: none !important;
  display: none !important;
}
body.oasis-redesign .ol-faq-item__chevron {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  color: var(--ol-forest-900);
  transition: background 0.2s ease, color 0.2s ease;
}
/* Render +/× from two CSS bars centered in the circle so the
   icon doesn't drift with font metrics like a text glyph would. */
body.oasis-redesign .ol-faq-item__chevron::before,
body.oasis-redesign .ol-faq-item__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body.oasis-redesign .ol-faq-item__chevron::before { width: 16px; height: 2.5px; }
body.oasis-redesign .ol-faq-item__chevron::after { width: 2.5px; height: 16px; }

body.oasis-redesign .ol-faq-item p {
  margin: 0 !important;
  padding: 0 1.3rem 1.2rem !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
  color: color-mix(in oklab, var(--ol-ink-900) 76%, transparent) !important;
}
body.oasis-redesign .ol-faq-cta {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  border-radius: 24px;
  box-shadow: 0 32px 80px -40px rgba(20, 32, 26, 0.45);
}
body.oasis-redesign .ol-faq-cta .ol-section-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-cream-50) 75%, transparent);
}
body.oasis-redesign .ol-faq-cta h2 {
  margin: 0 0 1.4rem !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.2 !important;
  color: var(--ol-cream-50) !important;
}
body.oasis-redesign .ol-faq-cta .ol-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--ol-cream-50);
  color: var(--ol-forest-900);
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ============================================================
   CONTACT PAGE — minimal: hero + form
   ============================================================ */
body.oasis-redesign .ol-contact-page {
  max-width: 680px;
  margin: 0 auto;
}
body.oasis-redesign .ol-contact-form {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  /* Shared card language: white pop + tan hairline + forest left-accent. */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: 20px;
  box-shadow: 0 14px 40px -28px rgba(20, 32, 26, 0.25);
}
/* Acceptance / consent block treated as fine print site-wide. */

body.oasis-redesign .ol-contact-form .wpcf7-form-control,
body.oasis-redesign .ol-contact-form input[type="text"],
body.oasis-redesign .ol-contact-form input[type="email"],
body.oasis-redesign .ol-contact-form input[type="tel"],
body.oasis-redesign .ol-contact-form textarea,
body.oasis-redesign .ol-contact-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ol-cream-100);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent);
  border-radius: 12px;
  font-family: var(--ol-font-body);
  font-size: 1rem;
  color: var(--ol-ink-900);
}
body.oasis-redesign .ol-contact-form input:focus,
body.oasis-redesign .ol-contact-form textarea:focus,
body.oasis-redesign .ol-contact-form select:focus {
  outline: 0;
  border-color: var(--ol-forest-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ol-forest-700) 18%, transparent);
}
body.oasis-redesign .ol-contact-form input[type="submit"],
body.oasis-redesign .ol-contact-form button[type="submit"] {
  width: auto;
  min-width: 220px;
  padding: 0.95rem 2rem;
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  border: 0;
  border-radius: 999px;
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.oasis-redesign .ol-contact-form input[type="submit"]:hover,
body.oasis-redesign .ol-contact-form button[type="submit"]:hover {
  background: var(--ol-ink-900);
}

/* ============================================================
   MY ACCOUNT / LOGIN PAGE
   ============================================================ */
body.oasis-redesign .ol-account-page {
  max-width: 980px;
  margin: 0 auto;
}
/* Logged-in dashboard uses the full hero wrap so its outer edges line up with
   the hero proof pills above (same --ol-wrap + 48px shell padding). Login and
   registration keep the compact 980px — a full-width form reads worse. */
body.oasis-redesign .ol-account-page:not(.ol-account-page--out) {
  max-width: var(--ol-wrap);
}

body.oasis-redesign .ol-account-shell {
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--ol-cream-50);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  border-radius: 20px;
  box-shadow: 0 14px 40px -28px rgba(20, 32, 26, 0.25);
}
body.oasis-redesign .ol-account-page--out .ol-account-shell {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Login stays compact; registration has room for its two-column field sets. */
body.oasis-redesign .ol-account-page--out .woocommerce-form-login,
body.oasis-redesign .ol-account-page--out .woocommerce-form-register {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
body.oasis-redesign .ol-account-page .woocommerce-form-row label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--ol-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}
body.oasis-redesign .ol-account-page input[type="text"],
body.oasis-redesign .ol-account-page input[type="email"],
body.oasis-redesign .ol-account-page input[type="password"],
body.oasis-redesign .ol-account-page input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ol-cream-50);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent);
  border-radius: 12px;
  font-family: var(--ol-font-body);
  font-size: 1rem;
  color: var(--ol-ink-900);
}
body.oasis-redesign .ol-account-page input:focus {
  outline: 0;
  border-color: var(--ol-forest-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ol-forest-700) 18%, transparent);
}
body.oasis-redesign .ol-account-page button[type="submit"],
body.oasis-redesign .ol-account-page input[type="submit"],
body.oasis-redesign .ol-account-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1.6rem;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
body.oasis-redesign .ol-account-page button[type="submit"]:hover,
body.oasis-redesign .ol-account-page .button:hover {
  background: var(--ol-ink-900) !important;
}

/* ============================================================
   MOBILE — apply same compact treatment to all editorial pages
   ============================================================ */
@media (max-width: 700px) {
  body.oasis-redesign .ol-page-title--editorial,
body.oasis-redesign:not(.home) .ol-page-title--editorial {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.4vw, 2.9rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.022em !important;
  }

  body.oasis-redesign .ol-coa-process-page,
body.oasis-redesign .ol-certifications-page {
    gap: 2.5rem;
  }

  body.oasis-redesign .ol-coa-process-hero {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  body.oasis-redesign .ol-coa-process-hero__stat {
    order: -1;
    max-width: 360px;
    margin: 0 auto;
    padding: 1.6rem 1.4rem;
    border-radius: 22px;
  }
  body.oasis-redesign .ol-coa-process-hero__copy p {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }

  body.oasis-redesign .ol-coa-finds__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  body.oasis-redesign .ol-coa-finds__card {
    padding: 1.4rem;
    border-radius: 16px;
  }

  body.oasis-redesign .ol-faq-page {
    gap: 1.5rem;
  }
  body.oasis-redesign .ol-faq-callout {
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
  }
  body.oasis-redesign .ol-faq-group__head h2 {
    font-size: 1.2rem !important;
  }
  body.oasis-redesign .ol-faq-group__num {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
  }
  body.oasis-redesign .ol-faq-item summary {
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
  }
  body.oasis-redesign .ol-faq-item__chevron {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }
  body.oasis-redesign .ol-faq-item p {
    padding: 0 1rem 1rem !important;
    font-size: 0.88rem !important;
  }
  body.oasis-redesign .ol-faq-cta {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }
  body.oasis-redesign .ol-faq-cta h2 {
    font-size: 1.3rem !important;
  }

  body.oasis-redesign .ol-contact-form {
    padding: 1.4rem;
    border-radius: 16px;
  }

  body.oasis-redesign .ol-account-shell {
    padding: 1.4rem;
    border-radius: 16px;
  }
}

/* Desktop polish for editorial pages */
@media (min-width: 961px) {
  body.oasis-redesign .ol-coa-process-hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }
  body.oasis-redesign .ol-coa-process-hero__copy p {
    font-size: 1.06rem !important;
    line-height: 1.78 !important;
  }
}

/* ============================================================
   GLOBAL LEGAL DISCLAIMER (footer-wide, every page)
   ============================================================ */

/* COA Process — testing methods accordion shares FAQ item style */
body.oasis-redesign .ol-coa-methods {
  max-width: 920px;
  margin: 0 auto;
}
body.oasis-redesign .ol-coa-methods__head {
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
body.oasis-redesign .ol-coa-methods__head .ol-section-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ol-guide-umber);
}
body.oasis-redesign .ol-coa-methods__head h2 {
  margin: 0 !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  line-height: 1.15 !important;
  color: var(--ol-ink-900) !important;
}

/* ============================================================
   POST-FEEDBACK FIXES (FAQ / hero pills / contact / account /
   cart / checkout)
   ============================================================ */

/* Contact form mobile — constrain width and prevent the
   compliance text inside the form from overflowing. */
@media (max-width: 700px) {
  body.oasis-redesign .ol-page-contact .ol-page-body > .oasis-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  body.oasis-redesign .ol-contact-page {
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.oasis-redesign .ol-contact-form {
    padding: 1.1rem;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow-x: hidden;
  }
  body.oasis-redesign .ol-contact-form,
body.oasis-redesign .ol-contact-form * {
    max-width: 100% !important;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  /* Kadence "alignfull" rows escape the parent form's width on
     mobile and clip text on the right. Force them inline with
     the form padding instead. */
  
  body.oasis-redesign .ol-contact-form input,
body.oasis-redesign .ol-contact-form textarea,
body.oasis-redesign .ol-contact-form select,
body.oasis-redesign .ol-contact-form .wpcf7-form-control,
body.oasis-redesign .ol-contact-form .wpcf7-list-item-label {
    font-size: 0.92rem;
  }
  
  body.oasis-redesign .ol-contact-form input[type="submit"],
body.oasis-redesign .ol-contact-form button[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}

/* My Account mobile — flatten the visual hierarchy: minimize
   nested cards, tighten padding, and turn the login/register
   tabs into a clean segmented control. */
@media (max-width: 700px) {
  body.oasis-redesign .ol-page-my-account .ol-page-body {
    padding-block: var(--sp-6) !important;
  }
  body.oasis-redesign .ol-account-page {
    padding: 0 0.5rem;
  }
  body.oasis-redesign .ol-account-shell {
    padding: 1rem;
    border-radius: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body.oasis-redesign .ol-account-page--out .woocommerce-form-login,
body.oasis-redesign .ol-account-page--out .woocommerce-form-register {
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  body.oasis-redesign .ol-account-page input[type="text"],
body.oasis-redesign .ol-account-page input[type="email"],
body.oasis-redesign .ol-account-page input[type="password"],
body.oasis-redesign .ol-account-page input[type="tel"] {
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
  }
  body.oasis-redesign .ol-account-page button[type="submit"],
body.oasis-redesign .ol-account-page input[type="submit"],
body.oasis-redesign .ol-account-page .button {
    width: 100%;
    height: 44px;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
  }
  
  
  
}

/* Cart mobile — flatten nested cards (cart summary + cart totals
   were each rendering as their own panel). Reduce chrome, single
   surface, no double borders. */
@media (max-width: 700px) {
  body.woocommerce-cart .woocommerce {
    padding: 0 !important;
  }
  
  
  
  
  
  /* "Continue to checkout" / "Update cart" buttons share row. */
  
}

/* Checkout mobile — same flattening: one surface per logical
   block, no double-bordered nested cards. */

/* ============================================================
   MOBILE — full-bleed account & cart, kill weird oval tab borders
   ============================================================ */
@media (max-width: 700px) {
  /* Account: full-bleed shell on mobile */
  body.oasis-redesign .ol-page-my-account .ol-page-body > .oasis-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  body.oasis-redesign .ol-account-page {
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.oasis-redesign .ol-account-shell {
    margin: 0 !important;
    padding: 0 0.9rem !important;
    border-radius: 0 !important;
  }
  body.oasis-redesign .ol-account-page--out .woocommerce-form-login,
body.oasis-redesign .ol-account-page--out .woocommerce-form-register {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  /* Login / Sign Up tabs — strip the ovular pill border that
     the woo template applies to clickable tab links and make
     them a clean segmented control. */
  body.oasis-redesign .ol-account-page .u-columns,
body.oasis-redesign .ol-account-page .col2-set {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }
  
  
  

  /* Cart: full-bleed on mobile */
  body.woocommerce-cart .ol-page-body > .oasis-wrap,
body.woocommerce-cart main > .woocommerce {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  
}

/* ============================================================
   MOBILE — XOO Email Login tabs cleanup + cart/checkout full-bleed
   ============================================================ */
@media (max-width: 700px) {
  /* Login / Sign Up tabs from the XOO Email Login plugin.
     Selector boosted with :not(.home) to beat an earlier rule
     in this file that forced display:grid + 1fr (which stacked
     the tabs vertically). */
  
  
  
  /* Container around the tabs / form */
  
  

  /* Cart full-bleed (overrides any leftover side padding/margin) */
  body.woocommerce-cart .ol-page-body > .oasis-wrap,
body.woocommerce-cart main .oasis-wrap,
body.woocommerce-cart main > .woocommerce {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  

  /* Checkout full-bleed */
  
  
}

/* ============================================================
   ROUND-2 FIXES — cart desktop, signup form, accordion desktop
   ============================================================ */

/* Cart hero: title was rendering at ~100px on desktop because
   it inherited the global page-title clamp. Cart needs a more
   restrained title that matches About/Contact/FAQ scale. */
body.woocommerce-cart .ol-page-title,
body.oasis-redesign .woocommerce-cart .ol-page-title,
body.oasis-redesign:not(.home) .woocommerce-cart .ol-page-title {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.1 !important;
  max-width: none !important;
  margin: var(--sp-3) 0 0 !important;
}
body.woocommerce-cart .ol-page-hero,
body.woocommerce-cart .ol-page-hero__inner {
  min-height: 0 !important;
  padding-bottom: var(--sp-6) !important;
}
body.woocommerce-cart .ol-page-hero__inner {
  padding-top: calc(var(--ol-page-header-offset) + var(--sp-3)) !important;
}

/* Cart container: widen on desktop. Default Kadence/WC layout
   put the form + totals into a tight 786px-ish flex row with
   lots of empty space on the sides. Let the content breathe. */
@media (min-width: 901px) {
  body.woocommerce-cart .ol-page-body > .oasis-wrap,
body.woocommerce-cart main .oasis-wrap {
    max-width: 1180px !important;
    padding: 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  }
  body.woocommerce-cart .woocommerce {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Accordion (FAQ + COA Process testing methods) — make the
   closed state more substantial on desktop so it doesn't feel
   "mobile-sized". Bigger summary padding, larger chevron, and
   slightly larger type. */
@media (min-width: 901px) {
  body.oasis-redesign .ol-faq-item summary,
body.oasis-redesign:not(.home) .ol-faq-item summary {
    padding: 1.3rem 1.6rem !important;
    font-size: 1.05rem !important;
    min-height: 64px !important;
  }
  body.oasis-redesign .ol-faq-item p {
    padding: 0 1.6rem 1.4rem !important;
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }
  body.oasis-redesign .ol-faq-item__chevron {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  body.oasis-redesign .ol-faq-item__chevron::before { width: 18px !important; height: 2.5px !important; }
  body.oasis-redesign .ol-faq-item__chevron::after { width: 2.5px !important; height: 18px !important; }
}

/* Contact desktop: align hero to the same 680px column as the
   form so the whole page reads as a single centered stack
   instead of full-width hero + narrow form. */
@media (min-width: 901px) {
  body.oasis-redesign .ol-page-contact .ol-page-hero__inner {
    max-width: 680px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  body.oasis-redesign .ol-page-contact .ol-page-eyebrow,
body.oasis-redesign .ol-page-contact .ol-page-title,
body.oasis-redesign .ol-page-contact .ol-page-intro,
body.oasis-redesign .ol-page-contact .ol-page-proofline {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.oasis-redesign .ol-page-contact .ol-page-title {
    max-width: 18ch !important;
  }
  body.oasis-redesign .ol-page-contact .ol-page-intro {
    max-width: 480px !important;
  }
}

/* ============================================================
   CART / CHECKOUT — desktop layout, properly scoped this time.
   The actual cart-form + totals live inside
   the legacy cart form wrapper, not directly inside .woocommerce
   like a vanilla WC install. Earlier rules targeted the wrong
   parent and the page rendered into a 786px right-side column.
   ============================================================ */

body.oasis-redesign .ol-cart-shell,
body.oasis-redesign .ol-checkout-shell {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

@media (min-width: 901px) {
  body.woocommerce-cart .ol-page-body > .oasis-wrap,
body.woocommerce-checkout .ol-page-body > .oasis-wrap {
    max-width: 1240px !important;
    padding: 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  }

  /* Cart: line items + collaterals/totals side-by-side */

  /* Cart line items table — full width inside its column */
  
  
  
  
  
  
  

  /* Cart Totals — clean side card, not nested */
  
  
  
  
  
  
  
  
  
  

  /* Hide the redundant "Cart Summary" h2 the theme injects above
     the cart table — we already render the page-hero "Cart"
     title above. */
  

  /* Hide the floating "Cagrilintide added to cart" notice card
     that Kadence renders separately — duplicates the cart row. */
  body.woocommerce-cart .woocommerce-notices-wrapper:empty {
    display: none !important;
  }
}

/* Contact desktop: Title + tagline on single lines, form column
   matches hero column so the page reads as a centered stack. */
@media (min-width: 901px) {
  body.oasis-redesign .ol-page-contact .ol-page-title {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important;
  }
  body.oasis-redesign .ol-page-contact .ol-page-intro {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 1.05rem !important;
  }
  body.oasis-redesign .ol-page-contact .ol-page-hero__inner {
    max-width: 720px !important;
    text-align: center !important;
  }
  /* Contact form panel — match the hero column (720px) but with
     enough breathing room above to fall under the trust pills.
     Force max-width on the form too because the_content() emits
     a Kadence "alignfull" row that escapes its parent. */
  body.oasis-redesign .ol-contact-page {
    max-width: 720px !important;
  }
  body.oasis-redesign .ol-contact-form,
body.oasis-redesign .ol-contact-form > .alignfull {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 2rem !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   CART QTY STEPPER — clean small-button design
   Compact +/− on either side of the value, equally weighted.
   Forces flex layout because the cart .quantity inherits
   display:block from WC defaults (which stacks the buttons).
   ============================================================ */

/* Hide native browser number-input spinner so it doesn't show
   alongside our custom buttons. */

/* ============================================================
   PHASE 3.7 CHECKOUT GATE + EDITABLE ORDER REVIEW
   ============================================================ */

/* ============================================================
   PHASE 3 NATIVE PRODUCT REMAP
   Native WooCommerce product markup replacing the former Shop
   Kit wrappers. Legacy builder selectors remain above for the
   Phase 4 prune, but no longer occur in product-page PHP output.
   ============================================================ */

body.oasis-redesign.single-product .ol-product-shell { padding-top: calc(34px + 80px + var(--sp-6)) !important;padding-bottom: var(--sp-12) !important;background: radial-gradient(circle at 16% 0%, color-mix(in oklab, var(--ol-guide-cream) 28%, transparent), transparent 34rem), linear-gradient(180deg, var(--ol-cream-100), var(--ol-cream-50) 46%, var(--ol-cream-100)); }

body.oasis-redesign.single-product .ol-product-hero > .oasis-wrap,
body.oasis-redesign.single-product .ol-product-detail > .oasis-wrap {
  max-width: var(--ol-wrap);
}

body.oasis-redesign.single-product .woocommerce-breadcrumb.ol-product-breadcrumbs {
  margin: 0 0 var(--sp-5) !important;
  color: color-mix(in oklab, var(--ol-ink-900) 58%, transparent) !important;
  font-family: var(--ol-font-body) !important;
  font-size: 0.78rem !important;
}

body.oasis-redesign.single-product .ol-product-breadcrumbs__list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  /* The list used to be the pill itself, hence the 38px floor and its own
     padding. The nav is the pill now, so this only inflated it to 58px. */
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 18%, transparent);
  border-radius: var(--ol-radius-pill);
  background: color-mix(in oklab, var(--ol-cream-50) 80%, white);
  box-shadow: 0 12px 36px -32px rgba(20,32,26,.36);
}

body.oasis-redesign.single-product .ol-product-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

body.oasis-redesign.single-product .ol-product-breadcrumbs__item:not(:last-child)::after {
  content: "/";
  opacity: .36;
}

body.oasis-redesign.single-product .ol-product-breadcrumbs a {
  color: var(--ol-forest-800) !important;
  text-decoration: none;
}

body.oasis-redesign.single-product .ol-product-breadcrumbs a:hover {
  color: var(--ol-forest-900) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.oasis-redesign.single-product .ol-product-gallery,
body.oasis-redesign.single-product .ol-product-info {
  /* White buy-box panel to match the site-wide card language (was cream). */
  background: #fff !important;
  border: 1px solid #D9D3C3 !important;
  border-radius: var(--ol-radius-lg) !important;
  box-shadow: 0 28px 82px -60px rgba(20,32,26,.56) !important;
}

body.oasis-redesign.single-product .ol-product-info {
  position: sticky;
  top: 128px;
  padding: clamp(var(--sp-6), 3vw, var(--sp-10)) !important;
}

/* Preserve actual summary-hook priority order. Earlier builder-era
   flex ordering must not move plugin output ahead of native fields. */
body.oasis-redesign.single-product .ol-product-info > * {
  order: initial !important;
}

body.oasis-redesign.single-product .ol-product-info h1.product_title {
  margin: 0 !important;
  color: var(--ol-guide-umber) !important;
  font-family: var(--ol-font-display) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

body.oasis-redesign.single-product .ol-product-info p.price {
  margin: 0 !important;
  color: var(--ol-guide-olive) !important;
  font-family: var(--ol-font-body) !important;
  font-size: clamp(1.25rem, 3.2vw, 1.65rem) !important;
  font-weight: 600 !important;
}

body.oasis-redesign.single-product .ol-product-info form.cart,
body.oasis-redesign.single-product .ol-product-info form.variations_form {
  width: 100%;
  margin: 0 !important;
  padding: var(--sp-5) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent) !important;
  border-radius: var(--ol-radius-md) !important;
  box-shadow: none !important;
}

body.oasis-redesign.single-product form.variations_form table.variations,
body.oasis-redesign.single-product form.variations_form table.variations tbody,
body.oasis-redesign.single-product form.variations_form table.variations tr,
body.oasis-redesign.single-product form.variations_form table.variations th,
body.oasis-redesign.single-product form.variations_form table.variations td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.oasis-redesign.single-product form.variations_form table.variations tr {
  margin-bottom: var(--sp-3) !important;
}

body.oasis-redesign.single-product form.variations_form table.variations th.label {
  margin-bottom: 8px !important;
  color: color-mix(in oklab, var(--ol-ink-900) 64%, transparent) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* Applied by product.js only after the pill controls exist. Without
   JavaScript, native WooCommerce selects retain their normal layout. */

body.oasis-redesign.single-product .ol-product-info__assurances {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  margin: var(--sp-2) 0 0 !important;
}

body.oasis-redesign.single-product .ol-product-info__assurances li {
  border-radius: var(--ol-radius-pill) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 96%, white) !important;
  font-size: .68rem !important;
  padding: 6px 10px !important;
}

body.oasis-redesign.single-product .ol-product-detail .woocommerce-tabs {
  overflow: hidden;
  padding: 0 !important;
  background: color-mix(in oklab, var(--ol-cream-50) 88%, white) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
  border-radius: var(--ol-radius-lg) !important;
  box-shadow: 0 24px 70px -54px rgba(20,32,26,.46) !important;
}

body.oasis-redesign.single-product .ol-product-detail .woocommerce-tabs ul.tabs {
  margin: 0 !important;
  padding: var(--sp-4) !important;
  background: color-mix(in oklab, var(--ol-guide-cream) 25%, var(--ol-cream-50)) !important;
}

body.oasis-redesign.single-product .ol-product-detail .woocommerce-Tabs-panel {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8)) !important;
}

body.oasis-redesign.single-product .ol-product-detail .related.products,
body.oasis-redesign.single-product .ol-product-detail .up-sells {
  margin-top: var(--sp-12) !important;
}

body.oasis-redesign.single-product .ol-product-detail .related.products ul.products,
body.oasis-redesign.single-product .ol-product-detail .up-sells ul.products {
  align-items: stretch !important;
}

/* [removed in card sweep] related/upsells li base. It duplicated flex/column/
   height from the UNIFIED CARD block, but its high (7-class) specificity also
   pinned transform:none, which BLOCKED the hover lift — so related didn't move
   like shop. Removing it lets the unified lift apply, matching shop exactly. The
   inner-link flex and price margin-top:auto below are functional and stay. */

body.oasis-redesign.single-product .ol-product-detail .related.products ul.products li.product > a:first-of-type,
body.oasis-redesign.single-product .ol-product-detail .up-sells ul.products li.product > a:first-of-type {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body.oasis-redesign.single-product .ol-product-detail .related.products ul.products li.product .price,
body.oasis-redesign.single-product .ol-product-detail .up-sells ul.products li.product .price {
  margin-top: auto !important;
}

@media (max-width: 1100px) {
  body.oasis-redesign.single-product .ol-product-info {
    position: static;
  }
}

@media (max-width: 1024px) {
  body.oasis-redesign.single-product .ol-product-shell {
    padding-top: calc(34px + 64px + var(--sp-4)) !important;
    padding-bottom: calc(var(--sp-12) + 70px) !important;
  }
}

@media (max-width: 700px) {
  body.oasis-redesign.single-product .ol-product-info {
    padding: var(--sp-5) !important;
  }

  body.oasis-redesign.single-product .ol-product-info__assurances {
    grid-template-columns: 1fr !important;
  }

  
}

/* On mobile: same compact stepper, slightly smaller. */

/* ============================================================
   MOBILE CART REDESIGN — visually appealing card layout
   Each cart row becomes a card with the image floating on the
   right, name + price + qty stacked on the left, subtotal as a
   footer. Removes the cramped table-row look on small screens.
   ============================================================ */
@media (max-width: 700px) {
  /* Hero spacing — match editorial pages (FAQ/Contact/COA). */
  body.woocommerce-cart .ol-page-hero,
body.woocommerce-cart .ol-page-hero__inner {
    min-height: 0 !important;
  }
  body.woocommerce-cart .ol-page-hero__inner {
    padding-top: calc(var(--ol-page-header-offset) + var(--sp-2)) !important;
    padding-bottom: var(--sp-6) !important;
  }
  body.woocommerce-cart .ol-page-title {
    margin-top: var(--sp-3) !important;
  }
  body.woocommerce-cart .ol-page-proofline {
    margin-top: var(--sp-4) !important;
  }
  body.woocommerce-cart .ol-page-body {
    padding-block: clamp(var(--sp-6), 4vw, var(--sp-12)) !important;
  }

  /* Hide the empty notices wrapper + the "Cagrilintide added"
     card + the rewards notice — these clutter mobile and the
     same info appears in the cart line item below. */
  body.woocommerce-cart .woocommerce-notices-wrapper:empty,
body.woocommerce-cart .wlr-message-info {
    display: none !important;
  }
  

  /* Hide table chrome */
  

  /* Convert table to flex stack of cards */
  
  
  
  /* Remove (×) → top-right corner */
  
  
  

  /* Image — top-right */
  
  
  

  /* Product name */
  
  
  

  /* Price */
  
  

  /* Quantity stepper aligned left */
  
  

  /* Subtotal as a footer row */
  
  

  /* Cart actions row (coupon + update cart) */
  
  
  
  
  
  

  /* Cart Totals — keep as a single card */
  
  
  
  
  
  
  

  /* Side gutter so cards aren't flush against viewport edge */
  body.woocommerce-cart .ol-page-body > .oasis-wrap,
body.woocommerce-cart main .oasis-wrap {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   STANDALONE THEME HEADER REMAP
   The reference stylesheet above remains intact for page/product parity.
   These rules map its approved header treatment to native Oasis markup.
   ============================================================ */
body.oasis-redesign .ol-header {
  position: fixed;
  top: 34px;
  left: 0;
  right: 0;
  z-index: var(--ol-z-header);
  width: 100%;
  min-height: 80px;
  background: color-mix(in oklab, var(--ol-cream-50) 55%, transparent);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  box-shadow: 0 1px 24px -12px rgba(20,32,26,.25);
  transition: background-color .3s var(--ol-ease), box-shadow .3s var(--ol-ease);
}
body.oasis-redesign .ol-header.is-scrolled {
  background: color-mix(in oklab, var(--ol-cream-50) 82%, transparent);
  box-shadow: 0 10px 30px -22px rgba(20,32,26,.45);
}

body.oasis-redesign .ol-header__inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
body.oasis-redesign .ol-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
body.oasis-redesign .ol-header__logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 200px;
  filter: drop-shadow(0 2px 8px rgba(20,32,26,.12));
}
body.oasis-redesign .ol-header__right,
body.oasis-redesign .ol-nav,
body.oasis-redesign .ol-nav__menu {
  display: flex;
  align-items: center;
}
body.oasis-redesign .ol-header__right { margin-left: auto; }
body.oasis-redesign .ol-nav__menu {
  gap: clamp(10px, 1.5vw, 22px);
  padding: 0;
  margin: 0;
  list-style: none;
}
body.oasis-redesign .ol-nav__menu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.oasis-redesign .ol-nav__menu > li > a {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--ol-ink-900);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-sm);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--ol-dur) var(--ol-ease);
}
body.oasis-redesign .ol-nav__menu > li > a:hover,
body.oasis-redesign .ol-nav__menu > li > a:focus-visible { color: var(--ol-forest-700); }
body.oasis-redesign .ol-nav__menu > .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
body.oasis-redesign .ol-nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2;
  min-width: 14rem;
  padding: var(--sp-3) 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  background: color-mix(in oklab, var(--ol-cream-50) 94%, transparent);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 12%, transparent);
  border-radius: var(--ol-radius-md);
  box-shadow: var(--ol-shadow-lg);
  transition: opacity .2s var(--ol-ease), transform .2s var(--ol-ease), visibility .2s;
}
body.oasis-redesign .ol-nav__menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
body.oasis-redesign .ol-nav__menu li:hover > .sub-menu,
body.oasis-redesign .ol-nav__menu li:focus-within > .sub-menu,
body.oasis-redesign .ol-nav__menu a[aria-expanded="true"] + .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
body.oasis-redesign .ol-nav__menu .sub-menu a {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  color: var(--ol-ink-900);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
}
body.oasis-redesign .ol-nav__menu .sub-menu a:hover,
body.oasis-redesign .ol-nav__menu .sub-menu a:focus-visible {
  color: var(--ol-forest-800);
  background: color-mix(in oklab, var(--ol-forest-900) 6%, transparent);
}

@media (max-width: 1024px) {
  body.oasis-redesign .ol-header,
  body.oasis-redesign .ol-header__inner { min-height: 64px; }
  body.oasis-redesign .ol-header__logo { width: 140px; height: 36px; }

  /* Cart and account stay reachable on the bar itself — only the nav links
     move into the drawer. Hiding .ol-header__right buried the cart in there. */
  body.oasis-redesign .ol-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  body.oasis-redesign .ol-header__right {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
  }
  body.oasis-redesign .ol-header__right .ol-nav { display: none; }

  body.oasis-redesign .ol-header-extras { display: flex; gap: .3rem; }
  body.oasis-redesign .ol-header-extra__label { display: none; }
  body.oasis-redesign .ol-header-extra {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--ol-radius-pill);
  }
  body.oasis-redesign .ol-header-extra svg { width: 21px; height: 21px; }
  body.oasis-redesign .ol-header-extra__count {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ol-forest-900);
    color: var(--ol-cream-50);
    font: 700 .6rem/1 var(--ol-font-body);
  }

  /* Static, not absolute — it now sits in the flex row beside the cart.
     Width/height are pinned because a generic button rule was stretching it
     into a full-width forest bar. */
  html body.oasis-redesign button.ol-navtoggle {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    transform: none;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: color-mix(in oklab, var(--ol-cream-50) 88%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--ol-forest-900) 22%, transparent) !important;
    border-radius: var(--ol-radius-pill) !important;
    box-shadow: none !important;
  }
  html body.oasis-redesign button.ol-navtoggle .ol-navtoggle__bars span {
    background: var(--ol-ink-900) !important;
  }
}

/* PHASE 4 NATIVE CONTACT FORM */

body.oasis-redesign .ol-contact-form__field label {
  color: var(--ol-ink-900);
  font-family: var(--ol-font-body);
  font-size: var(--ol-fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
}
body.oasis-redesign .ol-contact-form__field input,
body.oasis-redesign .ol-contact-form__field textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 18%, transparent);
  border-radius: var(--ol-radius-md);
  background: var(--ol-cream-50);
  color: var(--ol-ink-900);
  font: inherit;
}
body.oasis-redesign .ol-contact-form__field textarea {
  min-height: 12rem;
  resize: vertical;
}
body.oasis-redesign .ol-contact-form__field input:focus,
body.oasis-redesign .ol-contact-form__field textarea:focus {
  border-color: var(--ol-forest-700);
  outline: 2px solid color-mix(in oklab, var(--ol-forest-700) 24%, transparent);
  outline-offset: 2px;
}

body.oasis-redesign .ol-contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
body.oasis-redesign .ol-contact-form__submit {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

/* COMPACT PAGE HERO RHYTHM
   Editorial pages retain their visual voice, while system pages use the
   modifier emitted by page.php to expose functional content sooner. */
body.oasis-redesign:not(.home) .ol-page-hero { position: relative;overflow: hidden;isolation: isolate;border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 9%, transparent);background: var(--ol-cream-100) !important;display: flex;align-items: center;min-height: clamp(340px, 38vw, 460px);padding: 0; }
body.oasis-redesign:not(.home) .ol-page-hero__inner { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)) !important;text-align: left !important;width: 100%;max-width: var(--ol-wrap);margin-inline: auto;padding-top: calc(var(--ol-page-header-offset) + clamp(var(--sp-6), 3vw, var(--sp-10))) !important;padding-bottom: clamp(var(--sp-8), 4vw, var(--sp-12)) !important; }
body.oasis-redesign:not(.home) .ol-page-title { max-width: 11.5ch;margin: var(--sp-5) 0 0 !important;font-family: var(--ol-font-display) !important;font-size: clamp(2.8rem, 5.2vw, 4.8rem) !important;font-weight: 500 !important;line-height: .94 !important;color: var(--ol-guide-umber) !important;text-wrap: balance;margin-top: var(--sp-3) !important;letter-spacing: 0 !important; }
body.oasis-redesign:not(.home) .ol-page-title--editorial {
  font-size: clamp(2.6rem, 4.8vw, 4.2rem) !important;
  line-height: 1.02 !important;
}
body.oasis-redesign:not(.home) .ol-page-intro { max-width: 52rem;margin: var(--sp-6) 0 0 !important;color: color-mix(in oklab, var(--ol-ink-900) 72%, transparent) !important;font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;line-height: 1.72 !important;margin-top: var(--sp-3) !important; }
body.oasis-redesign:not(.home) .ol-page-proofline { display: flex;flex-wrap: nowrap;gap: var(--sp-2);margin-top: var(--sp-4) !important; }

body.oasis-redesign:not(.home) .ol-page-hero.ol-page-hero--compact {
  min-height: 0 !important;
  padding: 0 !important;
}

body.oasis-redesign:not(.home) .ol-page-hero--compact + .ol-page-body {
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-6)) !important;
}

body.oasis-redesign .ol-cart-empty {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  border-radius: var(--ol-radius-lg);
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white);
  box-shadow: var(--ol-shadow-md);
  text-align: center;
}
body.oasis-redesign .ol-cart-empty h2 {
  margin: 0;
  color: var(--ol-guide-umber);
  font-family: var(--ol-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
}
body.oasis-redesign .ol-cart-empty p {
  max-width: 34rem;
  margin: var(--sp-3) auto 0;
}
body.oasis-redesign .ol-cart-empty__button {
  margin-top: var(--sp-5);
}

/* PASSWORD VISIBILITY UTILITIES
   Keep WooCommerce's single native control inside each password field and
   outrank the theme's broad primary-button rules. */
body.oasis-redesign .ol-account-page .woocommerce form .password-input,
body.oasis-redesign .ol-account-page .woocommerce form .wp-pwd,
body.oasis-redesign.woocommerce-checkout .ol-registration-gate__account form .password-input,
body.oasis-redesign.woocommerce-checkout .ol-registration-gate__account form .wp-pwd {
  position: relative;
  display: block;
  width: 100%;
}

body.oasis-redesign .ol-account-page .woocommerce form .password-input input,
body.oasis-redesign .ol-account-page .woocommerce form .wp-pwd input,
body.oasis-redesign.woocommerce-checkout .ol-registration-gate__account form .password-input input,
body.oasis-redesign.woocommerce-checkout .ol-registration-gate__account form .wp-pwd input {
  padding-right: 2.75rem !important;
}

@media (max-width: 700px) {
  body.oasis-redesign:not(.home) .ol-page-hero__inner {
    padding-top: calc(var(--ol-page-header-offset) + var(--sp-4)) !important;
    padding-bottom: var(--sp-6) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-title,
  body.oasis-redesign:not(.home) .ol-page-title--editorial {
    margin-top: var(--sp-2) !important;
    font-size: clamp(2.35rem, 11vw, 3.2rem) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-intro,
  body.oasis-redesign:not(.home) .ol-page-proofline {
    margin-top: var(--sp-3) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-hero__inner {
    padding-top: calc(var(--ol-page-header-offset) + var(--sp-1)) !important;
    padding-bottom: var(--sp-4) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title,
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title--editorial {
    font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-intro,
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-proofline {
    margin-top: var(--sp-2) !important;
  }
  body.oasis-redesign:not(.home) .ol-page-hero--compact + .ol-page-body {
    padding-top: var(--sp-4) !important;
  }
  body.oasis-redesign .ol-cart-empty {
    padding: var(--sp-5);
  }
}

/* ============================================================
   FUNCTIONAL UI COHERENCE SWEEP
   Compact page rhythm, shared controls, notices and touch targets.
   ============================================================ */

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-hero__inner { padding-top: calc(var(--ol-page-header-offset) + clamp(var(--sp-2), 1.5vw, var(--sp-4))) !important;padding-bottom: clamp(.9rem, 1.6vw, 1.35rem) !important; }

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-eyebrow {
  font-size: .66rem;
  letter-spacing: .18em;
}

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title,
body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title--editorial { max-width: none !important;margin-top: var(--sp-2) !important;font-size: clamp(2rem, 3.25vw, 2.85rem) !important;line-height: 1 !important;letter-spacing: -.015em !important; }

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-intro { margin-top: var(--sp-2) !important;line-height: 1.55 !important;max-width: 54rem;font-size: .94rem; }

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-proofline { margin-top: var(--sp-3) !important;gap: .4rem; }

body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-proofline span {
  min-height: 30px;
  padding: .32rem .65rem;
  font-size: .61rem;
  line-height: 1.1;
}

body.oasis-redesign .ol-page-my-account .ol-page-body,
body.oasis-redesign .ol-page-cart .ol-page-body,
body.oasis-redesign .ol-page-checkout .ol-page-body {
  padding-block: clamp(1rem, 2.25vw, 1.8rem) clamp(2rem, 4vw, 3.5rem) !important;
}

@media (min-width: 701px) {
  body.oasis-redesign .ol-page-my-account .ol-page-title,
  body.oasis-redesign .ol-page-cart .ol-page-title,
  body.oasis-redesign .ol-page-checkout .ol-page-title {
    white-space: nowrap;
  }
}

/* Contact already has an outer panel; remove the duplicate inner card. */
body.oasis-redesign .ol-contact-form__panel { max-width: none;margin: 0 auto;padding: 0;border: 0;border-radius: 0;background: transparent;box-shadow: none; }

body.oasis-redesign .ol-contact-form__form { display: grid;gap: .8rem; }

body.oasis-redesign .ol-contact-form__field { display: grid;gap: .3rem; }

/* Shared form-control geometry across account, checkout and contact. */
body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select),
body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) .select2-selection--single {
  min-height: 46px !important;
  padding: .68rem .85rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 17%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in oklab, var(--ol-cream-50) 94%, white) !important;
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .95rem !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) textarea {
  width: 100%;
  min-height: 9rem;
  padding: .75rem .85rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 17%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in oklab, var(--ol-cream-50) 94%, white) !important;
  color: var(--ol-ink-900) !important;
  font: .95rem/1.5 var(--ol-font-body) !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) :is(input, select, textarea):focus,
body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) .select2-container--focus .select2-selection {
  border-color: var(--ol-forest-700) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ol-forest-700) 18%, transparent) !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell) .form-row {
  margin: 0 0 .72rem !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-checkout-shell, .ol-contact-page) label:not(.oa-check):not(.ol-check-panel) {
  margin-bottom: .3rem !important;
  color: var(--ol-guide-umber) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

/* Auth card and compact, keyboard-accessible profile choices. */
body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) #customer_login {
  padding: clamp(1rem, 2.4vw, 1.35rem) !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-auth-tabs {
  margin-bottom: .85rem;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-register-fields {
  margin-top: .45rem;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-register-fields .oa-row {
  gap: .7rem;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-register-fields .oa-field {
  margin-bottom: .68rem !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-register-fields .oa-group-label {
  display: block;
  margin-bottom: .3rem;
  color: var(--ol-guide-umber);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check {
  min-height: 44px;
  padding: .4rem .65rem;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ol-cream-50) 90%, white);
  color: var(--ol-ink-900);
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  white-space: nowrap;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check input[type="checkbox"] {
  width: 1.05rem !important;
  min-width: 1.05rem !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: white !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ol-forest-900) 22%, transparent) !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check:has(input:checked) {
  border-color: var(--ol-forest-700);
  background: color-mix(in oklab, var(--ol-forest-700) 10%, white);
  box-shadow: inset 0 0 0 1px var(--ol-forest-700);
  color: var(--ol-ink-900);
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check input[type="checkbox"]:checked {
  border-color: var(--ol-forest-700) !important;
  background: var(--ol-forest-700) !important;
  box-shadow: none !important;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check:has(input:focus-visible) {
  outline: 3px solid color-mix(in oklab, var(--ol-forest-700) 24%, transparent);
  outline-offset: 2px;
}

body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-check--terms {
  margin-top: .1rem !important;
  color: color-mix(in oklab, var(--ol-ink-900) 76%, transparent) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* The eye is a utility control, never a primary pill. */
body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) button.show-password-input {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transform: translateY(-50%) !important;
}

/* One visual language for WC and native-form notices. */
body.oasis-redesign:not(.home) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews),
body.oasis-redesign .ol-contact-form__notice {
  margin: 0 0 1rem !important;
  padding: .75rem .9rem .75rem 1rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  border-left: 4px solid var(--ol-guide-olive) !important;
  border-radius: 10px !important;
  background: color-mix(in oklab, var(--ol-guide-cream) 24%, white) !important;
  color: var(--ol-guide-umber) !important;
  font-size: .84rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
/* Drop WooCommerce's default blue info/tick icon (WooCommerce icon-font ::before)
   — the forest left-accent already carries the notice; the icon rendered as a
   stray blue box over the first word. */
body.oasis-redesign:not(.home) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews)::before {
  display: none !important;
}

body.oasis-redesign .ol-cart-empty,
body.oasis-redesign .oasis-acc-empty {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px dashed color-mix(in oklab, var(--ol-forest-900) 20%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--ol-cream-50) 92%, white);
  box-shadow: none;
}

/* Checkout gate retains compliance substance without a second greeting. */

@media (max-width: 700px) {
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-hero__inner {
    padding-bottom: .85rem !important;
  }

  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title,
  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-title--editorial {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    line-height: 1.02 !important;
  }

  body.oasis-redesign:not(.home) .ol-page-hero--compact .ol-page-proofline {
    margin-top: .55rem !important;
  }

  body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) #customer_login {
    padding: .85rem !important;
  }

  body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-register-fields .oa-row,
  body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.oasis-redesign :is(.ol-account-page, .ol-registration-gate__account) .oa-checkbox-grid .oa-check {
    white-space: normal;
  }

  

  

  

  

  body.oasis-redesign :is(.ol-navtoggle, .ol-drawer__close, .ol-drawer__menu a, .ol-drawer__account-link) {
    min-height: 44px;
  }
}

/* CONTACT COMPLIANCE: shared terms checkbox and soft-block modal. */
body.oasis-redesign .ol-contact-form__acknowledgement {
  min-width: 0;
  margin: .15rem 0 0;
  padding: 0;
  border: 0;
}

body.oasis-redesign .ol-contact-form__acknowledgement legend {
  margin: 0 0 .35rem;
  padding: 0;
  color: var(--ol-guide-umber, var(--ol-ink-700));
  font-family: var(--ol-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
) {
  display: flex !important;
  position: relative;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
  min-height: 44px;
  margin: 0 !important;
  padding: .75rem .85rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 16%, transparent);
  border-radius: var(--ol-radius-md);
  background: color-mix(in oklab, var(--ol-cream-50) 88%, white);
  color: color-mix(in oklab, var(--ol-ink-900) 82%, transparent) !important;
  font-family: var(--ol-font-body);
  font-size: .78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
):hover {
  border-color: color-mix(in oklab, var(--ol-forest-700) 48%, transparent);
  background: var(--ol-cream-100);
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
):has(> input[type="checkbox"]:focus-visible) {
  border-color: var(--ol-forest-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ol-forest-700) 22%, transparent);
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
) > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  flex: 0 0 19px !important;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  margin: .08rem 0 0 !important;
  padding: 0 !important;
  border: 1.5px solid color-mix(in oklab, var(--ol-forest-900) 35%, transparent) !important;
  border-radius: 4px !important;
  background: white !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
) > input[type="checkbox"]:checked {
  border-color: var(--ol-forest-700) !important;
  background: var(--ol-forest-700) !important;
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
) > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ol-cream-50);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.oasis-redesign :is(
  .ol-contact-page .ol-check-panel,
  .ol-account-page .oa-check--terms,
  .ol-registration-gate__account .oa-check--terms
) > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ol-forest-700) !important;
  outline-offset: 3px !important;
}

@media (max-width: 480px) {
  body.oasis-redesign .ol-contact-page .ol-check-panel {
    min-height: 44px;
    padding: .7rem .75rem !important;
    font-size: .75rem !important;
  }

  
}

/* ============================================================
   SHOP ARCHIVE — native WooCommerce catalog (2026-07-12)
   Cascade-last on purpose: this is the single shop-only layer for
   core content-product.php markup after the legacy builder removal.
   ============================================================ */

body.oasis-redesign .ol-shop-shell {
  --ol-shop-line: color-mix(in oklab, var(--ol-forest-900) 12%, transparent);
  --ol-shop-muted: color-mix(in oklab, var(--ol-ink-900) 62%, transparent);
  background:
    radial-gradient(circle at 88% 2%, rgba(201, 185, 154, .16), transparent 28rem),
    var(--ol-cream-100);
}

body.oasis-redesign .ol-shop-shell .oasis-wrap {
  width: 100%;
  max-width: 1520px;
  box-sizing: border-box;
}

body.oasis-redesign .ol-shop-shell--lean {
  padding-top: 110px !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head {
  padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(1.4rem, 2.8vw, 2.25rem) !important;
  border-bottom: 1px solid var(--ol-shop-line);
  background: color-mix(in oklab, var(--ol-cream-100) 94%, white);
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__inner {
  align-items: center;
  gap: 1.25rem 2rem;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__copy {
  gap: .45rem;
  min-width: 0;
}

body.oasis-redesign .ol-shop-shell .ol-page-eyebrow {
  min-height: 0;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ol-shop-muted);
  font-size: .68rem;
  letter-spacing: .2em;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__title {
  font-size: clamp(2.5rem, 4vw, 3.65rem) !important;
  line-height: .9;
  letter-spacing: -.02em;
}

body.oasis-redesign .ol-shop-shell .term-description > :last-child {
  margin-bottom: 0;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__meta {
  gap: .16rem;
  max-width: 34rem;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__line {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.45;
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__line--ship {
  color: var(--ol-forest-700);
}

body.oasis-redesign .ol-shop-shell .ol-shop-head__note {
  margin-top: .1rem;
  font-size: .66rem;
  line-height: 1.4;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem) !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-layout {
  /* 205px could not fit "Reconstitution Solutions" + its count badge, so the
     pills overflowed the column and slid under the product grid. */
  grid-template-columns: 244px minmax(0, 1fr) !important;
  gap: clamp(2.75rem, 4.5vw, 4.5rem) !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-sidebar__sticky {
  top: 126px;
  gap: .75rem;
  /* White-card panel so the category list matches the site-wide card language. */
  background: #fff;
  border: 1px solid #D9D3C3;
  border-left: 3px solid var(--ol-forest-700);
  border-radius: 14px;
  padding: 16px 16px 10px;
}

body.oasis-redesign .ol-shop-shell .ol-shop-sidebar__head {
  display: block;
  padding: 0 0 .8rem;
  border-bottom: 1px solid var(--ol-shop-line);
}

body.oasis-redesign .ol-shop-shell .ol-shop-sidebar__title {
  margin: 0;
  color: var(--ol-shop-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}

/* This is a mobile-sheet control, never a desktop category-list item.
   Match the legacy drawer-button selector so global button rules cannot
   expose it in the inline desktop sidebar. */
body.oasis-redesign .ol-shop-shell .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close,
body.oasis-redesign:not(.home) .ol-shop-shell .ol-shop-sidebar .ol-shop-sidebar__head button.ol-shop-drawer-close {
  display: none !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cats {
  gap: .25rem;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat,
body.oasis-redesign:not(.home) .ol-shop-shell .ol-shop-cat {
  min-height: 42px;
  padding: .62rem .72rem !important;
  border: 1px solid transparent !important;
  border-radius: 11px;
  background: transparent !important;
  color: color-mix(in oklab, var(--ol-ink-900) 82%, transparent) !important;
  font-size: .77rem;
  font-weight: 500 !important;
  letter-spacing: .025em !important;
  line-height: 1.25;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat small {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.5rem;
  padding-inline: .4rem;
  border-radius: var(--ol-radius-pill);
  background: color-mix(in oklab, var(--ol-forest-900) 7%, transparent) !important;
  color: var(--ol-shop-muted) !important;
  font-size: .64rem;
  line-height: 1;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat:hover {
  border-color: var(--ol-shop-line) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 62%, transparent) !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat.is-active,
body.oasis-redesign .ol-shop-shell .ol-shop-cat.is-active span {
  border-color: var(--ol-forest-900) !important;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat.is-active small {
  background: rgba(245, 243, 238, .13) !important;
  color: rgba(245, 243, 238, .78) !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-cat:focus-visible,
body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger:focus-visible,
body.oasis-redesign .ol-shop-shell .ol-shop-drawer-close:focus-visible {
  outline: 3px solid rgba(53, 53, 37, .24) !important;
  outline-offset: 2px;
}

body.oasis-redesign .ol-shop-shell .ol-shop-toolbar {
  min-height: 46px;
  margin: 0 0 1.25rem !important;
  padding: 0 0 .8rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ol-shop-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-toolbar .woocommerce-result-count {
  margin: 0 !important;
  color: var(--ol-shop-muted);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.4;
}

body.oasis-redesign .ol-shop-shell .woocommerce-ordering {
  margin: 0 !important;
}

body.oasis-redesign .ol-shop-shell .woocommerce-ordering select {
  min-width: 190px;
  height: 44px;
  margin: 0;
  padding: 0 2.75rem 0 1rem !important;
  border: 1px solid var(--ol-shop-line) !important;
  border-radius: var(--ol-radius-pill) !important;
  background-color: color-mix(in oklab, var(--ol-cream-50) 90%, white) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ol-forest-700) 50%),
    linear-gradient(135deg, var(--ol-forest-700) 50%, transparent 50%) !important;
  background-position: calc(100% - 1.2rem) 51%, calc(100% - .9rem) 51% !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
  box-shadow: 0 8px 24px -22px rgba(20, 32, 26, .55);
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .07em !important;
  line-height: 1;
  text-transform: uppercase !important;
  appearance: none;
}

body.oasis-redesign .ol-shop-shell .woocommerce-ordering select:focus-visible {
  border-color: var(--ol-forest-700) !important;
  outline: 3px solid rgba(53, 53, 37, .18);
  outline-offset: 2px;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: clamp(1rem, 1.7vw, 1.5rem) !important;
  margin: 0 !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products::before,
body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products::after {
  content: none !important;
}

/* [removed in card sweep] shop-shell li base + hover (radius 18px, cream 93%,
   .28s, -3px). Superseded by the UNIFIED CARD block in product-cards.css
   (radius 20px, .45s, -2px), which out-specifies and loads later. focus-within
   + inner-link rules below are distinct and stay. */

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product:focus-within {
  border-color: var(--ol-forest-700) !important;
  box-shadow: 0 0 0 3px rgba(53, 53, 37, .16), 0 24px 58px -42px rgba(20, 32, 26, .54) !important;
}

/* Core's link contains image, title, and price. Removing the old square-link
   crop is the key visibility fix for native WooCommerce card content. */
body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product > a.woocommerce-LoopProduct-link,
body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product > a.woocommerce-loop-product__link {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: .7rem .7rem 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  
  background: transparent !important;
  color: var(--ol-ink-900) !important;
  text-decoration: none !important;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product > a.woocommerce-LoopProduct-link:focus-visible,
body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product > a.woocommerce-loop-product__link:focus-visible {
  outline: 0;
}

body.oasis-redesign .ol-shop-shell .ol-shop-card__meta {
  order: 1;
  display: block;
  margin: 0 .45rem .35rem;
  overflow: hidden;
  color: color-mix(in oklab, var(--ol-forest-700) 78%, transparent);
  font-family: var(--ol-font-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product h2.woocommerce-loop-product__title {
  order: 2;
  display: -webkit-box !important;
  min-height: 2.5em;
  margin: 0 .45rem .55rem !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-display) !important;
  font-size: clamp(1.14rem, 1.4vw, 1.34rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  line-height: 1.18 !important;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product .price {
  order: 4;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .18rem .45rem;
  margin: auto .45rem 0 !important;
  padding: .15rem 0 1rem;
  color: var(--ol-forest-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
  line-height: 1.3 !important;
}

@media (min-width: 1480px) {
  body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  body.oasis-redesign .ol-shop-shell .ol-shop-layout {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.oasis-redesign .ol-shop-shell--lean {
    padding-top: 98px !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head {
    padding: 1.5rem 0 1.2rem !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head__inner {
    gap: .75rem;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head__meta {
    text-align: left;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head__note {
    display: none;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-layout {
    display: block;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 46px;
    margin: 0 0 .8rem !important;
    padding: .65rem .85rem !important;
    border: 1px solid var(--ol-shop-line) !important;
    border-radius: var(--ol-radius-pill) !important;
    background: var(--ol-forest-900) !important;
    box-shadow: 0 12px 34px -28px rgba(20, 32, 26, .7);
    color: var(--ol-cream-50) !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger__label,
  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger__icon,
  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger__chevron {
    color: var(--ol-cream-50) !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-filter-trigger__current {
    color: rgba(245, 243, 238, .74) !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1001;
    width: min(88vw, 360px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    background: var(--ol-cream-50);
    transform: translateX(-102%);
    transition: transform .28s var(--ol-ease), visibility 0s linear .28s;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-sidebar.is-open {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-sidebar__sticky {
    min-height: 100%;
    padding: 1.25rem 1rem 2rem;
    box-sizing: border-box;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 0 .85rem;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-sidebar.is-open .ol-shop-sidebar__head button.ol-shop-drawer-close,
  body.oasis-redesign:not(.home) .ol-shop-shell .ol-shop-sidebar.is-open .ol-shop-sidebar__head button.ol-shop-drawer-close {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ol-shop-line) !important;
    border-radius: 50% !important;
    background: var(--ol-cream-100) !important;
    color: var(--ol-ink-900) !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-drawer-close svg {
    stroke: currentColor !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-cat {
    min-height: 46px;
    padding: .7rem .8rem !important;
    font-size: .82rem;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    background: rgba(20, 32, 26, .48);
    transition: opacity .25s var(--ol-ease);
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-toolbar {
    min-height: 44px;
    margin-bottom: 1rem !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 560px) {
  body.oasis-redesign .ol-shop-shell .oasis-wrap {
    padding-inline: 1rem;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head__title {
    font-size: 2.45rem !important;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-head__line {
    letter-spacing: .08em;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-toolbar {
    align-items: stretch;
    gap: .65rem;
  }

  body.oasis-redesign .ol-shop-shell .ol-shop-toolbar .woocommerce-result-count {
    align-self: center;
  }

  body.oasis-redesign .ol-shop-shell .woocommerce-ordering,
  body.oasis-redesign .ol-shop-shell .woocommerce-ordering select {
    width: 100% !important;
  }

  

  
}

@media (hover: none) {
  body.oasis-redesign .ol-shop-shell .ol-shop-body ul.products li.product:hover {
    transform: none !important;
  }

  
}

/* ============================================================
   EDITORIAL PRODUCT SYSTEM — shared loop card + featured specimen
   Native WooCommerce content-product.php remains the single markup source.
   ============================================================ */

/* WooCommerce's legacy clearfix tables become real grid children unless they
   are removed. This reset applies to every product loop, including shortcodes,
   archives, related products, and upsells. */
body.oasis-redesign .woocommerce ul.products::before,
body.oasis-redesign .woocommerce ul.products::after,
body.oasis-redesign ul.products::before,
body.oasis-redesign ul.products::after {
  content: none !important;
  display: none !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(1.1rem, 2vw, 1.8rem) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* [removed in card sweep] li base + hover for this :is scope — fully superseded
   by the UNIFIED CARD block in product-cards.css (same structure/surface/lift,
   loads later, out-specifies). The focus-within ring below is a distinct state
   and stays. */

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product:focus-within {
  border-color: var(--ol-forest-700) !important;
  box-shadow: 0 0 0 3px rgba(53, 53, 37, .17), 0 24px 58px -42px rgba(20, 32, 26, .55) !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product > a.woocommerce-LoopProduct-link,
body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product > a.woocommerce-loop-product__link {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--ol-card-padding) var(--ol-card-padding) 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  
  background: transparent !important;
  color: var(--ol-ink-900) !important;
  text-decoration: none !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) .ol-shop-card__meta {
  order: 1 !important;
  display: block !important;
  margin: 0 .65rem .42rem !important;
  overflow: hidden;
  color: color-mix(in oklab, var(--ol-forest-700) 72%, var(--ol-cream-50));
  font-family: var(--ol-font-body) !important;
  font-size: .6rem !important;
  font-weight: 650 !important;
  letter-spacing: .17em !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .woocommerce-loop-product__title,
body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product h2.woocommerce-loop-product__title {
  order: 2 !important;
  display: -webkit-box !important;
  min-height: 2.34em !important;
  margin: 0 .65rem .65rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--ol-ink-900) !important;
  font-family: var(--ol-font-display) !important;
  font-size: clamp(1.24rem, 1.55vw, 1.48rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
  line-height: 1.17 !important;
  text-align: left !important;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .price {
  order: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: .16rem .48rem !important;
  min-height: 1.45rem;
  margin: auto .65rem 0 !important;
  padding: .1rem 0 1.05rem !important;
  color: var(--ol-forest-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  letter-spacing: .012em !important;
  line-height: 1.35 !important;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .price del {
  color: color-mix(in oklab, var(--ol-ink-900) 48%, transparent) !important;
  font-size: .82em !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  text-decoration-thickness: 1px;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .price ins {
  color: var(--ol-forest-900) !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .onsale,
body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) .ol-shop-card__stock {
  position: absolute !important;
  z-index: 3 !important;
  top: 1.1rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: .42rem .62rem !important;
  border: 1px solid rgba(245, 243, 238, .35) !important;
  border-radius: var(--ol-radius-badge) !important;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  font-size: .57rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product .onsale {
  right: auto !important;
  left: 1.1rem !important;
}

body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) .ol-shop-card__stock {
  right: 1.1rem !important;
  left: auto !important;
}

/* filter.js appends the contract-preserving .ol-select-size control after it
   has copied native AJAX data. Keep the source button out of the visual flow. */
body.oasis-redesign .ol-products__grid ul.products li.product > .button:not(.ol-select-size),
body.oasis-redesign .ol-products__grid ul.products li.product > a.add_to_cart_button:not(.ol-select-size) {
  display: none !important;
}

/* Home filters and shop controls share the same restrained control language. */
body.oasis-redesign .ol-products__tabs {
  gap: .35rem !important;
  padding: .35rem !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 10%, transparent) !important;
  background: color-mix(in oklab, var(--ol-cream-50) 80%, transparent) !important;
  box-shadow: 0 14px 34px -34px rgba(20, 32, 26, .55) !important;
}

body.oasis-redesign .ol-products__tabs .ol-tab {
  min-height: 44px !important;
  padding: .68rem 1rem !important;
  border: 1px solid transparent !important;
  font-size: .65rem !important;
  font-weight: 650 !important;
  letter-spacing: .105em !important;
  transition: color .28s var(--ol-ease), background-color .28s var(--ol-ease), border-color .28s var(--ol-ease), box-shadow .28s var(--ol-ease) !important;
}

body.oasis-redesign .ol-products__tabs .ol-tab:hover {
  border-color: color-mix(in oklab, var(--ol-forest-900) 14%, transparent) !important;
  background: color-mix(in oklab, var(--ol-cream-200) 58%, transparent) !important;
}

body.oasis-redesign .ol-products__tabs .ol-tab.is-active {
  border-color: var(--ol-forest-900) !important;
  background: var(--ol-forest-900) !important;
  box-shadow: 0 9px 20px -16px rgba(20, 32, 26, .75) !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-products__tabs .ol-tab:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--ol-forest-700) 30%, transparent) !important;
  outline-offset: 2px !important;
}

/* Featured specimen: large horizontal editorial composition on wide screens. */
@media (min-width: 1280px) {
  body.oasis-redesign .ol-hero__inner {
    grid-template-columns: minmax(34rem, 1fr) minmax(31rem, 43rem) !important;
    gap: clamp(2rem, 5vw, 7rem) !important;
  }

  body.oasis-redesign .ol-hero__feature {
    width: 100%;
    max-width: 43rem;
  }

  

  

  

  

  

  
}

body.oasis-redesign .ol-hero__feature ul.products li.product > :is(.button, .add_to_cart_button, .ol-shop-card__cta) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 46px !important;
  margin: 0 1.25rem 1.25rem !important;
  padding: .75rem 1.25rem !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ol-forest-900) !important;
  border-radius: var(--ol-radius-control) !important;
  background: transparent !important;
  color: var(--ol-forest-900) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color .34s var(--ol-ease), color .34s var(--ol-ease) !important;
}

body.oasis-redesign .ol-hero__feature ul.products li.product > :is(.button, .add_to_cart_button, .ol-shop-card__cta):hover {
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-hero__feature ul.products li.product :is(a, .button):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--ol-forest-700) 34%, transparent) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1279px) {
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.oasis-redesign .ol-hero__feature {
    width: min(100%, 25rem) !important;
  }

  
}

@media (max-width: 1100px) and (min-width: 901px) {
  body.oasis-redesign .ol-shop-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.oasis-redesign .ol-hero__feature {
    width: min(100%, 32rem) !important;
    margin-inline: auto !important;
  }

  
}

@media (max-width: 520px) {
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products {
    
    gap: 1.1rem !important;
  }

  body.oasis-redesign .ol-products__tabs {
    display: flex !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding: .3rem !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.oasis-redesign .ol-products__tabs::-webkit-scrollbar {
    display: none;
  }

  body.oasis-redesign .ol-products__tabs .ol-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  body.oasis-redesign .ol-hero__feature {
    width: min(100%, 22rem) !important;
  }

  

  
}

/* Homepage featured specimen. Its dedicated markup isolates this composition
   from the equal-height catalogue card contract above. */

body.oasis-redesign .ol-hero-product {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 27.75rem;
  padding: var(--ol-feature-card-padding);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(245, 243, 238, .7);
  border-radius: var(--ol-radius-feature-card);
  background: rgba(245, 243, 238, .88);
  box-shadow:
    0 32px 82px -34px rgba(20, 32, 26, .58),
    inset 0 1px rgba(255, 255, 255, .8);
  color: var(--ol-ink-900);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
  isolation: isolate;
  transition: border-color .4s var(--ol-ease), box-shadow .4s var(--ol-ease), transform .4s var(--ol-ease);
}

body.oasis-redesign .ol-hero-product:hover {
  border-color: rgba(245, 243, 238, .92);
  box-shadow:
    0 38px 92px -34px rgba(20, 32, 26, .68),
    inset 0 1px rgba(255, 255, 255, .9);
  transform: translateY(-3px);
}

body.oasis-redesign .ol-hero-product__link {
  display: grid;
  grid-template-rows: minmax(14.5rem, 1fr) auto;
  min-width: 0;
  color: var(--ol-ink-900);
  text-decoration: none;
}

/* No frame — matches the catalog cards. The plate is a transparent spacer; the
   photo reads directly on the card instead of sitting inside a beige surface. */
body.oasis-redesign .ol-hero-product__plate {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ol-radius-feature-plate);
  background: transparent;
  box-shadow: none;
}

body.oasis-redesign .ol-hero-product__eyebrow {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: .48rem .72rem;
  border: 1px solid rgba(245, 243, 238, .34);
  border-radius: var(--ol-radius-badge);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
  font-family: var(--ol-font-body);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body.oasis-redesign .ol-hero-product__image,
body.oasis-redesign .ol-hero-product:hover .ol-hero-product__image {
  align-self: center;
  justify-self: center;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 16rem;
  margin: 0;
  padding: 1.35rem 2.4rem 1rem;
  box-sizing: border-box;
  border-radius: inherit;
  object-fit: contain;
  filter: saturate(.96) contrast(1.02);
  transform: scale(1);
  transition: transform .7s cubic-bezier(.2, .75, .2, 1);
}

body.oasis-redesign .ol-hero-product:hover .ol-hero-product__image {
  transform: scale(1.025);
}

body.oasis-redesign .ol-hero-product__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1rem 1.15rem .75rem;
}

body.oasis-redesign .ol-hero-product__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .22em;
  max-width: 100%;
  color: var(--ol-ink-900);
  font-family: var(--ol-font-display);
  font-size: clamp(1.75rem, 2.35vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-align: left;
}

body.oasis-redesign .ol-hero-product__name > span {
  min-width: 0;
  white-space: nowrap;
}

body.oasis-redesign .ol-hero-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .55rem;
  margin-top: .38rem;
  color: var(--ol-forest-900);
  font-family: var(--ol-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

body.oasis-redesign .ol-hero-product__action {
  padding: 0 1.15rem 1.1rem;
}

body.oasis-redesign .ol-hero-product__action :is(.button, .add_to_cart_button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 11.5rem;
  min-height: 46px !important;
  margin: 0 !important;
  padding: .75rem 1.25rem !important;
  box-sizing: border-box !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 58%, transparent) !important;
  border-radius: var(--ol-radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ol-forest-900) !important;
  font-family: var(--ol-font-body) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color .34s var(--ol-ease), border-color .34s var(--ol-ease), color .34s var(--ol-ease) !important;
}

body.oasis-redesign .ol-hero-product__action :is(.button, .add_to_cart_button):hover {
  border-color: var(--ol-forest-900) !important;
  background: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
}

body.oasis-redesign .ol-hero-product :is(a, .button):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--ol-forest-700) 42%, white) !important;
  outline-offset: 3px !important;
}

@media (min-width: 1280px) {
  body.oasis-redesign .ol-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 39rem) !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
  }
}

@media (max-width: 1279px) and (min-width: 769px) {
  body.oasis-redesign .ol-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr) !important;
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  }

  body.oasis-redesign .ol-hero__feature {
    width: 100% !important;
  }

  body.oasis-redesign .ol-hero-product {
    min-height: 25rem;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  body.oasis-redesign .ol-hero__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.oasis-redesign .ol-hero__feature {
    width: min(100%, 32rem) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 768px) {
  body.oasis-redesign .ol-hero__feature {
    width: min(100%, 32rem) !important;
    margin-inline: auto !important;
  }

  body.oasis-redesign .ol-hero-product {
    min-height: 0;
  }

  body.oasis-redesign .ol-hero-product__link {
    grid-template-rows: clamp(13rem, 58vw, 17rem) auto;
  }
}

@media (max-width: 420px) {
  body.oasis-redesign .ol-hero__feature {
    width: 100% !important;
  }

  body.oasis-redesign .ol-hero-product {
    padding: var(--ol-feature-card-padding);
    border-radius: var(--ol-radius-feature-card);
  }

  body.oasis-redesign .ol-hero-product__details {
    padding: .9rem .75rem .7rem;
  }

  body.oasis-redesign .ol-hero-product__name {
    font-size: clamp(1.45rem, 8vw, 1.85rem);
  }

  body.oasis-redesign .ol-hero-product__action {
    padding: 0 .75rem .8rem;
  }

  body.oasis-redesign .ol-hero-product__action :is(.button, .add_to_cart_button) {
    min-width: min(11.5rem, 100%);
  }
}

@media (hover: none) {
  body.oasis-redesign .ol-hero-product:hover,
  body.oasis-redesign .ol-hero-product:hover .ol-hero-product__image {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.oasis-redesign .ol-hero-product,
  body.oasis-redesign .ol-hero-product__image,
  body.oasis-redesign .ol-hero-product__action :is(.button, .add_to_cart_button) {
    transition: none !important;
  }
}

/* CSS scroll-driven reveal: no script, and no hidden fallback in browsers
   without view timelines. Each column starts a fraction later. */
@supports (animation-timeline: view()) {
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product {
    animation-name: ol-product-card-reveal;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timeline: view(block);
    animation-range: entry 2% cover 22%;
  }

  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product:nth-child(4n + 2) { animation-range: entry 5% cover 25%; }
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product:nth-child(4n + 3) { animation-range: entry 8% cover 28%; }
  body.oasis-redesign :is(.ol-products__grid, .ol-shop-body, .related.products, .upsells.products, .up-sells.products) ul.products li.product:nth-child(4n) { animation-range: entry 11% cover 31%; }
}

/* ============================================================
   WOOCOMMERCE DEFAULT LAYOUT OVERRIDES  (root-cause fix)
   woocommerce-layout.css ships:
       .woocommerce div.product div.summary { width: 48%; float: right; }
       .woocommerce div.product div.images  { width: 48%; float: left;  }
   Our summary keeps the `summary` class (plugins hook it), so Woo shrank it to
   48% of its grid cell -> 0.48 x 518px = 249px, and the add-to-cart button then
   overflowed by 117px. We use CSS grid, so kill the widths AND the floats.
   ============================================================ */
.woocommerce div.product .ol-product-info.summary,
.woocommerce #content div.product .ol-product-info.summary,
.woocommerce div.product div.summary.ol-product-info {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  float: none;
  clear: none;
  margin: 0;
}
.woocommerce div.product .ol-product-gallery,
.woocommerce #content div.product .ol-product-gallery,
.woocommerce div.product div.images.ol-product-gallery {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
}
/* grid children must be allowed to shrink or their contents force overflow */
.ol-product-grid > * { min-width: 0; }

/* add-to-cart row must fit inside the summary column */
.ol-product-info form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3, 12px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ol-product-info form.cart .quantity { flex: 0 0 auto; }
.ol-product-info form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.ol-product-info form.cart > * { min-width: 0; }

/* ============================================================
   CARD SYSTEM: image blending + CTA containment   (site-wide)
   The blend/containment rules previously lived in product-page.css, which is
   only enqueued on single-product pages — so the shop/catalog cards kept their
   hard white squares and their CTA overflowed the card.
   ============================================================ */

/* nothing in a card may exceed the card */
body.oasis-redesign ul.products li.product,
body.oasis-redesign ul.products li.product > * {
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
}
body.oasis-redesign ul.products li.product a.button,
body.oasis-redesign ul.products li.product .button,
body.oasis-redesign ul.products li.product .ol-select-size {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   SHOP CARDS == HOME CARDS  (owner: "shop page should be the same as the home")
   Measured differences on the shop card vs the home card:
     - chips: text-transform:uppercase  ("5MG")   -> home shows "5mg"
     - CTA:   solid forest fill                    -> home is a quiet outline
   Unify: the shop/related grids adopt the home card treatment exactly.
   ============================================================ */

/* CTA: quiet outline by default, solid forest on hover — identical to home */

/* product photos: rounded to match the plate they sit in (owner request) */

/* the category sidebar must never be painted over by a card (hover lift/shadow) */

body.oasis-redesign .ol-shop-body ul.products li.product { background: color-mix(in oklab, var(--ol-cream-50) 92%, white) !important;border: 1px solid color-mix(in oklab, var(--ol-forest-900) 9%, transparent) !important;border-radius: var(--ol-radius-lg) !important;box-shadow: 0 18px 60px -52px rgba(20,32,26,.42) !important;overflow: hidden !important;transition: transform .35s var(--ol-ease), box-shadow .35s var(--ol-ease), border-color .35s var(--ol-ease);z-index: 1; }
body.oasis-redesign .ol-shop-body ul.products li.product:hover { transform: translateY(-3px);border-color: color-mix(in oklab, var(--ol-forest-900) 20%, transparent) !important;box-shadow: 0 32px 90px -60px rgba(20,32,26,.62) !important;z-index: 2; }

/* ============================================================
   SHOP: stop the sidebar/card collision for good
   - remove the z-index hack (it made the SIDEBAR paint over the CARD, which
     reads as an overlap just as badly)
   - widen the column gap so the card's soft shadow can never bleed onto the
     category list
   - soften the card shadow (was rgba(...,0.5) with a 44px blur)
   ============================================================ */
body.oasis-redesign .ol-shop-sidebar,
body.oasis-redesign .ol-shop-sidebar__sticky { position: relative;z-index: auto; }
body.oasis-redesign .ol-shop-body ul.products li.product,
body.oasis-redesign .ol-shop-body ul.products li.product:hover { z-index: auto; }

body.oasis-redesign .ol-shop-sidebar { padding-right: .5rem; }

body.oasis-redesign ul.products li.product {
  box-shadow: 0 10px 26px -22px rgba(20, 32, 26, .28) !important;
}
body.oasis-redesign ul.products li.product:hover {
  box-shadow: 0 14px 30px -20px rgba(20, 32, 26, .34) !important;
}

/* ============================================================
   HOME HERO PROPORTIONS
   The featured card had grown to 43% of the hero, squeezing the headline from
   2 lines to 4 ("Where / Science, / Meets / Serenity."). The card is a supporting
   focal point, not a co-star: cap it, and give the headline room to breathe.
   ============================================================ */
body.oasis-redesign .ol-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
body.oasis-redesign .ol-hero__feature { width: 100%;max-width: 400px;margin-left: auto;box-sizing: border-box; }
body.oasis-redesign .ol-hero__copy { min-width: 0; }
body.oasis-redesign .ol-hero__title {
  max-width: none;
  white-space: normal;
}
/* the featured plate shouldn't dwarf the product inside it */

@media (max-width: 900px) {
  body.oasis-redesign .ol-hero__inner { grid-template-columns: minmax(0, 1fr); }
  body.oasis-redesign .ol-hero__feature { max-width: 360px; margin: 2rem auto 0; }
  body.oasis-redesign .ol-hero__title { max-width: none; }
}

/* hero: the copy column was 488px while the title renders at 96px — "Where Science,"
   needs ~640px, so the headline broke into 4 lines. Give the copy the larger share
   and cap the display size. (Escalated specificity: an older rule set the columns.) */
/* DESKTOP ONLY. Unscoped, this out-specified the @media (max-width:768px) rule
   that stacks the hero, so phones kept a two-column hero: the headline was
   crushed into ~230px and the featured card shrank to ~195px. */
@media (min-width: 769px) {
  html body.oasis-redesign .ol-hero .ol-hero__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
  }
}

/* Phones: one column, copy first, card centred and usable. */
@media (max-width: 768px) {
  html body.oasis-redesign .ol-hero .ol-hero__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1.75rem, 6vw, 2.5rem) !important;
  }
  html body.oasis-redesign .ol-hero .ol-hero__feature {
    width: 100% !important;
    max-width: 340px !important;
    margin-inline: auto !important;
  }
  html body.oasis-redesign .ol-hero .ol-hero__title {
    font-size: clamp(2.1rem, 9vw, 3rem) !important;
  }
}
html body.oasis-redesign .ol-hero .ol-hero__title {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem) !important;
  line-height: 1.04 !important;
  max-width: none !important;
}
html body.oasis-redesign .ol-hero .ol-hero__feature {
  max-width: 380px !important;
  margin-left: auto !important;
}

/* ============================================================
   FINAL CARD RULES — must win the cascade (appended last)
   1. Shop/related CTAs were still rendering solid forest (rgb(53,53,37)); a later
      rule beat the outline treatment at equal specificity. Home and shop must be
      IDENTICAL: quiet outline by default, solid forest on hover.
   2. The photo sat flush to the plate (plate 249px, image 247px, padding 0), so the
      photo's square studio-background corner collided with the plate's 10px radius
      and showed as a notch. Inset the photo inside the plate.
   ============================================================ */
html body.oasis-redesign ul.products li.product a.button,
html body.oasis-redesign ul.products li.product a.add_to_cart_button,
html body.oasis-redesign ul.products li.product .ol-select-size,
html body.oasis-redesign .ol-hero__feature a.button,
html body.oasis-redesign .related.products li.product a.button {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ol-forest-900) !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 45%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
html body.oasis-redesign ul.products li.product a.button:hover,
html body.oasis-redesign ul.products li.product a.add_to_cart_button:hover,
html body.oasis-redesign ul.products li.product .ol-select-size:hover,
html body.oasis-redesign .ol-hero__feature a.button:hover,
html body.oasis-redesign .related.products li.product a.button:hover {
  background-color: var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
  border-color: var(--ol-forest-900) !important;
}

/* card void: simple products have no size chips, so equal-height rows left a ~79px
   hole between price and CTA. Let the image plate absorb the surplus instead — cards
   stay equal height, CTAs stay aligned, no floating gap. */
html body.oasis-redesign ul.products li.product {
  display: flex !important;
  flex-direction: column;
}
html body.oasis-redesign ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

html body.oasis-redesign ul.products li.product .ol-card-options { margin-top: auto; }
html body.oasis-redesign ul.products li.product a.button,
html body.oasis-redesign ul.products li.product a.add_to_cart_button {
  margin-top: .7rem !important;
}

/* ============================================================
   PRODUCT PHOTO — the IMAGE ITSELF is the rounded object.
   No plate box, no nested frames: the wrapper is invisible, and the photo carries
   the rounded corners and sits directly on the card.
   ============================================================ */

/* ==========================================================================
   JS-INJECTED COMPONENTS
   These classes are created at runtime by contact-compliance.js / nav.js /
   product.js, so they never appear in server-rendered HTML. A static dead-code
   pass cannot see them — do not "clean" them away.
   ========================================================================== */

/* Prohibited-terms modal (contact form) */
body.oasis-redesign .ol-compliance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: color-mix(in oklab, var(--ol-ink-900) 62%, transparent);
  backdrop-filter: blur(6px);
  animation: ol-compliance-fade .22s var(--ol-ease);
}
@keyframes ol-compliance-fade { from { opacity: 0; } to { opacity: 1; } }

body.oasis-redesign .ol-compliance-modal {
  width: min(480px, 100%);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--ol-radius-lg, 20px);
  background: var(--ol-cream-50);
  box-shadow: 0 40px 80px -30px rgba(20, 32, 26, .55);
  text-align: center;
  animation: ol-compliance-rise .26s var(--ol-ease);
}
@keyframes ol-compliance-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

body.oasis-redesign .ol-compliance-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto var(--sp-3);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ol-forest-900) 10%, transparent);
  color: var(--ol-forest-900);
  font: 700 1.35rem/1 var(--ol-font-body);
}

body.oasis-redesign .ol-compliance-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--ol-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--ol-ink-900);
}

body.oasis-redesign .ol-compliance-body {
  margin: 0 0 var(--sp-4);
  font-size: .92rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ol-ink-900) 72%, transparent);
}

body.oasis-redesign .ol-compliance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

body.oasis-redesign .ol-compliance-edit,
body.oasis-redesign .ol-compliance-send {
  flex: 1 1 170px;
  min-height: 48px;
  padding: .85rem 1.4rem;
  border-radius: var(--ol-radius-control, 999px);
  font: 700 .72rem/1.15 var(--ol-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ol-ease), color .2s var(--ol-ease);
}
body.oasis-redesign .ol-compliance-edit {
  border: 1px solid var(--ol-forest-900);
  background: var(--ol-forest-900);
  color: var(--ol-cream-50);
}
body.oasis-redesign .ol-compliance-edit:hover {
  background: color-mix(in oklab, var(--ol-forest-900) 88%, #000);
}
/* Secondary action. !important because a generic button rule elsewhere paints
   every button forest; "Send anyway" must read as the lesser choice. */
html body.oasis-redesign button.ol-compliance-send {
  border: 1px solid color-mix(in oklab, var(--ol-ink-900) 22%, transparent) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: color-mix(in oklab, var(--ol-ink-900) 78%, transparent) !important;
}
html body.oasis-redesign button.ol-compliance-send:hover {
  background: color-mix(in oklab, var(--ol-ink-900) 6%, transparent) !important;
  background-color: color-mix(in oklab, var(--ol-ink-900) 6%, transparent) !important;
}

/* Scroll lock while the mobile nav drawer is open */
body.oasis-redesign.ol-drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* Out-of-stock counterpart to .ol-stock-pill--in-stock */
body.oasis-redesign .ol-stock-pill--out-of-stock {
  background: color-mix(in oklab, #8a4b32 12%, transparent);
  color: #7d4025;
}

/* Cart/checkout rows while an AJAX update is in flight */
body.oasis-redesign .is-updating {
  opacity: .55;
  pointer-events: none;
  transition: opacity .18s var(--ol-ease);
}

/* ==========================================================================
   KEYFRAMES
   A static dead-code pass deletes these: `from`/`to`/`0%` match no DOM element,
   so the whole @keyframes block reads as "dead". Without them the animations
   silently do nothing (the trust ticker just sat still). Keep.
   ========================================================================== */

/* front-page.php prints the signal list twice, so -50% is one exact lap. */
@keyframes ol-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ol-product-card-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ol-marquee__track { animation: none !important; }
}

/* ==========================================================================
   SINGLE-CHOICE CHIPS (radio) — signup + My Account profile
   The Oasis Accounts stylesheet only neutralises input[type="checkbox"], and it
   isn't even enqueued on the account pages, so the radios fell through to the
   browser's native control: a blue dot fighting the forest chip. Draw our own
   and key it off currentColor, so one rule reads correctly on the pale chip
   (dark ring) and on the selected forest chip (cream ring).
   ========================================================================== */
body.oasis-redesign .oa-check input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-content: center;
  flex: 0 0 auto;
  width: 1.05rem !important;
  height: 1.05rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid color-mix(in oklab, currentColor 34%, transparent) !important;
  /* A shared .oa-checkbox-grid input rule rounds these to 6px — a radio must
     read as a circle, not a rounded square. */
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color .2s var(--ol-ease), background .2s var(--ol-ease);
}

body.oasis-redesign .oa-check input[type="radio"]::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: currentColor;
  transform: scale(0);
  transition: transform .16s var(--ol-ease);
}

body.oasis-redesign .oa-check:hover input[type="radio"] {
  border-color: color-mix(in oklab, currentColor 60%, transparent);
}

body.oasis-redesign .oa-check input[type="radio"]:checked {
  border-color: currentColor;
}

body.oasis-redesign .oa-check input[type="radio"]:checked::before {
  transform: scale(1);
}

/* The native focus ring is browser-blue too; the chip carries focus instead. */
body.oasis-redesign .oa-check input[type="radio"]:focus-visible {
  outline: none;
}

/* Chip = control then label, on one line. On the account page the label was
   laying out as a block, so the dot sat on top of the words instead of beside
   them. */
body.oasis-redesign .oa-checkbox-grid .oa-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .6rem !important;
  text-align: left;
}
body.oasis-redesign .oa-checkbox-grid .oa-check > span {
  display: block;
  min-width: 0;
  line-height: 1.3;
}

/* ==========================================================================
   PHONE FIXES — hero lede line breaks + ticker clipping
   ========================================================================== */

/* "ISO certified & GMP compliant." gets its own line at every width, so the
   lede reads as three deliberate lines rather than two ragged ones. */
.ol-hero__lede-br--phone { display: inline; }

/* The ticker items are nowrap + overflow:hidden, and the longest string
   ("All products sold are for research use only, not for human consumption")
   measured 407px of text inside a 370px box, so its tail was being cut off.
   Scale the type down on phones until the longest line fits. */
@media (max-width: 768px) {
  body.oasis-redesign .ol-ticker-item {
    padding: 0 .5rem;
    font-size: .58rem;
    letter-spacing: .04em;
  }
}
@media (max-width: 420px) {
  body.oasis-redesign .ol-ticker-item {
    font-size: .53rem;
    letter-spacing: .02em;
  }
}

/* ==========================================================================
   TRUST PILLS — the middle one ("RESEARCH-USE ONLY") was cramped to its edges.
   The mobile rule had squeezed horizontal padding to .35rem and clipped with
   ellipsis. Give the text room; let the row wrap rather than crush a pill.
   ========================================================================== */
body.oasis-redesign:not(.home) .ol-page-proofline span { display: inline-flex;align-items: center;justify-content: center;flex: 1 1 auto;min-width: 0;min-height: 36px;padding: .5rem .85rem !important;border: 1px solid color-mix(in oklab, var(--ol-guide-olive) 18%, transparent);border-radius: var(--ol-radius-pill);background: color-mix(in oklab, var(--ol-cream-50) 74%, transparent);color: var(--ol-guide-umber);font-size: .7rem;font-weight: 700;letter-spacing: .13em;line-height: 1;text-transform: uppercase;text-align: center;white-space: nowrap;backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);overflow: visible !important;text-overflow: clip !important; }
@media (max-width: 768px) {
  body.oasis-redesign:not(.home) .ol-page-proofline {
    flex-wrap: wrap !important;
  }
  body.oasis-redesign:not(.home) .ol-page-proofline span {
    flex: 1 1 auto !important;
    padding: .5rem .7rem !important;
    font-size: .56rem !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   REGISTRATION GATE — the intro paragraph block eats the whole first screen on
   mobile before the login form. Hide the prose on phones; the form is the point.
   ========================================================================== */
@media (max-width: 768px) {
  body.oasis-redesign .ol-registration-gate__content {
    display: none !important;
  }
  body.oasis-redesign .ol-registration-gate {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* ==========================================================================
   QUICK CART — slide-out drawer from the header cart button. White panel,
   forest-accent CTA, styled WooCommerce mini-cart. Matches the site card
   language.
   ========================================================================== */
.ol-quickcart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 32, 26, .42);
  opacity: 0;
  transition: opacity .3s ease;
}
.ol-quickcart-backdrop.is-open { opacity: 1; }

.ol-quickcart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1210;
  display: flex;
  flex-direction: column;
  width: min(400px, 92vw);
  height: 100dvh;
  background: #fff;
  border-left: 3px solid var(--ol-forest-700);
  box-shadow: -24px 0 70px -40px rgba(20, 32, 26, .6);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2, .75, .2, 1);
}
.ol-quickcart.is-open { transform: translateX(0); }

.ol-quickcart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #D9D3C3;
}
.ol-quickcart__title {
  font-family: var(--ol-font-display);
  font-size: 1.35rem;
  color: var(--ol-ink-900);
}
html body .ol-quickcart .ol-quickcart__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px !important;
  min-width: 0 !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #D9D3C3 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ol-ink-900) !important;
  cursor: pointer;
  transition: background .2s var(--ol-ease), color .2s var(--ol-ease);
}
.ol-quickcart__close svg { width: 16px; height: 16px; }
.ol-quickcart__close:hover { background: var(--ol-forest-900); color: var(--ol-cream-50); border-color: var(--ol-forest-900); }

.ol-quickcart__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 22px 22px;
}
/* WooCommerce replaces this inner div wholesale on fragment refresh; keep it
   transparent to layout so the body's flex + the scoped item styles hold. */
.ol-quickcart__body > .widget_shopping_cart_content { display: contents; }

/* WooCommerce mini-cart inside the drawer */
.ol-quickcart__body .woocommerce-mini-cart.cart_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-quickcart__body .woocommerce-mini-cart-item {
  position: relative;
  display: block;
  min-height: 52px;
  margin: 0 !important;
  padding: 14px 26px 14px 66px !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ol-forest-900) 8%, transparent) !important;
  font-size: .82rem;
  line-height: 1.35;
}
/* The thumbnail is nested inside the product link — pin it to the left of the
   row via absolute positioning (relative to the li). */
.ol-quickcart__body .woocommerce-mini-cart-item img {
  position: absolute !important;
  left: 0;
  top: 14px;
  width: 52px !important;
  height: 52px;
  margin: 0 !important;
  object-fit: cover;
  border: 1px solid #D9D3C3;
  border-radius: 10px;
  float: none !important;
}
.ol-quickcart__body .woocommerce-mini-cart-item > a:not(.remove) {
  display: block;
  font-weight: 600;
  color: var(--ol-ink-900) !important;
  text-decoration: none !important;
}
.ol-quickcart__body .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 3px;
  color: color-mix(in oklab, var(--ol-ink-900) 62%, transparent);
  font-size: .78rem;
}
.ol-quickcart__body .woocommerce-mini-cart-item a.remove {
  position: absolute !important;
  right: 0;
  top: 14px;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  text-align: center;
  color: color-mix(in oklab, var(--ol-ink-900) 55%, transparent) !important;
  font-size: 18px !important;
  border-radius: 999px;
}
.ol-quickcart__body .woocommerce-mini-cart-item a.remove:hover {
  background: transparent !important;
  color: #8a4b32 !important;
}
.ol-quickcart__body .woocommerce-mini-cart__empty-message {
  margin: 28px 0;
  text-align: center;
  color: color-mix(in oklab, var(--ol-ink-900) 62%, transparent);
  font-size: .9rem;
}
.ol-quickcart__body .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 0 !important;
  padding: 14px 0 0;
  border-top: 2px solid color-mix(in oklab, var(--ol-forest-700) 55%, transparent);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ol-ink-900) 70%, transparent);
}
.ol-quickcart__body .woocommerce-mini-cart__total strong,
.ol-quickcart__body .woocommerce-mini-cart__total .amount {
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ol-ink-900);
}
.ol-quickcart__body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0 !important;
  padding: 0;
}
.ol-quickcart__body .woocommerce-mini-cart__buttons .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  font: 600 .74rem/1 var(--ol-font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
/* Checkout = primary forest pill; View cart = outlined secondary. */
.ol-quickcart__body .woocommerce-mini-cart__buttons .checkout {
  order: -1;
  background: var(--ol-forest-900) !important;
  border: 1px solid var(--ol-forest-900) !important;
  color: var(--ol-cream-50) !important;
}
.ol-quickcart__body .woocommerce-mini-cart__buttons .checkout:hover { background: var(--ol-forest-800) !important; }
.ol-quickcart__body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: #fff !important;
  border: 1px solid color-mix(in oklab, var(--ol-forest-900) 30%, transparent) !important;
  color: var(--ol-forest-900) !important;
}
.ol-quickcart__body .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: color-mix(in oklab, var(--ol-forest-900) 6%, transparent) !important;
}

body.ol-quickcart-open { overflow: hidden; }

/* Quick-cart quantity stepper (replaces the static "n × price" line). */
.ol-quickcart__body .oasis-qc-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
html body .ol-quickcart .oasis-qc-stepper {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: auto !important;
  border: 1px solid #D9D3C3 !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: #fff !important;
}
html body .ol-quickcart .oasis-qc-step {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  min-width: 0 !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ol-forest-900) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background .15s var(--ol-ease), color .15s var(--ol-ease);
}
html body .ol-quickcart .oasis-qc-step:hover { background: var(--ol-forest-900) !important; color: var(--ol-cream-50) !important; }
.ol-quickcart__body .oasis-qc-num {
  min-width: 26px;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ol-ink-900);
}
.ol-quickcart__body .oasis-qc-price {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ol-forest-900);
}
.ol-quickcart.is-busy .ol-quickcart__body { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* ==========================================================================
   WPLoyalty (Points & Rewards) — make the plugin's fixed-pixel card grids fluid.
   The plugin lays reward cards out at 180px x3 (=564px) and earn/opportunity
   cards at 230px x2 (=484px), which overflow the ~460px My Account content
   column. Fluid columns + min-width:0 let them fit and wrap. Scoped to the
   loyalty page so nothing else is touched.
   ========================================================================== */
.wlr-myaccount-page .wlr-customer-reward {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important;
}
.wlr-myaccount-page .wlr-campaign-container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
}
.wlr-myaccount-page :is(.wlr-customer-reward, .wlr-campaign-container) > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* Guard against any inner content pushing past the card (long labels/URLs). */
.wlr-myaccount-page :is(.wlr-reward-card, .wlr-earning-option) {
  overflow-wrap: anywhere;
}
.wlr-myaccount-page .wlr_referral_url { min-width: 0 !important; }
/* Currency pill in the "Used rewards" card renders too narrow and clips "USD". */
.wlr-myaccount-page #wlr_currency_list {
  width: auto !important;
  min-width: 66px !important;
  padding: 4px 8px !important;
  text-overflow: clip;
  background-position: right 6px center;
}