/* =========================================================
   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; }
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); }

.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); }
.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; }
}

/* =========================================================
   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;
}
.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);
  background: linear-gradient(135deg, var(--color-blush), var(--color-mauve-pale));
}
.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; }
.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
   ========================================================= */
.gate-scrim {
  display: none;
  position: fixed; inset: 0; background: rgba(28,25,23,0.55); z-index: 300;
  align-items: center; justify-content: center; padding: 20px;
}
.gate-scrim.is-visible { display: flex; }
.gate-modal {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.gate-modal p { font-size: 1rem; line-height: 1.5; }
.gate-actions { display: flex; gap: 12px; justify-content: center; }
.gate-actions .btn { min-width: 96px; }

/* =========================================================
   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);
}
.post-hero-image img { width: 100%; height: auto; 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; }
}