/* Ocean scroll + quiet product text — brand/shop grid pages only.
   Linked last in <head> so it wins over each page's inline <style> block.
   Delete the one <link> to revert everything here. */

/* The existing .wavebreak SVGs are driven by --wave-blue, which landing.css
   sets to a tan (var(--bronze)). Repointed to real sea tones, scoped to these pages
   so the landing page's own wave motif is left alone. */
/* wave tokens now come from theme.css */

/* --- Ocean drift -----------------------------------------------------------
   The grid section carries the gradient down its own height, so scrolling the
   products IS the descent — no scroll listener, nothing to jank.
   Stops at a pale seaglass: --text-strong (var(--ink)) has to stay readable on
   the deepest step, so the dark <footer> provides the real depth payoff. */
.shop{background:var(--paper)}   /* was a linear-gradient — gradients are banned */

/* --- Product card text -----------------------------------------------------
   Was three font families in one small card (serif name, display price,
   tracked-uppercase tag), all centred. Now one family, left-aligned to the
   image edge, which is what actually makes a grid scannable. */
.pc__name{
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:var(--weight-regular);
  color:var(--text-body);
  text-align:left;
  letter-spacing:0;
  line-height:1.35;
  margin:12px 0 2px;
}
.pc__name a{color:inherit}

.pp{
  text-align:left;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:var(--weight-regular);
  color:var(--text-muted);
  letter-spacing:0;
}
.pp s{font-size:1em;margin-right:9px;color:var(--text-faint)}
.pp s::after{opacity:.5}
.pp em{font-style:normal;font-weight:var(--weight-medium);color:var(--sale)}

/* Sale chip recedes rather than shouts. */
.ptag{
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:var(--weight-medium);
  letter-spacing:.16em;
  padding:5px 10px 4px;
  background:rgba(28,26,24,.82);
  box-shadow:none;
}

/* --- Subnav legibility -----------------------------------------------------
   11px/700 white sat over a hero image that swaps every 3.2s, with text-shadow
   doing all the work. A soft scrim holds it steady across every rotation. */
.shophero .subnav{
  background:linear-gradient(180deg,rgba(28,26,24,0) 0%,rgba(28,26,24,.42) 55%);
}
.shophero .subnav a{text-shadow:0 1px 10px rgba(28,26,24,.55)}

/* --- Charmline section (Maryan Mehlhorn page) ------------------------------
   A labelled band inside the same .shop block, so the ocean gradient runs
   continuously behind both grids rather than restarting. */
.brandsec{max-width:1440px;margin:clamp(64px,9vh,110px) auto clamp(28px,4vh,44px);
  padding-top:clamp(48px,6vh,72px);border-top:1px solid var(--line)}
.brandsec__title{font-family:var(--font-display);font-size:clamp(24px,2.4vw,34px);
  font-weight:var(--weight-medium);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-strong);margin:0 0 12px}
.brandsec__line{font-family:var(--font-sans);font-size:16px;line-height:var(--leading-body);
  color:var(--text-muted);margin:0;max-width:52ch}

/* TYPE: product type label under the name. 11px micro label, uppercase,
   positive tracking, --muted (5.06:1 on --bg). */
.pc__name small{display:block;margin-top:5px;font-family:var(--font-sans);font-size:11px;
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}