/* =====================================================================
   Himalayan Editorial — theme stylesheet
   Editorial lookbook system: navy ink on paper, hairlines, no shadows.
   Ink:    #052a56 (deep navy)    — text, borders, structure
   Accent: #dd5b27 (logo orange)  — commerce actions, active states
   ===================================================================== */

:root {
  /* Ink + paper (paper is navy-tinted, never pure white) */
  --he-ink: #052a56;
  --he-ink-soft: #2e4a6e;          /* secondary text */
  --he-paper: #fcfdfe;
  --he-accent: #dd5b27;            /* logo orange */
  --he-accent-deep: #b8481d;       /* orange hover/pressed */
  --he-accent-wash: #fbeee7;       /* pale orange surface tint */
  --he-mist: #e7ebf0;              /* dividers, skeletons, alt surface */
  --he-fog: #f2f4f7;               /* section banding */
  --he-sand: #f7efe3;              /* warm editorial band */
  --he-tide: #fbeee7;              /* warm accent band (orange-tinted) */
  --he-placeholder: #ccd4dd;

  /* Type */
  --he-font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --he-track: 0.025em;
  --he-text-xs: 9px;
  --he-text-sm: 12px;
  --he-text-body: 14px;
  --he-text-base: 16px;
  --he-text-heading: 20px;
  --he-text-display: clamp(26px, 2.4vw, 34px);

  /* Rhythm */
  --he-s4: 4px;  --he-s8: 8px;  --he-s12: 12px;
  --he-s16: 16px; --he-s20: 20px; --he-s24: 24px;
  --he-section-gap: clamp(48px, 6vw, 80px);
  --he-max: 1440px;

  --he-r-btn: 4px;                 /* buttons + inputs only; everything else square */

  --he-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--he-font);
  font-size: var(--he-text-body);
  line-height: 1.4;
  letter-spacing: var(--he-track);
  color: var(--he-ink);
  background: var(--he-paper);
  font-feature-settings: "ss01" on, "cv11" on;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: var(--he-track);
  margin: 0 0 var(--he-s16);
  line-height: 1.2;
}
h1 { font-size: var(--he-text-display); }
h2 { font-size: var(--he-text-heading); font-weight: 700; }
h3 { font-size: var(--he-text-base); font-weight: 500; }

p { max-width: 70ch; }

a { color: var(--he-ink); text-decoration: none; transition: color 0.2s var(--he-ease), opacity 0.2s var(--he-ease); }
a:hover { opacity: 0.65; }

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

.he-container {
  max-width: var(--he-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

/* Secondary (default): ghost navy */
.he-btn,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--he-font);
  font-size: var(--he-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--he-ink);
  background: transparent;
  border: 1px solid var(--he-ink);
  border-radius: var(--he-r-btn);
  padding: 12px 26px;
  cursor: pointer;
  transition: background 0.18s var(--he-ease), color 0.18s var(--he-ease),
              border-color 0.18s var(--he-ease), transform 0.12s var(--he-ease);
}

.he-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--he-ink);
  color: var(--he-paper);
}
.he-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
button[type="submit"]:active,
input[type="submit"]:active { transform: translateY(1px); }

/* Primary: filled logo orange — the commerce action */
.he-btn--fill,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
  background: var(--he-accent);
  color: #fdf8f5;
  border-color: var(--he-accent);
}
.he-btn--fill:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
  background: var(--he-accent-deep);
  border-color: var(--he-accent-deep);
  color: #fdf8f5;
}

.button:disabled, .button.disabled, button[type="submit"]:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
select, textarea {
  font-family: var(--he-font);
  font-size: var(--he-text-body);
  letter-spacing: var(--he-track);
  color: var(--he-ink);
  background: var(--he-paper);
  border: 1px solid #b9c3d0;
  border-radius: var(--he-r-btn);
  padding: 11px 14px;
  width: 100%;
  transition: border-color 0.18s var(--he-ease), box-shadow 0.18s var(--he-ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
  border-color: var(--he-ink);
  box-shadow: 0 0 0 3px var(--he-accent-wash);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--he-ink-soft); opacity: 0.6; }

label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--he-ink-soft);
  margin-bottom: 6px;
}
label .required { color: var(--he-accent); text-decoration: none; }

.woocommerce form .form-row { margin-bottom: var(--he-s16); }
.woocommerce form .form-row label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--he-ink-soft); }

/* ------------------------------------------------------------------ */
/* Announcement bar + header                                           */
/* ------------------------------------------------------------------ */

.he-announce {
  background: var(--he-ink);
  color: var(--he-paper);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 12px;
}

.he-header {
  background: var(--he-paper);
  border-bottom: 1px solid var(--he-ink);
  position: sticky;
  top: 0;
  z-index: 50;
}

.he-header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--he-s16);
  padding: var(--he-s12) 0;
}

.he-nav { display: flex; gap: var(--he-s20); }
.he-nav a {
  font-size: var(--he-text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.he-nav a:hover { opacity: 0.65; }

.he-logo { justify-self: center; text-align: center; }
.he-logo a {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Wordmark SVG. The artwork is 587x136 (both lines stacked), so it is sized by
   width — driving it off height alone leaves it far smaller than the text logo
   it replaces. */
.he-logo img {
  display: block;
  width: clamp(150px, 17vw, 210px);
  height: auto;
  margin: 0 auto;
}

.he-header-icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--he-s16);
}
.he-header-icons a { display: inline-flex; position: relative; padding: 4px; }
.he-header-icons svg { width: 18px; height: 18px; stroke: var(--he-ink); fill: none; stroke-width: 1.5; }
.he-header-icons a:hover svg { opacity: 0.65; }

.he-bag-count {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 15px; height: 15px;
  font-size: var(--he-text-xs);
  line-height: 15px;
  text-align: center;
  background: var(--he-accent);
  color: #fdf8f5;
  border-radius: 999px;
  padding: 0 3px;
}

/* Mobile nav */
.he-nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.he-nav-toggle svg { width: 20px; height: 20px; stroke: var(--he-ink); stroke-width: 1.5; fill: none; }

@media (max-width: 900px) {
  .he-nav-toggle { display: inline-flex; }
  .he-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--he-paper);
    border-bottom: 1px solid var(--he-ink);
  }
  .he-nav.is-open { display: flex; }
  .he-nav a { padding: 14px clamp(16px, 3vw, 40px); border-top: 1px solid var(--he-mist); }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.he-hero { position: relative; overflow: hidden; }
.he-hero img { width: 100%; height: clamp(300px, 37.5vw, 540px); object-fit: cover; }
.he-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--he-s20);
  text-align: center;
  padding: var(--he-s24);
}
.he-hero-copy h1 { color: var(--he-paper); font-weight: 400; margin: 0; }
.he-hero-copy .he-btn { color: var(--he-paper); border-color: var(--he-paper); }
.he-hero-copy .he-btn:hover { background: var(--he-paper); color: var(--he-ink); }

/* Dark-copy variant when photo is light */
.he-hero--dark .he-hero-copy h1 { color: var(--he-ink); }
.he-hero--dark .he-hero-copy .he-btn { color: var(--he-ink); border-color: var(--he-ink); }
.he-hero--dark .he-hero-copy .he-btn:hover { background: var(--he-ink); color: var(--he-paper); }

/* ------------------------------------------------------------------ */
/* Sections + editorial blocks                                         */
/* ------------------------------------------------------------------ */

.he-section { margin: var(--he-section-gap) 0; }
.he-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--he-s16);
  margin-bottom: var(--he-s24);
}
.he-section-head h2 { margin: 0; }
.he-section-head a { font-size: var(--he-text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--he-ink); border-bottom: 1px solid var(--he-ink); }

.he-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--he-s4); }
.he-split a { position: relative; display: block; }
.he-split img { width: 100%; height: clamp(260px, 32vw, 480px); object-fit: cover; }
.he-split-label {
  position: absolute;
  left: 50%; bottom: clamp(16px, 3vw, 40px);
  transform: translateX(-50%);
  color: var(--he-paper);
  font-size: var(--he-text-heading);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 700px) { .he-split { grid-template-columns: 1fr; } }

.he-band { background: var(--he-tide); padding: var(--he-section-gap) 0; }
.he-band--warm { background: var(--he-sand); }

/* ------------------------------------------------------------------ */
/* Product grid + cards (WooCommerce loop)                             */
/* ------------------------------------------------------------------ */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none; }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--he-s20) var(--he-s16);
  margin: 0; padding: 0;
  list-style: none;
}
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--he-s16) var(--he-s8); } }

.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  position: relative;
  float: none;
  width: 100%;
  margin: 0; padding: 0;
  background: transparent;
}

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--he-placeholder);
  margin-bottom: var(--he-s8);
}

.he-card-title {
  font-size: var(--he-text-sm);
  font-weight: 400;
  margin: 0 0 2px;
  line-height: 1.33;
}

.woocommerce ul.products li.product .price {
  font-size: var(--he-text-sm);
  color: var(--he-ink);
  margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--he-ink-soft); opacity: 0.7; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--he-ink); }

.he-sale-tag {
  position: absolute;
  top: var(--he-s8); left: var(--he-s8);
  z-index: 2;
  background: var(--he-accent);
  color: #fdf8f5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
}

.he-quick-add { margin-top: var(--he-s8); }
.he-quick-add .button,
.woocommerce .he-quick-add a.button,
.woocommerce .he-quick-add button.button {
  font-size: 11px;
  padding: 5px 12px;
  background: var(--he-ink);
  color: var(--he-paper);
  border-color: var(--he-ink);
}
.he-quick-add .button:hover,
.woocommerce .he-quick-add a.button:hover,
.woocommerce .he-quick-add button.button:hover { background: var(--he-accent); border-color: var(--he-accent); color: #fdf8f5; }
.he-quick-add .added_to_cart { display: block; margin-top: 4px; font-size: 11px; color: var(--he-accent); font-weight: 600; }

/* Shop toolbar: count left, ordering right, one hairline row */
.he-shop-main { padding-top: var(--he-s24); padding-bottom: var(--he-section-gap); }
.he-shop-main .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce .woocommerce-result-count {
  font-size: var(--he-text-sm);
  color: var(--he-ink-soft);
  float: left;
  margin: 0;
  line-height: 36px;
}
.woocommerce .woocommerce-ordering { float: right; margin: 0 0 var(--he-s24); }
.woocommerce ul.products { clear: both; }

/* Custom select: no browser chrome, ink chevron */
select,
.woocommerce .woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  font-size: var(--he-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--he-ink);
  border-radius: var(--he-r-btn);
  background-color: var(--he-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052a56' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
}
select::-ms-expand { display: none; }
.woocommerce form .form-row select { width: 100%; }

.woocommerce-products-header { margin: var(--he-s24) 0 var(--he-s16); }
.woocommerce-products-header .woocommerce-products-header__title { font-weight: 400; margin-bottom: 0; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: var(--he-section-gap); text-align: center; }
.woocommerce nav.woocommerce-pagination ul { border: none; display: inline-flex; gap: var(--he-s8); }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-size: var(--he-text-sm);
  padding: 6px 10px;
  color: var(--he-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--he-ink);
  color: var(--he-paper);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--he-mist); color: var(--he-ink); }

/* ------------------------------------------------------------------ */
/* Single product                                                      */
/* ------------------------------------------------------------------ */

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-top: var(--he-s24);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none; width: 100%; margin-bottom: 0; }
.woocommerce div.product div.images img { border-radius: 0; width: 100%; }
/* The summary is deliberately NOT sticky. Its containing block would be the
   whole product grid, and the tabs / related products rows span `1 / -1`, so a
   pinned summary rides down over them. It is also taller than the viewport on
   products with many colors, which strands the add-to-cart button off-screen. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }
@media (max-width: 850px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

.woocommerce div.product .product_title {
  font-size: var(--he-text-display);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: var(--he-s8);
}
.woocommerce div.product p.price {
  font-size: 22px;
  font-weight: 600;
  color: var(--he-ink);
  margin: var(--he-s8) 0 var(--he-s4);
}
.woocommerce div.product p.price ins { text-decoration: none; color: var(--he-accent); }
.woocommerce div.product p.price del { color: var(--he-ink-soft); font-weight: 400; font-size: 16px; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--he-ink-soft);
  border-top: 1px solid var(--he-mist);
  margin-top: var(--he-s16);
  padding-top: var(--he-s16);
}

/* Add-to-cart row: stepper + primary button on one line */
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: var(--he-s12);
  margin: var(--he-s24) 0;
  border-top: 1px solid var(--he-mist);
  padding-top: var(--he-s24);
}
.woocommerce div.product form.cart div.quantity { display: flex; margin: 0; }
.woocommerce div.product form.cart div.quantity .qty {
  width: 72px;
  height: 100%;
  min-height: 44px;
  text-align: center;
  font-weight: 600;
  border-color: var(--he-ink);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1;
  padding: 14px 32px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   Variation swatches
   Buttons replace the Size/Color selects (variation-swatches.js). The selects
   stay in the DOM as the form's real inputs, so they are hidden accessibly
   rather than removed.
   --------------------------------------------------------------------- */

.woocommerce div.product form.cart.variations_form {
  display: block;
  border-top: 1px solid var(--he-mist);
  padding-top: var(--he-s24);
  margin: var(--he-s24) 0;
}

/* WooCommerce's own stylesheet sets `form.cart .variations select { width: 100% }`
   and loads after this file, so the hide rule has to out-specify it. */
.woocommerce div.product form.cart.he-has-swatches .variations td select,
.woocommerce div.product form.cart.he-has-swatches .variations select {
  position: absolute;
  width: 1px;
  min-width: 0;
  max-width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.woocommerce div.product form.cart .variations {
  width: 100%;
  margin: 0 0 var(--he-s20);
  border: 0;
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
}
.woocommerce div.product form.cart .variations tr + tr { margin-top: var(--he-s16); }
.woocommerce div.product form.cart .variations th.label label {
  display: block;
  margin-bottom: var(--he-s8);
  font-size: var(--he-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--he-ink-soft);
}

.he-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--he-s8);
}

.woocommerce div.product form.cart .he-swatch,
.he-swatch {
  position: relative;
  min-width: 52px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--he-text-body);
  font-weight: 500;
  letter-spacing: var(--he-track);
  line-height: 1;
  color: var(--he-ink);
  background: transparent;
  border: 1px solid var(--he-ink);
  border-radius: var(--he-r-btn);
  cursor: pointer;
  transition: background-color 0.18s var(--he-ease), color 0.18s var(--he-ease), border-color 0.18s var(--he-ease);
}
.woocommerce div.product form.cart .he-swatch:hover,
.he-swatch:hover { background: var(--he-fog); color: var(--he-ink); }
.he-swatch:focus-visible {
  outline: 2px solid var(--he-accent);
  outline-offset: 2px;
}
.woocommerce div.product form.cart .he-swatch.is-selected,
.he-swatch.is-selected {
  background: var(--he-ink);
  border-color: var(--he-ink);
  color: var(--he-paper);
}

/* Unavailable: greyed, struck through, still focusable so it can explain itself. */
.woocommerce div.product form.cart .he-swatch.is-unavailable,
.woocommerce div.product form.cart .he-swatch.is-unavailable:hover,
.he-swatch.is-unavailable {
  color: var(--he-placeholder);
  border-color: var(--he-mist);
  background: var(--he-fog);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Popover naming the reason, on hover, focus, or a blocked click. */
.he-swatch[data-reason]::after {
  content: attr(data-reason);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: 5;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: var(--he-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--he-paper);
  background: var(--he-ink);
  border-radius: var(--he-r-btn);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--he-ease), transform 0.16s var(--he-ease);
}
.he-swatch[data-reason]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  z-index: 5;
  border: 5px solid transparent;
  border-top-color: var(--he-ink);
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--he-ease), transform 0.16s var(--he-ease);
}
.he-swatch[data-reason]:hover::after,
.he-swatch[data-reason]:hover::before,
.he-swatch[data-reason]:focus-visible::after,
.he-swatch[data-reason]:focus-visible::before,
.he-swatch.is-nudging::after,
.he-swatch.is-nudging::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.he-swatch.is-nudging { animation: he-nudge 0.32s var(--he-ease); }

@keyframes he-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .he-swatch.is-nudging { animation: none; }
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: var(--he-s8);
  font-size: var(--he-text-sm);
  color: var(--he-ink-soft);
  border-bottom: 1px solid var(--he-mist);
}

/* Stock line + the add-to-cart row inside the variation form */
.woocommerce div.product .woocommerce-variation-availability p.stock {
  margin: 0 0 var(--he-s12);
  font-size: var(--he-text-sm);
  letter-spacing: var(--he-track);
  color: var(--he-ink-soft);
}
.woocommerce div.product .woocommerce-variation-availability p.stock.out-of-stock { color: var(--he-accent-deep); }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: var(--he-s12);
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; }

/* Product meta: quiet spec sheet */
.woocommerce div.product .product_meta {
  border-top: 1px solid var(--he-mist);
  padding-top: var(--he-s16);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--he-text-sm);
  color: var(--he-ink-soft);
}
.woocommerce div.product .product_meta > span {
  display: flex;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.woocommerce div.product .product_meta a { color: var(--he-ink); border-bottom: 1px solid var(--he-mist); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--he-s20);
  border-bottom: 1px solid var(--he-ink);
  display: flex;
  gap: var(--he-s4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: var(--he-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  color: var(--he-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--he-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--he-paper); }

/* Related products */
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 { font-size: var(--he-text-heading); margin: var(--he-section-gap) 0 var(--he-s24); }

/* Star ratings in accent */
.woocommerce .star-rating span::before { color: var(--he-ink); }
.woocommerce .star-rating::before { color: var(--he-mist); }

/* ------------------------------------------------------------------ */
/* Cart, checkout, account, notices                                    */
/* ------------------------------------------------------------------ */

/* ---- Tables ---- */
.woocommerce table.shop_table {
  border: none;
  border-top: 2px solid var(--he-ink);
  border-radius: 0;
  font-size: var(--he-text-body);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--he-mist); padding: 14px 12px; }
.woocommerce table.shop_table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--he-ink-soft);
}

/* ---- Cart: line items + summary aside ---- */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .he-cart-title { grid-column: 1 / -1; }
@media (max-width: 850px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; } }

.woocommerce-cart table.cart img { width: 72px; aspect-ratio: 3/4; object-fit: cover; }
.woocommerce-cart table.cart td.product-name a { font-weight: 500; }
.woocommerce-cart table.cart .product-remove a.remove {
  color: var(--he-ink-soft) !important;
  font-size: 18px;
  font-weight: 400;
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 999px;
}
.woocommerce-cart table.cart .product-remove a.remove:hover {
  background: var(--he-accent);
  color: #fdf8f5 !important;
}
.woocommerce-cart table.cart input.qty { width: 60px; text-align: center; }
.woocommerce-cart table.cart td.actions { padding-top: var(--he-s16); }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: var(--he-s8); float: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 160px; float: none; }

.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  background: var(--he-fog);
  padding: var(--he-s24);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-size: var(--he-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--he-s12);
}
.woocommerce-cart .cart-collaterals .cart_totals table { border-top: 1px solid var(--he-ink); }
.woocommerce-cart .cart-collaterals .order-total td,
.woocommerce-cart .cart-collaterals .order-total th { font-size: var(--he-text-base); font-weight: 700; }
.woocommerce .wc-proceed-to-checkout { padding: var(--he-s16) 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  padding: 15px 24px;
  font-size: 13px;
  margin-bottom: 0;
}

/* ---- Notices: flat editorial strips ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--he-fog);
  border-top: 2px solid var(--he-ink);
  color: var(--he-ink);
  border-radius: 0;
  padding: 14px 20px 14px 44px !important;
}
.woocommerce-message { background: var(--he-accent-wash); border-top-color: var(--he-accent); }
.woocommerce-message::before { color: var(--he-accent); }
.woocommerce-info::before { color: var(--he-ink); }
.woocommerce-error { border-top-color: #8c2f2f; }
.woocommerce-error::before { color: #8c2f2f; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  padding: 7px 16px; font-size: 11px;
}

/* ---- My account: hairline sidebar + content ---- */
.woocommerce-account main .woocommerce {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
/* Pin nav and content to their columns; everything else spans full width */
.woocommerce-account main .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account main .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
.woocommerce-account main .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.woocommerce-account:not(.logged-in) main .woocommerce { display: block; }
@media (max-width: 850px) {
  .woocommerce-account main .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account main .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: auto; }
  .woocommerce-account main .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}

.woocommerce-MyAccount-navigation { width: 100%; float: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--he-ink); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--he-mist); }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 4px;
  font-size: var(--he-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--he-accent);
  font-weight: 700;
}
.woocommerce-MyAccount-content { width: 100%; float: none; }

/* Login / register: two columns split by hairline */
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 960px;
  margin: var(--he-s24) auto var(--he-section-gap);
  border-top: 2px solid var(--he-ink);
}
.woocommerce-account #customer_login > div { width: 100%; float: none; padding: var(--he-s24) clamp(20px, 4vw, 56px); }
.woocommerce-account #customer_login > div:last-child { border-left: 1px solid var(--he-mist); background: var(--he-fog); }
@media (max-width: 850px) {
  .woocommerce-account #customer_login { grid-template-columns: 1fr; }
  .woocommerce-account #customer_login > div:last-child { border-left: none; border-top: 1px solid var(--he-mist); }
}
.woocommerce-account #customer_login h2 {
  font-size: var(--he-text-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.woocommerce-account #customer_login form { border: none; padding: 0; margin: 0; border-radius: 0; }
.woocommerce-account #customer_login button[type="submit"] { width: 100%; padding: 14px 24px; }
.woocommerce-LostPassword a { font-size: var(--he-text-sm); border-bottom: 1px solid var(--he-mist); }
.woocommerce-account .woocommerce-privacy-policy-text { font-size: var(--he-text-sm); color: var(--he-ink-soft); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.he-footer {
  border-top: 1px solid var(--he-ink);
  margin-top: var(--he-section-gap);
  padding: var(--he-s24) 0 var(--he-s16);
}
.he-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--he-s24);
  padding-bottom: var(--he-s24);
}
@media (max-width: 700px) { .he-footer-grid { grid-template-columns: 1fr; } }

/* Brand mark above the footer blurb. Decorative: the site name follows in text. */
.he-footer-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--he-s12);
}

.he-footer h3 {
  font-size: var(--he-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--he-s12);
}
.he-footer ul { list-style: none; margin: 0; padding: 0; }
.he-footer li { margin-bottom: var(--he-s8); font-size: var(--he-text-sm); }
.he-footer p { font-size: var(--he-text-sm); color: var(--he-ink-soft); }

.he-footer-bottom {
  border-top: 1px solid var(--he-mist);
  padding-top: var(--he-s16);
  display: flex;
  justify-content: space-between;
  gap: var(--he-s16);
  font-size: var(--he-text-sm);
  color: var(--he-ink-soft);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Category tab filter (editorial sharp rectangles)                    */
/* ------------------------------------------------------------------ */

.he-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--he-s24);
}
.he-cat-tabs a {
  font-size: var(--he-text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  color: var(--he-ink);
  border-radius: 0;
}
.he-cat-tabs a.is-active {
  background: var(--he-ink);
  color: var(--he-paper);
}
.he-cat-tabs a:not(.is-active):hover { opacity: 0.65; }

/* ------------------------------------------------------------------ */
/* Header search: underlined editorial input                           */
/* ------------------------------------------------------------------ */

.he-search-form { display: flex; align-items: center; }
.he-search-form input[type="search"] {
  width: 140px;
  border: none;
  border-bottom: 1px solid var(--he-ink-soft);
  border-radius: 0;
  background: transparent;
  padding: 4px 2px;
  font-size: var(--he-text-sm);
}
.he-search-form input[type="search"]:focus { border-bottom-color: var(--he-ink); outline: none; }
.he-search-form button {
  background: none; border: none; padding: 4px; cursor: pointer; display: inline-flex;
}
.he-search-form button svg { width: 16px; height: 16px; stroke: var(--he-ink); fill: none; stroke-width: 1.5; }
@media (max-width: 900px) { .he-search-form input[type="search"] { width: 100px; } }

/* Stock status in ink, not WC green */
.woocommerce div.product .stock { color: var(--he-ink-soft); font-size: var(--he-text-sm); }

/* ------------------------------------------------------------------ */
/* Fonepay QR pay panel                                                */
/* ------------------------------------------------------------------ */

.fonepay-pay {
  max-width: 420px;
  margin: var(--he-s24) auto var(--he-section-gap);
  text-align: center;
  border: 1px solid var(--he-ink);
  padding: var(--he-s24) var(--he-s24) var(--he-s20);
}
.fonepay-pay__heading {
  font-size: var(--he-text-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--he-s4);
}
.fonepay-pay__amount { font-size: 26px; font-weight: 600; margin: 0 0 var(--he-s16); color: var(--he-accent); }
.fonepay-pay__qr { display: inline-block; padding: var(--he-s12); border: 1px solid var(--he-mist); }
.fonepay-pay__qr img, .fonepay-pay__qr canvas { margin: 0 auto; }
.fonepay-pay__status { font-size: var(--he-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: var(--he-s16) 0 var(--he-s8); color: var(--he-ink-soft); }
.fonepay-pay__status.is-paid { color: #1d7a3d; }
.fonepay-pay__status.is-failed { color: #8c2f2f; }
.fonepay-pay__hint { font-size: var(--he-text-sm); color: var(--he-ink-soft); margin: 0 auto; max-width: 34ch; }
.fonepay-pay .fonepay-pay__renew,
.woocommerce a.button.fonepay-pay__renew { display: none; margin-top: var(--he-s16); }
.fonepay-pay.is-expired .fonepay-pay__renew,
.woocommerce .fonepay-pay.is-expired a.button.fonepay-pay__renew { display: inline-flex; }
.fonepay-pay.is-expired .fonepay-pay__qr { opacity: 0.25; }
.fonepay-pay__status.is-expired { color: #8c2f2f; }