/* =========================================================
   POLYMORPH BEAUTY — Design System
   Bridges Polymorph Beauty's existing dusty-mauve identity
   with Elleebana's premium black + gold brand language.
   ========================================================= */

:root {
  /* --- Brand palette --- */
  --color-ink:        #1c1917;   /* near-black, Elleebana-derived */
  --color-ink-soft:    #322c29;
  --color-mauve:       #9c8484;  /* Polymorph's existing brand color */
  --color-mauve-deep:  #7a615f;
  --color-mauve-pale:  #e9dcd8;
  --color-gold:        #b6905a;  /* Elleebana-derived warm gold */
  --color-gold-light:  #d9bd8c;
  --color-gold-dark:   #8f6f3f;
  --color-cream:       #faf6f2;
  --color-blush:       #f4e9e4;
  --color-white:       #ffffff;
  --color-line:        #e6dad4;
  --color-success:     #4d7c5f;
  --color-error:       #a3403a;
  --color-burnt-orange: #b7551d;

  /* --- Type --- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --max-width: 1240px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 10px 30px rgba(28, 25, 23, 0.10);
  --transition: 200ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* The mobile nav drawer (.main-nav, below) sits off-canvas via
   position:fixed + transform:translateX(100%) rather than being removed
   from layout — some mobile browsers still count that off-screen space
   toward the page's scrollable width, which silently widens the viewport
   every vw-unit/position:fixed calc on the page uses (this is what broke
   the Ask Ellee panel's mobile sizing). Clipping horizontal overflow here
   is the standard fix for off-canvas-menu layouts. */
/* html only, deliberately NOT body — body also getting a restricted
   overflow-x turns it into its own nested scroll container distinct from
   the viewport, which broke .site-header's position:sticky in testing.
   Restricting only the root element clips the phantom horizontal scroll
   without changing what "the viewport" is for sticky positioning. */
html { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.7rem, 2.6vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.4vw + 1rem, 1.6rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 0.75rem;
}

p.lead { font-size: 1.1rem; color: inherit; opacity: 0.82; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(48px, 7vw, 96px) 0; }
.section--tight { padding: clamp(32px, 4vw, 56px) 0; }
.section--ink { background: var(--color-ink); color: var(--color-cream); }
.section--ink h2, .section--ink h3 { color: var(--color-white); }
.section--ink .eyebrow { color: var(--color-gold-light); }
.section--blush { background: var(--color-blush); }
.section--mauve { background: var(--color-mauve); color: var(--color-white); }
.section--mauve h2 { color: var(--color-white); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-ink);
}
.btn--gold:hover { background: var(--color-gold); }

.btn--ink {
  background: var(--color-ink);
  color: var(--color-cream);
}
.btn--ink:hover { background: var(--color-ink-soft); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
}
.btn--outline:hover { background: rgba(0,0,0,0.05); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: var(--color-white);
}
.btn--outline-light:hover { background: rgba(255,255,255,0.12); }

.btn--sm { padding: 10px 20px; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Badge (Authorized Distributor) --- */
.badge-distributor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: rgba(182, 144, 90, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.badge-distributor .badge-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
}
.section--ink .badge-distributor,
.section--mauve .badge-distributor {
  background: rgba(255,255,255,0.08);
  color: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 242, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.announce-bar {
  background: var(--color-ink);
  color: var(--color-cream);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 8px 16px;
}
.announce-bar strong { color: var(--color-gold-light); }

/* Shown to a returning shopper whose stored language differs from the page
   they landed on. A suggestion under the header, never a redirect. */
.lang-suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: var(--color-blush);
  color: var(--color-ink);
  font-size: 0.85rem;
  padding: 10px 44px 10px 16px;
  position: relative;
  text-align: center;
}
.lang-suggest-cta {
  font-weight: 600;
  color: var(--color-gold-dark);
  text-decoration: underline;
}
.lang-suggest-close {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-ink-soft);
  padding: 0 6px;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  flex-shrink: 0;
}
.logo .logo-mark {
  width: 40px;
  height: 53px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo .logo-text {
  display: inline-block;
  background: linear-gradient(
    100deg,
    var(--color-gold-dark) 0%,
    var(--color-gold) 22%,
    var(--color-gold-light) 40%,
    #fff6e6 50%,
    var(--color-gold-light) 60%,
    var(--color-gold) 78%,
    var(--color-gold-dark) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logo-shine 7s ease-in-out infinite;
}
@keyframes logo-shine {
  0% { background-position: 200% center; }
  50% { background-position: 0% center; }
  100% { background-position: -200% center; }
}
.logo .logo-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mauve-deep);
  font-weight: 600;
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-block;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--color-gold-dark); background: var(--color-blush); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
}
.nav-dropdown a:hover { background: var(--color-blush); color: var(--color-ink); }

.dropdown-toggle {
  display: none;
}
@media (max-width: 960px) {
  .has-dropdown { display: flex; flex-wrap: wrap; align-items: center; }
  .has-dropdown .nav-link { flex: 1; }
  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
  }
  .dropdown-toggle::after {
    content: "▾";
    font-size: 0.8rem;
    color: var(--color-ink-soft);
  }
  .nav-item.is-expanded .dropdown-toggle::after { transform: rotate(180deg); }
}
.nav-link.is-active { color: var(--color-gold-dark); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: background var(--transition);
}
.icon-btn:hover { background: var(--color-blush); }

/* Language toggle. Text rather than a flag: a flag names a country, and
   this is US Spanish for US professionals, not a Mexican or Spanish store.
   Always shows the language you'd be switching TO. */
.lang-toggle {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-line, rgba(28,25,23,0.14));
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.lang-toggle:hover { background: var(--color-blush); color: var(--color-gold-dark); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute;
  top: 0; right: 0;
  background: var(--color-gold-dark);
  color: var(--color-white);
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center; justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

/* =========================================================
   MOBILE NAV
   ========================================================= */
@media (max-width: 960px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    height: 100vh;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform 260ms ease;
    padding: 90px 20px 30px;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-link { padding: 14px 10px; width: 100%; }
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding-left: 12px; display: none;
    background: var(--color-cream);
  }
  .nav-item.is-expanded .nav-dropdown { display: block; }
  .menu-toggle { display: flex; }
  .nav-scrim {
    display: none;
    position: fixed; inset: 0; background: rgba(28,25,23,0.4); z-index: 90;
  }
  .nav-scrim.is-visible { display: block; }

  /* Logo must be allowed to shrink (and lose its subtitle) so the
     search/account/cart/menu icons in .nav-actions — which stay
     flex-shrink:0 so they're never lost — have room and don't get
     pushed off-canvas on narrow viewports. */
  .nav-wrap { gap: 12px; }
  .logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .logo > span { min-width: 0; overflow: hidden; }
  .logo .logo-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo .logo-sub { display: none; }

  /* The toggle keeps its place on mobile — a Spanish speaker on a phone is
     exactly who needs it — but drops to the label alone to save width. */
  .lang-toggle { padding: 4px 8px; font-size: 0.74rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--color-blush) 0%, var(--color-cream) 55%);
  padding: clamp(56px, 9vw, 120px) 0;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-copy h1 { margin: 18px 0 20px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-media {
  position: relative;
  /* Half of --radius-lg (18px) — scoped here rather than changing the
     shared variable, since --radius-lg is also used by non-image UI
     (buttons, cards, popovers) that isn't part of this image-only tweak. */
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--color-mauve), var(--color-ink));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-display);
  text-align: center;
  padding: 12px;
  /* Safari/WebKit fails to clip child content (img, iframe) to the
     border-radius when overflow:hidden and box-shadow are on the same
     element — the mask forces it to clip correctly. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* Real fix for embedded media (img/iframe) overflowing the frame in
   Safari: percentage height on a flex child doesn't reliably resolve
   against a height that comes only from aspect-ratio. Absolute
   positioning against the now-relative parent sidesteps that. */
.hero-media > img,
.hero-media > iframe {
  position: absolute;
  /* 12px matches .hero-media's own padding, preserving the colored
     "mat" visible around the media on all four sides. img/iframe are
     replaced elements — unlike normal boxes, they do NOT auto-stretch
     to fill inset offsets, they fall back to intrinsic size — so the
     size has to be computed explicitly here rather than left to auto. */
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  /* The mat's padding means the outer container's own rounded corners
     don't reach the photo itself — without this, the image inside the
     mat has hard square corners even though the frame around it is
     rounded. Slightly smaller than the container's 9px so the mat's
     border stays an even ring around the curve. */
  border-radius: 6px;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; aspect-ratio: 16/10; }
}

/* Homepage "Grow Your Business" education CTA — same 2-column-collapses-
   to-stacked pattern as .hero-grid/.hero-media above, just with this
   section's own column ratio and photo aspect ratio. Previously these
   lived as inline styles with no mobile breakpoint at all, so the photo
   just shrank to a sliver at its 0.8fr share of a narrow viewport. */
.cta-edu-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.cta-edu-media { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .cta-edu-grid { grid-template-columns: 1fr; }
  .cta-edu-media { order: -1; aspect-ratio: 16/10; }
}

/* General-purpose version of the same copy/photo split used above, for any
   other 2-column section pairing text with a .hero-media photo (About page,
   Why Elleebana, etc.) — was previously copy-pasted per page as inline
   styles with no mobile breakpoint, causing the same shrunken-photo bug on
   each of them. Pick a ratio modifier for the desktop column widths; mobile
   always collapses to one column with the photo full-width on top. */
.split-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
.split-grid .hero-media { aspect-ratio: 4 / 3; }
.split-grid--even { grid-template-columns: 1fr 1fr; }
.split-grid--0911 { grid-template-columns: 0.9fr 1.1fr; }
.split-grid--1109 { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 860px) {
  .split-grid { grid-template-columns: 1fr; }
  .split-grid .hero-media { order: -1; aspect-ratio: 16/10; }
}

/* Shopping/collection pages: on mobile, skip straight past the page-hero
   copy (and any intro section ahead of the product grid) so "Shop This
   Collection" is the first thing a shopper sees below the header instead
   of a scroll of text first. Opt-in per element (see the shopping pages
   themselves) rather than a blanket .page-hero rule, since other pages
   (About, Contact, the Education hub, Cart) still want their hero shown
   on mobile. Desktop is untouched — this only applies below the same
   960px breakpoint the header's own mobile nav switches over at. */
@media (max-width: 960px) {
  .mobile-hide-intro { display: none; }
}

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid {
  display: grid;
  gap: 26px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Category cards are half as wide at 2-up on mobile — the heading
     (sized off viewport width, not card width) wraps to 2 lines at
     the old size and pushes up into the branding image behind it. */
  .category-card-body { padding: 14px; }
  .category-card-body .eyebrow { display: none; }
  .category-card-body h3 { font-size: 0.98rem; line-height: 1.15; margin-bottom: 10px; }
  .category-card-body p { display: none; }
  .category-card-body .btn { padding: 8px 16px; font-size: 0.78rem; }
}
/* .grid--2 is only ever 2 cards (see About's "Two Home Bases"), unlike
   .grid--3/.grid--4's product grids which stay 2-up on purpose — with
   real card content (address, contact links) rather than a product
   thumbnail, 2 columns at phone width squeezes both illegibly, so this
   collapses to a single stacked column instead of forcing 2-up. */
@media (max-width: 700px) {
  .grid--2 { grid-template-columns: 1fr; }
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head .btn { flex-shrink: 0; }

.sort-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -20px 0 22px;
  font-size: 0.85rem;
}
.sort-bar label { opacity: 0.7; }
.sort-bar select {
  padding: 7px 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-white);
  color: var(--color-ink);
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 3/4;
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(28,25,23,0.92) 0%, rgba(28,25,23,0.15) 60%),
    linear-gradient(135deg, var(--cc-a, var(--color-mauve)), var(--cc-b, var(--color-ink)));
}
/* Cards with a real photo drop the flat two-tone gradient and keep only
   the bottom scrim, so the photo itself shows through. Must come after
   .category-card::before above — equal specificity, source order wins. */
.category-card--photo::before {
  background: linear-gradient(0deg, rgba(28,25,23,0.85) 0%, rgba(28,25,23,0.05) 55%);
}
.category-card-body { position: relative; padding: 22px; color: var(--color-white); }
.category-card-body .eyebrow { color: var(--color-gold-light); }
.category-card-body h3 { color: var(--color-white); margin-bottom: 6px; }
.category-card-body p { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-bottom: 12px; }

.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--color-blush), var(--color-mauve-pale));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-mauve-deep);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px;
  overflow: hidden;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-thumb-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: rgba(28,25,23,0.55);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.product-thumb:hover .product-thumb-hint { opacity: 1; }
.product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-name { font-size: 0.95rem; font-weight: 600; }
.product-price { color: var(--color-gold-dark); font-weight: 700; }
.product-card .btn { margin-top: auto; }
.sold-out-tag {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 4px 8px;
  border-radius: 4px;
}
.preliminary-tag {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-blush);
  color: var(--color-gold-dark);
  border: 1px solid var(--color-gold-light);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Product detail page — image + buy box side by side, reusing
   .product-price/.sold-out-tag/.btn styling from the card above so
   the "buy box" (rendered by product-detail.js, reusing catalog.js's
   priceHTML()/ctaHTMLFor()) looks consistent with collection cards. */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.product-detail-media {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-blush), var(--color-mauve-pale));
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-detail-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-detail-buy .product-price { font-size: 1.4rem; margin: 6px 0 4px; }
.product-detail-description { max-width: 720px; margin-top: 10px; line-height: 1.7; opacity: 0.85; }
@media (max-width: 720px) {
  .product-detail { grid-template-columns: 1fr; }
}

.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--color-mauve), var(--color-ink));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Without this the thumbnail relied on the parent's overflow:hidden to clip a
   too-tall image, which centres but never scales it. A portrait photo then
   showed an arbitrary horizontal slice at full resolution instead of a fitted
   crop. cover makes the fit explicit and correct for any source ratio. */
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0.05) 65%);
}
.blog-thumb-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-gold-light);
  opacity: 0.9;
}
.blog-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-meta { font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-mauve-deep); opacity: 0.75; }
.blog-title { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.blog-title a { color: inherit; text-decoration: none; }
.blog-title a:hover { text-decoration: underline; }
.blog-excerpt { font-size: 0.88rem; opacity: 0.75; margin: 0; }
.blog-readmore { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--color-gold-dark); text-decoration: none; }
.blog-readmore:hover { text-decoration: underline; }

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 800px) { .feature-row { grid-template-columns: 1fr; } }
.feature-item { display: flex; gap: 16px; }
.feature-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-gold-light);
}
.stat-label { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-hero {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 56px 0 44px;
}
.page-hero .eyebrow { color: var(--color-gold-light); }
.breadcrumb { font-size: 0.78rem; opacity: 0.7; margin-bottom: 10px; }
.breadcrumb a:hover { color: var(--color-gold-light); }

/* =========================================================
   FORMS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-soft); }
.field input, .field textarea, .field select {
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: border-color var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-gold);
}
.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.form-note { font-size: 0.8rem; color: var(--color-ink-soft); opacity: 0.75; margin-top: 12px; }
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.alert--info { background: var(--color-blush); border: 1px solid var(--color-mauve-pale); }
.alert--success { background: #e7f1eb; border: 1px solid var(--color-success); color: var(--color-success); }

/* =========================================================
   CART DRAWER
   ========================================================= */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms ease;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-line);
}
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.cart-drawer-foot { padding: 20px 22px; border-top: 1px solid var(--color-line); }
.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}
.cart-line-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  /* Gradient is the fallback for a product with no photo, not the default. */
  background: linear-gradient(135deg, var(--color-blush), var(--color-mauve-pale));
  overflow: hidden;
  flex: 0 0 auto;
}
.cart-line-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-line-name { font-size: 0.88rem; font-weight: 600; }
.cart-line-meta { font-size: 0.78rem; color: var(--color-ink-soft); opacity: 0.75; }
/* Why a quantity stopped where it did — Shopify clamps to available stock
   silently, so without this the + button just appears not to work. */
.cart-line-note { margin-top: 6px; font-size: 0.72rem; line-height: 1.35; color: #8a5a1e; }
/* Backorders are normal here (stock is ordered weekly), so this reads as
   information rather than the warning colour used for a refused quantity. */
.cart-line-note--backorder { color: var(--color-ink-soft); opacity: 0.9; }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: 999px; }
.qty-control button { width: 26px; height: 26px; font-size: 0.9rem; }
.qty-control span { min-width: 22px; text-align: center; font-size: 0.82rem; }
.cart-remove { font-size: 0.72rem; text-decoration: underline; color: var(--color-error); margin-top: 4px; }
.cart-empty { text-align: center; padding: 40px 10px; opacity: 0.7; }
.cart-subtotal-row { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 14px; }
.cart-scrim {
  display: none;
  position: fixed; inset: 0; background: rgba(28,25,23,0.4); z-index: 190;
}
.cart-scrim.is-visible { display: block; }

/* =========================================================
   LICENSING CONFIRMATION GATE
   ========================================================= */
/* ---- Licensed-professional gate ----
   Built from the site's own tokens rather than a generic dialog: the eyebrow,
   Playfair display heading and gold hairline are the same vocabulary as the
   product and education pages, so it reads as part of the site rather than a
   browser prompt. This is the first thing a stranger from a paid ad sees, so
   it is doing brand work as well as legal work.

   z-index 95000 clears Klaviyo's onsite popup at 90000. Every other overlay
   here lives in the 190-300 band; this one is the exception on purpose, so
   the modal standing between someone and a purchase is never buried. */
.gate-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 95000;
  background: rgba(28, 25, 23, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.gate-scrim.is-visible { display: flex; animation: gateScrimIn 220ms ease both; }

.gate-modal {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: 44px 40px 36px;
  background: var(--color-cream);
  /* ONE continuous gold hairline, not a border plus a separate top bar.
     Those can never meet cleanly: a ::before is laid out against the PADDING
     box, so it begins inside the border and leaves a seam at both top
     corners. Reported twice as the border "not being continuous". A single
     border has no seam to get wrong. */
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: gateModalIn 260ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.gate-modal .eyebrow { margin-bottom: 14px; }
.gate-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.gate-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
  opacity: 0.85;
  margin: 0 auto 28px;
  max-width: 34ch;
}

/* Column, not a row: the two answers are not equals. Yes is the action, No is
   an exit. Stacking removes the visual coin-toss that side-by-side buttons
   create, and on a phone it puts the primary action under the thumb. */
.gate-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.gate-actions .btn { width: 100%; }
.gate-decline {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-mauve-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition);
}
.gate-decline:hover, .gate-decline:focus-visible { color: var(--color-ink); }

@keyframes gateScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Motion is decoration here; the gate must not feel like an obstacle to
   anyone who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  .gate-scrim.is-visible, .gate-modal { animation: none; }
}
@media (max-width: 480px) {
  .gate-modal { padding: 34px 24px 28px; }
  .gate-title { font-size: 1.3rem; }
}

/* =========================================================
   HEADER SEARCH
   ========================================================= */
.search-scrim {
  display: none;
  position: fixed; inset: 0; background: rgba(28,25,23,0.4); z-index: 210;
}
.search-scrim.is-visible { display: block; }
.search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 220;
  background: var(--color-cream);
  box-shadow: var(--shadow-md);
  transform: translateY(-100%);
  transition: transform 240ms ease;
}
.search-panel.is-open { transform: translateY(0); }
.search-panel-inner { max-width: 720px; margin: 0 auto; padding: 22px 24px 28px; }
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 12px;
}
.search-input-row svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.6; }
.search-input-row input {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: 1.1rem;
  color: var(--color-ink);
}
.search-input-row input:focus { outline: none; }
.search-results { margin-top: 16px; max-height: 60vh; overflow-y: auto; }
.search-hint { opacity: 0.6; font-size: 0.9rem; padding: 6px 2px; }
.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
}
.search-result:hover { background: var(--color-blush); }
.search-result-name { font-weight: 600; font-size: 0.95rem; }
.search-result-blurb { font-size: 0.82rem; opacity: 0.7; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--color-ink); color: rgba(250,246,242,0.82); padding: 64px 0 26px; margin-top: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--color-gold-light); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.footer-grid ul li { margin-bottom: 10px; font-size: 0.88rem; }
.footer-grid a:hover { color: var(--color-gold-light); }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-white);
  margin-bottom: 14px;
}
.footer-logo img { width: 32px; height: 43px; object-fit: contain; flex-shrink: 0; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 12px;
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  transition: background var(--transition), border-color var(--transition);
}
.social-row a:hover { background: rgba(255,255,255,0.1); border-color: var(--color-gold-light); }

/* =========================================================
   ARTICLE / BLOG POST DETAIL
   ========================================================= */
.tag-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  background: var(--color-blush);
  border: 1px solid var(--color-mauve-pale);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
}
.tag-pill:hover { background: var(--color-mauve-pale); }
.section--ink .tag-pill, .section--mauve .tag-pill {
  background: rgba(255,255,255,0.08);
  color: var(--color-gold-light);
  border-color: rgba(255,255,255,0.25);
}

.post-meta { font-size: 0.85rem; opacity: 0.75; margin-top: 6px; }
.post-meta .divider { margin: 0 8px; opacity: 0.5; }

.post-hero-image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: clamp(28px, 5vw, 48px);
  background: var(--color-blush);
}
/* Heroes come straight from whatever is attached to the Shopify article, so
   a portrait photo can turn up at any time. Left unconstrained it renders at
   full container width times its own ratio, which for a 4:5 image is over
   1500px tall and pushes the entire article below the fold. The cap sits
   above what a 16:10 landscape hero produces at max container width (775px),
   so existing heroes are untouched and only over-tall images get cropped. */
.post-hero-image img {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: cover;
  display: block;
}

.article-body {
  max-width: 740px;
  margin: 0 auto;
  font-size: 1rem;
}
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
  font-size: clamp(1.35rem, 1.6vw + 1rem, 1.7rem);
  margin-top: 1.8em;
  padding-top: 0.2em;
}
.article-body h3 {
  font-size: clamp(1.1rem, 1vw + 1rem, 1.3rem);
  margin-top: 1.5em;
}
.article-body p { line-height: 1.75; }
.article-body ul, .article-body ol {
  padding-left: 1.4em;
  line-height: 1.75;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.5em; }
.article-body li > strong:first-child { color: var(--color-mauve-deep); }
.article-body a { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--color-mauve-deep); }
.article-body strong { font-weight: 700; }
.article-body hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 2em 0;
}
.article-body img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.article-body blockquote {
  border-left: 3px solid var(--color-gold);
  padding: 4px 0 4px 20px;
  font-style: italic;
  opacity: 0.9;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.article-body th, .article-body td {
  border: 1px solid var(--color-line);
  padding: 10px 14px;
  text-align: left;
}
.article-body th {
  background: var(--color-blush);
  font-family: var(--font-display);
  font-weight: 600;
}
.article-signoff {
  max-width: 740px;
  margin: 2.5em auto 0;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-line);
}
.post-tags-row { max-width: 740px; margin: 2em auto 0; }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.max-w-sm { max-width: 640px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.gap-12 { gap: 12px; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.divider { height: 1px; background: var(--color-line); margin: 40px 0; border: none; }

/* =========================================================
   EDUCATION CALENDAR
   ========================================================= */
.edu-calendar {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 26px 22px;
}
.edu-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.edu-calendar-head h3 {
  font-size: 1.3rem;
  margin: 0;
  min-width: 200px;
  text-align: center;
}
.edu-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.edu-calendar-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.edu-calendar-nav button:hover:not(:disabled) {
  background: var(--color-ink);
  color: var(--color-white);
}
.edu-calendar-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.edu-calendar-status {
  text-align: center;
  padding: 30px 0;
  opacity: 0.65;
  font-size: 0.9rem;
}
.edu-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.edu-calendar-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  padding-bottom: 4px;
}
.edu-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(84px, auto);
  gap: 4px;
}
.edu-day {
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.edu-day.is-outside { background: transparent; opacity: 0.35; }
.edu-day.is-today { box-shadow: inset 0 0 0 2px var(--color-gold-dark); }
.edu-day.is-past { opacity: 0.45; filter: grayscale(0.4); }
.edu-day-num {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
}
.edu-event {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 6px;
  color: var(--color-white);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.edu-event.is-span-start { border-radius: 5px 0 0 5px; margin-right: -4px; padding-right: 10px; }
.edu-event.is-span-end   { border-radius: 0 5px 5px 0; margin-left: -4px; padding-left: 10px; }
.edu-event.is-span-mid   { border-radius: 0; margin-left: -4px; margin-right: -4px; }
.edu-event.is-single     { border-radius: 5px; }
.edu-event.trainer-reid   { background: var(--color-mauve-deep); }
.edu-event.trainer-taylor { background: var(--color-gold-dark); }
.edu-event.trainer-megan  { background: var(--color-ink); }
.edu-event.trainer-other  { background: var(--color-mauve); }
.edu-event.trainer-event  { background: var(--color-burnt-orange); }

.edu-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.edu-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  opacity: 0.85;
}
.edu-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.edu-legend-swatch.trainer-reid   { background: var(--color-mauve-deep); }
.edu-legend-swatch.trainer-taylor { background: var(--color-gold-dark); }
.edu-legend-swatch.trainer-megan  { background: var(--color-ink); }
.edu-legend-swatch.trainer-event  { background: var(--color-burnt-orange); }

/* Popover shown when a class is clicked */
.edu-popover-scrim {
  position: fixed; inset: 0;
  background: rgba(28,25,23,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.edu-popover-scrim.is-visible { display: flex; }
.edu-popover {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 28px;
  max-width: 380px;
  width: 100%;
}
.edu-popover-type {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.edu-popover h4 { margin-bottom: 8px; }
.edu-popover-meta { font-size: 0.85rem; opacity: 0.75; margin-bottom: 4px; }
.edu-popover-actions { margin-top: 18px; display: flex; gap: 10px; }

/* Product description popover, opened by clicking a product image */
.product-popover-scrim {
  position: fixed; inset: 0;
  background: rgba(28,25,23,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.product-popover-scrim.is-visible { display: flex; }
.product-popover {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.product-popover-body { padding: 22px 24px 26px; }
.product-popover-body h4 { margin-bottom: 10px; }
.product-popover-body p { font-size: 0.92rem; opacity: 0.85; line-height: 1.6; }
.product-popover-actions { margin-top: 18px; }
.popover-close-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  color: var(--color-ink);
  opacity: 0.6;
  cursor: pointer;
}
.popover-close-x:hover { opacity: 1; background: var(--color-line); }

@media (max-width: 720px) {
  .edu-calendar { padding: 18px 14px; }
  .edu-calendar-grid { grid-auto-rows: minmax(56px, auto); gap: 3px; }
  .edu-day { padding: 4px 3px 5px; }
  .edu-event { font-size: 0.6rem; padding: 2px 3px; }
  .edu-calendar-weekdays span { font-size: 0.6rem; }
}

/* Standing promotion notice, sat above a collection grid. Deliberately quiet:
   a blush panel with a gold rule rather than a colored banner, because it
   carries information a shopper needs before choosing how many to buy, not an
   interruption. Used on the webinars page for the WEBINAR offer. */
.offer-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 22px;
  padding: 13px 18px;
  background: var(--color-blush);
  border-left: 3px solid var(--color-gold);
  border-radius: 4px;
  font-size: 0.93rem;
  line-height: 1.5;
}
.offer-strip strong { color: var(--color-ink); font-weight: 600; }
.offer-strip span { color: var(--color-ink-soft); }
.offer-strip code {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 3px;
  padding: 1px 7px;
}
@media (max-width: 560px) {
  .offer-strip { padding: 12px 14px; font-size: 0.88rem; }
}

/* Pickup and local delivery, shown under the buy box on physical products.
   Both locations carry stock and orders ship from whichever is nearer, which
   only the shipping policy page said before -- a Reno or Santa Barbara
   customer had no way to know they could collect the same day. Suppressed on
   education, which has nothing to ship or collect. */
.fulfilment-note {
  margin-top: 18px;
  padding: 11px 15px;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.fulfilment-note strong { color: var(--color-ink); font-weight: 600; }
.fulfilment-note a { color: var(--color-gold-dark); }

/* ---- Product video: click-to-load YouTube facade ----
   Sits under the product image in .product-detail-media. The facade is a
   <button> rather than a div so it is keyboard reachable and announces itself
   without extra ARIA plumbing. 16:9 is fixed with aspect-ratio so the page
   does not reflow when the real iframe replaces it, which would otherwise
   register as layout shift on the page paid traffic lands on. */
/* VIDEO PRODUCTS: image and video share the left grid cell, side by side.
   
   Two things this fixes, both learned by breaking them.
   
   1. The video must NOT be a third grid child. Giving it grid-column:1 while
      it sat between the image and the buy box pushed the buy box out of row
      one and 486px down the page, so price and Buy Now fell below the fold
      on the page paid traffic lands on. One cell, two children, no explicit
      placement, nothing to push.
   
   2. The default .product-detail-media is a fixed 1:1 square with
      overflow:hidden, which squeezed a 16:9 child to about 2px wide. The
      has-video modifier drops the square entirely: the image becomes a small
      fixed thumbnail and the video takes the remaining width, so the whole
      block is roughly 190px tall instead of 447px and the buy box sits in
      view without scrolling. */
.product-detail-media.has-video {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* > img, not a descendant selector: the facade has its own <img> (the
   YouTube thumbnail) and a loose selector shrank that to 150x150 inside a
   wider frame, leaving black bars around it. */
.product-detail-media.has-video > img {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-blush), var(--color-mauve-pale));
}
/* The facade AND the iframe that replaces it need identical flex sizing.
   Without the .video-embed half, the swapped-in iframe kept width:100% but no
   flex rule, resolved that against the whole container instead of the space
   left beside the thumbnail, and overflowed across the buy box -- covering
   the price and Buy Now the moment someone pressed play. min-width:0 because
   a flex item will not shrink below its content size otherwise, which is what
   lets an iframe refuse to fit. */
.product-detail-media.has-video .video-facade,
.product-detail-media.has-video .video-embed {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

/* Below the grid breakpoint the column is already narrow, so side by side
   leaves the video too small to read. Stack, video first: on a phone it is
   the more useful of the two. */
@media (max-width: 720px) {
  .product-detail-media.has-video { flex-direction: column-reverse; align-items: stretch; }
  .product-detail-media.has-video > img { flex: none; width: 100%; height: auto; aspect-ratio: 1/1; }
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
/* hqdefault is 4:3 with letterboxing baked in; cover crops it back to 16:9
   rather than showing YouTube's black bars inside our own frame. */
.video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  opacity: 0.9;
  pointer-events: none;
}
.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play { opacity: 1; }
.video-facade-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: left;
}
.video-embed {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

/* ---- Brik & Pearl pre-launch page ---------------------------------------
   A launch date is the whole point of this page, so it gets a real badge
   rather than another line of body copy. The step numbers mirror the "1" and
   "2" printed on the bottles, so the page reads in the same order a stylist
   picks them up. */
.launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 9px 18px 9px 15px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: rgba(182, 144, 90, 0.08);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.launch-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex: 0 0 auto;
}
/* The Brik & Pearl shot is a packshot on white, so it gets a white frame at
   the image's own aspect ratio. Reusing .hero-media here was wrong: that class
   paints a dark gradient for lifestyle photography, and with object-fit:contain
   it showed as a 12px tinted border around the product. */
.bp-hero-media {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bp-hero-media img {
  width: 100%;
  height: auto;
  display: block;
}
.bp-card {
  position: relative;
  padding: 30px 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.bp-card-sub {
  margin-top: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0.75;
}
.bp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-white);
}
/* Colors taken from the actual packaging: copper, blue, silver. */
.bp-step--1 { background: #b08968; }
.bp-step--2 { background: #7d9aa8; }
.bp-step--3 { background: #9a9a9a; }

@media (max-width: 720px) {
  .launch-badge { font-size: 0.75rem; }
}

/* The supplied before/after images are single files that already stack the
   two states vertically with the brand mark, so this is a plain two-up of
   whole images, not a comparison widget. 4:5 portrait, kept at their own
   ratio so nothing is cropped off the lash line. */
.bp-results { align-items: start; }
.bp-result {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}
.bp-result img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- App launch page -----------------------------------------------------
   The screenshot is a real device capture including its status bar, so the
   frame clips the top few percent rather than showing someone's battery and
   an active phone call in a marketing image. */
.app-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.app-phone {
  justify-self: center;
  width: min(280px, 70vw);
  border-radius: 34px;
  border: 1px solid var(--color-gold);
  background: #0f0d0c;
  padding: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.app-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 26px;
  /* Crops the device status bar off the top of the capture. */
  margin-top: -5.6%;
  clip-path: inset(5.6% 0 0 0);
}
@media (max-width: 860px) {
  .app-hero { grid-template-columns: 1fr; gap: 32px; }
  .app-phone { width: min(240px, 62vw); }
}

.announce-link {
  color: var(--color-gold-light);
  font-weight: 600;
  text-underline-offset: 3px;
}
.announce-link:hover { text-decoration: underline; }

/* Homepage app-launch band. Phone sits left of the copy on desktop and above
   it on mobile, so the screenshot never squeezes the text into a column. */
.home-app-band {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
}
.home-app-phone {
  border-radius: 26px;
  border: 1px solid var(--color-gold);
  background: #0f0d0c;
  padding: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.home-app-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  /* Same status-bar crop as the app page. */
  margin-top: -5.6%;
  clip-path: inset(5.6% 0 0 0);
}
@media (max-width: 760px) {
  .home-app-band { grid-template-columns: 1fr; gap: 26px; justify-items: start; }
  .home-app-phone { width: 180px; }
}

/* Enrollment prerequisites on education products. Taken per product from
   Elleebana's own Shopify description, which is why the wording differs
   between an online course (license to enroll) and a conversion course
   (prior certification). The in-person Classic Foundation course carries no
   note on purpose: it is a beginner course with no licence requirement, and
   labelling it would turn away the students it exists for. */
.enrollment-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--color-gold);
  background: rgba(182, 144, 90, 0.07);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.enrollment-note--card {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 0.78rem;
}