/*
 * WooCommerce, wearing the design's clothes.
 *
 * The theme dequeues woocommerce.css entirely — the design supplies its own
 * cart, checkout and account treatments and Woo's stylesheet fights them on
 * specificity. This file maps the WooCommerce classes that have no design
 * equivalent onto the design system, using its tokens only. No hex values and
 * no pixel values that a token already covers, per CLAUDE.md.
 */

/* ---- notices ------------------------------------------------------------
   WooCommerce raises these from PHP (an add-to-cart refusal, a stale cart,
   a pricing-window change). Without a style they render as unmarked text and
   a delegate misses them entirely. They borrow .alert's shape. */
.woocommerce-notices-wrapper { margin: 0 0 var(--gap); }
.woocommerce-notices-wrapper:empty { margin: 0; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r);
  border: var(--bw) solid;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  margin: 0 0 var(--gap);
  list-style: none;
}

.woocommerce-message { background: var(--ok-tint); border-color: rgba(30,122,70,.22); color: #1B5C36; }
.woocommerce-info    { background: var(--gold-tint); border-color: rgba(176,128,31,.24); color: var(--gold-ink); }
.woocommerce-error   { background: var(--mar-tint); border-color: rgba(var(--rgb-mar),.18); color: var(--ink-2); }

.woocommerce-error li { list-style: none; }
.woocommerce-error li + li { margin-top: var(--sp-3); }

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

/* Woo's own "screen reader only" helper, which its markup relies on. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- checkout form rows -------------------------------------------------
   WooCommerce emits <p class="form-row"> with a <label> and an <input>. The
   design's equivalent is <label class="fld2"><span>…</span><input></label>.
   Rather than rewrite every WooCommerce field template, the same treatment is
   applied to Woo's own row markup, using the design's tokens throughout so
   the two are indistinguishable. Values here are lifted from .fld2 in
   style.css and reference the same tokens — no new hex, no new pixel sizes. */

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row,
.lasacon-fields .form-row,
#delegate .form-row {
  display: block;
  margin-bottom: var(--sp-5);
}

.woocommerce-billing-fields .form-row > label,
.woocommerce-additional-fields .form-row > label,
#delegate .form-row > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: var(--sp-2);
}

.woocommerce-billing-fields .form-row .required,
#delegate .form-row .required {
  color: var(--mar);
  text-decoration: none;
  border: 0;
}

.woocommerce-billing-fields .form-row .optional,
#delegate .form-row .optional { color: var(--soft); font-weight: var(--fw-normal); }

.woocommerce-billing-fields input,
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-additional-fields input,
.woocommerce-additional-fields select,
.woocommerce-additional-fields textarea,
#delegate input:not([type="checkbox"]):not([type="radio"]),
#delegate select,
#delegate textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-lg);
  color: var(--ink);
  background: var(--cream);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}

.woocommerce-billing-fields textarea,
.woocommerce-additional-fields textarea,
#delegate textarea { resize: vertical; min-height: 120px; }

.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus,
.woocommerce-billing-fields textarea:focus,
.woocommerce-additional-fields input:focus,
.woocommerce-additional-fields textarea:focus,
#delegate input:focus,
#delegate select:focus,
#delegate textarea:focus {
  outline: none;
  border-color: var(--mar);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(var(--rgb-mar), .1);
}

.woocommerce-billing-fields ::placeholder,
#delegate ::placeholder { color: var(--soft); }

/* Field hints, which WooCommerce renders as a <span class="description">. */
.form-row .description,
#delegate .description {
  display: block;
  font-size: var(--fs-sm);
  color: var(--soft);
  margin-top: var(--sp-2);
  line-height: var(--lh-snug);
}

/* Two-up rows, which WooCommerce marks form-row-first / form-row-last. */
@media (min-width: 40rem) {
  .woocommerce-billing-fields .form-row-first,
  .woocommerce-billing-fields .form-row-last,
  #delegate .form-row-first,
  #delegate .form-row-last { width: calc(50% - (var(--sp-5) / 2)); float: left; }
  .woocommerce-billing-fields .form-row-last,
  #delegate .form-row-last { float: right; }
  .woocommerce-billing-fields::after,
  #delegate .fld2::after { content: ""; display: table; clear: both; }
}

/* Checkboxes sit beside their label, not above it. */
.form-row.woocommerce-validated label.checkbox,
.form-row label.checkbox,
#delegate .form-row label.checkbox,
#delegate .form-row.create-account label {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-2);
  line-height: var(--lh-base);
}
.form-row label.checkbox input { accent-color: var(--mar); width: 16px; height: 16px; flex: 0 0 auto; margin-top: .28em; }

/* WooCommerce's headings inside our fieldsets duplicate .fset__h, so they are
   toned down to a sub-heading rather than competing with it. */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--fd);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: var(--sp-6) 0 var(--sp-4);
}
.woocommerce-billing-fields > h3:first-child { margin-top: 0; }

/* ---- payment methods ----------------------------------------------------
   The design's .paycard treatment for WooCommerce's radio list. */
#payment .payment_methods { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
#payment .payment_methods > li { margin: 0 0 var(--sp-4); }

#payment .payment_methods > li > label {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-6) var(--sp-7);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--cream);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
#payment .payment_methods > li > label:hover { border-color: var(--mar); }
#payment .payment_methods > li > input[type="radio"] { position: absolute; opacity: 0; }
#payment .payment_methods > li > input[type="radio"]:checked + label {
  border-color: var(--mar);
  background: var(--mar-tint);
}
#payment .payment_methods > li > input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--mar);
  outline-offset: 2px;
}

#payment .payment_box {
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: var(--lh-base);
  padding: var(--sp-5) var(--sp-7);
  margin: 0 0 var(--sp-4);
  background: var(--paper);
  border: var(--bw) dashed var(--line-2);
  border-radius: var(--r-sm);
}
#payment .payment_box p:first-child { margin-top: 0; }
#payment .payment_box p:last-child { margin-bottom: 0; }

/* The place-order button borrows .btn .btn--p. */
#payment #place_order,
.woocommerce-cart-form button[name="update_cart"] {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--paper);
  background: var(--mar);
  border: var(--bw) solid var(--mar);
  border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-8);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
#payment #place_order:hover { background: var(--mar-dk); }
#payment #place_order:disabled { opacity: .6; cursor: not-allowed; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-5); }

/* WooCommerce's own bank-details table under the BACS method. */
.woocommerce-bacs-bank-details { margin: var(--sp-5) 0 0; }
.woocommerce-bacs-bank-details ul.order_details { list-style: none; margin: 0; padding: 0; }
.woocommerce-bacs-bank-details li { display: flex; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--line); font-size: var(--fs-md); }
.woocommerce-bacs-bank-details li strong { font-weight: var(--fw-bold); color: var(--ink); }

/* The honeypot on the sign-in form. Off-screen rather than display:none,
   because some bots skip hidden fields and fill visible ones. */
.lasacon-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Account navigation, from the design's .acct__nav. */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a {
  display: flex; gap: var(--sp-4); align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--fs-md); color: var(--ink-2); text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover { color: var(--mar); }

/* ---- the register summary's submit button -------------------------------
   The design's summary column ends in an anchor to checkout.html. That anchor
   skipped the cart entirely — it went straight to /checkout/ with nothing in
   it — so it is now a submit button for the register form.

   A <button> does not inherit line-height the way an <a> does, which left it
   6px shorter than the anchor and shifted everything below it. --lh-relaxed
   (1.68) is the value the anchor was inheriting, so this restores the design's
   exact metrics. Scoped to this one control: the design's own .btn buttons are
   correct as they are and must not move. */
.summary button.btn--full {
  line-height: var(--lh-relaxed);
  appearance: none;
  -webkit-appearance: none;
}

/* WooCommerce moves focus to its notice so a screen reader reads it. That is
   right, but the site's maroon focus ring around a green "removed" notice
   reads as an error (QC-082): keep the ring only for keyboard focus, in the
   notice's own colour. */
.woocommerce-message:focus:not(:focus-visible),
.woocommerce-info:focus:not(:focus-visible),
.woocommerce-error:focus:not(:focus-visible) { outline: none; }
.woocommerce-message:focus-visible { outline: var(--bw-2) solid var(--ok); outline-offset: 3px; }

/* The checkout's own inputs were a pixel short of the 44px minimum the rest
   of the site now keeps (QC-047). */
.woocommerce-billing-fields input,
.woocommerce-billing-fields select,
.woocommerce-additional-fields input,
.woocommerce-additional-fields textarea,
#delegate input,
#delegate select { min-height: 44px; }

/* --------------------------------------------------------------------------
 * Two WooCommerce controls that are under 44px (QC-107, QC-108).
 *
 * Both are WooCommerce's own markup, drawn by WooCommerce's own code, so they
 * were missed by the 44px pass over this site's templates: the "Undo?" link
 * in the notice after a line is removed, and the "Confirm email address"
 * button on an order-received page reached without its key.
 * ------------------------------------------------------------------------ */
.woocommerce-message .restore-item,
.woocommerce-info .restore-item,
a.restore-item,
.woocommerce a.button.wc-forward,
a.button.wc-forward { display: inline-flex; align-items: center; min-height: 44px; }