/*
|==========================================================================
| Total Care Essentials — clinical retail
|==========================================================================
|
| Single stylesheet. Replaces the inherited style.css + brand.css entirely,
| so nothing here is a re-skin of another storefront's look.
|
| Direction: clinical retail. Paper white, hairline rules, a precise grid,
| no shadows, no rounded corners beyond 2px. Every number is set in mono
| with tabular figures so prices and specs line up in columns. Exactly one
| saturated accent (signal blue) and it only ever means "act here".
|
| Contents
|   01  Tokens
|   02  Reset + base
|   03  Utilities
|   04  Header + nav
|   05  Home (.cwm-*)
|   06  Ebook cover
|   07  Shop
|   08  Product detail
|   09  Cart drawer
|   10  Search modal
|   11  Account sidebar
|   12  Checkout
|   13  Thank you / order
|   14  FAQ
|   15  Policy
|   16  Footer
|   17  Motion + reduced motion
|
*/

/* ==== 01 Tokens ======================================================= */
:root {
  /* surface */
  --paper: #fff;
  --paper-2: #f6f7f8;
  --paper-3: #eef0f2;

  /* ink */
  --ink: #0d1117;
  --ink-2: #3d454f;
  --ink-3: #6b7480;
  --ink-4: #9aa2ac;

  /* rules — hairlines carry the whole grid, so there are three weights */
  --rule: #e2e5e9;
  --rule-2: #cdd2d8;
  --rule-3: #0d1117;

  /* the one accent */
  --signal: #1f42ff;
  --signal-ink: #1636d6;
  --signal-wash: #eef1ff;

  /* status */
  --warn: #b4530a;
  --good: #0d7a4a;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 24px;
  --max: 1400px;
  --bar: 44px; /* header + control height, keeps everything on one rhythm */
}

/* ==== 02 Reset + base ================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
picture { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul,
ol { list-style: none; }

h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Numerals are structural here — never let them shift width. */
.price-new,
.price-old,
.pdp-price,
.cwm-price-tag b,
.cwm-row-price,
.subtotal-amount,
.cart-item-price,
.order-summary-row span,
.amount,
.value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

::selection { background: var(--signal); color: #fff; }

.brand-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  transform: translateY(-200%);
}
.brand-skip-link:focus { transform: none; }

/* ==== 03 Utilities ==================================================== */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-padding { padding: clamp(48px, 6vw, 88px) 0; }
.section-bg { background: var(--paper-2); }
.bg-cream-light { background: var(--paper-2); }
.full-width { width: 100%; }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule-3);
}

.section-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.035em;
}

.view-all-link,
.back-link {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
}
.view-all-link:hover,
.back-link:hover { color: var(--signal-ink); text-decoration: underline; }

/* The mono micro-cap label is the workhorse of this system. */
.cwm-eyebrow,
.cwm-trust li,
.product-sub,
.pdp-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cwm-eyebrow { margin-bottom: 0.85rem; color: var(--signal); }

/* Rating glyphs stay ink, not gold — colour is reserved for the CTA. */
.stars { color: var(--ink); letter-spacing: -0.05em; }
.stars-count { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-4); }

/* ==== 04 Header + nav ================================================= */
.cwm-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  min-height: 34px;
  padding: 0 var(--gutter);
  background: var(--ink);
  color: #b9c0ca;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cwm-announce span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cwm-announce i { color: var(--signal); }

.main-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-3);
}
.main-header.scrolled { border-bottom-color: var(--rule-3); }

.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max);
  min-height: 76px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.header-utility { justify-self: start; }
.logo { display: flex; align-items: center; justify-self: center; width: 224px; }
.logo-img { max-height: 36px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  border-top: 1px solid var(--rule);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 43px;
  padding: 0 1.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-help-link { margin-left: 2rem; color: var(--ink-3); }
.nav-link:hover { background: var(--paper-2); color: var(--ink); }

.nav-shop-link {
  color: var(--signal);
  font-weight: 600;
}
.nav-shop-link:hover { background: var(--signal-wash); color: var(--signal-ink); }

.header-actions { display: flex; align-items: center; justify-self: end; gap: 1.2rem; }

.action-icon-btn,
.mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  height: var(--bar);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.action-icon-btn:hover,
.mobile-toggle:hover { background: var(--paper-2); color: var(--ink); }
.header-search { min-width: 148px; justify-content: flex-start; }

.cart-btn-container { position: relative; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.mobile-toggle { display: none; }

@media (max-width: 1000px) {
  .header-container { grid-template-columns: 1fr auto; min-height: 60px; gap: 0.5rem; }
  .header-utility { display: none; }
  .logo { justify-self: start; width: 180px; }
  .header-actions { gap: 0; }
  .header-actions .action-icon-btn,
  .mobile-toggle { width: 44px; border-left: 1px solid var(--rule); }
  .header-actions .action-icon-btn > span:not(.cart-badge) { display: none; }
  .mobile-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 950;
    flex-direction: column;
    align-items: stretch;
    width: min(340px, 84vw);
    padding-top: 68px;
    background: var(--paper);
    border-left: 1px solid var(--rule-3);
    border-top: 0;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nav-menu.active { transform: translateX(0); }
  .nav-link {
    height: 56px;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.8rem;
  }
  .nav-help-link { margin-left: 0; }
  .nav-shop-link { justify-content: flex-start; }
  .cwm-announce span:nth-child(n + 2) { display: none; }
}

@media (max-width: 430px) {
  :root { --gutter: 18px; }
  .logo { width: 152px; }
  .header-actions .action-icon-btn,
  .mobile-toggle { width: 42px; }
}

/* ==== 05 Home ========================================================= */
.cwm-page { background: var(--paper); }

.cwm-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -- hero: a specimen plate, not a lifestyle shot -- */
.cwm-hero { border-bottom: 1px solid var(--rule-3); }
.cwm-hero-stage { position: relative; perspective: 1500px; overflow: hidden; }
.cwm-hero-slide { position: relative; transform-origin: 50% 100%; backface-visibility: hidden; }
.cwm-hero-slide[hidden] { display: none; }
.cwm-hero-slide.is-leaving {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  width: 100%;
  pointer-events: none;
  animation: cwm-tumble-out 0.52s cubic-bezier(0.55, 0.05, 0.25, 1) both;
}
.cwm-hero-slide.is-entering {
  z-index: 2;
  animation: cwm-tumble-in 0.52s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
.cwm-hero-slide.is-leaving .cwm-hero-copy {
  animation: cwm-copy-out 0.2s ease-in both;
}
.cwm-hero-slide.is-entering .cwm-hero-copy {
  animation: cwm-copy-in 0.36s 0.12s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.cwm-hero-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule-3);
  border-bottom: 1px solid var(--rule);
}
.cwm-hero-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border-right: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.cwm-hero-controls button:last-child { border-right: 0; }
.cwm-hero-controls button span { color: var(--ink-4); }
.cwm-hero-controls button:hover { background: var(--paper-2); color: var(--ink); }
.cwm-hero-controls button[aria-pressed="true"] { background: var(--signal); color: #fff; }
.cwm-hero-controls button[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.72); }

@keyframes cwm-tumble-out {
  0% { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(44px) rotateX(78deg) scale(0.9); }
}
@keyframes cwm-tumble-in {
  0% { opacity: 0; transform: translateY(-42px) rotateX(-72deg) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); }
}
@keyframes cwm-copy-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(14px); }
}
@keyframes cwm-copy-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.cwm-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cwm-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px) clamp(40px, 5vw, 80px) 0;
  border-right: 1px solid var(--rule);
}

.cwm-hero-labels {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  animation: cwm-hero-enter 0.5s 0.05s both;
}
.cwm-hero-labels .cwm-eyebrow { margin-bottom: 0; }
.cwm-physical-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: var(--signal-wash);
  color: var(--signal-ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cwm-hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 5.4vw, 4.9rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
  animation: cwm-hero-enter 0.6s 0.13s both;
}

.cwm-hero-lede {
  max-width: 46ch;
  margin-bottom: 2rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  animation: cwm-hero-enter 0.6s 0.22s both;
}

.cwm-hero-buy {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--rule-3);
  animation: cwm-hero-enter 0.6s 0.31s both;
}

.cwm-price-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-right: 1px solid var(--rule-3);
}
.cwm-price-tag b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.cwm-price-tag small {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cwm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 54px;
  padding: 0 1.6rem;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.cwm-btn:hover:not(:disabled) { background: var(--signal-ink); color: #fff; }
.cwm-btn:disabled { background: var(--good); cursor: default; }

.cwm-btn.ghost {
  border-left: 1px solid var(--rule-3);
  background: var(--paper);
  color: var(--ink);
}
.cwm-btn.ghost:hover { background: var(--paper-2); color: var(--ink); }

.cwm-hero-meta {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  animation: cwm-hero-enter 0.6s 0.38s both;
}

/* Registration marks in the corners sell the "specimen plate" read. */
.cwm-hero-figure {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(32px, 4vw, 64px);
  background: var(--paper-2);
}
.cwm-hero-figure::before,
.cwm-hero-figure::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-2);
}
.cwm-hero-figure::before { top: 18px; left: 18px; border-width: 1px 0 0 1px; }
.cwm-hero-figure::after { right: 18px; bottom: 18px; border-width: 0 1px 1px 0; }
.cwm-hero-media { position: relative; overflow: hidden; width: 100%; max-width: 460px; animation: cwm-product-enter 0.8s 0.12s both; }
.cwm-hero-figure img {
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cwm-hero-figure:hover img { transform: scale(1.025); }
.cwm-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 45%, rgba(31, 66, 255, 0.16) 50%, transparent 55% 100%);
  transform: translateY(-105%);
  animation: cwm-product-scan 5.5s 1.1s ease-in-out infinite;
}

.cwm-hero-figure figcaption {
  position: absolute;
  right: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@keyframes cwm-hero-enter {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cwm-product-enter {
  from { opacity: 0; transform: translateX(28px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cwm-product-scan {
  0%, 62% { transform: translateY(-105%); }
  88%, 100% { transform: translateY(105%); }
}

.cwm-hero-mix {
  display: grid;
  grid-template-columns: 250px 1fr;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--rule-3);
  animation: cwm-hero-enter 0.6s 0.45s both;
}
.cwm-mix-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem var(--gutter);
  border-right: 1px solid var(--rule);
}
.cwm-mix-heading span { color: var(--signal); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cwm-mix-heading strong { font-size: 0.78rem; line-height: 1.4; }
.cwm-hero-mix ul { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); min-width: 0; }
.cwm-hero-mix li {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.75rem;
  border-right: 1px solid var(--rule);
  transition: background 0.2s;
}
.cwm-hero-mix li:hover { background: var(--signal-wash); }
.cwm-hero-mix img { width: 58px; height: 58px; object-fit: cover; background: var(--paper-2); }
.cwm-hero-mix li div { min-width: 0; }
.cwm-hero-mix small { display: block; overflow: hidden; color: var(--ink-3); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.cwm-hero-mix b { display: block; margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.25; }
.cwm-hero-mix li > span { position: absolute; right: 0.6rem; bottom: 0.45rem; color: var(--signal); font-family: var(--mono); font-size: 0.58rem; }

@media (max-width: 1180px) {
  .cwm-hero-mix { grid-template-columns: 1fr; }
  .cwm-mix-heading { border-right: 0; border-bottom: 1px solid var(--rule); }
  .cwm-hero-mix ul { overflow-x: auto; }
}

/* -- trust strip: four cells on one hairline row -- */
.cwm-trust { border-bottom: 1px solid var(--rule-3); }
.cwm-trust ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cwm-trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.2rem 1rem 0;
  border-right: 1px solid var(--rule);
}
.cwm-trust li:last-child { border-right: 0; }
.cwm-trust li:not(:first-child) { padding-left: 1.2rem; }
.cwm-trust i { color: var(--signal); font-size: 0.85rem; }

/* -- editorial bridge between the hero and the price directory -- */
.cwm-why {
  padding: clamp(56px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--rule-3);
  background: var(--paper-2);
}
.cwm-why-inner { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.7fr); gap: clamp(2.5rem, 7vw, 7rem); }
.cwm-why-head h2,
.cwm-routine-head h2 { margin-top: 0.7rem; font-size: clamp(2rem, 4.3vw, 4rem); letter-spacing: -0.055em; line-height: 0.98; }
.cwm-why-head > p:last-child,
.cwm-routine-head > p:last-child { max-width: 54ch; margin-top: 1.2rem; color: var(--ink-3); line-height: 1.7; }
.cwm-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.cwm-why-grid article { position: relative; min-width: 0; padding: 1.4rem 1.2rem 0; border-right: 1px solid var(--rule); }
.cwm-why-grid article:first-child { padding-left: 0; }
.cwm-why-grid article:last-child { padding-right: 0; border-right: 0; }
.cwm-why-grid article > span { display: block; color: var(--ink-4); font-family: var(--mono); font-size: 0.64rem; }
.cwm-why-grid article > i { margin: 2rem 0 1rem; color: var(--signal); font-size: 1.35rem; }
.cwm-why-grid h3 { margin-bottom: 0.65rem; font-size: 1rem; }
.cwm-why-grid p { color: var(--ink-3); font-size: 0.82rem; line-height: 1.65; }

/* -- directory: sticky index rail beside one continuous catalog -- */
.cwm-directory {
  display: grid;
  grid-template-columns: 272px 1fr;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cwm-index { border-right: 1px solid var(--rule); }
.cwm-index-inner {
  position: sticky;
  top: 84px;
  padding: clamp(28px, 3.5vw, 44px) 1.6rem clamp(28px, 3.5vw, 44px) 0;
}

.cwm-index-stats {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.cwm-index-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.cwm-index-stats dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cwm-index-stats dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
}

.cwm-index-nav { display: grid; }
.cwm-index-nav a {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.cwm-index-nav a:hover { color: var(--signal); }
.cwm-index-nav b {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--ink-4);
}
.cwm-index-nav span { font-size: 0.86rem; }
.cwm-index-nav i {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-style: normal;
  color: var(--ink-4);
}

.cwm-index-foot {
  margin-top: 1.2rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.cwm-directory-body { min-width: 0; padding: clamp(28px, 3.5vw, 44px) 0 clamp(40px, 5vw, 72px) clamp(24px, 3vw, 44px); }

/* -- shelves: each one a headed block of the same continuous table -- */
.cwm-shelf + .cwm-shelf { margin-top: clamp(32px, 4vw, 56px); }

.cwm-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
}
.cwm-shelf-head h2 { font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.035em; }
.cwm-shelf-head span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -- the catalog table is the primary product surface here -- */
.cwm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cwm-catalog { width: 100%; border-collapse: collapse; }
.cwm-catalog th {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: left;
}
.cwm-catalog th.cwm-th-price { text-align: right; }
.cwm-catalog td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }

.cwm-row { transition: background 0.12s; }
.cwm-row:hover { background: var(--signal-wash); }

.cwm-row-thumb { width: 60px; padding-left: 0 !important; }
.cwm-row-thumb img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: var(--paper-2);
}
.cwm-row-thumb i { display: block; width: 52px; color: var(--ink-4); font-size: 1.1rem; text-align: center; }

.cwm-row-name { min-width: 0; }
.cwm-row-name a { font-size: 0.92rem; font-weight: 600; }
.cwm-row-name a:hover { color: var(--signal); }
.cwm-row-name small {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.cwm-row-cat,
.cwm-row-size {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.cwm-row-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.cwm-row-act { width: 78px; padding-right: 0 !important; text-align: right; }
.cwm-row-add {
  min-width: 68px;
  height: 34px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cwm-row-add:hover:not(:disabled) { background: var(--signal); border-color: var(--signal); color: #fff; }
.cwm-row-add:disabled { background: var(--good); border-color: var(--good); color: #fff; cursor: default; }

.cwm-row-ship td { color: var(--ink-3); }
.cwm-row-ship .cwm-row-name { color: var(--ink); font-weight: 600; }

/* -- customer notes read as an annotated list, not review cards -- */
.cwm-notes { display: grid; }
.cwm-notes > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.cwm-notes dt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cwm-notes dd { margin: 0; font-size: 0.95rem; }
.cwm-routine { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--rule-3); background: var(--paper); }
.cwm-routine-inner { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.7fr); gap: clamp(2.5rem, 7vw, 7rem); }
.cwm-routine-steps { border-top: 2px solid var(--ink); }
.cwm-routine-steps li { display: grid; grid-template-columns: 58px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.cwm-routine-steps li > b { color: var(--signal); font-family: var(--mono); font-size: 0.72rem; }
.cwm-routine-steps span { color: var(--ink-4); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; }
.cwm-routine-steps h3 { margin: 0.25rem 0 0.45rem; font-size: 1.12rem; }
.cwm-routine-steps p { max-width: 58ch; color: var(--ink-3); font-size: 0.84rem; }
.cwm-routine-steps a { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.8rem; color: var(--signal); font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cwm-routine-steps a:hover { color: var(--signal-ink); }
.cwm-closing {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.cwm-closing h2 { margin-bottom: 0.9rem; font-size: clamp(1.9rem, 4vw, 3.1rem); }
.cwm-closing p { max-width: 52ch; margin: 0 auto 2rem; color: #a8b0bb; }
.cwm-closing .cwm-btn { background: #fff; color: var(--ink); }
.cwm-closing .cwm-btn:hover { background: var(--signal); color: #fff; }

/* ==== 06 Ebook cover (digital products on the PDP) ================== */
.ebook-cover { position: relative; display: grid; place-items: center; background: var(--ink); }
.ebook-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.12; }
.ebook-cover-inner { position: relative; z-index: 2; padding: 1.6rem; text-align: left; }
.ebook-cover-brand {
  margin-bottom: 0.8rem;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ebook-cover-title { color: #fff; font-size: 1.15rem; letter-spacing: -0.02em; }
.ebook-cover-tagline { margin-top: 0.5rem; color: #96a0ad; font-size: 0.78rem; }

/* ==== 07 Shop ========================================================= */
.shop-page-header,
.page-header {
  padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-3);
}
.page-header-bg { display: none; }
.shop-page-header h1,
.page-header h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -0.045em;
}
.shop-page-header p,
.page-header p {
  max-width: 60ch;
  margin-top: 0.8rem;
  color: var(--ink-3);
}

.products-section { padding: clamp(40px, 5vw, 72px) 0; }


/* Related products, still in the directory's row format. */
.cwm-related { padding: clamp(36px, 4.5vw, 64px) 0; border-top: 1px solid var(--rule-3); }

/* ==== 08 Product detail =============================================== */
.pdp-main { padding-bottom: clamp(40px, 5vw, 72px); }

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pdp-breadcrumb a:hover { color: var(--signal); }

.pdp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* The plate stays put while the spec column scrolls past it. */
.pdp-image {
  position: sticky;
  top: 84px;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
}
.pdp-image img { width: 100%; max-width: 480px; height: auto; }

.pdp-info { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); }

.pdp-title {
  margin-bottom: 0.6rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: -0.045em;
}
.pdp-sub { margin-bottom: 1rem; text-transform: none; letter-spacing: 0.02em; }

.pdp-stars {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pdp-old-price { font-size: 1rem; color: var(--ink-4); text-decoration: line-through; }

.pdp-desc { padding: 1.2rem 0; color: var(--ink-2); }
.pdp-desc p + p { margin-top: 0.8rem; }

.pdp-highlights {
  display: grid;
  gap: 0;
  margin-bottom: 1.4rem;
  border-top: 1px solid var(--rule);
}
.pdp-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.88rem;
}
.pdp-highlights i { margin-top: 0.25rem; color: var(--signal); font-size: 0.72rem; }

/* Spec table — the product's facts as a readable data block. */
.pdp-spec { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.pdp-spec caption {
  padding-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  text-align: left;
}
.pdp-spec th,
.pdp-spec td { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
.pdp-spec th {
  width: 34%;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pdp-spec td { font-size: 0.88rem; }
.pdp-spec tr:last-child td { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }

.pdp-buy-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--ink);
}

.qty-selector { display: flex; align-items: stretch; border-right: 1px solid var(--ink); }
.qty-selector button {
  width: 42px;
  color: var(--ink-2);
  font-size: 1rem;
}
.qty-selector button:hover { background: var(--paper-2); color: var(--ink); }
.qty-selector input {
  width: 48px;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: transparent;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty { font-family: var(--mono); }

.pdp-add-btn,
.pdp-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 160px;
  min-height: 54px;
  padding: 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.pdp-add-btn { background: var(--paper); color: var(--ink); }
.pdp-add-btn:hover { background: var(--paper-2); }
.pdp-buy-btn { border-left: 1px solid var(--ink); background: var(--signal); color: #fff; }
.pdp-buy-btn:hover { background: var(--signal-ink); }

.pdp-meta {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.pdp-meta span { display: flex; align-items: center; gap: 0.6rem; }
.pdp-meta i { color: var(--signal); }

/* ==== 09 Cart drawer ================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(13, 17, 23, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--rule-3);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rule-3);
}
.cart-drawer-title {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cart-drawer-count { color: var(--ink-3); }
.cart-drawer-close { display: grid; place-items: center; width: 32px; height: 32px; }
.cart-drawer-close:hover { background: var(--paper-2); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 0 1.2rem; }
.cart-items { display: flex; flex-direction: column; }

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.cart-item-image { aspect-ratio: 1; background: var(--paper-2); }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-details { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cart-item-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.cart-item-name { font-size: 0.88rem; font-weight: 600; }
.cart-item-sub,
.cart-item-each {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.cart-item-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

.cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cart-item-quantity { display: flex; align-items: center; margin-top: 0.3rem; border: 1px solid var(--rule-2); width: max-content; }
.quantity-btn { width: 28px; height: 28px; color: var(--ink-2); }
.quantity-btn:hover { background: var(--paper-2); color: var(--ink); }
.quantity-value {
  min-width: 30px;
  border-inline: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  text-align: center;
  line-height: 28px;
}
.cart-item-remove {
  flex: none;
  margin-top: 0.3rem;
  color: var(--ink-4);
  font-size: 0.75rem;
}
.cart-item-remove:hover { color: var(--warn); }

.cart-empty {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--ink-3);
}
.btn-shop-now {
  display: inline-flex;
  align-items: center;
  height: var(--bar);
  padding: 0 1.4rem;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-shop-now:hover { background: var(--signal-ink); color: #fff; }

.cart-drawer-footer { padding: 1.1rem 1.2rem; border-top: 1px solid var(--rule-3); }
.cart-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.subtotal-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.subtotal-amount { font-size: 1.3rem; font-weight: 600; }

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cart-checkout-btn:hover { background: var(--signal-ink); color: #fff; }

.cart-continue-link {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.cart-continue-link:hover { color: var(--signal); }

/* ==== 10 Search modal ================================================= */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: start center;
  padding: 12vh var(--gutter) var(--gutter);
  background: rgba(13, 17, 23, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.search-modal.active { opacity: 1; visibility: visible; }

.search-modal-content {
  position: relative;
  width: min(680px, 100%);
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--rule-3);
}
.search-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; }
.search-close:hover { background: var(--paper-2); }
.search-modal-header h3 { font-size: 1.3rem; }
.search-modal-header p { margin-top: 0.3rem; color: var(--ink-3); font-size: 0.85rem; }

.search-form { margin: 1.4rem 0; }
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1rem;
  border: 1px solid var(--rule-3);
}
.search-input-wrapper i { color: var(--ink-4); }
.search-input { flex: 1; height: 52px; border: 0; background: transparent; outline: none; }

.search-suggestions h4 {
  margin-bottom: 0.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.search-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-tag {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.search-tag:hover { border-color: var(--signal); color: var(--signal); }

/* ==== 11 Account sidebar ============================================== */
.login-sidebar { position: fixed; inset: 0; z-index: 1100; visibility: hidden; }
.login-sidebar.active { visibility: visible; }
.login-sidebar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.login-sidebar.active .login-sidebar-overlay { opacity: 1; }

.login-sidebar-panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  padding: 1.4rem;
  overflow-y: auto;
  background: var(--paper);
  border-left: 1px solid var(--rule-3);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.login-sidebar.active .login-sidebar-panel { transform: translateX(0); }

.login-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; }
.login-close:hover { background: var(--paper-2); }

.login-sidebar-header { padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.login-logo { max-width: 190px; margin-bottom: 0.8rem; }
.login-sidebar-header p { color: var(--ink-3); font-size: 0.85rem; }

.login-options { display: flex; flex-direction: column; }
.login-option {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.login-option:hover { color: var(--signal); }
.login-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule-2); }
.login-text { display: flex; flex-direction: column; }
.login-title { font-size: 0.9rem; font-weight: 600; }
.login-desc { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); }

.login-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.login-back-btn:hover { color: var(--signal); }

.login-signup-header { margin-bottom: 1.2rem; }
.login-signup-header h3 { font-size: 1.3rem; }
.login-signup-header p { margin-top: 0.3rem; color: var(--ink-3); font-size: 0.85rem; }

.login-input-group { margin-bottom: 0.7rem; }
.login-input-group input {
  width: 100%;
  height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  outline: none;
}
.login-input-group input:focus { border-color: var(--signal); }

.login-forgot { margin-bottom: 0.9rem; text-align: right; }
.forgot-password-link { font-family: var(--mono); font-size: 0.68rem; color: var(--signal); }

.login-submit-btn {
  width: 100%;
  min-height: 50px;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.login-submit-btn:hover { background: var(--signal-ink); }

.login-divider {
  position: relative;
  margin: 1.1rem 0;
  text-align: center;
}
.login-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}
.login-divider span {
  position: relative;
  padding: 0 0.8rem;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--ink-4);
}

.login-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  border: 1px solid var(--rule-2);
  font-size: 0.85rem;
}
.login-google-btn:hover { background: var(--paper-2); }

.login-terms { margin-top: 1rem; color: var(--ink-4); font-size: 0.72rem; }
.login-terms a { color: var(--signal); }

/* The three sub-panels are toggled inline by scripts.js; they only need to
   own their own stacking, not their visibility. */
.login-panel,
.login-signup-panel,
.forgot-password-panel { display: flex; flex-direction: column; }

.login-form,
.login-signup-form,
.forgot-password-form { display: flex; flex-direction: column; }

.login-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
}
.login-signup-link { color: var(--signal); font-weight: 600; }
.login-status { font-family: var(--mono); font-size: 0.7rem; color: var(--good); }

/* ==== 12 Checkout ===================================================== */
.checkout-page { padding-bottom: clamp(40px, 5vw, 72px); background: var(--paper-2); }
.checkout-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

.checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.breadcrumb-cart-link:hover { color: var(--signal); }

.checkout-title {
  margin-bottom: 1.6rem;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.04em;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: start;
  gap: 20px;
}

.checkout-form-section { display: flex; flex-direction: column; gap: 20px; }

.checkout-card {
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.checkout-card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.checkout-card-title { flex: 1; font-size: 1rem; letter-spacing: -0.02em; }
.checkout-card-change {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--signal);
}
.saved-info { color: var(--ink-3); font-size: 0.85rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.form-row.full-width { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
.form-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-input,
.form-select {
  height: 46px;
  padding: 0 0.8rem;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  outline: none;
}
.form-input:focus,
.form-select:focus { border-color: var(--signal); }
.form-error { color: var(--warn); font-family: var(--mono); font-size: 0.66rem; }

.shipping-method,
.payment-methods { display: flex; flex-direction: column; gap: 0.6rem; }

.shipping-option,
.payment-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--rule-2);
  cursor: pointer;
}
.shipping-option:hover,
.payment-option:hover { border-color: var(--ink-3); }
.shipping-option.selected,
.payment-option.selected { border-color: var(--signal); background: var(--signal-wash); }

.shipping-radio,
.payment-radio { accent-color: var(--signal); width: 16px; height: 16px; }
.shipping-option-left { display: flex; align-items: center; gap: 0.8rem; flex: 1; }
.shipping-option-details { display: flex; flex-direction: column; }
.shipping-option-details .name { font-size: 0.9rem; font-weight: 600; }
.shipping-option-details .label,
.shipping-option-details span:last-child { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }
.shipping-option-price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.payment-option-label { display: flex; align-items: center; gap: 0.6rem; flex: 1; font-size: 0.9rem; }
.payment-icon { color: var(--ink-3); font-size: 1.2rem; }
.card-fields { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.place-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  margin-top: 1rem;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.place-order-btn:hover { background: var(--signal-ink); }

.secure-checkout,
.support-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.guarantees { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.guarantee-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
}
.guarantee-item i { color: var(--good); }

/* order summary column */
.order-summary,
.order-summary-card,
.order-details-card,
.order-processing-card {
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.order-summary { position: sticky; top: 88px; }
.order-summary-title,
.order-summary-section h3 {
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.order-items,
.order-items-list { display: flex; flex-direction: column; }
.order-item,
.order-item-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.order-item-image,
.order-item-thumb { aspect-ratio: 1; background: var(--paper-2); }
.order-item-image img,
.order-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-item-details,
.order-item-info { display: flex; flex-direction: column; min-width: 0; }
.order-item-name { font-size: 0.85rem; font-weight: 600; }
.order-item-sub,
.order-item-qty { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); }
.order-item-price,
.price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; font-weight: 600; }

.order-summary-row,
.order-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.45rem 0;
  font-size: 0.88rem;
}
.order-summary-row .label,
.order-total-row .label { color: var(--ink-3); }
.order-total-row {
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-3);
  font-size: 1.05rem;
  font-weight: 600;
}
.order-summary-total { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 600; }

.order-details-grid { display: grid; gap: 0.6rem; }
.order-detail-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.order-detail-item .label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.order-number { margin-bottom: 1.2rem; }
.order-number-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.order-number-value { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.02em; }

@media (max-width: 980px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

/* ==== 13 Thank you / order ============================================ */
.thankyou-page { padding: clamp(48px, 6vw, 88px) 0; background: var(--paper-2); }
.thankyou-container { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }

.thankyou-icon,
.success-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.4rem;
  background: var(--good);
  color: #fff;
  font-size: 1.5rem;
}
.thankyou-title { margin-bottom: 0.6rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; }
.thankyou-subtitle { margin-bottom: 2rem; color: var(--ink-3); }
.thankyou-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

.btn-continue-shopping,
.btn-track-order {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-continue-shopping { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-continue-shopping:hover { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; }
.btn-track-order:hover { background: var(--ink); color: #fff; }

.order-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.order-processing-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.processing-state,
.success-state { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.processing-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 1rem;
  border: 2px solid var(--rule-2);
  border-top-color: var(--signal);
  border-radius: 50%;
  animation: cwm-spin 0.7s linear infinite;
}
@keyframes cwm-spin { to { transform: rotate(360deg); } }
.processing-title { font-size: 1.2rem; }
.processing-sub { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }

/* ==== 14 FAQ ========================================================== */
.faq-hero-container,
.faq-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.faq-header { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule-3); }
.faq-header h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; }
.faq-header p { margin-top: 0.7rem; color: var(--ink-3); }

.faq-section { padding: clamp(36px, 4vw, 60px) 0; }

/* .faq-category is a section wrapper; the heading inside carries the style. */
.faq-category + .faq-category { margin-top: 2.6rem; }
.faq-category > h2,
.editorial-font {
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
}
h1.editorial-font { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; }

.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 0;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.faq-question:hover { color: var(--signal); }
.faq-question i { flex: none; color: var(--ink-4); font-size: 0.8rem; transition: transform 0.2s; }
.faq-item.active .faq-question i,
.faq-item.expanded .faq-question i { transform: rotate(45deg); color: var(--signal); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--ink-2);
  transition: max-height 0.28s ease, padding 0.28s ease;
}
.faq-item.active .faq-answer,
.faq-item.expanded .faq-answer { max-height: 640px; padding-bottom: 1.2rem; }

.faq-contact-list { display: grid; gap: 0.6rem; margin-top: 1rem; }
.contact-box {
  padding: 1.4rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

/* ==== 15 Policy ======================================================= */
.policy-page { padding-bottom: clamp(48px, 6vw, 88px); }
.policy-container { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.policy-header { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule-3); }
.policy-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; }
.policy-meta {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.policy-section { padding-top: 2.2rem; }
.policy-section h2 { margin-bottom: 0.8rem; font-size: 1.2rem; }
.policy-section h3 { margin: 1.2rem 0 0.5rem; font-size: 1rem; }
.policy-section p { margin-bottom: 0.8rem; color: var(--ink-2); }
.policy-section ul { margin: 0 0 0.9rem 1.1rem; list-style: disc; color: var(--ink-2); }
.policy-section li { margin-bottom: 0.35rem; }
.policy-section a { color: var(--signal); text-decoration: underline; }
.policy-card { padding: 1.4rem; background: var(--paper-2); border: 1px solid var(--rule); }

/* ==== 16 Footer ======================================================= */
.main-footer { background: var(--ink); color: #98a1ad; }

.footer-intro {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(38px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-kicker {
  margin-bottom: 1.2rem;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  align-items: end;
  gap: 3rem;
}
.footer-intro h2 { color: #fff; font-size: clamp(3.2rem, 8vw, 7.5rem); letter-spacing: -0.07em; }
.footer-intro-row > div { max-width: 430px; justify-self: end; }
.footer-intro-row p { margin-bottom: 1.4rem; font-size: 1rem; line-height: 1.7; }
.footer-shop-link { display: inline-flex; align-items: center; gap: 0.7rem; color: #fff; font-weight: 600; }
.footer-shop-link i { color: var(--signal); }

.footer-directory {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(3rem, 8vw, 8rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(38px, 5vw, 64px) var(--gutter);
}
/* Support pages still use the compact legacy footer markup. Keep its brand
   and three link groups in a proper directory grid rather than one column. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(140px, 1fr)); /* Shop / Help / Contact */
  gap: clamp(1.8rem, 4vw, 4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(38px, 5vw, 64px) var(--gutter);
}
.footer-grid .brand-col { max-width: 340px; }
.footer-brand-panel { max-width: 330px; }
.footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-logo-img { max-width: 190px; }
.brand-description { font-size: 0.85rem; line-height: 1.65; }
.footer-email { display: inline-block; margin-top: 1.4rem; color: #fff; font-family: var(--mono); font-size: 0.72rem; }
.footer-link-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* Shop / Help / Contact */

.footer-col h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-links-list { display: grid; gap: 0.5rem; }
.footer-links-list a { font-size: 0.85rem; }
.footer-links-list a:hover { color: #fff; }
.footer-address {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1.6;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.legal-links { display: flex; gap: 1.2rem; }
.legal-links a:hover { color: #fff; }

/* ==== 17 Motion ======================================================= */
.reveal { opacity: 1; }

html.scroll-reveal-ready .cwm-page .scroll-reveal {
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity 0.55s ease,
    transform 0.68s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--reveal-order, 0) * 42ms);
  will-change: opacity, transform;
}
html.scroll-reveal-ready .cwm-page .scroll-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1180px) {
  .cwm-directory { grid-template-columns: 224px 1fr; }
}

/* Below the rail's useful width the index becomes a horizontal contents
   strip above the catalog rather than a cramped sidebar. */
@media (max-width: 960px) {
  .cwm-directory { display: block; padding-bottom: 0; }
  .cwm-index { border-right: 0; border-bottom: 1px solid var(--rule-3); }
  .cwm-index-inner { position: static; padding: 1.4rem 0; }
  .cwm-index-stats { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .cwm-index-stats > div { flex-direction: column; gap: 0.15rem; }
  .cwm-index-nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 1.2rem; overflow-x: auto; padding-bottom: 0.5rem; }
  .cwm-index-nav a { border-bottom: 0; padding: 0; }
  .cwm-index-foot { display: none; }
  .cwm-directory-body { padding-left: 0; }
}

@media (max-width: 900px) {
  .cwm-hero-inner { grid-template-columns: 1fr; }
  .cwm-hero-copy { padding: 40px 0; border-right: 0; }
  .cwm-hero-figure { order: -1; margin: 0 calc(var(--gutter) * -1); }
  .cwm-trust ul { grid-template-columns: repeat(2, 1fr); }
  .cwm-trust li:nth-child(2n) { border-right: 0; }
  .cwm-notes > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .pdp-layout { grid-template-columns: 1fr; }
  .pdp-image { border-right: 0; border-bottom: 1px solid var(--rule); position: static !important; }
  .pdp-info { padding-left: 0; }
  .footer-intro-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-intro-row > div { justify-self: start; }
  .footer-directory { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cwm-why-inner,
  .cwm-routine-inner { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .cwm-catalog .cwm-row-cat,
  .cwm-catalog .cwm-row-size { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .footer-link-groups { grid-template-columns: 1fr 1fr; }
  .footer-link-groups .footer-col:last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr; }
  .cwm-why-grid { grid-template-columns: 1fr; }
  .cwm-why-grid article,
  .cwm-why-grid article:first-child,
  .cwm-why-grid article:last-child { padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cwm-why-grid article > i { margin: 1rem 0 0.7rem; }
}

@media (max-width: 460px) {
  .cwm-hero-buy { flex-direction: column; }
  .cwm-price-tag { border-right: 0; border-bottom: 1px solid var(--rule-3); }
  .cwm-btn.ghost { border-left: 0; border-top: 1px solid var(--rule-3); }
  .cwm-row-thumb { display: none; }
  .cwm-catalog { table-layout: fixed; }
  .cwm-row-price { width: 86px; }
  .cwm-row-act { width: 76px; }
  .cwm-catalog th,
  .cwm-catalog td { padding-left: 0.35rem; padding-right: 0.35rem; }
  .cwm-catalog th:first-child { padding-left: 0; }
  .cwm-hero-mix ul { grid-template-columns: repeat(5, 230px); }
  .cwm-hero-controls { grid-template-columns: 1fr; }
  .cwm-hero-controls button { justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cwm-hero-controls button:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html.scroll-reveal-ready .cwm-page .scroll-reveal { opacity: 1; transform: none; }
  .cwm-hero-slide.is-leaving,
  .cwm-hero-slide.is-entering,
  .cwm-hero-slide.is-leaving .cwm-hero-copy,
  .cwm-hero-slide.is-entering .cwm-hero-copy { animation: none; }
}

/* ==== Image-forward retail catalog ===================================
   Preserve the accessible table source while presenting products as cards. */
.cwm-directory {
  display: block;
  max-width: var(--max);
  padding: clamp(52px, 6vw, 88px) var(--gutter);
}
.cwm-index { display: none; }
.cwm-directory-body { width: 100%; padding: 0; }
.cwm-shop-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--rule-3);
}
.cwm-shop-intro h2 { margin-top: 0.5rem; font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing: -0.06em; }
.cwm-shop-intro > p { color: var(--ink-3); font-family: var(--mono); font-size: 0.68rem; text-align: right; text-transform: uppercase; }
.cwm-shelf + .cwm-shelf { margin-top: clamp(58px, 7vw, 96px); }
.cwm-shelf-head { padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-3); }
.cwm-shelf-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.cwm-catalog,
.cwm-catalog tbody { display: block; width: 100%; }
.cwm-catalog thead { display: none; }
.cwm-catalog tbody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  padding-top: 1.25rem;
}
.cwm-catalog .cwm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "image image"
    "name name"
    "category size"
    "price action";
  align-content: start;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cwm-catalog .cwm-row:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13, 18, 24, 0.1); }
.cwm-catalog .cwm-row td { display: block; border: 0; }
.cwm-catalog .cwm-row-thumb { grid-area: image; width: 100%; padding: 0 !important; }
.cwm-catalog .cwm-row-thumb a { display: block; aspect-ratio: 1.12 / 1; overflow: hidden; background: var(--paper-2); }
.cwm-catalog .cwm-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.cwm-catalog .cwm-row:hover .cwm-row-thumb img { transform: scale(1.035); }
.cwm-catalog .cwm-row-name { grid-area: name; padding: 1rem 1rem 0.45rem; }
.cwm-catalog .cwm-row-name a { font-size: 1rem; }
.cwm-catalog .cwm-row-name small { margin-top: 0.35rem; line-height: 1.45; }
.cwm-catalog .cwm-row-cat { grid-area: category; padding: 0.25rem 0 0.8rem 1rem; white-space: normal; }
.cwm-catalog .cwm-row-size { grid-area: size; padding: 0.25rem 1rem 0.8rem 0.4rem; text-align: right; white-space: normal; }
.cwm-catalog .cwm-row-price { grid-area: price; align-self: center; padding: 0.9rem 0.5rem 1rem 1rem; border-top: 1px solid var(--rule); text-align: left; }
.cwm-catalog .cwm-row-act { grid-area: action; width: auto; padding: 0.7rem 1rem 0.7rem 0.5rem !important; border-top: 1px solid var(--rule); }
.cwm-catalog .cwm-row-add { min-width: 88px; height: 38px; background: var(--signal); border-color: var(--signal); color: #fff; }
.cwm-catalog .cwm-row-ship { display: none; }

@media (max-width: 900px) {
  .cwm-catalog tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cwm-shop-intro { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
  .cwm-shop-intro > p { text-align: left; }
  .cwm-catalog tbody { grid-template-columns: 1fr; }
  .cwm-catalog .cwm-row-thumb { display: block; }
  .cwm-catalog .cwm-row-cat,
  .cwm-catalog .cwm-row-size { display: block; }
}

/* ==== Complete Wellness editorial marketplace ========================
   Wide, image-and-copy panels deliberately contrast Active Recovery's
   compact equipment-card grid. */
.cwm-directory { max-width: 1480px; }
.cwm-shelf {
  position: relative;
  padding: clamp(24px, 3vw, 42px);
  background: linear-gradient(145deg, #f5f7fb 0%, #fff 70%);
  border: 1px solid #dfe3ea;
  border-radius: 28px;
}

/* ==== Main-product feature stage ===================================== */
.cwm-feature-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) var(--gutter);
  background: #07101f;
  color: #fff;
}
.cwm-feature-slides { position: relative; max-width: var(--max); min-height: clamp(540px, 49vw, 700px); margin: 0 auto; }
.cwm-feature-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 30px;
  background-image: linear-gradient(90deg, rgba(4, 10, 22, 0.98) 0%, rgba(4, 10, 22, 0.88) 37%, rgba(4, 10, 22, 0.12) 68%), var(--feature-image);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cwm-feature-slide.is-active { z-index: 2; opacity: 1; transform: none; }
.cwm-feature-slide.is-leaving { z-index: 1; opacity: 0; transform: translateY(-18px) scale(1.01); }
.cwm-feature-copy { width: min(540px, 52%); padding: clamp(32px, 5vw, 72px); }
.cwm-feature-kicker { color: #86a8ff; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cwm-feature-copy h2 { margin: 0.8rem 0 1rem; font-size: clamp(2.6rem, 5.2vw, 5.2rem); letter-spacing: -0.065em; line-height: 0.94; }
.cwm-feature-lede { max-width: 50ch; color: #bbc5d6; line-height: 1.7; }
.cwm-feature-list { display: grid; gap: 0.85rem; margin-top: 2rem; }
.cwm-feature-list li { display: flex; align-items: center; gap: 0.75rem; color: #cbd3e1; }
.cwm-feature-list i { color: #4f7cff; }
.cwm-feature-list b { color: #fff; }
.cwm-feature-link { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 2rem; padding-bottom: 0.35rem; border-bottom: 1px solid #4f7cff; color: #fff; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cwm-feature-nav { position: relative; z-index: 4; display: flex; justify-content: center; max-width: var(--max); margin: 1.2rem auto 0; }
.cwm-feature-nav button { padding: 0.75rem 1.2rem; border: 1px solid rgba(255,255,255,0.18); color: #9ca9bd; font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.07em; text-transform: uppercase; }
.cwm-feature-nav button + button { border-left: 0; }
.cwm-feature-nav button.is-active { background: #fff; color: #07101f; }
.cwm-feature-nav span { margin-right: 0.45rem; color: #4f7cff; }
.cwm-feature-wave {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  height: 105px;
  background: var(--paper);
  pointer-events: none;
}
.cwm-feature-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(79, 124, 255, 0.18);
  transform: translateY(9px);
  z-index: -1;
}
.cwm-feature-wave-top,
.cwm-feature-wave-top::after {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 90% 68%, 78% 39%, 65% 72%, 51% 34%, 37% 69%, 23% 38%, 11% 65%, 0 42%);
}
.cwm-feature-wave-bottom,
.cwm-feature-wave-bottom::after {
  bottom: 0;
  clip-path: polygon(0 55%, 11% 31%, 24% 64%, 38% 34%, 52% 69%, 66% 37%, 79% 66%, 91% 32%, 100% 58%, 100% 100%, 0 100%);
}

@media (max-width: 760px) {
  .cwm-feature-stage { padding-inline: 16px; }
  .cwm-feature-slides { min-height: 720px; }
  .cwm-feature-slide {
    align-items: end;
    background-image: linear-gradient(0deg, rgba(4,10,22,0.98) 0%, rgba(4,10,22,0.88) 50%, rgba(4,10,22,0.05) 78%), var(--feature-image);
    background-position: 68% center;
  }
  .cwm-feature-copy { width: 100%; padding: 28px; }
  .cwm-feature-copy h2 { font-size: clamp(2.35rem, 12vw, 4rem); }
}
.cwm-shelf:nth-of-type(even) { background: linear-gradient(145deg, #f8f4f0 0%, #fff 70%); }
.cwm-shelf + .cwm-shelf { margin-top: clamp(32px, 4vw, 56px); }
.cwm-shelf-head {
  align-items: center;
  padding-bottom: 1.2rem;
  border-bottom: 0;
}
.cwm-shelf-head h2 { font-size: clamp(1.65rem, 3vw, 2.7rem); }
.cwm-shelf-head span {
  padding: 0.45rem 0.75rem;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
}
.cwm-catalog tbody {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  padding-top: 0;
}
.cwm-catalog .cwm-row {
  grid-template-columns: minmax(150px, 42%) 1fr auto;
  grid-template-areas:
    "image name name"
    "image category size"
    "image price action";
  min-height: 250px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(38, 49, 66, 0.07);
}
.cwm-catalog .cwm-row:first-child {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 48%) 1fr auto;
}
/* When a collection would otherwise end with one orphan card, let that
   final product become a second full-width editorial panel. */
.cwm-catalog .cwm-row:last-child:nth-child(even) { grid-column: 1 / -1; }
.cwm-catalog .cwm-row-thumb { height: 100%; }
.cwm-catalog .cwm-row-thumb a { height: 100%; aspect-ratio: auto; }
.cwm-catalog .cwm-row-name { align-self: end; padding: 1.25rem 1.25rem 0.5rem; }
.cwm-catalog .cwm-row-name a { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.25; }
.cwm-catalog .cwm-row-name small { max-width: 34ch; }
.cwm-catalog .cwm-row-cat { align-self: start; padding: 0.35rem 0.5rem 0.7rem 1.25rem; }
.cwm-catalog .cwm-row-size { align-self: start; padding: 0.35rem 1.25rem 0.7rem 0.3rem; }
.cwm-catalog .cwm-row-price {
  align-self: center;
  padding: 0.85rem 0.5rem 1.25rem 1.25rem;
  border-top: 0;
  color: var(--signal);
  font-size: 1.18rem;
}
.cwm-catalog .cwm-row-act { align-self: center; padding: 0.75rem 1.25rem 1.15rem 0.5rem !important; border-top: 0; }
.cwm-catalog .cwm-row-add { border-radius: 999px; }
.cwm-catalog .cwm-row:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(38, 49, 66, 0.13); }

@media (max-width: 1050px) {
  .cwm-catalog tbody { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .cwm-shelf { padding: 20px; border-radius: 20px; }
  .cwm-catalog .cwm-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "image image"
      "name name"
      "category size"
      "price action";
  }
  .cwm-catalog .cwm-row:first-child {
    grid-template-columns: 1fr auto;
  }
  .cwm-catalog .cwm-row-thumb a { aspect-ratio: 1.25 / 1; }
}

/* ==== Everyday-care product carousel ================================= */
.cwm-care-carousel { position: relative; padding: 0 34px 2rem; }
.cwm-care-viewport { overflow: hidden; }
.cwm-care-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  transition: transform 0.62s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.cwm-care-card {
  flex: 0 0 calc((100% - clamp(42px, 4.8vw, 72px)) / 4);
  min-width: 0;
  background: #fff;
}
.cwm-care-image {
  position: relative;
  display: block;
  aspect-ratio: 0.82;
  overflow: hidden;
  background: #eee8df;
  border-radius: 10px;
}
.cwm-care-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.cwm-care-card:hover .cwm-care-image img { transform: scale(1.035); }
.cwm-care-image > span {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.4rem 0.65rem;
  background: #17350e;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cwm-care-copy { padding: 1rem 0.25rem 0; }
.cwm-care-copy > p { color: var(--ink-4); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cwm-care-copy h3 { min-height: 2.5em; margin: 0.35rem 0 0.7rem; font-size: 1.04rem; line-height: 1.25; }
.cwm-care-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cwm-care-copy b { font-family: var(--mono); font-size: 1rem; }
.cwm-care-copy .cwm-row-add { min-width: 66px; height: 34px; border-radius: 0; }
.cwm-care-arrow {
  position: absolute;
  z-index: 4;
  top: 38%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 58px;
  background: #edf3df;
  border: 1px solid #315018;
  border-radius: 5px;
  color: #315018;
  transform: translateY(-50%);
}
.cwm-care-arrow.prev { left: 0; }
.cwm-care-arrow.next { right: 0; }
.cwm-care-arrow:hover { background: #315018; color: #fff; }
.cwm-care-progress { position: absolute; right: 34px; bottom: 0; left: 34px; height: 2px; overflow: hidden; background: var(--rule); }
.cwm-care-progress span { display: block; width: 20%; height: 100%; background: var(--signal); transition: width 0.4s ease; }

@media (max-width: 980px) {
  .cwm-care-card { flex-basis: calc((100% - clamp(14px, 1.6vw, 24px)) / 2); }
}
@media (max-width: 620px) {
  .cwm-care-carousel { padding-inline: 24px; }
  .cwm-care-card { flex-basis: 100%; }
  .cwm-care-arrow { width: 38px; height: 52px; }
  .cwm-care-arrow.prev { left: -4px; }
  .cwm-care-arrow.next { right: -4px; }
  .cwm-care-progress { right: 24px; left: 24px; }
}

/* ==== Standalone shop collection ===================================== */
.cwm-shop-hero { padding: clamp(64px, 9vw, 128px) 0 clamp(46px, 6vw, 82px); background: linear-gradient(135deg, #f3f6fc 0%, #f8f1eb 100%); border-bottom: 1px solid var(--rule); }
.cwm-shop-hero-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr); align-items: end; gap: clamp(2rem, 7vw, 7rem); margin-top: 0.8rem; }
.cwm-shop-hero h1 { max-width: 11ch; font-size: clamp(3.3rem, 7.5vw, 7.3rem); letter-spacing: -0.075em; line-height: 0.88; }
.cwm-shop-hero-row p { padding-bottom: 0.6rem; color: var(--ink-3); line-height: 1.75; }
.cwm-shop-collection { padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 9vw, 130px); }
.cwm-shop-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.4rem; margin-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.cwm-shop-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cwm-shop-filters button { padding: 0.65rem 0.9rem; background: #fff; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-3); font-size: 0.75rem; }
.cwm-shop-filters button span { margin-left: 0.35rem; color: var(--ink-4); font-family: var(--mono); font-size: 0.62rem; }
.cwm-shop-filters button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.cwm-shop-toolbar > p { flex: none; padding-top: 0.65rem; color: var(--ink-4); font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; }
.cwm-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 42px) clamp(16px, 2vw, 26px); }
.cwm-shop-card[hidden] { display: none; }
.cwm-shop-card { min-width: 0; animation: cwm-card-enter 0.35s both; }
@keyframes cwm-card-enter { from { opacity: 0; transform: translateY(12px); } }
.cwm-shop-card-image { position: relative; display: block; aspect-ratio: 0.92; overflow: hidden; background: #eee9e1; border-radius: 20px; }
.cwm-shop-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.cwm-shop-card:hover .cwm-shop-card-image img { transform: scale(1.035); }
.cwm-shop-card-image > span { position: absolute; top: 14px; left: 14px; padding: 0.42rem 0.7rem; background: rgba(13,18,24,0.9); color: #fff; border-radius: 999px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; }
.cwm-shop-card-copy { padding: 1rem 0.25rem 0; }
.cwm-shop-card-copy > p { color: var(--ink-4); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.cwm-shop-card-copy h2 { margin: 0.35rem 0 0.25rem; font-size: 1.12rem; }
.cwm-shop-card-copy > span { color: var(--ink-3); font-size: 0.78rem; }
.cwm-shop-card-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; margin-top: 0.9rem; border-top: 1px solid var(--rule); }
.cwm-shop-card-copy b { font-family: var(--mono); font-size: 1.05rem; }
.cwm-shop-card-copy .cwm-row-add { min-width: 108px; border-radius: 999px; }

@media (max-width: 920px) {
  .cwm-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cwm-shop-hero-row { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 620px) {
  .cwm-shop-toolbar { align-items: flex-start; flex-direction: column; }
  .cwm-shop-grid { grid-template-columns: 1fr; }
  .cwm-shop-hero h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
}


/* ==== Customer voices ================================================
   Promoted from a small annotated list inside the directory to a
   full-width band. The signal wash and the review count give it the
   visual weight the old .cwm-notes list never had. */
.cwm-voices {
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  border-top: 1px solid var(--rule-3);
  background: var(--signal-wash);
}
.cwm-voices-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
  border-bottom: 2px solid var(--ink);
}
.cwm-voices-head h2 {
  margin-top: 0.5rem;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.cwm-voices-count { display: grid; gap: 0.15rem; text-align: right; }
.cwm-voices-count strong {
  font-family: var(--mono);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.03em;
}
.cwm-voices-count span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cwm-voices-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cwm-voices-list li {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid #d7ddf6;
  border-radius: 20px;
}
.cwm-stars { margin: 0; color: var(--signal); font-size: 0.95rem; letter-spacing: 0.16em; }
.cwm-voices-list blockquote {
  margin: 0;
  flex: 1;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.cwm-voices-list cite {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
}
.cwm-voices-list cite span {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .cwm-voices-list { grid-template-columns: 1fr; }
  .cwm-voices-head { align-items: start; }
  .cwm-voices-count { text-align: left; }
}