/*
Theme Name: VESTOND
Theme URI: https://vestond.com/
Author: VESTOND Studio
Author URI: https://vestond.com/
Description: VESTOND - garment multi-retail classic theme. Full-bleed carousel home page on a pure black canvas (#0B0B0B) with a fluorescent pink accent (#FF3D7F), Archivo Black display type and Roboto body copy. Twelve radius product cards carry a corner badge. Built for WooCommerce: every product, category, price and image on the front page is read from the store, nothing is hard coded. Self hosted fonts, one small vanilla JS file, no framework.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vestond
Tags: e-commerce, blog, one-column, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks
WC requires at least: 5.0
WC tested up to: 9.4
*/

@import url("fonts/fonts.css");

/* ==========================================================================
   VESTOND - S2 / garment multi-retail / full-bleed carousel home
   Design system: pure black canvas, fluorescent pink accent,
   Archivo Black display type, Roboto body, 12px radius cards.
   Self contained. Nothing is fetched from a third party. No framework.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* palette */
  --ink: #0B0B0B;
  --ink-soft: #141414;
  --ink-raise: #1C1C1C;
  --white: #FFFFFF;
  --pink: #FF3D7F;
  --pink-deep: #E02465;
  --light: #F5F5F5;
  --line: #E4E4E4;
  --line-dark: #2A2A2A;
  --muted: #6E6E6E;
  --muted-dark: #9B9B9B;

  /* shape */
  --r: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* type */
  --disp: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* layout */
  --wrap-max: 1440px;
  --pad: clamp(18px, 3.2vw, 56px);
  --nav-h: 70px;
  --announce-h: 38px;
  --sec-y: clamp(58px, 6.8vw, 112px);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .28s var(--ease);
  --mid: .5s var(--ease);
  --slow: .85s var(--ease);
}

/* ------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
s { text-decoration: line-through; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--pink); color: var(--white); }

/* thin scrollbar for horizontal rails */
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); }
.rail::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 4px; }

/* ------------------------------------------------------------ 3. LAYOUT */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sec {
  position: relative;
  padding: var(--sec-y) 0;
}

.sec--paper { background: var(--white); color: var(--ink); --card-fg: var(--ink); --card-muted: var(--muted); --card-line: var(--line); --card-bg: var(--white); }
.sec--grey  { background: var(--light); color: var(--ink); --card-fg: var(--ink); --card-muted: var(--muted); --card-line: var(--line); --card-bg: var(--white); }
.sec--dark  { background: var(--ink); color: var(--white); --card-fg: var(--white); --card-muted: var(--muted-dark); --card-line: var(--line-dark); --card-bg: var(--ink-soft); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- 4. TYPE SCALE */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pink);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--pink);
  flex: none;
}

.sec__title {
  font-family: var(--disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: .96;
  letter-spacing: -.01em;
  margin-top: 14px;
}

.sec__title em {
  font-style: normal;
  color: var(--pink);
}

.sec__sub {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 15px;
  color: var(--card-muted, var(--muted));
}

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.4vw, 52px);
}

.sec__head .sec__sub { margin-top: 12px; }

/* text link with pink underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--pink);
  transition: color var(--fast), border-color var(--fast);
  white-space: nowrap;
}

.tlink svg { width: 15px; height: 15px; transition: transform var(--fast); }
.tlink:hover { color: var(--pink); }
.tlink:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------ 5. BUTTONS */
.btn {
  --btn-bg: var(--pink);
  --btn-fg: var(--white);
  --btn-bd: var(--pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  padding: 15px 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}

.btn svg { width: 15px; height: 15px; }

.btn:hover { --btn-bg: var(--pink-deep); --btn-bd: var(--pink-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .55); }
.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
.btn--ink:hover { --btn-bg: var(--pink); --btn-bd: var(--pink); }

/* round icon buttons (carousel arrows) */
.rbtn {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}

.rbtn svg { width: 16px; height: 16px; }
.rbtn:hover { background: var(--pink); border-color: var(--pink); color: var(--white); transform: translateY(-2px); }
.rbtn[disabled] { opacity: .28; pointer-events: none; }

/* --------------------------------------------------- 6. ANNOUNCEMENT (A2) */
.announce {
  background: var(--ink);
  color: var(--white);
  height: var(--announce-h);
  position: relative;
  overflow: hidden;
  transition: height var(--mid), opacity var(--fast);
}

.site-header.is-scrolled .announce { height: 0; opacity: 0; }

.announce__track { position: absolute; inset: 0; }

.announce__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--mid), transform var(--mid);
}

.announce__item.is-on { opacity: 1; transform: none; }
.announce__item b { color: var(--pink); font-weight: 700; }
.announce__item span { color: rgba(255, 255, 255, .45); }

/* -------------------------------------------------------- 7. HEADER (A3) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  --fg: var(--white);
  --fg-dim: rgba(255, 255, 255, .74);
  --hair: rgba(255, 255, 255, .18);
  transition: background var(--mid), box-shadow var(--mid);
}

.site-header.is-scrolled {
  --fg: var(--ink);
  --fg-dim: rgba(11, 11, 11, .70);
  --hair: rgba(11, 11, 11, .12);
  background: var(--white);
  box-shadow: 0 1px 0 var(--hair), 0 18px 40px -34px rgba(0, 0, 0, .8);
}

.nav {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--fg);
}

.brand {
  font-family: var(--disp);
  font-size: 20px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg);
  transition: color var(--fast);
}

.brand i {
  width: 7px;
  height: 7px;
  background: var(--pink);
  border-radius: 2px;
  display: block;
  margin-bottom: 9px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.nav__menu a {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--fast);
}

.nav__menu a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast);
}

.nav__menu a:hover { color: var(--pink); }
.nav__menu a:hover::after { transform: scaleX(1); }
.nav__menu a.is-hot { color: var(--pink); }

.nav__act {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  position: relative;
  transition: background var(--fast), color var(--fast);
}

.iconbtn svg { width: 19px; height: 19px; }
.iconbtn:hover { color: var(--pink); background: rgba(128, 128, 128, .16); }

.cartdot {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: -10px;
  position: relative;
  flex: none;
}

.burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--fg);
  transition: transform var(--fast), opacity var(--fast), background var(--fast);
}

.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }

.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 22px var(--pad) 34px;
  transform: translateX(-102%);
  transition: transform .46s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open { transform: none; }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin-bottom: 26px;
}

.drawer__nav { display: flex; flex-direction: column; }

.drawer__nav a {
  font-family: var(--disp);
  font-size: clamp(30px, 9vw, 46px);
  text-transform: uppercase;
  line-height: 1.06;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--fast), padding-left var(--fast);
}

.drawer__nav a small {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted-dark);
}

.drawer__nav a:hover { color: var(--pink); padding-left: 10px; }

.drawer__foot {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  color: var(--muted-dark);
}

.drawer__foot a { color: var(--white); }
.drawer__foot a:hover { color: var(--pink); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mid);
}

.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------- 8. HERO (A6) */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 1040px;
  background: var(--ink);
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}

.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.hero__slides { position: absolute; inset: 0; }

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.02);
}

.hero__slide.is-active .hero__media img { animation: kenburns 9s linear both; }

@keyframes kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 6, 6, .9) 0%, rgba(6, 6, 6, .62) 38%, rgba(6, 6, 6, .12) 72%, rgba(6, 6, 6, .34) 100%),
    linear-gradient(0deg, rgba(6, 6, 6, .76) 0%, rgba(6, 6, 6, 0) 42%);
}

/* Vertical centring is done with auto margins on .hero__inner, never with
   justify-content:center. A centred flex item that is taller than its box
   overflows BOTH edges, so the copy rode up underneath the transparent
   header on short viewports. Auto margins collapse to 0 on overflow, which
   keeps the eyebrow pinned below the header at every viewport height. */
.hero__body {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + var(--announce-h) + 14px);
  padding-bottom: clamp(96px, 15vh, 132px);
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.hero__inner {
  max-width: 720px;
  margin-top: auto;
  margin-bottom: auto;
}

.hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--pink); }

.hero__title {
  font-family: var(--disp);
  text-transform: uppercase;
  font-size: clamp(40px, min(6.6vw, 12vh), 104px);
  line-height: .9;
  letter-spacing: -.015em;
  color: var(--white);
  margin: clamp(10px, 2.1vh, 18px) 0 0;
}

.hero__title em { font-style: normal; color: var(--pink); display: block; }

.hero__text {
  margin-top: clamp(10px, 2.5vh, 20px);
  max-width: 46ch;
  font-size: clamp(14px, min(1.15vw, 2.2vh), 17px);
  color: rgba(255, 255, 255, .82);
}

.hero__price {
  margin-top: clamp(10px, 2.8vh, 22px);
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--white);
}

.hero__price b { font-family: var(--disp); font-size: 26px; font-weight: 400; letter-spacing: .01em; }
.hero__price s { color: rgba(255, 255, 255, .5); font-size: 15px; }
.hero__price i {
  font-style: normal;
  background: var(--pink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

.hero__cta {
  margin-top: clamp(16px, 4vh, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero__dots { display: flex; align-items: center; gap: 10px; }

.hero__dot {
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .32);
  transition: background var(--fast), width var(--fast);
}

.hero__dot.is-on { background: var(--pink); width: 56px; }

.hero__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .7);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.hero__count b { color: var(--white); }

.hero__arrows { display: flex; gap: 10px; color: var(--white); }
.hero__arrows .rbtn { border-color: rgba(255, 255, 255, .4); }

.hero__rail {
  position: absolute;
  z-index: 5;
  right: var(--pad);
  bottom: 96px;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__rail::after { content: ""; width: 1px; height: 54px; background: rgba(255, 255, 255, .35); }

/* -------------------------------------------------- 9. CATEGORY CARDS (B1) */
.cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

.cat {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-soft);
  color: var(--white);
  isolation: isolate;
}

.cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  transition: transform 1s var(--ease);
}

.cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, .06) 0%, rgba(6, 6, 6, .28) 52%, rgba(6, 6, 6, .86) 100%);
  transition: background var(--mid);
}

.cat:hover img { transform: scale(1.07); }
.cat:hover::after { background: linear-gradient(180deg, rgba(255, 61, 127, .24) 0%, rgba(6, 6, 6, .42) 52%, rgba(6, 6, 6, .9) 100%); }

.cat__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(16px, 2vw, 26px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.cat__name {
  display: block;
  font-family: var(--disp);
  text-transform: uppercase;
  font-size: clamp(19px, 1.75vw, 27px);
  line-height: 1;
  letter-spacing: -.005em;
}

.cat__meta {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.cat__go {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}

.cat__go svg { width: 15px; height: 15px; }
.cat:hover .cat__go { background: var(--pink); border-color: var(--pink); transform: rotate(-45deg); }

/* ------------------------------------------------- 10. PRODUCT CARD (B4/C1/C4/D1) */
.pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pcard__media {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--light);
  aspect-ratio: 4 / 5;
}

.sec--dark .pcard__media { background: var(--ink-raise); }

.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}

.pcard__img--b { opacity: 0; }
.pcard:hover .pcard__img--a { opacity: 0; }
.pcard:hover .pcard__img--b { opacity: 1; transform: scale(1.04); }

/* corner badge: flush with the 12px card corner */
.badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--pink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 14px;
  border-radius: var(--r) 0 var(--r) 0;
}

/* Three badge states. Every one has to stay legible on a white studio shot,
   which is what the catalogue grid is mostly made of - hence the hairline on
   the otherwise-white Best Seller chip. */
.badge--new { background: var(--pink); color: var(--white); }
.badge--sale { background: var(--ink); color: var(--white); }
.badge--best { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .16); }

/* quick add slide-up */
.pcard__quick {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--fast), transform var(--fast), background var(--fast);
}

.pcard__quick svg { width: 14px; height: 14px; }
.pcard__media:hover .pcard__quick { opacity: 1; transform: none; }
.pcard__quick:hover { background: var(--pink); }

.pcard__body { padding: 15px 2px 0; }

.pcard__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--card-muted);
}

.pcard__name {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.003em;
  color: var(--card-fg);
}

.pcard__name a { transition: color var(--fast); }
.pcard__name a:hover { color: var(--pink); }

.pcard__tag {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--card-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  color: var(--card-fg);
}

.pcard__price .now { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pcard__price .was { font-size: 12.5px; color: var(--card-muted); }
.pcard__price .off { font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .1em; color: var(--pink); text-transform: uppercase; }

/* ----------------------------------------------------- 11. H-RAIL (B4) */
.rail {
  display: flex;
  gap: clamp(12px, 1.5vw, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px var(--pad) 22px;
  /* without this the snap port starts at the scrollport edge, so the first
     card snaps flush to x=0 and swallows the section gutter */
  scroll-padding-inline: var(--pad);
  scrollbar-width: thin;
}

.rail > * {
  flex: 0 0 clamp(230px, 21vw, 300px);
  scroll-snap-align: start;
}

.rail__nav { display: flex; gap: 10px; }

/* -------------------------------------------------- 12. PRODUCT GRID (D1) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px) clamp(12px, 1.6vw, 24px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.chip {
  border: 1.5px solid var(--card-line);
  border-radius: var(--r-pill);
  padding: 10px 19px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--card-muted);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}

.chip:hover { border-color: var(--pink); color: var(--pink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sec--dark .chip.is-on { background: var(--pink); border-color: var(--pink); color: var(--white); }

.pcard[hidden] { display: none; }

.gridmsg {
  margin-top: 26px;
  font-size: 13px;
  color: var(--card-muted);
}

/* ------------------------------------------------ 13. EDITORIAL PICKS (D3) */
.edit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}

.edit__item { display: flex; flex-direction: column; }

.edit__item:nth-child(2) { margin-top: clamp(0px, 4vw, 58px); }

.edit__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ink-raise);
}

.edit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  transition: transform 1.1s var(--ease);
}

.edit__item:hover .edit__media img { transform: scale(1.05); }

.edit__no {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--pink);
  color: var(--white);
  font-family: var(--disp);
  font-size: 13px;
  line-height: 1;
  padding: 12px 15px;
  border-radius: var(--r) 0 var(--r) 0;
}

.edit__body { padding-top: 20px; }

.edit__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
}

.edit__title {
  margin-top: 9px;
  font-family: var(--disp);
  text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.02;
}

.edit__text {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--card-muted);
}

.edit__row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--card-line);
  padding-top: 15px;
}

.edit__price { font-size: 16px; font-weight: 700; }
.edit__price s { font-size: 12px; font-weight: 400; color: var(--card-muted); margin-left: 7px; }

/* ------------------------------------------------------ 14. STORY (E1) */
.story {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4.4vw, 76px);
  align-items: center;
}

.story__title {
  font-family: var(--disp);
  text-transform: uppercase;
  font-size: clamp(30px, 3.7vw, 58px);
  line-height: .96;
  margin-top: 16px;
}

.story__title em { font-style: normal; color: var(--pink); }

.story p {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--card-muted);
  max-width: 56ch;
}

.stats {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid var(--card-line);
  padding-top: 26px;
}

.stats b {
  display: block;
  font-family: var(--disp);
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 400;
  line-height: 1;
  color: var(--card-fg);
}

.stats span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--card-muted);
}

.story__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--line);
}

.story__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.story__stamp {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--pink);
  color: var(--white);
  border-radius: var(--r);
  padding: 16px 20px;
  max-width: 210px;
}

.story__stamp b { display: block; font-family: var(--disp); font-size: 15px; text-transform: uppercase; line-height: 1.1; }
.story__stamp span { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }

/* --------------------------------------------------- 15. PROMISES (E6) */
.promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.promise {
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--card-bg);
  transition: border-color var(--fast), transform var(--fast);
}

.promise:hover { border-color: var(--pink); transform: translateY(-4px); }

.promise__ico {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--pink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.promise__ico svg { width: 22px; height: 22px; }

.promise h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.14;
  color: var(--card-fg);
}

.promise p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--card-muted);
}

/* ---------------------------------------------------- 16. REVIEWS (F2) */
.revtop {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  flex-wrap: wrap;
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--card-bg);
  margin-bottom: clamp(24px, 3vw, 42px);
}

.revtop__score {
  font-family: var(--disp);
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1;
  color: var(--card-fg);
}

.revtop__meta { font-size: 13px; color: var(--card-muted); }
.revtop__meta b { color: var(--card-fg); }

.revtop__bars {
  margin-left: auto;
  display: grid;
  gap: 7px;
  min-width: min(320px, 100%);
}

.bar { display: flex; align-items: center; gap: 11px; font-size: 11px; color: var(--card-muted); }
.bar__track { display: block; flex: 1; height: 5px; border-radius: 4px; background: var(--card-line); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--pink); border-radius: 4px; }
.bar i { font-style: normal; font-variant-numeric: tabular-nums; }

.revs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.rev {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--fast), transform var(--fast);
}

.rev:hover { border-color: var(--pink); transform: translateY(-4px); }

.rev__top { display: flex; align-items: center; gap: 12px; }

.rev__av {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .02em;
}

.rev__av--alt { background: var(--ink); color: var(--white); border: 1px solid var(--line-dark); }
.sec--paper .rev__av--alt, .sec--grey .rev__av--alt { background: var(--ink); }

.rev__who { min-width: 0; }
.rev__who b { display: block; font-size: 13.5px; line-height: 1.2; color: var(--card-fg); }
.rev__who span { display: block; margin-top: 4px; font-size: 11px; color: var(--card-muted); letter-spacing: .05em; }

.stars { display: flex; gap: 3px; color: var(--pink); }
.stars svg { width: 14px; height: 14px; }
.stars .off { color: var(--card-line); }

.rev__body { font-size: 13.5px; line-height: 1.66; color: var(--card-muted); }
.rev__body b { color: var(--card-fg); }

.rev__item {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--card-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card-muted);
}

.rev__item a { color: var(--pink); border-bottom: 1px solid transparent; }
.rev__item a:hover { border-bottom-color: var(--pink); }

.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pink);
}

.verified svg { width: 13px; height: 13px; }

/* ------------------------------------------------------ 17. FOOTER (H1) */
.footer {
  background: var(--ink);
  color: var(--white);
  --card-fg: var(--white);
  --card-muted: var(--muted-dark);
  --card-line: var(--line-dark);
  --card-bg: var(--ink-soft);
  padding-top: clamp(50px, 6vw, 92px);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 3.4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

.foot__cell { min-width: 0; }

.foot__brand {
  font-family: var(--disp);
  font-size: 30px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.foot__brand i { width: 8px; height: 8px; background: var(--pink); border-radius: 2px; margin-bottom: 13px; }

.foot__blurb { margin-top: 18px; font-size: 13.5px; line-height: 1.7; color: var(--muted-dark); max-width: 38ch; }

.footer h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.foot__links { display: grid; gap: 12px; }
.foot__links a { font-size: 13.5px; color: var(--muted-dark); transition: color var(--fast), padding-left var(--fast); }
.foot__links a:hover { color: var(--pink); padding-left: 5px; }

.news { margin-top: 18px; }

.news__row {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid var(--line-dark);
  padding-bottom: 10px;
  transition: border-color var(--fast);
}

.news__row:focus-within { border-color: var(--pink); }

.news input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 14px;
  padding: 8px 0;
}

.news input::placeholder { color: #6C6C6C; }
.news input:focus { outline: none; }

.news button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fast), transform var(--fast);
}

.news button svg { width: 16px; height: 16px; }
.news button:hover { background: var(--pink-deep); transform: translateX(3px); }

.news__note { margin-top: 12px; font-size: 11.5px; color: #6C6C6C; }
.news__note.is-ok { color: var(--pink); }

.foot__bar {
  border-top: 1px solid var(--line-dark);
  padding-top: 26px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.pay { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.pay__ico {
  width: 54px;
  height: 36px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A8A8A;
  transition: color var(--fast), border-color var(--fast);
}

.pay__ico svg { width: 32px; height: 21px; }
.pay__ico:hover { color: var(--white); border-color: var(--pink); }

.socials { display: flex; gap: 9px; }

.socials a {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dark);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.socials a svg { width: 17px; height: 17px; }
.socials a:hover { color: var(--white); border-color: var(--pink); background: var(--pink); }

.foot__legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #6C6C6C;
}

.foot__legal a { transition: color var(--fast); }
.foot__legal a:hover { color: var(--pink); }

/* ------------------------------------------------------ 18. REVEAL ANIM */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay: var(--d, 0s);
}

.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__slide.is-active .hero__media img { animation: none; }
  .rail { scroll-behavior: auto; }
}

/* --------------------------------------------------------- 19. RESPONSIVE */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .revs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot__cell--news { grid-column: 1 / -1; }
  .hero__rail { display: none; }
  .nav { gap: 10px; }
  .nav__menu a { padding: 10px 9px; font-size: 11px; letter-spacing: .1em; }
  .nav__menu a::after { left: 9px; right: 9px; }
}

@media (max-width: 980px) {
  .nav__menu { display: none; }
  .burger { display: block; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit { grid-template-columns: 1fr; }
  .edit__item:nth-child(2) { margin-top: 0; }
  .edit__media { aspect-ratio: 16 / 11; }
  .edit__media img { object-position: center 22%; }
  .story { grid-template-columns: 1fr; }
  .story__media { aspect-ratio: 16 / 11; order: -1; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revtop__bars { margin-left: 0; }
}

@media (max-width: 720px) {
  :root { --nav-h: 62px; --announce-h: 34px; }

  .announce__item { font-size: 10px; letter-spacing: .12em; gap: 0; }
  .announce__item span { display: none; }

  .hero { height: 92vh; min-height: 560px; }
  .hero__body { padding-bottom: clamp(92px, 19vh, 150px); }
  .hero__media img { object-position: center 22%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6, 6, 6, .55) 0%, rgba(6, 6, 6, .28) 34%, rgba(6, 6, 6, .88) 82%),
      linear-gradient(0deg, rgba(6, 6, 6, .82) 0%, rgba(6, 6, 6, 0) 55%);
  }
  .hero__ui { bottom: 24px; gap: 14px; }
  .hero__count { display: none; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__dot { width: 26px; }
  .hero__dot.is-on { width: 40px; }

  .grid,
  .pcard__name { font-size: 13.5px; }
  .pcard__tag { display: none; }
  .pcard__body { padding-top: 12px; }
  .pcard__price .now { font-size: 15px; }
  .pcard__quick { opacity: 1; transform: none; height: 40px; left: 8px; right: 8px; bottom: 8px; font-size: 10px; }

  .badge { font-size: 9px; padding: 9px 11px; }

  .cats { gap: 10px; }
  .cat { aspect-ratio: 3 / 4; }
  .cat__name { font-size: 17px; }
  .cat__meta { font-size: 10px; letter-spacing: .12em; }
  .cat__go { width: 32px; height: 32px; }
  .cat__go svg { width: 13px; height: 13px; }
  .cat__body { padding: 13px; }

  .rail > * { flex: 0 0 62vw; }

  .revs { grid-template-columns: 1fr; }
  .revtop { gap: 18px; }

  .promises .promise:last-child { grid-column: auto; }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .stats span { font-size: 9.5px; letter-spacing: .1em; }

  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .foot__cell--brand { grid-column: 1 / -1; }
  .foot__cell--news { grid-column: 1 / -1; }

  .foot__bar { flex-direction: column; align-items: flex-start; }
  .story__stamp { right: 12px; bottom: 12px; padding: 13px 15px; }
}

@media (max-width: 400px) {
  .hero__title { font-size: 36px; }
  .btn { padding: 14px 22px; font-size: 11px; }
  .chip { padding: 9px 14px; font-size: 10px; }
  .cats { gap: 8px; }
  .cat__name { font-size: 15px; }
  .pcard__name { font-size: 12.5px; }
}

@media (hover: none) {
  .pcard:hover .pcard__img--a { opacity: 1; }
  .pcard:hover .pcard__img--b { opacity: 0; }
}

@media print {
  .site-header, .drawer, .scrim, .hero__ui { display: none; }
}

/* Short viewports (small laptops, landscape phones). The hero copy has to
   clear the header above it AND the dots/arrows row below it, so the display
   type and the top/bottom gutters step down instead of sliding under either
   one. Placed last so it wins over the width queries above. */
@media (max-height: 700px) {
  .hero__body { padding-top: calc(var(--nav-h) + var(--announce-h) + 8px); }
  .hero__title { font-size: clamp(32px, min(6.6vw, 10.5vh), 104px); }
  .hero__ui { bottom: 20px; }
}

/* ==========================================================================
   WP TEMPLATE ADDITIONS
   Additive only. Everything below reuses the tokens and components defined
   above; the static home page design itself is untouched. It styles the
   templates that have no counterpart in the source static site - blog
   index, archive, single, page, search and 404 - plus the WordPress admin
   bar offset. All selectors are prefixed .wp- so they can never collide
   with the design system.
   ========================================================================== */

/* WordPress admin bar pushes the fixed header down instead of hiding it. */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Dark masthead used by every template that is not the carousel home page.
   It clears the fixed header AND gives the header something dark to sit on,
   so the floating transparent state stays legible. */
.wp-band {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--nav-h) + var(--announce-h) + clamp(38px, 6vw, 86px)) 0 clamp(34px, 5vw, 68px);
}

.wp-band--tall { padding-bottom: clamp(60px, 9vw, 132px); }

body.admin-bar .wp-band { padding-top: calc(var(--nav-h) + var(--announce-h) + clamp(38px, 6vw, 86px) + 32px); }

.wp-band__eyebrow { margin-bottom: 14px; }

.wp-band__title {
  font-family: var(--disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 68px);
  line-height: .96;
  letter-spacing: -.01em;
  max-width: 20ch;
}

.wp-band__title em { font-style: normal; color: var(--pink); }

.wp-band__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.wp-band__meta a:hover { color: var(--pink); }
.wp-band__sub { margin-top: 14px; max-width: 60ch; font-size: 15px; color: rgba(255, 255, 255, .72); }

.wp-body { padding: clamp(38px, 5.4vw, 84px) 0; }

/* Long form copy - posts and pages. */
.wp-prose { max-width: 76ch; }
.wp-prose > * + * { margin-top: 18px; }
.wp-prose h2,
.wp-prose h3,
.wp-prose h4 { font-family: var(--disp); font-weight: 400; text-transform: uppercase; line-height: 1.06; }
.wp-prose h2 { font-size: clamp(22px, 2.7vw, 34px); margin-top: 38px; }
.wp-prose h3 { font-size: clamp(18px, 2.1vw, 26px); margin-top: 30px; }
.wp-prose h4 { font-size: 17px; margin-top: 26px; }
.wp-prose a { color: var(--pink); border-bottom: 1px solid currentColor; }
.wp-prose ul,
.wp-prose ol { margin: 16px 0 0; padding-left: 22px; list-style: disc; }
.wp-prose ol { list-style: decimal; }
.wp-prose li + li { margin-top: 8px; }
.wp-prose blockquote {
  border-left: 3px solid var(--pink);
  padding: 2px 0 2px 22px;
  font-size: 18px;
  line-height: 1.55;
}
.wp-prose img,
.wp-prose video,
.wp-prose iframe { border-radius: var(--r); }
.wp-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.wp-prose th,
.wp-prose td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: left; }
.wp-prose th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.wp-prose code,
.wp-prose pre,
.wp-prose kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.wp-prose pre { background: var(--ink); color: var(--white); padding: 20px; border-radius: var(--r); overflow-x: auto; }
.wp-prose code { background: rgba(128, 128, 128, .16); padding: 2px 6px; border-radius: 4px; }
.wp-prose pre code { background: none; padding: 0; }
.sec--dark .wp-prose blockquote { border-color: var(--pink); }
.sec--dark .wp-prose th,
.sec--dark .wp-prose td { border-color: var(--line-dark); }
.wp-prose .wp-block-image,
.wp-prose .wp-block-gallery { margin-top: 26px; }
.wp-prose .alignleft { float: left; margin: 6px 26px 18px 0; }
.wp-prose .alignright { float: right; margin: 6px 0 18px 26px; }
.wp-prose .aligncenter { margin-left: auto; margin-right: auto; }

/* Taxonomy / meta rail. */
.wp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.wp-meta a:hover { color: var(--pink); }
.sec--dark .wp-meta { color: var(--muted-dark); }

/* Post and product card used by index/archive/search. */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.wp-post { display: flex; flex-direction: column; }
.wp-post__media { display: block; border-radius: var(--r); overflow: hidden; background: var(--light); aspect-ratio: 16 / 10; }
.wp-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.wp-post:hover .wp-post__media img { transform: scale(1.04); }
.wp-post__body { padding-top: 16px; }
.wp-post__title { margin-top: 8px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.wp-post__title a:hover { color: var(--pink); }
.wp-post__ex { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.wp-post__more { margin-top: 14px; display: inline-flex; }

/* Pagination in the design system's language. */
.wp-pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 4vw, 54px); }
.wp-pager .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.wp-pager .page-numbers.current,
.wp-pager .page-numbers:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sec--dark .wp-pager .page-numbers { border-color: var(--line-dark); color: var(--white); }
.sec--dark .wp-pager .page-numbers.current,
.sec--dark .wp-pager .page-numbers:hover { background: var(--pink); border-color: var(--pink); }

/* Empty state. */
.wp-empty { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(26px, 4vw, 48px); }
.sec--dark .wp-empty { border-color: var(--line-dark); }
.wp-empty__title { font-family: var(--disp); text-transform: uppercase; font-size: clamp(22px, 3vw, 34px); line-height: 1; }
.wp-empty__text { margin-top: 12px; max-width: 56ch; font-size: 15px; color: var(--muted); }
.sec--dark .wp-empty__text { color: var(--muted-dark); }

/* Search form. */
.wp-search { display: flex; gap: 10px; max-width: 560px; margin-top: 24px; }
.wp-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair, rgba(11, 11, 11, .18));
  background: var(--white);
  color: var(--ink);
}
.wp-band .wp-search input[type="search"] { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: var(--white); }
.wp-band .wp-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .5); }
.wp-search button {
  padding: 0 22px;
  border-radius: var(--r-sm);
  background: var(--pink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wp-search button:hover { background: var(--pink-deep); }

/* 404 display numeral. */
.wp-404__num { font-family: var(--disp); font-size: clamp(88px, 22vw, 260px); line-height: .82; letter-spacing: -.02em; color: var(--pink); }

/* Attachment / featured image on single views. */
.wp-lead { border-radius: var(--r); overflow: hidden; background: var(--light); margin-bottom: clamp(26px, 3.6vw, 48px); }
.wp-lead img { width: 100%; height: auto; }

/* Comment thread. */
.wp-comments { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(30px, 4vw, 54px); border-top: 1px solid var(--line); max-width: 76ch; }
.wp-comments__title { font-family: var(--disp); text-transform: uppercase; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; }
.wp-comments .comment-list { margin-top: 26px; display: grid; gap: 18px; }
.wp-comments .comment-list .children { margin: 18px 0 0 26px; display: grid; gap: 18px; }
.wp-comments .comment-body { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.wp-comments .comment-meta { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wp-comments .comment-author img { border-radius: var(--r-pill); vertical-align: middle; margin-right: 10px; }
.wp-comments .reply { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wp-comments .reply a { color: var(--pink); }
.wp-comments .comment-respond { margin-top: 40px; }
.wp-comments input[type="text"],
.wp-comments input[type="email"],
.wp-comments input[type="url"],
.wp-comments textarea {
  width: 100%;
  margin-top: 6px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
}
.wp-comments .form-submit input,
.wp-comments .submit {
  width: auto;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.wp-comments .form-submit input:hover { background: var(--pink); }

/* Optional widget strip above the footer columns, and the extra rule the
   wp_nav_menu() output needs inside the flex legal row. */
.foot__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(34px, 4vw, 56px);
}
.foot__strip .widget { font-size: 13.5px; line-height: 1.7; color: var(--muted-dark); }
.foot__strip .widget a:hover { color: var(--pink); }
.foot__strip .widget ul { display: grid; gap: 10px; }
.foot__legal .foot__legal-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce template wrapper tweaks - layout only, no recolouring. */
.woocommerce .woocommerce-breadcrumb { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select { font-size: 12px; letter-spacing: .06em; }
.wp-woo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3.2vw, 48px); }

@media (max-width: 720px) {
  .wp-prose .alignleft,
  .wp-prose .alignright { float: none; margin: 18px 0; }
  .wp-comments .comment-list .children { margin-left: 0; }
}