/* ============================================================
   PALETTE — warm ground, royal green
   ------------------------------------------------------------
   The prototype's ground was a cool lilac and its dark was a
   neutral #333333. Both are retuned here rather than edited into
   site.css, so the approved design stays intact and the change
   is one readable block to revisit or revert.

   A near-neutral off-white replaces the lilac family; deep green replaces
   the grey on every dark surface (topbar, footer, newsletter,
   sourcing band, buttons) and on type. Gold was already warm and
   is untouched, as are the dye swatches — those are product
   colours and must keep matching the goods.
   ============================================================ */
:root {
  /* Ground — off pure white, with too little spread to read as warm */
  --lilac:   #F1F1EE;   /* page ground — 3 points of spread: enough to keep
                           it off pure white, too little to read as warm */
  --lilac-2: #E6E6E2;   /* alternate band */
  --lilac-3: #F8F8F6;   /* card wash */
  --paper:   #FCFCFA;   /* paper, never pure white */

  /* Dark — royal green, carrying both surfaces and type */
  --ink:   #111F1A;     /* body, headings, dark surfaces */
  --ink-2: #0A1613;     /* deepest */
  --forest:#17302A;     /* campaign panel, lifted slightly so it reads apart */

  /* Warm greys and rules */
  --mute:   #67675F;
  --line:   #DFDFD9;
  --line-2: #CBCBC4;

  /* Gold unchanged — already warm, and sits well on green */
  --gold:   #A4863D;
  --gold-2: #C9AE72;
  --madder: #7A2E3A;

  /* The zari band bakes its ground into an SVG, so it is rebuilt
     in the new green with the same gold motif. */
  --zari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Crect width='26' height='14' fill='%23111F1A'/%3E%3Cpath d='M13 2.6l3.4 4.4-3.4 4.4-3.4-4.4z' fill='none' stroke='%23A4863D' stroke-width='.9'/%3E%3Cpath d='M0 .8h26M0 13.2h26' stroke='%23A4863D' stroke-width='.8'/%3E%3Ccircle cx='0' cy='7' r='1.1' fill='%23A4863D'/%3E%3Ccircle cx='26' cy='7' r='1.1' fill='%23A4863D'/%3E%3C/svg%3E");
}

/* ============================================================
   Theme additions on top of the design's site.css.
   site.css is kept as a faithful copy of the approved prototype;
   anything WordPress or WooCommerce specific belongs here.
   ============================================================ */

/* ---- Panel open state -------------------------------------
   WooCommerce replaces the #cart node on every fragment refresh,
   which strips .is-open. The open state is mirrored onto <body>,
   which is never replaced, so the panel stays put regardless.   */
body.sns-cart-open  #cart  { transform: none; }
body.sns-nav-open   #mnav  { transform: none; }
body.sns-guide-open #guide { transform: none; }
body.sns-panel-open .scrim { opacity: 1; visibility: visible; }

/* ---- WooCommerce notices ---------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--ui);
  font-size: 14px;
  background: var(--lilac-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  margin: 0 0 22px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.woocommerce-error { border-left-color: var(--madder); }

.woocommerce-message a,
.woocommerce-info a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Catalogue result count and ordering ------------------ */
.cat__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.cat__count {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--mute);
  margin: 0;
}

.cat__bar form { margin: 0; }

.cat__bar select {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 9px 14px;
  border-radius: 0;
  min-width: 190px;
}

/* ---- Pagination ------------------------------------------- */
.pager { margin-top: clamp(34px, 5vw, 64px); }

.pager ul,
.pager .page-numbers {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.pager li { list-style: none; }

.pager a.page-numbers,
.pager span.page-numbers {
  font-family: var(--ui);
  font-size: 13.5px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

.pager a.page-numbers:hover { border-color: var(--ink-2); }

.pager span.page-numbers.current {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--paper);
}

/* ---- Empty catalogue state -------------------------------- */
.cat__empty {
  padding: clamp(40px, 7vw, 90px) 0;
  text-align: center;
}

.cat__empty p {
  font-family: var(--ui);
  color: var(--mute);
  margin: 0 0 20px;
}

/* ---- Add to cart on catalogue cards ------------------------
   The prototype's card stopped at Quick view; a buyable card
   needs a button, styled to sit with the rest of the design.

   Every selector here carries .woocommerce (on <body>) and names
   the element. WooCommerce styles these links as
   ".woocommerce ... a.button" (0-2-1); a plain .card__right .button
   is 0-2-0 and loses background, padding and display to it, which
   leaves a grey box too narrow to hold its own label. */
.woocommerce .card__right a.button,
.woocommerce .card__right a.added_to_cart {
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.woocommerce .card__right a.button:hover,
.woocommerce .card__right a.added_to_cart:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--paper);
}

.woocommerce .card__right a.button.loading { opacity: .6; pointer-events: none; }

.woocommerce .card__right a.added_to_cart {
  border-color: var(--gold);
  color: var(--gold);
  margin-left: 8px;
}

/* ============================================================
   CATALOGUE FILTERS
   The prototype styled real checkboxes. These are links, so that
   filtering works with JavaScript off and every filtered view is
   a shareable URL — so the checkbox states are recreated here
   against .is-on, matching site.css value for value.
   ============================================================ */

.fcheck { text-decoration: none; color: var(--ink); }
.fcheck:hover { color: var(--gold); }

.fcheck__box {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid var(--line-2);
  background: var(--paper);
  position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.fcheck.is-on .fcheck__box {
  background: var(--ink);
  border-color: var(--ink);
}

.fcheck.is-on .fcheck__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(42deg);
}

.fcheck__label { min-width: 0; }

.fcheck__n {
  margin-left: auto;
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* Parent rows sit inside a flex row with the disclosure toggle. */
.fnode__row { display: flex; align-items: center; gap: 6px; }
.fnode__row .fcheck { flex: 1 1 auto; }

.fnode__toggle {
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mute);
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  transition: transform .25s var(--ease), color .2s var(--ease);
}

.fnode__toggle:hover { color: var(--ink); }
.fnode.is-open .fnode__toggle { transform: rotate(90deg); }

/* ---- Colour swatches ---- */
.fswatch__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.fswatch__item i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, .14);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.fswatch__item:hover i { transform: translateY(-2px); }

.fswatch__item.is-on i {
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, .14),
              0 0 0 2px var(--paper),
              0 0 0 3.5px var(--ink);
}

.fswatch__item small { font-size: 10.5px; color: var(--mute); line-height: 1.2; }
.fswatch__item .fcheck__n { margin: 0; font-size: 10px; }

/* ---- Size chips ---- */
.fsize__item { text-decoration: none; }

.fsize__item span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-size: 12.5px;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.fsize__item:hover span { border-color: var(--ink); }

.fsize__item.is-on span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---- Price ---- */
.frange__go {
  margin-top: 12px;
  width: 100%;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.frange__go:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }

.clearall { text-decoration: none; }

/* ---- Active filter chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chips:empty { display: none; }

.chips .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}

.chips .pill span[aria-hidden] {
  font-size: 15px;
  line-height: 1;
  color: var(--mute);
  transition: color .2s var(--ease);
}

.chips .pill:hover span[aria-hidden] { color: var(--madder); }

/* ---- Mobile filter sheet ---- */
.fsheet__head { display: none; }

@media (max-width: 900px) {
  .shop { grid-template-columns: minmax(0, 1fr); }

  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(92vw, 360px);
    background: var(--paper);
    z-index: 95;
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
    display: flex;
    flex-direction: column;
    top: 0;
  }

  body.sns-filters-open .filters,
  .filters.is-open { transform: none; }

  .fsheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px var(--gut);
    border-bottom: 1px solid var(--line);
  }

  .filters__scroll { flex: 1; overflow-y: auto; padding: 0 var(--gut); }
  .filters__foot { padding: 16px var(--gut) 24px; border-top: 1px solid var(--line); }
}

@media (min-width: 901px) {
  .filters__foot { display: none; }
  .fopen { display: none; }
}

/* ============================================================
   PRODUCT DETAIL
   The prototype used radio inputs for colour and size. These
   products are simple with attributes rather than variable with
   variations, so the values are shown as specification and link
   to the matching catalogue view. Same visual language, no dead
   controls that reprice nothing.
   ============================================================ */

.swrow__item { display: block; text-decoration: none; }

.swrow__item i {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, .14);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.swrow__item:hover i {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, .14),
              0 0 0 2px var(--lilac),
              0 0 0 3.5px var(--ink);
}

.szrow__item { text-decoration: none; }

.szrow__item span {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-size: 13.5px;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

a.szrow__item:hover span { border-color: var(--ink); }

/* ---- Woo's add-to-cart form inside the design's buy row ---- */
.pdp__buy form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.pdp__buy .quantity { display: flex; }

.pdp__buy .quantity input[type="number"] {
  width: 74px;
  height: 52px;
  text-align: center;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
}

/* Woo's ".woocommerce button.button.alt" is 0-3-1 and paints this
   its brand purple; these match it at 0-3-1 and win on order. */
.woocommerce .pdp__buy button[type="submit"],
.woocommerce .pdp__buy button.single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 0 28px;
  font-family: var(--sc);
  font-size: 13px;
  letter-spacing: .1em;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.woocommerce .pdp__buy button[type="submit"]:hover,
.woocommerce .pdp__buy button.single_add_to_cart_button:hover { background: transparent; color: var(--ink-2); }

.woocommerce .pdp__buy button.single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

/* ---- Variable product selectors, when they exist ---- */
.pdp__info table.variations { width: 100%; margin: 22px 0 0; border-collapse: collapse; }
.pdp__info table.variations th,
.pdp__info table.variations td { padding: 8px 0; text-align: left; vertical-align: middle; }

.pdp__info table.variations select {
  width: 100%;
  font-family: var(--ui);
  font-size: 13.5px;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 0;
}

/* ---- Group-order block ---- */
.pdp__group {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--forest);
  color: #EFEDE4;
}

.pdp__group .eyb { color: var(--gold-2); display: block; }

.pdp__group-lede {
  font-family: var(--dsp);
  font-size: 19px;
  margin-top: 10px;
  color: #EFEDE4;
}

.pdp__group-meta { margin-top: 10px; font-size: 13px; line-height: 1.6; color: rgba(239, 237, 228, .78); }
.pdp__group-meta a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }

.pdp__group .camp__bar {
  position: relative;
  height: 3px;
  background: rgba(239, 237, 228, .22);
  margin-top: 16px;
  overflow: hidden;
}

.pdp__group .camp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold-2);
  transition: width 1.1s var(--ease);
}

/* ---- Breadcrumb ---- */
.crumb {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--mute);
  padding-top: 26px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.crumb a { color: var(--mute); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* ---- Reviews ---- */
#reviews .commentlist { list-style: none; padding: 0; margin: 0 0 28px; }

#reviews .commentlist li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

#reviews .comment-form { display: grid; gap: 14px; max-width: 620px; }
#reviews .comment-form label { font-family: var(--ui); font-size: 13px; color: var(--mute); }

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
  width: 100%;
  font-family: var(--ui);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 0;
}

#reviews .comment-form .submit {
  justify-self: start;
  font-family: var(--sc);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 13px 26px;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  cursor: pointer;
  border-radius: 0;
}

#reviews .comment-form .submit:hover { background: transparent; color: var(--ink-2); }

/* A product with no gallery has no thumb column to fill. */
.gal > .gal__main:only-child { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .gal { grid-template-columns: minmax(0, 1fr); }
  .gal__thumbs { flex-direction: row; overflow-x: auto; order: 2; }
}

/* ---- Page head and prose ---------------------------------- */
.pagehead { padding: 26px 0 0; }
.pagehead h1 { font-family: var(--dsp); font-size: clamp(30px, 4vw, 52px); margin-top: 14px; font-weight: 400; }
.pagehead p { margin-top: 14px; color: var(--mute); font-size: 15px; line-height: 1.7; max-width: 62ch; }

.prose { max-width: 68ch; font-size: 15.5px; line-height: 1.8; color: var(--ink); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-family: var(--dsp); font-size: 26px; margin-top: 34px; font-weight: 400; }
.prose h3 { font-family: var(--dsp); font-size: 20px; margin-top: 26px; font-weight: 400; }
.prose a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }

.childlist { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 10px; max-width: 68ch; }

.childlist a {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--ui);
  font-size: 14.5px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.childlist a:hover { border-color: var(--ink-2); background: var(--lilac-3); }

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.h-sm { font-family: var(--dsp); font-size: 19px; font-weight: 400; margin-bottom: 10px; }

/* ---- Group-order countdown and terms ---------------------- */
.camp__clock {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.camp__clock div { text-align: center; min-width: 46px; }

.camp__clock b {
  display: block;
  font-family: var(--dsp);
  font-size: 26px;
  font-weight: 400;
  color: #EFEDE4;
  font-variant-numeric: tabular-nums;
}

.camp__clock small {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(239, 237, 228, .6);
  margin-top: 2px;
}

.pdp__group-terms {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(239, 237, 228, .18);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(239, 237, 228, .82);
}

/* ---- Group-order run cards -------------------------------- */
.runs { display: grid; gap: 22px; }

.run {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
  border: 1px solid var(--line);
  padding: 20px;
  background: var(--paper);
}

.run--missed { opacity: .62; }

.run__media { display: block; aspect-ratio: 3 / 4.1; overflow: hidden; background: var(--lilac-3); }
.run__media img { width: 100%; height: 100%; object-fit: cover; }

.run__body h3 { font-family: var(--dsp); font-size: 23px; font-weight: 400; margin: 8px 0 0; }
.run__body h3 a { text-decoration: none; color: var(--ink-2); }
.run__product { font-size: 13.5px; color: var(--mute); margin-top: 4px; }
.run__meta { font-size: 13px; color: var(--mute); margin-top: 10px; }

.run .camp__bar {
  position: relative;
  height: 3px;
  background: var(--line-2);
  margin-top: 16px;
  overflow: hidden;
}

.run .camp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold);
  transition: width 1.1s var(--ease);
}

.run .btn { margin-top: 16px; display: inline-flex; }

.run__terms {
  margin-top: 26px;
  font-size: 13px;
  color: var(--mute);
  max-width: 70ch;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .run { grid-template-columns: minmax(0, 1fr); }
  .run__media { max-width: 200px; }
}

/* The header, nav and one placeholder hold the old cool palette as
   literals rather than tokens, so a token swap alone leaves them behind. */
.hdr,
.pnav { background: rgba(241, 241, 238, .94); }

.req__form input::placeholder { color: #97978F; }

/* ============================================================
   CART & CHECKOUT
   The prototype's cart markup is reproduced by the WooCommerce
   template overrides in woocommerce/. What is added here is the
   Woo-specific furniture the prototype never had: a real
   quantity input, checkout fields and the order review table.
   ============================================================ */

/* Woo renders <div class="quantity"><input type=number>, not the
   prototype's button stepper. Style it to sit in the same slot. */
.cline__acts .quantity { display: inline-flex; }

.cline__acts .quantity input[type="number"] {
  width: 74px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--ui);
  font-size: 14.5px;
  color: var(--ink);
}

/* Save for later / Remove sit together whether button or link. */
.cline__link {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--mute);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 0 0 1px;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.cline__link:hover { color: var(--madder); border-color: var(--madder); }

.cline--saved { opacity: .82; }

.sns-update-cart {
  margin-top: 18px;
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .04em;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.sns-update-cart:hover { border-color: var(--ink-2); background: var(--lilac-3); }
.sns-update-cart[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- Checkout ---- */
.checkout.cartpg { align-items: start; }
.checkout__main { min-width: 0; }

.checkout__block { margin-bottom: clamp(28px, 3.4vw, 44px); }

.checkout__block h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--sc);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  margin: 0 0 20px;
  font-weight: 400;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.sns-form {
  display: grid;
  gap: 16px;
}

.form-row,
.sns-field { margin: 0; display: block; }

.form-row label,
.sns-field label {
  display: block;
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--mute);
  margin-bottom: 6px;
}

.form-row .required { color: var(--madder); text-decoration: none; }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row textarea,
.form-row select,
.sns-field input,
.sns-field textarea,
.select2-container .select2-selection {
  width: 100%;
  font-family: var(--ui);
  font-size: 14.5px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 0;
  height: auto;
  transition: border-color .2s var(--ease);
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus,
.sns-field input:focus { outline: none; border-color: var(--ink-2); }

.form-row-first, .form-row-last { display: block; }

@media (min-width: 620px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .form-row-wide, .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
}

.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; }
.woocommerce-form__label-for-checkbox input { width: 15px; height: 15px; }

/* ---- Order review ---- */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 18px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 11px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }

.woocommerce-checkout-review-order-table thead th {
  font-family: var(--sc);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--mute);
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
  font-family: var(--dsp);
  font-size: 19px;
  border-bottom: 0;
  padding-top: 16px;
}

.product-quantity { color: var(--mute); }

/* ---- Payment ---- */
.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--line);
}

.woocommerce-checkout-payment ul.payment_methods li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout-payment label { font-family: var(--ui); font-size: 14px; }

.woocommerce-checkout-payment .payment_box {
  margin-top: 12px;
  padding: 14px;
  background: var(--lilac-3);
  font-size: 13px;
  color: var(--mute);
}

#place_order,
.woocommerce-checkout-payment #place_order {
  width: 100%;
  min-height: 54px;
  font-family: var(--sc);
  font-size: 13px;
  letter-spacing: .1em;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}

#place_order:hover { background: transparent; color: var(--ink-2); }

.woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--mute); margin-top: 14px; line-height: 1.6; }
.woocommerce-terms-and-conditions-wrapper { margin-top: 14px; font-size: 12.5px; }

/* ---- Coupon / login toggles above checkout ---- */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle { margin-bottom: 18px; }

.checkout_coupon,
.woocommerce-form-login {
  border: 1px solid var(--line);
  padding: 20px;
  margin-bottom: 22px;
  background: var(--lilac-3);
}

.checkout_coupon .form-row { margin-bottom: 12px; }

@media (max-width: 900px) {
  .checkout.cartpg { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Catalogue view toggle -------------------------------- */
.viewtog { display: inline-flex; border: 1px solid var(--line-2); }

.viewtog a {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--mute);
  transition: background .2s var(--ease), color .2s var(--ease);
}

.viewtog a + a { border-left: 1px solid var(--line-2); }
.viewtog a:hover { color: var(--ink); }
.viewtog a.is-on { background: var(--ink-2); color: var(--paper); }

/* List view reflows the same card, it does not need a second template. */
.grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; }

.grid--list .card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.grid--list .card figure { aspect-ratio: 3 / 4.1; }
.grid--list .card__body { padding: 0; }
.grid--list .card__right { text-align: right; }
.grid--list .card__quick { display: none; }

@media (max-width: 620px) {
  .grid--list .card { grid-template-columns: 110px minmax(0, 1fr); }
  .grid--list .card__right { grid-column: 2; text-align: left; }
}

/* ---- Search --------------------------------------------- */
.sns-searchpanel {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  z-index: 96;
  transform: translateY(-100%);
  transition: transform .38s var(--ease);
  padding: 26px 0;
}

body.sns-search-open .sns-searchpanel,
.sns-searchpanel.is-open { transform: none; }

.sns-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.sns-search input[type="search"] {
  flex: 1 1 260px;
  font-family: var(--ui);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 0;
  color: var(--ink);
}

.sns-search input[type="search"]:focus { outline: none; border-color: var(--ink-2); }

.sns-search button[type="submit"] {
  font-family: var(--sc);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 13px 24px;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  cursor: pointer;
}

.sns-search button[type="submit"]:hover { background: transparent; color: var(--ink-2); }

button.search-open { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }

/* ---- Form feedback -------------------------------------- */
.sns-formnote { margin-top: 14px; font-size: 13.5px; }
.sns-formnote.is-ok { color: var(--gold-2); }
.sns-formnote.is-bad { color: var(--madder); }
.nl .sns-formnote.is-bad { color: #E8A0A8; }

/* ---- Shipping calculator in the summary ------------------- */
.summary .woocommerce-shipping-totals,
.summary .shipping { display: block; }

.summary .woocommerce-shipping-totals th,
.summary .shipping th {
  display: block;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--mute);
  text-align: left;
  padding: 0 0 6px;
}

.summary ul#shipping_method {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.summary ul#shipping_method li { padding: 4px 0; font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.summary .woocommerce-shipping-destination { font-size: 12.5px; color: var(--mute); margin: 6px 0; line-height: 1.5; }

.summary .shipping-calculator-button {
  font-size: 12.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
}

.summary .shipping-calculator-form { margin-top: 12px; display: grid; gap: 10px; }

.summary .shipping-calculator-form input,
.summary .shipping-calculator-form select,
.summary .shipping-calculator-form .select2-container .select2-selection {
  width: 100%;
  font-family: var(--ui);
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 0;
}

.summary .shipping-calculator-form button {
  font-family: var(--ui);
  font-size: 12.5px;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  justify-self: start;
}

.summary .shipping-calculator-form button:hover { border-color: var(--ink-2); background: var(--lilac-3); }

/* Woo prints a bare table for totals in some states; keep it in the grid. */
.summary table, .summary tbody, .summary tr, .summary th, .summary td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
}

.sns-checkout-notices { padding-top: 22px; }
.sns-checkout-notices:empty { display: none; }

.cart__ratenote {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.6;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 4px;
}

/* ============================================================
   MY ACCOUNT
   ------------------------------------------------------------
   WooCommerce's own markup, styled. No myaccount templates are
   overridden, so a plugin update cannot leave a stale copy of
   Woo's markup behind in the theme.

   Everything is scoped to .woocommerce-account. Woo's class
   names here are generic — .button, .col2-set, .u-column1 —
   and unscoped they would reach the catalogue, where
   .card__right .button and .pdp__buy already style buttons.
   ============================================================ */

/* ---- Layout ------------------------------------------------
   page.php wraps page content in .prose, which is capped at
   68ch for reading. The account area is an interface, not an
   article, so the cap and the flow margins come off. */
.woocommerce-account .prose { max-width: none; font-size: 15px; }
.woocommerce-account .prose > * + * { margin-top: 0; }

/* The grid goes on div.woocommerce, not .prose: the shortcode wraps the
   nav and the content in that div, so .prose has a single child and a grid
   there would produce one column. :has() keeps the grid off the logged-out
   page, where the same wrapper holds only the login form — without it the
   form would be squeezed into a 210px first column. Where :has() is
   unsupported the columns simply stack, which is the mobile layout. */
/* woocommerce.css clearfixes this very wrapper on this very page:
   .woocommerce-account .woocommerce::before/::after {content:" ";display:table}.
   In a grid container those pseudo-elements become real grid items — the
   ::before takes cell one and pushes the nav into column two — so they are
   removed before the grid is declared. */
.woocommerce-account .prose .woocommerce::before,
.woocommerce-account .prose .woocommerce::after { content: none; }

@media (min-width: 900px) {
  .woocommerce-account .prose .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 56px);
    align-items: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: 132px; }
}

/* woocommerce-layout.css floats the nav left at 30% and the content right
   at 68% (both 0-2-0). Inside the grid the floats are ignored but the
   widths are not; below the grid breakpoint the two floats sit side by
   side and overlap. Reset both — .prose lifts this over Woo's selector. */
.woocommerce-account .prose .woocommerce-MyAccount-navigation,
.woocommerce-account .prose .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

/* ---- Account navigation ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child { border-top: 1px solid var(--line); }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  position: relative;
  display: block;
  padding: 13px 0;
  font-family: var(--sc);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--ink-2); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--ink-2); }

/* The zari diamond, reused as the current-page marker. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--gold);
  transform: rotate(45deg);
}

@media (max-width: 899px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 32px; }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { left: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { padding-left: 16px; }
}

/* ---- Buttons ----------------------------------------------
   There is no generic .button rule in this theme — buttons are
   styled per context — which is why Woo's render stock grey.
   One scoped rule covers login, orders, addresses and details. */
.woocommerce-account .prose a.button,
.woocommerce-account .prose button.button,
.woocommerce-account .prose input[type="submit"],
.woocommerce-account .prose button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sc);
  font-size: 12.5px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.woocommerce-account .prose a.button:hover,
.woocommerce-account .prose button.button:hover,
.woocommerce-account .prose input[type="submit"]:hover,
.woocommerce-account .prose button[type="submit"]:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Buttons inside a table row are furniture, not calls to action. */
.woocommerce-account .prose .woocommerce-orders-table a.button { padding: 9px 16px; font-size: 11px; }

/* ---- Login / register ---- */
.woocommerce-account #customer_login h2 {
  font-family: var(--dsp);
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 400;
  margin: 0 0 18px;
}

@media (min-width: 760px) {
  .woocommerce-account #customer_login.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
  }
}

/* woocommerce-layout.css floats .col-1/.col-2 at 48% and adds a clearfix
   ::before/::after. Inside a grid container those pseudo-elements become
   grid items and push the real columns out of place, and the 48% widths
   leave each column half empty. Both are neutralised here, and again for
   the addresses grid below. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { content: none; }

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  float: none;
  width: auto;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 32px);
}

.woocommerce-account #customer_login .form-row + .form-row { margin-top: 16px; }

.woocommerce-account .woocommerce-form-login__rememberme { margin: 20px 0 18px; }

.woocommerce-account .woocommerce-LostPassword {
  margin-top: 16px;
  font-size: 13px;
}

.woocommerce-account .woocommerce-LostPassword a { color: var(--mute); }
.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--ink-2); }

/* ---- Orders table ------------------------------------------
   .woocommerce table.shop_table (0-2-1) and its td/th rules
   (0-2-2) outrank a plain .woocommerce-account selector, so
   these are prefixed with .prose to clear them, and Woo's
   separate borders, radius and margin are reset explicitly. */
.woocommerce-account .prose table.woocommerce-orders-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
}

.woocommerce-account .prose table.woocommerce-orders-table th,
.woocommerce-account .prose table.woocommerce-orders-table td {
  padding: 14px 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  vertical-align: middle;
  line-height: 1.5;
}

.woocommerce-account .prose table.woocommerce-orders-table thead th {
  font-family: var(--sc);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line-2);
}

.woocommerce-account .prose table.woocommerce-orders-table td:last-child,
.woocommerce-account .prose table.woocommerce-orders-table th:last-child { text-align: right; }

/* Order state, carried on the row class Woo already emits. Gold is
   deliberately not used: it measures 3.07:1 on this ground and would
   fail AA at this size. */
.woocommerce-account .prose .woocommerce-orders-table__cell-order-status { font-variant-numeric: tabular-nums; }
.woocommerce-account .prose .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--forest); }
.woocommerce-account .prose .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-account .prose .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: var(--madder); }
.woocommerce-account .prose .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .prose .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--mute); }

/* Stack on narrow screens using the data-title Woo emits for
   shop_table_responsive. */
@media (max-width: 640px) {
  .woocommerce-account .prose table.woocommerce-orders-table thead { display: none; }
  .woocommerce-account .prose table.woocommerce-orders-table tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .woocommerce-account .prose table.woocommerce-orders-table th,
  .woocommerce-account .prose table.woocommerce-orders-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-account .prose table.woocommerce-orders-table th::before,
  .woocommerce-account .prose table.woocommerce-orders-table td::before {
    content: attr(data-title);
    font-family: var(--sc);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: left;
  }
}

/* ---- Addresses ---- */
.woocommerce-account .prose .woocommerce-Addresses { display: grid; gap: clamp(18px, 2.4vw, 30px); }

@media (min-width: 700px) {
  .woocommerce-account .prose .woocommerce-Addresses.col2-set { grid-template-columns: 1fr 1fr; }
}

.woocommerce-account .woocommerce-MyAccount-content .col2-set::before,
.woocommerce-account .woocommerce-MyAccount-content .col2-set::after { content: none; }

/* .woocommerce .col2-set .col-1 is 0-3-0 and floats these at 48%,
   so the reset needs a fourth class to clear it. */
.woocommerce-account .prose .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(18px, 2vw, 26px);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--sc);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  margin: 0;
}

.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
}

.woocommerce-account .woocommerce-Address-title .edit { font-size: 12.5px; white-space: nowrap; }

/* ---- Account details ---- */
.woocommerce-account .woocommerce-EditAccountForm .form-row + .form-row { margin-top: 16px; }

.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--line);
  padding: clamp(16px, 2vw, 24px);
  margin: 28px 0 0;
}

.woocommerce-account .woocommerce-EditAccountForm legend {
  font-family: var(--sc);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0 10px;
}

/* ---- Dashboard and shared content ---- */
.woocommerce-account .woocommerce-MyAccount-content > p { max-width: 62ch; }
.woocommerce-account .woocommerce-MyAccount-content > p + p { margin-top: 14px; }

.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info { margin-bottom: 24px; }

.woocommerce-account .woocommerce-pagination { margin-top: 26px; }
.woocommerce-account .woocommerce-pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; }

/* ============================================================
   ADD-TO-CART FORM vs THE CART DRAWER
   ------------------------------------------------------------
   site.css styles the slide-out bag as `.cart`:

     .cart { position:fixed; inset:0 0 0 auto; width:min(92vw,420px);
             transform:translateX(100%) }

   The drawer is aside#cart (that is the very selector the cart
   fragment replaces), but WooCommerce's buy form is
   <form class="cart"> — so every add-to-cart form matched the
   drawer rule and rendered as a fixed panel slid fully off the
   right edge, collapsing its container to zero height. The store
   had no visible buy button on any product.

   The reset is global and element-qualified: `form.cart` (0-1-1)
   beats `.cart` (0-1-0) without needing a .woocommerce ancestor,
   so it holds for every product type and every context Woo emits
   a buy form — simple, variable, grouped and external products,
   and the [add_to_cart] / [product_page] shortcodes wherever they
   are placed. site.css stays a faithful copy of the prototype, so
   the collision is undone here rather than edited there.
   ============================================================ */
form.cart {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  background: none;
  z-index: auto;
  transform: none;
  transition: none;
  display: block;
  /* .cart also sets flex-direction:column for the drawer's stacked
     layout. Resetting display alone leaves that behind, and any rule
     that later makes the form a flex row silently gets a column. */
  flex-direction: row;
}

/* The buy button, wherever the form appears. Woo paints it with
   .woocommerce button.button.alt (0-3-1) in its brand purple, so this
   is qualified enough to clear that. */
.woocommerce form.cart button.single_add_to_cart_button.button {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  border-radius: 0;
  font-family: var(--sc);
  font-size: 13px;
  letter-spacing: .1em;
  min-height: 52px;
  padding: 0 28px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.woocommerce form.cart button.single_add_to_cart_button.button:hover {
  background: transparent;
  color: var(--ink-2);
}

.woocommerce form.cart button.single_add_to_cart_button.button.disabled,
.woocommerce form.cart button.single_add_to_cart_button.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- Product-page layout ----------------------------------
   .pdp__buy was written for quantity + button as direct children;
   WooCommerce wraps them in the form, so the form carries the row. */
.pdp__buy form.cart {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

/* A variable product's form holds the size table and the price/button
   wrap, which belong on their own lines rather than in a row. */
.pdp__buy form.variations_form {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.pdp__buy form.variations_form table.variations { width: 100%; }

.pdp__buy .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Grouped products list their children in a table inside the form. */
.pdp__buy form.cart table.woocommerce-grouped-product-list {
  width: 100%;
  border-collapse: collapse;
}

.pdp__buy form.cart table.woocommerce-grouped-product-list td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* ============================================================
   VARIATION CHIPS + QUANTITY STEPPER
   ------------------------------------------------------------
   Woo's variations table is a <table> with the attribute name in
   a <th class="label"> beside a native <select>. site.js turns
   the select into the prototype's .szrow chips; this lays the
   table out like the theme's own .opt block and hides the select
   once the chips exist — never before, so a JS failure leaves a
   working select behind rather than nothing.
   ============================================================ */
.pdp__buy form.variations_form table.variations,
.pdp__buy form.variations_form table.variations tbody,
.pdp__buy form.variations_form table.variations tr,
.pdp__buy form.variations_form table.variations th,
.pdp__buy form.variations_form table.variations td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
}

.pdp__buy form.variations_form table.variations tr + tr { margin-top: 22px; }

.pdp__buy form.variations_form table.variations th.label {
  margin-bottom: 11px;
}

.pdp__buy form.variations_form table.variations th.label label {
  font-family: var(--sc);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* Hidden only once the chips are in place. */
.pdp__buy form.variations_form.sns-chips .variations select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.szrow--variation { margin-top: 0; }

/* The chip's own look comes from .szrow in site.css — the checked and
   struck-through disabled states are already defined there. */
.szrow--variation input:disabled + span { text-decoration: line-through; }

.pdp__buy .reset_variations {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--mute);
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease);
}

.pdp__buy .reset_variations:hover { color: var(--ink-2); }

/* Woo prints the chosen variation's price again above the button; the price
   is already large at the top of the page, so keep this quiet. */
.pdp__buy .woocommerce-variation-price { margin: 4px 0 14px; font-size: 15px; }
.pdp__buy .woocommerce-variation-availability { font-size: 13px; color: var(--mute); }

/* ---- Quantity stepper ---- */
.pdp__buy .quantity.qtystep {
  display: inline-flex;
  align-items: stretch;
  height: 52px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  flex: 0 0 auto;
}

.pdp__buy .quantity.qtystep .qtystep__btn {
  width: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}

.pdp__buy .quantity.qtystep .qtystep__btn:hover { background: var(--lilac-3); color: var(--ink-2); }

.pdp__buy .quantity.qtystep input[type="number"] {
  width: 46px;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink-2);
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp__buy .quantity.qtystep input[type="number"]::-webkit-outer-spin-button,
.pdp__buy .quantity.qtystep input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp__buy .quantity.qtystep input[type="number"]:focus { outline: none; }
.pdp__buy .quantity.qtystep:focus-within { border-color: var(--ink-2); }

/* ---- Add to cart, before a size is chosen ----
   Woo's default is a flat mid-grey that reads as broken rather than
   as waiting. A ghost button reads as "not yet". */
.woocommerce form.cart button.single_add_to_cart_button.button.disabled,
.woocommerce form.cart button.single_add_to_cart_button.button:disabled {
  background: transparent;
  border-color: var(--line-2);
  color: var(--mute);
  opacity: 1;
  cursor: not-allowed;
}

/* The theme prints its own stock line (.pdp__stock, "8 in stock · Held in
   California") directly beneath the buy block, so Woo's own stock and
   variation-availability lines are duplicates. Stock is managed on the
   parent, so every variation shares that status and nothing is lost. */
.pdp__buy > p.stock,
.pdp__buy .woocommerce-variation-availability { display: none; }

/* ============================================================
   CHECKOUT + NOTICE CORRECTIONS
   ============================================================ */

/* ---- Notice icons ----
   Woo pins an icon-font glyph absolutely at left:1.5em and reserves
   room for it with padding-left:3.5em. The theme's own padding is
   14px 18px, so the glyph landed on top of the message text
   ("S✔ved for later"). This design carries meaning in the coloured
   left rule rather than in icons, so the glyph goes. */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  content: none;
  display: none;
}

/* Woo also sets position:relative for that glyph; nothing else needs it. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error { position: static; }

/* "View cart" and friends inside a notice. Woo's .woocommerce a.button
   is 0-2-1, so these name the element to clear it. */
body .woocommerce-message a.button,
body .woocommerce-info a.button,
body .woocommerce-error a.button {
  margin-left: auto;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink-2);
  font-family: var(--sc);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

body .woocommerce-message a.button:hover,
body .woocommerce-info a.button:hover,
body .woocommerce-error a.button:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--paper);
}

/* ---- Checkout order review ----
   Same collision as the account orders table: .woocommerce
   table.shop_table (0-2-1) and its td/th (0-2-2) outrank the theme's
   plain class selectors, so Woo's 5px radius, separate borders and
   bold headers were showing through. */
body .woocommerce table.woocommerce-checkout-review-order-table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 18px;
  width: 100%;
}

body .woocommerce table.woocommerce-checkout-review-order-table th,
body .woocommerce table.woocommerce-checkout-review-order-table td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

body .woocommerce table.woocommerce-checkout-review-order-table th:last-child,
body .woocommerce table.woocommerce-checkout-review-order-table td:last-child { text-align: right; }

body .woocommerce table.woocommerce-checkout-review-order-table thead th {
  font-family: var(--sc);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line-2);
}

body .woocommerce table.woocommerce-checkout-review-order-table tfoot th,
body .woocommerce table.woocommerce-checkout-review-order-table tfoot td { font-size: 14px; }

body .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th,
body .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 16px;
  border-bottom: 0;
  padding-top: 14px;
}

/* The theme stacks everything inside .summary:

     .summary table, .summary tbody, .summary tr,
     .summary th, .summary td { display:block }

   which is right for the cart's totals, where each row is a
   label/value pair. Checkout's order review shares that panel but is
   a real two-column table — product against subtotal — so stacking
   put every price on its own line under its item. Restore table
   display for this one table only. */
body .woocommerce .summary table.woocommerce-checkout-review-order-table { display: table; }
body .woocommerce .summary table.woocommerce-checkout-review-order-table thead { display: table-header-group; }
body .woocommerce .summary table.woocommerce-checkout-review-order-table tbody { display: table-row-group; }
body .woocommerce .summary table.woocommerce-checkout-review-order-table tfoot { display: table-footer-group; }
body .woocommerce .summary table.woocommerce-checkout-review-order-table tr { display: table-row; }
body .woocommerce .summary table.woocommerce-checkout-review-order-table th,
body .woocommerce .summary table.woocommerce-checkout-review-order-table td { display: table-cell; }

/* ============================================================
   WISHLIST
   ============================================================ */

/* ---- The heart ---- */
.card figure { position: relative; }

.heart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(252, 252, 250, .92);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.heart:hover { border-color: var(--ink-2); color: var(--ink-2); }
.heart.is-busy { opacity: .5; pointer-events: none; }

/* Filled once saved — the madder is the theme's one "live" accent. */
.heart.is-on { color: var(--madder); border-color: var(--madder); }
.heart.is-on svg path { fill: currentColor; }

/* On the product page it sits in the flow under the buy block, with a label,
   so it reads as a considered action rather than a floating icon. */
.heart--pdp {
  position: static;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 9px;
  margin-top: 16px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--mute);
}

.heart--pdp:hover { color: var(--ink-2); border-color: transparent; }
.heart--pdp.is-on { color: var(--madder); border-color: transparent; }

/* ---- The account page ---- */
.wish__count {
  font-family: var(--sc);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 18px;
}

.wish { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.wish__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.wish__row:first-child { border-top: 1px solid var(--line); }

.wish__img { margin: 0; }
.wish__img img { width: 100%; height: auto; display: block; }

.wish__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.wish__body h3 { font-family: var(--dsp); font-size: 19px; font-weight: 400; margin: 0; }
.wish__meta { font-size: 12.5px; color: var(--mute); }
.wish__price { font-family: var(--dsp); font-size: 16px; }

.wish__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.wish__acts .btn { padding: 10px 20px; font-size: 11.5px; }

.wish__remove {
  font-size: 12.5px;
  color: var(--mute);
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease);
}

.wish__remove:hover { color: var(--madder); }
.wish__sold { font-size: 12.5px; color: var(--madder); }

.wish__empty { padding: 10px 0 6px; }
.wish__empty h2 { font-family: var(--dsp); font-size: 24px; font-weight: 400; margin: 0 0 10px; }
.wish__empty p { color: var(--mute); max-width: 46ch; margin: 0 0 20px; }

@media (max-width: 520px) {
  .wish__row { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
}

/* ---- Under-development bar --------------------------------
   Fixed to the bottom of every page while SNS_UNDER_DEVELOPMENT
   is on. Sits above the sticky header (60) but below the scrim
   (80) and the panels, so an open bag or filter sheet covers it.
   The body is padded by the bar's height so the footer's last
   line is never hidden behind it.                              */
body.sns-has-devbar {
  --devbar-h: 40px;
  padding-bottom: calc(var(--devbar-h) + env(safe-area-inset-bottom, 0px));
}

.devbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: var(--ink);
  color: #EDE9E0;
  border-top: 1px solid var(--gold);
  font-size: 12.5px;
  letter-spacing: .04em;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.devbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 12px;
  min-height: var(--devbar-h);
  text-align: center;
}

.devbar b {
  color: var(--gold-2);
  font-family: var(--sc);
  font-weight: 400;
  letter-spacing: .1em;
}

@media (max-width: 520px) {
  body.sns-has-devbar { --devbar-h: 54px; }
  .devbar .wrap { flex-direction: column; justify-content: center; }
}

@media print {
  .devbar { display: none; }
  body.sns-has-devbar { padding-bottom: 0; }
}

/* ---- Phone header -----------------------------------------
   Menu, Search, the wordmark, Account, Wishlist and Bag need
   about 520px side by side. Below that the row overflowed the
   screen, which also widens the viewport that fixed elements
   (the bar above) pin to. Account and Wishlist drop out here;
   both stay reachable from the Menu panel.                     */
@media (max-width: 560px) {
  .hdr__r a { display: none; }
}

/* Tighter gaps so the row also fits 360px-wide phones. */
@media (max-width: 400px) {
  .hdr__bar { gap: 10px; }
  .hdr__l { gap: 12px; }
}