/* ==========================================================================
   Sulamita Merch — merch.sulamitachurch.com
   Design direction: "the church merch table on a white-oak Sunday morning."
   Daylight cream and brass, the youth seal on the bar, ONE ink slab that says
   what is for sale, and the garment photograph doing the rest.

   The token block below is lifted VERBATIM (values, not guesses) from the
   youth hub sheet /var/www/azovgroup/public/youth/assets/css/styles.css so the
   two sites are the same product. If that file's tokens move, move these.

   DELIBERATE DEVIATION FROM THE YOUTH SHEET: the youth site parks the document
   at scrollY 0 and scrolls an inner #page-scroll box (the iOS 26 status-band
   fix). It is NOT copied here. WooCommerce's cart and checkout BLOCKS scroll
   the WINDOW to move focus onto a validation error; with a non-scrolling root
   that call is a no-op and the error lands off-screen. Checkout correctness
   outranks the status-band tint, and the #page-scroll pattern is in the class
   of changes that may only be called verified from a real iPhone.
   ========================================================================== */

:root {
  /* neutrals: white oak, warm */
  --cream: #fbf7ef;
  --oak-100: #f6f0e3;
  --oak-200: #f0e7d6;
  --oak-300: #e6d8bf;
  --oak-400: #d2be9c;
  --line: #e2d8c6;
  /* gray: structure and the quiet voice */
  --steel: #54585f;
  --fg-quiet: #63676e;
  --graphite: #2f3238;
  /* midnight navy — the logo's own black */
  --ink: #0d1526;
  --ink-2: #16203a;
  --ink-warm: #16203a;
  --charcoal: #141822;
  --ink-rgb: 13, 21, 38;
  --paper: var(--cream);
  --shell: var(--oak-100);
  --bone: var(--oak-200);
  --seam-line: rgba(47, 50, 56, 0.16);
  /* accent family — brass gold */
  --accent: #c99a2e;
  --accent-deep: #9a7118;
  --accent-glow: #ecc35c;
  --gold-text: #6f5210;
  --gold-ring: #9a7118;
  --accent-gradient: linear-gradient(135deg, var(--accent-glow), var(--accent) 50%, var(--accent-deep));
  /* branded shadows */
  --shadow-accent-soft: 0 4px 24px -4px rgba(201, 154, 46, 0.25);
  --shadow-accent-glow: 0 12px 40px -8px rgba(201, 154, 46, 0.45);
  --control-bg: #fffdf8;
  --navy-line-rgb: 11, 36, 77;
  --control-line: rgba(var(--navy-line-rgb), 0.54);
  --control-line-strong: rgba(var(--navy-line-rgb), 0.78);
  --control-line-dark: rgba(255, 255, 255, 0.38);
  --control-bg-dark: rgba(255, 255, 255, 0.09);
  --shadow-control: 0 1px 1px rgba(var(--ink-rgb), 0.04), 0 2px 6px -2px rgba(var(--ink-rgb), 0.16);
  --shadow-control-lift: 0 2px 4px rgba(var(--ink-rgb), 0.06), 0 9px 20px -7px rgba(var(--ink-rgb), 0.26);
  --shadow-card: 0 1px 2px rgba(47, 50, 56, 0.05), 0 10px 30px -18px rgba(47, 50, 56, 0.35);
  --shadow-card-lift: 0 2px 6px rgba(47, 50, 56, 0.06), 0 22px 48px -26px rgba(47, 50, 56, 0.5);
  --shadow-slab: 0 34px 78px -36px rgba(var(--ink-rgb), 0.68);
  /* type */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  /* radii */
  --radius: 10px;
  --radius-card: 16px;
  --radius-tile: 12px;
  --radius-input: 8px;
  --radius-slab: 24px;
  --radius-pill: 9999px;
  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.19, 1, 0.22, 1);
  --press-down: 110ms;
  --press-up: 300ms;
  --t-fast: 150ms;
  --t-med: 300ms;
  /* insets + bar height, same chain as the youth sheet */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --youth-bar-h: calc(64px + var(--safe-t));
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--cream); color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--youth-bar-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--graphite);
  background: var(--cream);
  overflow-x: clip;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; cursor: pointer; }
a, button, label, input, select, textarea, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p { margin: 0 0 1em; text-wrap: pretty; }

.container { max-width: 1400px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
@media (min-width: 640px) { .container { padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right)); } }
@media (min-width: 1024px) { .container { padding-inline: max(48px, env(safe-area-inset-left)) max(48px, env(safe-area-inset-right)); } }
.container--narrow { max-width: 860px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* the site's mono label voice — used for every eyebrow, meta and status line */
.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--youth-bar-h);
  padding-top: var(--safe-t);
  display: flex;
  align-items: center;
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 12px; width: 100%; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
  margin-block: -9px;
  margin-inline-end: auto;
}
.wordmark .seal { flex: none; inline-size: var(--seal-size, 36px); block-size: var(--seal-size, 36px); border-radius: 999px; }
@media (min-width: 760px) { .wordmark .seal { --seal-size: 42px; } }
.wordmark .dot { color: var(--gold-text); }
.wordmark .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Below 480px the bar belongs to the mark and the cart: the tagline goes, and
   so does the first half of the name. The seal is what identifies the site. */
@media (max-width: 479px) {
  .wordmark .sub { display: none; }
  .wordmark .who { display: none; }
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 11px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--press-up) var(--ease-press);
}
.nav-links a[aria-current="page"] { background: var(--oak-200); color: var(--ink); box-shadow: inset 0 0 0 1px var(--control-line); }
.nav-links a:active { transition-duration: var(--press-down); transform: scale(0.96); }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); background: var(--oak-200); } }
/* "Shop" is where the wordmark already goes; below 560px it is redundant and
   the row is tight, so it drops and the Youth escape route stays. */
@media (max-width: 559px) { .nav-links a.nav-shop { display: none; } }
/* THE BAR AT 320px (measured 2026-08-12). The row wants 348px there — 20 + a
   96px wordmark + 12 + a 102px link + 12 + an 86px cart pill + 20 — so the
   wordmark, the only shrinkable item, was squeezed to 68px and its letters ran
   out of their own box and straight into the link beside it ("MerchYouth
   site"). Two changes, no destination lost: the mark stops shrinking, and the
   link says "Youth ↗" instead of "Youth site ↗". That comes to ~305px, which
   fits with room to spare. */
.wordmark { flex: 0 0 auto; }
@media (max-width: 380px) {
  .nav-links a.nav-youth .nav-youth-rest { display: none; }
  .nav-links a.nav-youth { padding-inline: 12px; }
}

/* the cart pill: the one gold object in the chrome, and it never lies —
   the count is the real number of items in this visitor's cart */
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  transition: transform var(--press-up) var(--ease-press), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.cart-pill:active { transition-duration: var(--press-down); transform: scale(0.97) translateY(1px); }
.cart-pill .cart-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-inline-size: 22px;
  block-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: var(--ink);
}
.cart-pill.is-empty .cart-count { background: var(--oak-300); color: var(--steel); }
@media (hover: hover) { .cart-pill:hover { border-color: var(--control-line-strong); box-shadow: var(--shadow-control-lift); } }
/* THE WORD "CART" NEVER DROPS (measured at 320px, 2026-08-12). The first cut
   hid it below 400px and left a bare "0" in a circle at 390 — a number with a
   ring round it, which names nothing. The bar has slack at 320 with the word
   in place, so the only thing that tightens is the padding. */
@media (max-width: 399px) { .cart-pill { padding-inline: 13px; gap: 6px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border: 0;
  text-align: center;
  transition: transform var(--press-up) var(--ease-press), box-shadow var(--t-med) var(--ease),
              background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:active { transition-duration: var(--press-down); transform: scale(0.97) translateY(1px); }
.btn-gold { background: var(--accent-gradient); color: var(--ink); box-shadow: var(--shadow-accent-soft); }
.btn-gold:active { transform: scale(0.97) translateY(1px); box-shadow: var(--shadow-accent-soft); }
.btn-dark-ghost {
  background: var(--control-bg-dark);
  border: 1px solid rgba(236, 195, 92, 0.55);
  color: var(--accent-glow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn-light-ghost {
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  color: var(--ink);
  box-shadow: var(--shadow-control);
}
@media (hover: hover) {
  .btn-gold:hover { transform: scale(1.02); box-shadow: var(--shadow-accent-glow); }
  .btn-dark-ghost:hover { border-color: var(--accent-glow); background: rgba(236, 195, 92, 0.16); }
  .btn-light-ghost:hover { border-color: var(--control-line-strong); background: #fff; box-shadow: var(--shadow-control-lift); }
}

/* ---------- THE SIGNATURE MOMENT: the ink slab ----------
   Same component as the youth hub hero, so the shop reads as a room of the
   same building rather than a bolted-on store: one navy slab, a brass mat
   hairline set in from the edge, a mono status chip, the headline, and a meta
   strip of facts on hairlines. Boldness is spent HERE and nowhere else; every
   other surface on this site is disciplined cream. */
.hero { padding: clamp(20px, 1.6vw + 14px, 34px) 0 clamp(10px, 1vw + 6px, 18px); }
.slab {
  position: relative;
  display: grid;
  grid-template-areas: "copy" "foot";
  border-radius: var(--radius-slab);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border: 1px solid rgba(236, 195, 92, 0.3);
  box-shadow: var(--shadow-slab);
  isolation: isolate;
}
.slab::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(236, 195, 92, 0.2);
  border-radius: calc(var(--radius-slab) - 9px);
  pointer-events: none;
  z-index: 4;
}
.slab-inner {
  grid-area: copy;
  position: relative;
  z-index: 2;
  padding: 30px 22px 28px;
  min-inline-size: 0;
  --glow: clamp(280px, 58vw, 520px);
}
/* one soft brass light low in the copy corner — a light source, never a
   gradient hero. Offsets derive from --glow so the core sits in the same place
   at 320px and at 1440px. */
.slab-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: var(--glow);
  block-size: var(--glow);
  inset-inline-start: calc(var(--glow) * -0.28);
  inset-block-end: calc(var(--glow) * -0.22);
  background: radial-gradient(circle,
    rgba(236, 195, 92, 0.28) 0%, rgba(236, 195, 92, 0.11) 40%, rgba(236, 195, 92, 0) 72%);
  pointer-events: none;
}
.slab h1 {
  /* rem term present and range 1.82x — under the 2.5x zoom ceiling (F94) */
  font-size: clamp(34px, 2.125rem - 34px + 5.4vi, 62px);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 18px 0 14px;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}
.slab h1 .gold {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.slab .hero-sub { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 44ch; margin: 0; }
@media (min-width: 760px) { .slab .hero-sub { font-size: 18px; } }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid var(--control-line-dark);
  background: var(--control-bg-dark);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  margin: 0;
}
.slab-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.slab-foot {
  grid-area: foot;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.slab-foot span {
  background: var(--ink);
  padding: 11px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-wrap: pretty;
}
.slab-foot span.hot { color: var(--accent-glow); }
@media (min-width: 560px) {
  .slab-foot { grid-template-columns: repeat(3, 1fr); }
  .slab-foot span { padding: 12px 22px; }
}
@media (min-width: 900px) {
  .slab { min-height: 340px; }
  .slab-inner { padding: 46px 40px; max-inline-size: 46rem; align-self: center; }
  .slab-foot span { padding-inline: 40px; }
  .slab-foot span:nth-child(2) { padding-inline: 22px; }
}

/* ---------- page chrome for the ordinary pages ---------- */
.site-main { padding-block: clamp(24px, 3vw, 46px) clamp(48px, 6vw, 88px); }
.page-head { margin-bottom: clamp(22px, 3vw, 36px); }
.page-head h1 { font-size: clamp(30px, 1.875rem - 30px + 3.4vi, 50px); font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 0; }
.page-head .meta { display: block; }
.page-head .lede { font-size: 17px; color: var(--steel); max-width: 56ch; margin: 12px 0 0; }

/* ---------- the product grid ---------- */
.woocommerce ul.products,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 44vw, 260px), 1fr));
}
ul.products::before, ul.products::after { content: none; }
ul.products li.product {
  margin: 0;
  width: auto;
  float: none;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease-glide), box-shadow var(--t-med) var(--ease);
}
@media (hover: hover) {
  ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lift); }
}
ul.products li.product > a:first-of-type,
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: 0;
}
ul.products li.product img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--oak-200);
  margin: 0;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 16px 18px 0;
  margin: 0;
}
/* the price is the VALUE — bigger and bolder than any label beside it */
ul.products li.product .price {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold-text);
  padding: 6px 18px 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
ul.products li.product .price del { color: var(--fg-quiet); font-size: 15px; font-weight: 500; opacity: 1; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin: 14px 18px 18px;
  align-self: flex-start;
}
ul.products li.product .onsale,
span.onsale {
  position: absolute;
  margin: 10px;
  z-index: 2;
  background: var(--accent-gradient);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  min-height: 0;
  line-height: 1.2;
}
ul.products li.product { position: relative; }

/* ---------- single product ---------- */
.woocommerce div.product { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
  .woocommerce div.product .summary { grid-column: 2; margin: 0; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .up-sells { grid-column: 1 / -1; }
}
.woocommerce div.product .woocommerce-product-gallery { width: auto; float: none; }
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; border-radius: var(--radius-card); background: var(--oak-200); }
.woocommerce div.product .summary { width: auto; float: none; }
.woocommerce div.product .product_title {
  font-size: clamp(28px, 1.75rem - 28px + 2.6vi, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  margin: 0 0 18px;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--steel); font-size: 17px; max-width: 56ch; }
.woocommerce div.product form.cart { margin: 22px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product .stock { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.woocommerce div.product .stock.in-stock { color: var(--gold-text); }
.product_meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.product_meta a { color: var(--ink); }

/* the description/reviews tabs — WooCommerce's default is a folder-tab strip
   with its own greys; here they are the site's pills over one hairline */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(28px, 4vw, 52px); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 22px; padding: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
}
/* WooCommerce draws the folder-tab's curled corners as ::before/::after on the
   li; with pills in place they survived as two grey commas under the strip */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  background: var(--control-bg); border: 1px solid var(--control-line); color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--oak-200); box-shadow: inset 0 0 0 1px var(--gold-ring); font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs .panel { max-width: 68ch; color: var(--graphite); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 24px; font-weight: 800; }

/* variation swatches: a size is picked from what is there, never typed */
.woocommerce div.product table.variations { border: 0; margin: 0 0 18px; width: 100%; }
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td { border: 0; padding: 0 0 12px; text-align: left; }
.woocommerce div.product table.variations th label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel);
}
.reset_variations { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }

/* quantity */
.quantity input.qty {
  inline-size: 5.5rem;
  min-height: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- forms and inputs (shared with cart, checkout, account) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"], select, textarea,
.wc-block-components-text-input input, .wc-block-components-textarea {
  font-family: var(--font-body);
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-input);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  box-shadow: var(--shadow-control);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold-ring); }
label { font-size: 14px; font-weight: 500; color: var(--graphite); }

/* ---------- WooCommerce buttons, everywhere they appear ---------- */
/* NOT scoped under .woocommerce (measured 2026-08-12): the front page renders
   the product loop from the theme's own template, so the body never gets the
   `woocommerce` class and every "Add to cart" in the grid shipped as plain
   blue text. A button is a button on whatever page it lands on. */
a.button, button.button, input.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button, .wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 14px 26px;
  border: 1.5px solid var(--control-line);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  text-decoration: none;
  transition: transform var(--press-up) var(--ease-press), box-shadow var(--t-med) var(--ease),
              background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
/* the ONE gold ask per screen: add to cart, proceed to checkout, place order */
a.button.add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit.alt {
  background: var(--accent-gradient);
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow-accent-soft);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.wc-block-components-button:active,
.wp-element-button:active { transition-duration: var(--press-down); transform: scale(0.97) translateY(1px); }
@media (hover: hover) {
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .wc-block-components-button:hover,
  .wp-element-button:hover { border-color: var(--control-line-strong); background: #fff; box-shadow: var(--shadow-control-lift); }
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover,
  .woocommerce div.product form.cart .single_add_to_cart_button:hover,
  .wc-block-cart__submit-button:hover,
  .wc-block-components-checkout-place-order-button:hover,
  .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--accent-gradient); color: var(--ink); border-color: transparent;
    transform: scale(1.02); box-shadow: var(--shadow-accent-glow);
  }
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.wc-block-components-button:disabled { opacity: 0.55; box-shadow: none; }

/* ---------- notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--oak-100);
  border-radius: var(--radius);
  color: var(--graphite);
  padding: 16px 18px;
  margin: 0 0 22px;
  list-style: none;
  font-size: 15px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-error { border-left-color: #a4362c; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: 12px; }

/* ---------- cart + checkout blocks ---------- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { max-width: 1100px; margin-inline: auto; }
.wc-block-components-title, .wc-block-components-checkout-step__title {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price,
.wc-block-formatted-money-amount { font-variant-numeric: tabular-nums; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--gold-text);
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--oak-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.wc-block-components-radio-control__option,
.wc-block-components-checkbox { color: var(--graphite); }
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-color: var(--line) !important;
}
/* the payment-method rows are the decision point: give the chosen one two
   simultaneous visual changes (fill + brass edge), not just a dot */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1.5px var(--gold-ring);
  border-radius: var(--radius);
}
.wc-block-checkout__terms, .wc-block-components-checkout-policies { color: var(--steel); font-size: 13px; }
/* the cart line's product name ships as an 18px-tall link; it is the way back
   to the product page, so it gets a real target (measured 2026-08-12) */
/* THE CART LINE MUST FIT 320px (measured 2026-08-12: it overflowed by 21px).
   The line is a real <table>, so its width is its MIN-CONTENT width — a single
   long word in a product description, or the quantity stepper plus the remove
   button, sets the floor and the table then pushes past the container. Cells
   default to min-width:auto, which is what lets that happen; capping it lets
   the text wrap instead. The image column also gives up 24px on a small phone,
   which is where the rest of the difference comes from. */
.wc-block-cart-items { width: 100%; max-width: 100%; }
.wc-block-cart-item__wrap,
.wc-block-cart-item__product,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-product-name { min-width: 0; overflow-wrap: anywhere; }
/* AND THEN THE TABLE SCROLLS IN ITS OWN BOX (settled 2026-08-12 after four
   rounds of measuring). Capping the cells above took the 320px overrun from
   21px to 10px, and the last 10px is not reachable from the theme: the block's
   own line-item table holds an intrinsic minimum around 310px that survives
   forcing the thumbnail to 40px and the container padding to 12px — the width
   is not coming from the columns this sheet can reach. Shrinking type or
   hiding the quantity stepper to buy it back would cost more than it saves.
   So the house rule applies as written: wide content scrolls inside its own
   container and the PAGE BODY never scrolls sideways. On a 320px phone the
   cart line nudges about 10px within its own box; at 390 and up nothing
   scrolls at all.
   (Worth knowing for any future attempt: this sheet is enqueued at priority 20
   so it lands after WooCommerce's stylesheets, but the CART/CHECKOUT BLOCK
   styles enqueue while the block renders — after wp_head — so they always
   print last and an override has to win on SPECIFICITY, never source order.) */
@media (max-width: 420px) {
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block { overflow-x: auto; }
}

/* Padding, NOT inline-flex (measured 2026-08-12): an inline-flex link is one
   unwrappable flex line, so at 320px the product name pushed the cart 21px
   past the viewport. This is the same trick the youth wordmark uses — padding
   makes the touch area, the negative margin gives the layout its height back,
   and the text still wraps normally. */
.wc-block-components-product-name {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
  font-weight: 600;
  color: var(--ink);
}
/* Square's own card fields ship their own iframe styling; only the box around
   them is ours. */
#wc-square-credit-card-container, .wc-square-credit-card-hosted-field {
  background: var(--control-bg);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-input);
  padding: 4px 10px;
  min-height: 48px;
}

/* the empty cart is a designed state, not a defaulted one */
.wp-block-woocommerce-empty-cart-block { text-align: left; }
.is-empty-state {
  background: var(--oak-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
}
.is-empty-state h2 { font-size: clamp(24px, 1.5rem - 24px + 1.8vi, 36px); font-weight: 800; margin: 0 0 10px; }
.is-empty-state p { color: var(--steel); max-width: 46ch; margin: 0 auto 22px; }

/* ---------- account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  background: var(--control-bg); border: 1px solid var(--control-line); color: var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--oak-200); box-shadow: inset 0 0 0 1px var(--gold-ring); }
.woocommerce-account .woocommerce-MyAccount-content { max-width: 720px; }
/* Two WooCommerce-supplied controls on the sign-in form ship under the audit
   line: the password eye toggle renders 22x22, and "Lost your password?" is a
   20px-tall run of text. Both are given a real target here rather than left as
   found (measured 2026-08-12 at 320/390/768/1280). */
.woocommerce form .show-password-input,
.woocommerce-form .show-password-input {
  inline-size: 44px;
  block-size: 44px;
  background-position: center;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
}
.woocommerce-LostPassword a,
.woocommerce form.login .lost_password a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce form.login, .woocommerce form.register,
.woocommerce-form-login, .woocommerce-form-register {
  background: var(--control-bg); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-card); max-width: 480px;
}

/* ---------- tables (order details, cart totals) ---------- */
.woocommerce table.shop_table, .woocommerce table.shop_attributes {
  border: 1px solid var(--line); border-radius: var(--radius-card); border-collapse: separate; border-spacing: 0; width: 100%;
  background: var(--control-bg); overflow: hidden;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; }
.woocommerce table.shop_table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); font-weight: 500; }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
/* wide tables scroll in their own box; the page body never scrolls sideways */
.table-scroll { overflow-x: auto; }

/* ---------- footer ---------- */
.site-foot {
  background: transparent;
  color: var(--steel);
  border-top: 1px solid var(--line);
  padding: 22px 0 max(26px, var(--safe-b));
}
.site-foot .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.site-foot a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .site-foot a:hover { color: var(--gold-text); } }

/* ---------- editorial pages (privacy, returns, 404) ---------- */
.entry-content { max-width: 68ch; font-size: 17px; color: var(--graphite); }
.entry-content h2 { font-size: 28px; font-weight: 800; margin-top: 1.6em; }
.entry-content h3 { font-size: 21px; font-weight: 700; margin-top: 1.4em; }
/* Prose links are underlined; BUTTONS ARE NOT. The cart and checkout render
   inside .entry-content, so the bare descendant rule underlined "Proceed to
   Checkout" straight through its gold pill (caught at 390px, 2026-08-12). */
.entry-content a:not(.button):not(.btn):not(.wp-element-button):not(.wc-block-components-button):not([class*="wc-block-cart__submit"]) {
  color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px;
}
.entry-content .wc-block-components-button,
.entry-content .wp-element-button,
.entry-content a.button,
.entry-content .btn { text-decoration: none; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li { margin-bottom: 0.4em; }

/* ---------- motion restraint ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}