/*
Theme Name: StellarKnot
Theme URI: https://stellarknot.com
Author: StellarKnot
Description: Dark editorial storefront for StellarKnot — near-black canvas, ivory type and gold hairlines, built over WooCommerce. Replaces the previous theme while keeping products, orders, payments and customer accounts in place.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stellarknot
Tags: e-commerce, dark, editorial, woocommerce
*/

/* Everything below this header is the StellarKnot design system, followed by
   the WooCommerce integration layer at the bottom of the file. */
/* ============================================================================
   StellarKnot — design system
   Dark editorial luxury. Near-black canvas, ivory type, gold used as a
   hairline accent only. Sharp geometry (2-4px radii), hairline rules,
   generous vertical rhythm. Display type is a high-contrast serif; UI is a
   neutral grotesque at tight tracking.
   ========================================================================= */

/* Font files are self-hosted in /public/fonts and linked from the document
   head (see app/layout.tsx) so there is no runtime Google Fonts request. */

/* ----------------------------------------------------------------- tokens */
:root {
  /* surfaces — warm-shifted blacks, never pure #000 */
  --ink:        #0A0908;
  --ink-2:      #100F0D;
  --ink-3:      #17150F;
  --ink-4:      #1E1B16;

  /* type colours */
  --cream:      #F2EEE7;
  --cream-dim:  #C4BEB2;
  --muted:      #8B8579;
  --faint:      #5D5850;

  /* the brand gold, lifted from the knot mark's own hairline */
  --gold:       #C9A84C;
  --gold-soft:  #E2C87F;
  --gold-deep:  #A6832B;

  /* hairlines */
  --line:        rgba(242, 238, 231, 0.10);
  --line-mid:    rgba(242, 238, 231, 0.16);
  --line-strong: rgba(242, 238, 231, 0.26);
  --line-gold:   rgba(201, 168, 76, 0.34);

  /* type */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* fluid scale */
  --fs-hero:    clamp(3rem, 9.2vw, 8.5rem);
  --fs-display: clamp(2.5rem, 6vw, 5.25rem);
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;

  /* space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 2.5rem;   --s8: 3rem;
  --s9: 4rem;     --s10: 5rem;    --s11: 6.5rem;  --s12: 8rem;

  /* geometry — restrained radii read as more expensive than pill shapes */
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 5px;

  --maxw: 1440px;
  --gut:  clamp(1.25rem, 4vw, 4.5rem);
  --nav-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.55s;
  --dur-fast: 0.22s;
}

/* -------------------------------------------------------------- foundation */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* a very faint vertical warmth so large dark fields are not dead flat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 65% at 50% -10%, rgba(201, 168, 76, 0.055), transparent 62%),
    radial-gradient(90% 50% at 50% 108%, rgba(201, 168, 76, 0.035), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.014em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

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

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ typography */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: 0.75;
}
.eyebrow--bare::before { display: none; }

.italic { font-style: italic; }
.serif  { font-family: var(--display); }

.lead {
  font-size: var(--fs-lead);
  color: var(--cream-dim);
  line-height: 1.6;
  max-width: 62ch;
}

.muted { color: var(--muted); }
.gold  { color: var(--gold); }

/* ----------------------------------------------------------------- layout */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 1;
}
.section { padding-block: var(--s11); }
.section--tight { padding-block: var(--s9); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* section header: label + title left, link right — one idea per section */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  padding-bottom: var(--s5);
  margin-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
}
.sec-head__title { font-size: var(--fs-h2); margin-top: var(--s3); }
.sec-head__note { color: var(--muted); font-size: var(--fs-sm); max-width: 46ch; margin-top: var(--s2); }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: var(--line-strong);
  /* Hover states are variables too, so a variant that only redefines its own
     palette still wins on hover. A plain `.btn:hover { background: … }` beats
     the `background: var(--btn-bg)` of `.btn--gold`, which left the gold
     button transparent with near-black text — i.e. invisible on hover. */
  --btn-bg-hover: rgba(242, 238, 231, 0.05);
  --btn-bd-hover: var(--cream);
  appearance: none;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05em 2.1em;
  min-height: 46px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-align: center;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); }
.btn:active { transform: translateY(1px); }

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: #120F08;
  --btn-bd: var(--gold);
  --btn-bg-hover: var(--gold-soft);
  --btn-bd-hover: var(--gold-soft);
  font-weight: 600;
}

.btn--block { width: 100%; }
.btn--sm { padding: 0.75em 1.35em; min-height: 40px; font-size: 0.625rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* a quiet text link with a gold hairline that draws on hover */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 0.3em;
  position: relative;
  color: var(--cream);
}
.tlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.tlink:hover { color: var(--gold); }
.tlink:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------- product */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s5) var(--s4);
}
.pcard { position: relative; display: flex; flex-direction: column; }

.pcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
  border-radius: var(--r);
}
.pcard__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity var(--dur) var(--ease);
}
.pcard__img--alt {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.055);   /* arrives slightly larger, settles as it fades in */
}
.pcard:hover .pcard__img,
.pcard:focus-within .pcard__img { transform: scale(1.035); }
.pcard:hover .pcard__img--alt,
.pcard:focus-within .pcard__img--alt { opacity: 1; transform: scale(1); }

.pcard__peek {
  position: absolute;
  top: 50%; left: var(--s3);
  transform: translateY(-50%) translateX(-4px);   /* mid-edge: clear of the flag, the heart and the add-bar */
  z-index: 2;
  appearance: none;
  background: rgba(10, 9, 8, 0.62);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55em 0.9em;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pcard:hover .pcard__peek,
.pcard:focus-within .pcard__peek { opacity: 1; transform: translateY(-50%) translateX(0); }
.pcard__peek:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
/* Touch: the always-on quick-add bar owns the card; no peek there. */
@media (hover: none) { .pcard__peek { display: none; } }

.sk-peek {
  position: fixed; inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(6, 5, 4, 0.72);
  animation: m-in 0.28s var(--ease);
}
.sk-peek__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s6);
  align-items: center;
  width: min(860px, 92vw);
  max-height: 86vh;
  background: var(--ink-2);
  border: 1px solid var(--line-mid);
  border-radius: var(--r);
  padding: var(--s6);
}
.sk-peek__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  align-self: stretch;
}
.sk-peek__img img { width: 100%; height: 100%; object-fit: cover; }
.sk-peek__body { display: grid; gap: var(--s4); align-content: center; min-width: 0; }
.sk-peek__name { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.1; }
.sk-peek__price { color: var(--cream); font-variant-numeric: tabular-nums; }
.sk-peek__price s { color: var(--faint); margin-right: 0.5em; }
.sk-peek__note {
  color: var(--cream-dim); font-size: var(--fs-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-peek__close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-mid); border-radius: 50%;
  background: rgba(10, 9, 8, 0.62); color: var(--cream);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sk-peek__close:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) {
  .sk-peek__card { grid-template-columns: 1fr; max-height: 82vh; overflow: auto; }
}
body.sk-no-scroll { overflow: hidden; }

/* ---- toast: the acknowledgement for quick-add and wishlist saves */
.sk-toast {
  position: fixed;
  right: var(--s5); bottom: var(--s6);
  z-index: 130;
  display: flex; align-items: center; gap: var(--s4);
  max-width: min(380px, calc(100vw - 2 * var(--s5)));
  background: var(--ink-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: sk-toast-in 0.4s var(--ease);
}
.sk-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
@keyframes sk-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.sk-toast__msg { min-width: 0; }
.sk-toast__title { display: block; font-size: var(--fs-sm); color: var(--cream); }
.sk-toast__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 0.2em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-toast__go {
  flex: none;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border: 1px solid var(--line-gold); border-radius: var(--r-sm);
  padding: 0.55em 0.9em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sk-toast__go:hover { background: var(--gold); color: var(--ink); }
.sk-toast__x {
  flex: none; appearance: none; background: none; border: 0;
  color: var(--faint); font-size: 16px; cursor: pointer; padding: 0.2em;
  transition: color var(--dur-fast) var(--ease);
}
.sk-toast__x:hover { color: var(--cream); }

.pcard__flag {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--line-gold);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45em 0.8em;
  border-radius: var(--r-sm);
}

.pcard__quick {
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: var(--s3);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pcard:hover .pcard__quick { opacity: 1; transform: translateY(0); }
/* touch devices have no hover — see the handling in app/components.css */

.pcard__body {
  padding-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.pcard__name {
  font-family: var(--display);
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.pcard__name a:hover { color: var(--gold); }
.pcard__price {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcard__price s { color: var(--faint); margin-right: 0.5em; text-decoration-thickness: 1px; }
.pcard__meta {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-mid);
  flex: none;
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }

/* ----------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--s4); }
.field label {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, select.input, textarea.input {
  background: var(--ink-2);
  border: 1px solid var(--line-mid);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  padding: 0.85em 1em;
  border-radius: var(--r-sm);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: none; border-color: var(--gold); background: var(--ink-3); }
.input::placeholder { color: var(--faint); }

/* size pills */
.sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size {
  min-width: 50px;
  padding: 0.7em 0.5em;
  border: 1px solid var(--line-mid);
  background: transparent;
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.size:hover { border-color: var(--cream); }
.size[aria-pressed='true'] {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  font-weight: 600;
}

/* ------------------------------------------------------------------ chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.6em 1.05em;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
  background: transparent;
  font-family: var(--sans);
}
.chip:hover { border-color: var(--line-strong); color: var(--cream); }
.chip[data-active='true'] {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.06);
}

/* ------------------------------------------------------------------ misc */
.tag {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.empty {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s10) var(--s5);
  text-align: center;
  background: var(--ink-2);
}
.empty h3 { font-size: var(--fs-h3); margin-bottom: var(--s3); }

/* reveal-on-scroll — motion as discipline, never theatre.
   Scoped under .js (set by an inline script in the document head) so that with
   JavaScript disabled the content is simply visible rather than stuck at
   opacity 0. Never applied to core product cards — commerce content must not
   depend on JS to be readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .sk-peek, .sk-toast { animation: none; }

}

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

/* --------------------------------------------------------- breakpoints */
@media (max-width: 900px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .section { padding-block: var(--s9); }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }
  .pcard__name { font-size: 1.0625rem; }
}
/* ============================================================================
   Component styles — header, ticker, drawer, cards, footer, page furniture.
   ========================================================================= */

/* ------------------------------------------------------------- ticker bar */
.tickerwrap {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  position: relative;
  z-index: 3;
}
.ticker {
  display: flex;
  width: max-content;
  animation: tick 46s linear infinite;
}
.ticker__grp { display: flex; align-items: center; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6em;
  padding: 0.72em 1.6em 0.72em 0;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
}

/* ----------------------------------------------------------------- header */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hdr--stuck {
  background: rgba(10, 9, 8, 0.94);
  border-bottom-color: var(--line-mid);
}
.hdr__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s5);
  min-height: var(--nav-h);
}
.hdr__nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  justify-content: center;
}
.hdr__link {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0.5em 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.hdr__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.hdr__link:hover { color: var(--cream); }
.hdr__link:hover::after { transform: scaleX(1); }

.hdr__acts {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
}
.iconbtn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.iconbtn:hover { color: var(--gold); background: rgba(242, 238, 231, 0.05); }
.badge {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #120F08;
  font-size: 0.625rem;
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}
.hdr__burger { display: none; }

/* brand lockup — knot mark + letterspaced wordmark.
   Grid placement is left to auto-flow: hidden elements (burger on desktop, nav on
   mobile) drop out of layout entirely, so columns must NOT be pinned explicitly. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
}
.brand__mark { width: 34px; height: 34px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
.brand__tag {
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}

/* ----------------------------------------------------------------- drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  background: var(--ink-2);
  border-left: 1px solid var(--line-mid);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.drawer__nav {
  display: flex;
  flex-direction: column;
  padding-block: var(--s5);
  flex: 1;
}
.drawer__nav a {
  font-family: var(--display);
  font-size: 1.75rem;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.drawer__nav a:hover { color: var(--gold); padding-left: 0.35em; }
.drawer__foot { display: flex; flex-direction: column; gap: var(--s3); }
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 3, 0.66);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- wishlist */
.wish {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-mid);
  background: rgba(10, 9, 8, 0.62);
  color: var(--cream);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.pcard:hover .wish,
.wish.is-on { opacity: 1; }
.wish.is-on { color: var(--gold); border-color: var(--line-gold); }
.wish:hover { color: var(--gold); border-color: var(--gold); }
@media (hover: none) { .wish { opacity: 1; } }

/* -------------------------------------------------------------- quick add */
.quickadd {
  background: rgba(10, 9, 8, 0.9);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.quickadd__label {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.quickadd__sizes { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.quickadd__sizes button {
  min-width: 30px;
  padding: 0.35em 0.3em;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  font-size: 0.625rem;
  font-family: var(--sans);
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.quickadd__sizes button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.quickadd.is-done {
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75em;
}

/* Touch devices report hover:none, so the quick-add can never be hover-revealed.
   Keep the feature but collapse it to a slim bottom strip, otherwise it sits
   permanently over the garment it is meant to sell. */
@media (hover: none) {
  .pcard__quick { opacity: 1; transform: none; left: 0; right: 0; bottom: 0; }
  .quickadd {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0.4rem 0.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .quickadd__label { display: none; }
  .quickadd__sizes { gap: 0.3rem; }
  .quickadd__sizes button { min-width: 34px; min-height: 30px; }
}

/* ----------------------------------------------------------------- footer */
.ftr {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: var(--s9) var(--s6);
  margin-top: var(--s11);
  position: relative;
  z-index: 1;
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2.2fr;
  gap: var(--s9);
  padding-bottom: var(--s8);
}
.ftr__brand img { margin-bottom: var(--s4); opacity: 0.95; }
.ftr__tag { font-family: var(--display); font-size: 1.5rem; margin-bottom: var(--s5); }
.ftr__reach { margin-bottom: var(--s2); }
.ftr__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}
.ftr__h {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}
.ftr__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ftr__ul a {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  transition: color var(--dur-fast) var(--ease);
}
.ftr__ul a:hover { color: var(--gold); }
.ftr__bot {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--faint);
}
.ftr__note { text-align: right; max-width: 52ch; }

/* ------------------------------------------------------------- hero block */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s8);
  align-items: center;
  padding-block: var(--s10) var(--s11);
  min-height: min(88vh, 820px);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-block: var(--s5) var(--s5);
}
.hero__title em { font-style: italic; color: var(--gold); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.hero__stats {
  display: flex;
  gap: var(--s7);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.hero__stat b {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.hero__stat span {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-3);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
  position: absolute;
  left: var(--s4); bottom: var(--s4);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(10, 9, 8, 0.72);
  border: 1px solid var(--line-mid);
  padding: 0.55em 1em;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------- category strip (3 up) */
.catstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.catstrip__item {
  position: relative;
  /* 4:5 matches the source derivatives exactly, so object-fit crops nothing */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
  display: block;
}
.catstrip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 1.2s var(--ease), opacity var(--dur) var(--ease);
}
.catstrip__item:hover img { transform: scale(1.045); opacity: 0.92; }
.catstrip__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s6) var(--s5) var(--s5);
  background: linear-gradient(to top, rgba(10, 9, 8, 0.92), rgba(10, 9, 8, 0));
}
.catstrip__meta h3 { font-size: var(--fs-h3); margin-bottom: 0.3em; }
.catstrip__meta span { font-size: var(--fs-xs); color: var(--cream-dim); }

/* ------------------------------------------------------------ usp band */
.usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.usp__item {
  padding: var(--s6) var(--s4);
  border-right: 1px solid var(--line);
}
.usp__item:last-child { border-right: 0; }
.usp__item h3 {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}
.usp__item p { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* --------------------------------------------------------- editorial band */
.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s9);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s10);
}
.band__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r); }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__title { font-size: var(--fs-h1); margin-block: var(--s4) var(--s5); }

/* ------------------------------------------------------- split / rail rows */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s5) var(--s4);
}

/* two-up feature — deliberately NOT a three-card grid */
.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s8);
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: var(--s7); }
}

/* closing call-to-action band */
.ctaband {
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: var(--s8);
  border: 1px solid var(--line-mid);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: var(--s9) var(--s8);
}
.ctaband__title { font-size: var(--fs-h1); margin-block: var(--s4) var(--s4); }
.ctaband__acts { display: flex; flex-direction: column; gap: var(--s3); }
.ctaband__acts .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .ctaband { grid-template-columns: 1fr; padding: var(--s6) var(--s5); gap: var(--s6); }
}

/* ----------------------------------------------------------- shop faceting */
.shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
.shop__bar--sub { padding-block: var(--s4); }
.shop__count { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* the optional category disclosure, kept collapsed by default */
.shop__panel {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  margin-inline: calc(var(--gut) * -0.5);
  padding-inline: calc(var(--gut) * 0.5);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------- product detail */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s9);
  padding-block: var(--s8) var(--s11);
  align-items: start;
}
.pdp__gallery { display: flex; flex-direction: column; gap: var(--s3); }
.pdp__hero {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
}
.pdp__hero img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.pdp__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink-3);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-current='true'] { border-color: var(--gold); }
.pdp__thumb:hover { border-color: var(--line-strong); }

.pdp__buy { position: sticky; top: calc(var(--nav-h) + 28px); }
.pdp__title { font-size: var(--fs-h1); margin-block: var(--s3) var(--s4); }
.pdp__priceline {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
}
.pdp__price { font-family: var(--display); font-size: 2rem; }
.pdp__was { color: var(--faint); }
.pdp__save { color: var(--gold); font-size: var(--fs-sm); }
.pdp__block { margin-bottom: var(--s5); }
.pdp__blockhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.pdp__blockhead span {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp__row2 { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  height: 46px;
}
.qty button {
  width: 42px; height: 100%;
  background: transparent; border: 0;
  color: var(--cream); cursor: pointer; font-size: 1.1rem;
}
.qty button:hover { color: var(--gold); }
.qty span { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }

.spec {
  border-top: 1px solid var(--line);
  margin-top: var(--s6);
}
.spec__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.spec__row dt { color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.spec__row dd { margin: 0; color: var(--cream-dim); }

.pdp__copy { max-width: 66ch; }
.pdp__copy h2 { font-size: var(--fs-h2); margin-bottom: var(--s4); }
.pdp__copy p { color: var(--cream-dim); }
.pdp__hl { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: 0.7rem; }
.pdp__hl li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--cream-dim);
  font-size: var(--fs-sm);
}
.pdp__hl li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 1px;
  background: var(--gold);
}

/* cart & checkout are styled further down under `.woocommerce …` — what used
   to sit here was a mock-up's `.cart` / `.line` / `.summary` grid, and the
   markup it was written against was never shipped. It had to go: WooCommerce
   puts its own `cart` class on the cart page's <table> and its `form-cart`
   machinery elsewhere, so a bare `.cart { display: grid }` turned the live
   cart TABLE into a grid — header row on the left, item rows on the right,
   each half sizing itself. Never style a single bare class name that a
   template you don't control also emits. */


/* ------------------------------------------------------------ notice band */
.notice {
  border: 1px solid var(--line-gold);
  background: rgba(201, 168, 76, 0.055);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}
.notice b { color: var(--gold); font-weight: 500; }

/* ------------------------------------------------------------- page heads */
.phead {
  padding-block: var(--s9) var(--s7);
  border-bottom: 1px solid var(--line);
}
.phead h1 { font-size: var(--fs-display); margin-block: var(--s4) var(--s4); }
.phead .lead { margin-top: var(--s2); }

/* a shop index is an Explore surface: the title must not push the grid below
   the fold, so it runs one step smaller and tighter than an editorial page head */
.phead--compact { padding-block: var(--s7) var(--s5); }
.phead--compact h1 { font-size: var(--fs-h1); margin-block: var(--s3) var(--s3); }

.prose { max-width: 68ch; padding-block: var(--s8); }
.prose h2 { font-size: var(--fs-h2); margin-block: var(--s7) var(--s4); }
.prose p { color: var(--cream-dim); }
.prose ul { color: var(--cream-dim); padding-left: 1.1rem; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .pdp { grid-template-columns: 1fr; gap: var(--s7); }
  .pdp__buy { position: static; }
}
@media (max-width: 960px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  /* burger | brand | actions — one row, brand optically centred */
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: center; }
  .hero { grid-template-columns: 1fr; gap: var(--s7); min-height: 0; padding-block: var(--s7) var(--s9); }
  .hero__media { order: -1; aspect-ratio: 4 / 5; }
  .catstrip { grid-template-columns: 1fr 1fr; }
  .catstrip__item:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .usp { grid-template-columns: 1fr 1fr; }
  .usp__item:nth-child(2) { border-right: 0; }
  .usp__item:nth-child(1), .usp__item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .band { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s8); }
  .ftr__top { grid-template-columns: 1fr; gap: var(--s7); }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__bot { flex-direction: column; }
  .ftr__note { text-align: left; }
}
@media (max-width: 620px) {
  /* At 390px the mark + wordmark + four icons do not fit on one row; the search
     icon is dropped because it only duplicates the Shop link in the menu. */
  .iconbtn--search { display: none; }
  .hdr__in { gap: var(--s4); }
  .iconbtn { width: 36px; height: 36px; }
  .hdr__acts { gap: 0; }
  .brand { gap: 0.5rem; }
  .brand__tag { display: none; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__name { font-size: 1.15rem; }
  .hero__stats { flex-wrap: wrap; gap: var(--s5); }
  .catstrip { grid-template-columns: 1fr; }
  .catstrip__item:last-child { grid-column: auto; aspect-ratio: 4 / 5; }
  .pdp__thumbs { grid-template-columns: repeat(3, 1fr); }
  .spec__row { grid-template-columns: 1fr; gap: 0.25rem; }
}
/* ==========================================================================
   WooCommerce integration layer
   --------------------------------------------------------------------------
   The design system above was written for a bespoke storefront. This layer
   makes WooCommerce's own markup — notices, variation selects, the cart table,
   the checkout fields, the account area — look like it was designed alongside.
   Rules are scoped to WooCommerce wrappers so nothing leaks into the rest of
   the site or the admin.
   ========================================================================== */

/* ------------------------------------------------ wrappers and page shells */
.woocommerce,
.sk-woo-embed { color: var(--cream); }

/* The detail block on a product page belongs under both columns, not in the
   second one — `.pdp` is a two-column grid. */
/* The product description sits below the two-column grid as its own section —
   inside the grid, its row stretched the container the sticky buy column is
   clamped to, and the column dragged down over the heading. */
.pdp__details { padding-block: 0 var(--s11); }
.pdp__details .prose { max-width: 66ch; }

/* The buy column needs breathing room now that it stands on its own. */
.pdp__buy .pdp__block { margin-top: var(--s5); }
.pdp__buy .pdp__blockhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	margin-bottom: var(--s2);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

@media (max-width: 900px) {
	.pdp { grid-template-columns: 1fr; gap: var(--s7); }
}

.woocommerce a { color: var(--cream); }
.woocommerce a:hover { color: var(--gold); }

.sk-woo-embed .woocommerce { margin: 0; }

/* ---------------------------------------------------------------- notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	margin: 0 0 var(--s5);
	padding: var(--s4) var(--s5);
	border: 1px solid var(--line-mid);
	border-left: 2px solid var(--gold);
	border-radius: var(--r);
	background: rgba(242, 238, 231, 0.03);
	color: var(--cream-dim);
	font-size: var(--fs-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
}

.woocommerce-error { border-left-color: #C4573F; }
.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* ---------------------------------------------------------- generic button */
.woocommerce .button:not(.single_add_to_cart_button):not(.checkout-button),
.woocommerce button.button.alt,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.9em 1.7em;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--cream);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.woocommerce .button:not(.single_add_to_cart_button):not(.checkout-button):hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover {
	border-color: var(--cream);
	background: rgba(242, 238, 231, 0.05);
	color: var(--cream);
}

/* the primary actions keep their own weight and size; their colour comes from
   the button system at the end of this file, which is the store's single rule */
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
	font-weight: 600;
}

/* --------------------------------------------------------------- form bits */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select {
	width: 100%;
	max-width: none;
	padding: 0.85em 1em;
	border: 1px solid var(--line-mid);
	border-radius: var(--r-sm);
	background: rgba(242, 238, 231, 0.02);
	color: var(--cream);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	appearance: none;
}

.woocommerce select {
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.4em;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--gold);
}

.woocommerce label { color: var(--cream-dim); font-size: var(--fs-xs); }
.woocommerce .form-row { margin-bottom: var(--s4); }
.woocommerce .required { color: var(--gold); }
.woocommerce .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid var(--line-mid);
	background: rgba(242, 238, 231, 0.02);
	border-radius: var(--r-sm);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	color: var(--cream);
	padding-left: 1em;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }

/* ------------------------------------------------------- catalogue toolbar */
.woocommerce .woocommerce-result-count {
	color: var(--muted);
	font-size: var(--fs-sm);
	margin: 0;
}

.woocommerce .woocommerce-ordering { margin: 0; }

.shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	padding-bottom: var(--s5);
	margin-bottom: var(--s6);
	border-bottom: 1px solid var(--line);
}

.shop__bar .woocommerce-ordering select {
	min-width: 220px;
	padding: 0.6em 2.4em 0.6em 0.9em;
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- variation pickers
   JS turns the size dropdown into the design's size pills. Until it runs (or
   if it never runs) the plain select stays usable. */
.sk-variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s3);
}

.sk-variation-pills button {
	min-width: 46px;
	min-height: 42px;
	padding: 0.4em 0.9em;
	border: 1px solid var(--line-mid);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--cream-dim);
	font-family: var(--sans);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.sk-variation-pills button:hover { border-color: var(--cream); color: var(--cream); }

.sk-variation-pills button.is-on {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

.sk-variation-pills button.is-out {
	opacity: 0.35;
	text-decoration: line-through;
	cursor: not-allowed;
}

.sk-select-hidden { display: none !important; }

.woocommerce .variations td,
.woocommerce .variations th { padding: 0 0 var(--s3); background: none; }

.woocommerce .reset_variations {
	color: var(--muted);
	font-size: var(--fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.woocommerce .single_variation_wrap .woocommerce-variation-price {
	margin: var(--s4) 0;
	font-family: var(--display);
	font-size: var(--fs-h3);
	color: var(--cream);
}

.woocommerce .woocommerce-variation-availability { color: var(--muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------- quantity box */
.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line-mid);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.woocommerce .quantity input.qty {
	width: 68px;
	padding: 0.6em 0;
	border: 0;
	background: transparent;
	color: var(--cream);
	text-align: center;
	font-size: var(--fs-sm);
	-moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
	margin: var(--s5) 0 0;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 220px; }

/* ------------------------------------------------------------------- cart */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	color: var(--cream);
}

.woocommerce table.shop_table th {
	padding: var(--s4);
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: var(--s4);
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { max-width: 72px; height: auto; border-radius: var(--r-sm); }
.woocommerce table.shop_table .product-name a { font-family: var(--display); font-size: 1.125rem; }
.woocommerce table.shop_table .product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--line-mid);
	border-radius: 50%;
	color: var(--muted);
	font-size: 15px;
	line-height: 1;
}
.woocommerce table.shop_table .product-remove a:hover { color: var(--gold); border-color: var(--gold); }

.woocommerce .coupon { display: flex; gap: var(--s3); align-items: center; margin: var(--s4) 0; }
.woocommerce .coupon input[type="text"] { min-width: 180px; }

.woocommerce .cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--s7); }

.woocommerce .cart_totals {
	width: 100%;
	max-width: 420px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--s5);
}

.woocommerce .cart_totals h2 {
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--s4);
}

.woocommerce .cart_totals table.shop_table { border: 0; }
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.woocommerce .order-total .amount { font-family: var(--display); font-size: 1.5rem; color: var(--cream); }
.woocommerce .wc-proceed-to-checkout { padding-top: var(--s5); }

/* --------------------------------------------------------------- checkout */
/* Three children in two columns, where the left one is huge: a shared grid
   cannot express "details spans, the right column stacks from the top"
   without the tall spanning item inflating the heading's row and pushing the
   panel down hundreds of pixels. Floats do it exactly: the order heading and
   panel stack tight in the right column, details owns the left, and the form
   clears both. */
.woocommerce form.checkout { display: block; }
.woocommerce form.checkout::after { content: ""; display: block; clear: both; }
.woocommerce form.checkout #customer_details {
	float: left;
	width: 57%;
}
.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review {
	float: right;
	clear: right;
	width: 39%;
}
.woocommerce form.checkout .col2-set { display: grid; gap: var(--s7); }
.woocommerce form.checkout h3,
.woocommerce #order_review_heading {
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--s4);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--line);
}

.woocommerce #order_review {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--s5);
	background: rgba(242, 238, 231, 0.015);
}

.woocommerce #order_review table.shop_table { border: 0; margin-bottom: var(--s4); }
.woocommerce #order_review table.shop_table td,
.woocommerce #order_review table.shop_table th { padding: var(--s3) 0; }
.woocommerce #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--s4);
	padding: 0 0 var(--s4);
	border-bottom: 1px solid var(--line);
}
.woocommerce #payment ul.payment_methods li { margin-bottom: var(--s3); color: var(--cream-dim); }
.woocommerce #payment div.form-row { padding: 0; }
.woocommerce #place_order { width: 100%; min-height: 52px; }
.woocommerce .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--s4); font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------- account */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.woocommerce .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.woocommerce .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--line); }
.woocommerce .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--s3) 0;
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.woocommerce .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce .woocommerce-MyAccount-navigation ul li a:hover { color: var(--gold); }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 460px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--s5);
}
.woocommerce form.login label,
.woocommerce form.register label { display: block; margin-bottom: var(--s2); }
.woocommerce .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit { width: 100%; }
.woocommerce .woocommerce-LostPassword { margin-top: var(--s3); font-size: var(--fs-xs); }

/* -------------------------------------------------------------- pagination */
.sk-pagination,
.woocommerce nav.woocommerce-pagination { margin-top: var(--s8); text-align: center; }

.sk-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	margin: 0 3px;
	border: 1px solid var(--line-mid);
	border-radius: var(--r-sm);
	color: var(--cream-dim);
	font-size: var(--fs-xs);
}
.sk-pagination .page-numbers.current,
.sk-pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold); }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: inline-flex; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }

/* --------------------------------------------------------- breadcrumb / misc */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: var(--fs-xs); margin-bottom: var(--s5); }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--gold); }

.sk-woo-embed .woocommerce h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--fs-h3);
	letter-spacing: -0.014em;
	text-transform: none;
	color: var(--cream);
}

/* the price markup WooCommerce prints inside its own summaries */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cream);
	font-family: var(--display);
	font-size: var(--fs-h2);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: var(--muted); font-size: 0.6em; margin-right: 0.5em; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { color: var(--cream); text-decoration: none; }

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--gold); }

.woocommerce .woocommerce-store-notice { display: none; }

/* ------------------------------------------------ admin bar offsets, logged in */
body.admin-bar .tickerwrap { top: 32px; }
body.admin-bar .hdr--stuck { top: 32px; }
body.admin-bar .drawer { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .tickerwrap { top: 46px; }
	body.admin-bar .hdr--stuck { top: 46px; }
	body.admin-bar .drawer { top: 46px; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout #order_review_heading,
	.woocommerce form.checkout #order_review { float: none; width: auto; }
	.woocommerce form.checkout #order_review_heading { margin-top: var(--s7); }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
	.woocommerce table.shop_table td { display: block; border: 0; padding: var(--s2) 0; }
	.woocommerce table.shop_table td::before {
		content: attr(data-title) ": ";
		color: var(--muted);
		font-size: var(--fs-label);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-right: var(--s3);
	}
	.woocommerce .cart-collaterals { justify-content: stretch; }
	.woocommerce .cart_totals { max-width: none; }
	.shop__bar { flex-direction: column; align-items: stretch; gap: var(--s3); }
	.shop__bar .woocommerce-ordering select { min-width: 0; width: 100%; }
}

/* ==========================================================================
   The light canvas — a switch, not a second design
   --------------------------------------------------------------------------
   Everything above is the dark palette. With `data-theme="light"` on <html>,
   the same layout, the same type and the same gold are re-lit on warm paper:
   surfaces invert, the hairlines become ink-based instead of cream-based, and
   the few places that sit on top of a photograph or on a gold fill keep their
   dark treatment, so type never lands on its own colour. No attribute means
   dark, so an unvisited storefront is unchanged.
   ========================================================================== */
html[data-theme='light'] {
  color-scheme: light;

  /* surfaces — warm paper, never pure white */
  --ink:   #F4F0E7;
  --ink-2: #FBF9F4;
  --ink-3: #E8E2D4;

  /* type */
  --cream:     #16140F;
  --cream-dim: #45403A;
  --muted:     #6E675C;
  --faint:     #8E8678;

  /* gold, darkened so it stays legible as type and as hairlines on paper */
  --gold:      #8A6A1B;
  --gold-soft: #A5852E;
  --gold-deep: #6B5013;

  /* hairlines — ink-based instead of cream-based */
  --line:        rgba(22, 20, 15, 0.12);
  --line-mid:    rgba(22, 20, 15, 0.18);
  --line-strong: rgba(22, 20, 15, 0.30);
  --line-gold:   rgba(138, 106, 27, 0.36);
}

/* the faint gold warmth is calibrated for near-black; on paper it only muddies */
html[data-theme='light'] body::before { background: none; }

/* --- on a gold fill, the gold stays the brand gold ---------------------- */
html[data-theme='light'] .btn--gold {
  --btn-bg: #C9A84C;
  --btn-fg: #14120E;
  --btn-bd: #C9A84C;
  --btn-bg-hover: #B8952F;
  --btn-bd-hover: #B8952F;
}
html[data-theme='light'] .badge { background: #C9A84C; color: #14120E; }

/* --- on photography, keep light type on a dark scrim -------------------- */
html[data-theme='light'] .hero__caption {
  color: #F2EEE7;
  background: rgba(10, 9, 8, 0.72);
  border-color: rgba(242, 238, 231, 0.16);
}
html[data-theme='light'] .catstrip__meta h3 { color: #F2EEE7; }
html[data-theme='light'] .catstrip__meta span { color: #C4BEB2; }
html[data-theme='light'] .wish {
  background: rgba(10, 9, 8, 0.62);
  border-color: rgba(242, 238, 231, 0.16);
  color: #F2EEE7;
}
html[data-theme='light'] .wish:hover,
html[data-theme='light'] .wish.is-on { color: #C9A84C; }
html[data-theme='light'] .quickadd {
  background: rgba(10, 9, 8, 0.9);
  border-color: rgba(242, 238, 231, 0.16);
}
html[data-theme='light'] .quickadd__label { color: #C4BEB2; }
html[data-theme='light'] .quickadd__sizes button {
  color: #F2EEE7;
  border-color: rgba(242, 238, 231, 0.16);
}
html[data-theme='light'] .quickadd__sizes button:hover {
  background: #F2EEE7;
  border-color: #F2EEE7;
  color: #14120E;
}
html[data-theme='light'] .quickadd.is-done { color: #E2C87F; }

/* --- the handful of rules that hard-code a colour, restated for paper --- */
html[data-theme='light'] .hdr--stuck { background: rgba(244, 240, 231, 0.94); }
html[data-theme='light'] .iconbtn:hover { background: rgba(22, 20, 15, 0.06); }
html[data-theme='light'] .chip[data-active='true'] { background: rgba(138, 106, 27, 0.10); }
html[data-theme='light'] .notice { background: rgba(201, 168, 76, 0.12); }
html[data-theme='light'] .woocommerce-message,
html[data-theme='light'] .woocommerce-info,
html[data-theme='light'] .woocommerce-error,
html[data-theme='light'] .woocommerce-noreviews,
html[data-theme='light'] p.no-comments { background: rgba(22, 20, 15, 0.03); }
html[data-theme='light'] .woocommerce-error { border-left-color: #A8392A; }
html[data-theme='light'] .woocommerce .button:not(.single_add_to_cart_button):not(.checkout-button):hover,
html[data-theme='light'] .woocommerce a.button:hover { background: rgba(22, 20, 15, 0.05); }
html[data-theme='light'] .woocommerce input[type='text'],
html[data-theme='light'] .woocommerce input[type='email'],
html[data-theme='light'] .woocommerce input[type='tel'],
html[data-theme='light'] .woocommerce input[type='number'],
html[data-theme='light'] .woocommerce input[type='password'],
html[data-theme='light'] .woocommerce textarea,
html[data-theme='light'] .woocommerce .select2-container .select2-selection--single { background: rgba(22, 20, 15, 0.03); }
html[data-theme='light'] .woocommerce #order_review { background: rgba(22, 20, 15, 0.02); }

/* ---------------------------------------------------------- the switch --- */
.themebtn svg { display: block; }
.themebtn .themebtn__moon { display: none; }
html[data-theme='light'] .themebtn .themebtn__sun { display: none; }
html[data-theme='light'] .themebtn svg.themebtn__moon { display: block; }
html[data-theme='light'] .themebtn span.themebtn__moon { display: inline; }

/* the drawer's copy of the switch is a button that has to read as a link */
.drawer__theme {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--s3);
  font: inherit;
  color: var(--cream-dim);
  cursor: pointer;
  text-align: left;
}
.drawer__theme:hover { color: var(--gold); }

/* The knot mark is cream and gold on transparency, so it needs a dark surface
   to sit on. On the light canvas it keeps its colours and gets its own plate —
   the mark is never re-coloured, so the brand reads the same in both themes. */
html[data-theme='light'] .brand__mark {
  background: #0A0908;
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 50%;
  padding: 4px;
}
html[data-theme='light'] .ftr__brand img {
  background: #0A0908;
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 50%;
  padding: 7px;
}

/* ==========================================================================
   Buttons — one rule for the whole store
   --------------------------------------------------------------------------
   Every button is gold. Hovering inverts it: black with white letters on the
   dark canvas, white with black letters on the light one. The hover keeps a
   hairline so the button still reads as a button rather than a line of text.
   The declarations carry !important deliberately: WooCommerce styles its own
   buttons in a dozen places, and the payment gateway will style its own — this
   is the store's single rule and it should not lose to any of them.
   ========================================================================== */
.btn,
.btn--gold,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button,
.woocommerce button[name='update_cart'],
.woocommerce .cart .button,
.wc-block-components-button {
  --btn-bg: var(--gold);
  --btn-fg: #120F08;
  --btn-bd: var(--gold);
  --btn-bg-hover: #0A0908;
  --btn-fg-hover: #F2EEE7;
  --btn-bd-hover: rgba(242, 238, 231, 0.40);
  background: var(--btn-bg) !important;
  border-color: var(--btn-bd) !important;
  color: var(--btn-fg) !important;
}

.btn:hover,
.btn--gold:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce button[name='update_cart']:hover,
.woocommerce .cart .button:hover,
.wc-block-components-button:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bd-hover) !important;
  color: var(--btn-fg-hover) !important;
}

/* the light canvas: same gold, and the hover goes to white with black letters */
html[data-theme='light'] .btn,
html[data-theme='light'] .btn--gold,
html[data-theme='light'] .woocommerce .button,
html[data-theme='light'] .woocommerce button.button,
html[data-theme='light'] .woocommerce input.button,
html[data-theme='light'] .woocommerce a.button,
html[data-theme='light'] .woocommerce button.button.alt,
html[data-theme='light'] .woocommerce .checkout-button,
html[data-theme='light'] .woocommerce #place_order,
html[data-theme='light'] .woocommerce .single_add_to_cart_button,
html[data-theme='light'] .woocommerce #respond input#submit,
html[data-theme='light'] .woocommerce .woocommerce-Button,
html[data-theme='light'] .woocommerce button[name='update_cart'],
html[data-theme='light'] .woocommerce .cart .button,
html[data-theme='light'] .wc-block-components-button {
  --btn-bg: #C9A84C;
  --btn-fg: #14120E;
  --btn-bd: #C9A84C;
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: #16140F;
  --btn-bd-hover: rgba(22, 20, 15, 0.28);
}

/* Buttons that cannot be pressed look like buttons that cannot be pressed. */
.btn:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   WooCommerce's block cart and checkout, on a full-width page
   --------------------------------------------------------------------------
   Those blocks carry their own two-column layout inside a container of their
   own width. Inside this theme's page they were also sitting in the text
   column (68 characters), which turned the whole cart into a strip down the
   left of the page. The block gets the page width here and lays itself out.
   ========================================================================== */
.sk-woo-wide {
  max-width: none;
  padding-block: var(--s8);
}

.sk-woo-wide .wp-block-woocommerce-cart,
.sk-woo-wide .wp-block-woocommerce-checkout,
.sk-woo-wide .wp-block-woocommerce-cart.alignwide,
.sk-woo-wide .wp-block-woocommerce-checkout.alignwide,
.sk-woo-wide .wc-block-cart,
.sk-woo-wide .wc-block-checkout,
.sk-woo-wide .wc-block-components-sidebar-layout,
.sk-woo-wide .wc-block-components-sidebar-layout .wc-block-components-main,
.sk-woo-wide .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  max-width: none !important;
  width: auto !important;
  margin-inline: 0 !important;
}

.sk-woo-wide .wc-block-components-sidebar-layout {
  align-items: flex-start;
  gap: var(--s7);
}

/* the block's own idea of white surfaces, brought onto the theme's palette */
html[data-theme='dark'] .sk-woo-wide .wc-block-cart,
html[data-theme='light'] .sk-woo-wide .wc-block-cart,
.sk-woo-wide .wc-block-checkout {
  color: var(--cream);
}

.sk-woo-wide .wc-block-cart-item__image img,
.sk-woo-wide .wc-block-components-product-image img {
  border-radius: var(--r-sm);
}

.sk-woo-wide table.wc-block-cart-items,
.sk-woo-wide .wc-block-cart-items {
  border-color: var(--line);
}

.sk-woo-wide .wc-block-cart-items td,
.sk-woo-wide .wc-block-cart-items th {
  border-color: var(--line) !important;
}