/* =========================================================================
   WOOCOMMERCE. The whole commerce path on the house tokens: shop, archive,
   single product, cart, checkout, order received, my account, notices, forms.

   The rule this file exists to enforce: checkout never falls back to Woo's
   default look. A shopper should not be able to tell where our design stops
   and the platform starts. Woo's own woocommerce.css / woocommerce-layout.css
   / woocommerce-smallscreen.css are dequeued in inc/woocommerce.php, so
   everything a customer sees is here.

   Only six Woo templates are overridden in woocommerce/ (the ones whose MARKUP
   has to change). Everything else is Woo's own template restyled from here,
   which is what keeps the theme upgradeable: a Woo release changes its
   templates, not our tokens.
   ========================================================================= */

/* ---- Shared shop chrome -------------------------------------------------- */
.woocommerce-breadcrumb { font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-s); }
.woocommerce-breadcrumb a:hover { color: var(--color-accent-11); }

.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-m); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-xl); }
.woocommerce-result-count { font-family: var(--font-mono); font-size: var(--text-n1); color: var(--color-text-muted); margin: 0; }
.woocommerce-ordering select, .shop-toolbar select {
  appearance: none;
  padding: 0.6rem 2.2rem 0.6rem 0.9rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 1rem;
  font-family: var(--font-mono); font-size: var(--text-n1);
  transition: border-color var(--dur-ui) var(--ease-out);
}
.woocommerce-ordering select:hover { border-color: var(--color-text); }

/* ---- Product grid. Hairline cards: the photograph uncropped, the price in
   mono, one rule under the row. Never a tinted card with a drop shadow. ---- */
ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

li.product { position: relative; display: flex; flex-direction: column; }
li.product .product__media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-s); }
li.product .product__media img { transition: transform var(--dur-reveal) var(--ease-out); }
li.product:hover .product__media img { transform: scale(1.03); }
/* the second gallery image cross-fades in on hover: the product shown two ways
   without a slider and without a second click */
li.product .product__media-alt { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
li.product .product__media-alt img { height: 100%; object-fit: cover; }
li.product:hover .product__media-alt { opacity: 1; }
li.product .woocommerce-loop-product__title { font-family: var(--font-heading); font-size: var(--text-1); font-weight: 600; letter-spacing: var(--track-tight); margin: 0; }
li.product .product__cat { font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.25rem; }
li.product .product__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin-top: auto; padding-top: var(--space-2xs); }
li.product .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-0); color: var(--color-text); }
li.product .price del { color: var(--color-text-muted); margin-right: 0.4rem; text-decoration-thickness: 1px; }
li.product .price ins { color: var(--color-sale); text-decoration: none; }
li.product .star-rating { margin-top: 0.3rem; }

.onsale, .product__badge {
  position: absolute; top: var(--space-2xs); left: var(--space-2xs); z-index: 2;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-sm);
  background: var(--color-accent-9); color: var(--color-on-accent);
  font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.06em; text-transform: uppercase;
}
.product__badge--out { background: var(--color-neutral-9); color: var(--color-neutral-1); }

/* the loop add-to-cart is a quiet ghost button: on a grid, twelve loud accent
   buttons are the page, and the product photograph should be the page */
li.product .button, li.product .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0.5rem 1rem; margin-top: var(--space-2xs);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-size: var(--text-n1); font-weight: 600;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
li.product .button:hover, li.product .added_to_cart:hover { background: var(--color-btn); border-color: var(--color-btn); color: var(--color-btn-text); }
li.product .button.loading { opacity: 0.65; pointer-events: none; }
li.product .button.added { border-color: var(--color-accent-9); color: var(--color-accent-11); }

.star-rating { position: relative; width: 5.4em; height: 1em; font-size: 0.8rem; line-height: 1; overflow: hidden; color: var(--color-accent-9); }
.star-rating::before, .star-rating span::before { content: '\2605\2605\2605\2605\2605'; position: absolute; left: 0; top: 0; letter-spacing: 0.08em; }
.star-rating::before { color: var(--color-line-strong); }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; }

/* ---- Single product ----------------------------------------------------- */
.woocommerce div.product { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .product__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; } }

/* CONTRACT RULE 3 on the gallery: plates run down the column at their own
   ratio, uncropped. Woo's flexslider and zoom are not enabled (see
   inc/woocommerce.php), so this is a plain column of photographs. */
.woocommerce-product-gallery { display: grid; gap: var(--space-2xs); }
.woocommerce-product-gallery__image { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.woocommerce-product-gallery figure { display: grid; gap: var(--space-2xs); margin: 0; }

.product__summary, .woocommerce div.product .summary.entry-summary { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + var(--space-m)); display: grid; gap: var(--space-m); }
.product__summary .product_title, .summary.entry-summary .product_title { font-size: var(--text-5); letter-spacing: var(--track-display); }
.product__summary .price, .summary.entry-summary > .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-3); }
.product__summary .price del, .summary.entry-summary .price del { color: var(--color-text-muted); font-size: 0.7em; margin-right: 0.5rem; }
.product__summary .price ins, .summary.entry-summary .price ins { color: var(--color-sale); text-decoration: none; }
.woocommerce-product-details__short-description { color: var(--color-text-muted); max-width: 48ch; }
.product_meta { font-family: var(--font-mono); font-size: var(--text-n1); color: var(--color-text-muted); display: grid; gap: 0.35rem; padding-top: var(--space-s); border-top: 1px solid var(--color-line); }
.product_meta a:hover { color: var(--color-accent-11); }

.stock { font-family: var(--font-mono); font-size: var(--text-n1); display: inline-flex; align-items: center; gap: 0.5rem; }
.stock::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.stock.in-stock { color: var(--color-instock); }
.stock.out-of-stock { color: var(--color-error); }

form.cart { display: grid; gap: var(--space-s); }
form.cart .quantity + .button { margin: 0; }
form.cart .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.5rem; padding: 1rem 2rem; width: 100%;
  border: 0; border-radius: var(--radius-md);
  background: var(--color-accent-9); color: var(--color-on-accent);
  font-family: var(--font-heading); font-size: var(--text-0); font-weight: 600; letter-spacing: 0.02em;
  transition: background-color var(--dur-ui) var(--ease-out);
}
form.cart .single_add_to_cart_button:hover { background: var(--color-accent-10); }
form.cart .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }
@media (min-width: 30rem) { form.cart:not(.variations_form) { grid-template-columns: auto 1fr; align-items: center; } }

/* variations */
.variations { display: grid; gap: var(--space-s); }
.variations th, .variations td { display: block; text-align: left; padding: 0; }
.variations th label { font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.variations select {
  appearance: none; width: 100%;
  padding: 0.8rem 2.4rem 0.8rem 1rem; margin-top: 0.4rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem;
}
.reset_variations { font-size: var(--text-n1); color: var(--color-text-muted); }
.woocommerce-variation-price { font-family: var(--font-mono); font-size: var(--text-2); }

/* quantity stepper: the house element, not a bare number input */
.quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); overflow: hidden; width: max-content; }
.quantity__btn { width: 2.75rem; display: grid; place-items: center; color: var(--color-text-muted); transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.quantity__btn:hover { background: var(--color-surface); color: var(--color-text); }
.quantity input.qty {
  width: 3.25rem; min-height: 2.9rem; padding: 0 0.25rem;
  border: 0; border-inline: 1px solid var(--color-line); background: transparent;
  text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* tabs and related */
.woocommerce-tabs { border-top: 1px solid var(--color-line); padding-top: var(--space-l); }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-m); padding: 0; margin: 0 0 var(--space-l); border-bottom: 1px solid var(--color-line); }
.woocommerce-tabs ul.tabs li a { display: block; padding-bottom: var(--space-s); font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid transparent; transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text); border-bottom-color: var(--color-accent-9); }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-Tabs-panel { max-width: var(--container-prose); }
.related > h2, .upsells > h2, .cross-sells > h2 { font-size: var(--text-4); margin-bottom: var(--space-l); }

/* reviews */
.woocommerce-Reviews .commentlist { list-style: none; padding: 0; display: grid; gap: var(--space-m); }
.woocommerce-Reviews .comment_container { display: grid; gap: var(--space-2xs); padding-bottom: var(--space-m); border-bottom: 1px solid var(--color-line); }
.woocommerce-Reviews .comment_container img.avatar { width: 2.5rem; border-radius: 999px; }
.woocommerce-review__author { font-family: var(--font-heading); font-weight: 600; }
.woocommerce-review__published-date { font-family: var(--font-mono); font-size: var(--text-n2); color: var(--color-text-muted); }

/* ---- Forms and inputs, shared by cart, checkout, account, reviews -------- */
.woocommerce form .form-row { display: grid; gap: 0.4rem; margin: 0 0 var(--space-s); }
.woocommerce form .form-row label, .woocommerce-input-wrapper > label {
  font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
}
.woocommerce form .form-row .required { color: var(--color-error); text-decoration: none; border: 0; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--color-error); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--color-instock); }

input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='password'],
input[type='number'], input[type='search'], input[type='date'], select:not(.quantity select), textarea,
.select2-container--default .select2-selection--single {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.95rem;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--color-accent-9); box-shadow: 0 0 0 3px oklch(from var(--color-accent-9) l c h / 0.2); }
::placeholder { color: var(--color-neutral-9); opacity: 1; }

/* select2 is Woo's country/state picker; without these it is the one obviously
   foreign control on the checkout */
.select2-container--default .select2-selection--single { display: flex; align-items: center; height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--color-text); line-height: inherit; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 0.6rem; transform: translateY(-50%); }
.select2-dropdown { background: var(--color-bg); border-color: var(--color-line-strong); border-radius: var(--radius-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-accent-9); color: var(--color-on-accent); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--color-line-strong); border-radius: var(--radius-sm); }

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  padding: var(--space-m); margin-bottom: var(--space-l);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-bg-raised);
}

/* ---- Notices ------------------------------------------------------------ */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews, .wc-block-components-notice-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s);
  list-style: none;
  padding: var(--space-s) var(--space-m); margin: 0 0 var(--space-l);
  border: 1px solid var(--color-line); border-left-width: 2px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-bg-raised);
  font-size: var(--text-n1);
}
.woocommerce-message { border-left-color: var(--color-instock); }
.woocommerce-info, .wc-block-components-notice-banner { border-left-color: var(--color-accent-9); }
.woocommerce-error { border-left-color: var(--color-error); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  min-height: 2.4rem; padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-size: var(--text-n1); font-weight: 600;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: var(--color-btn); color: var(--color-btn-text); }

/* ---- Cart --------------------------------------------------------------- */
.cart-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 62rem) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2xl); } }

.cart-line { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--space-s) var(--space-m); align-items: start; padding-block: var(--space-m); border-bottom: 1px solid var(--color-line); }
.cart-line__thumb { border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.cart-line__name { font-family: var(--font-heading); font-size: var(--text-1); font-weight: 600; }
.cart-line__meta { font-family: var(--font-mono); font-size: var(--text-n2); color: var(--color-text-muted); margin-top: 0.2rem; }
.cart-line__meta dl, .cart-line__meta dt, .cart-line__meta dd { display: inline; margin: 0; }
.cart-line__controls { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-2xs); }
.cart-line__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-1); text-align: right; white-space: nowrap; }
.cart-line__remove { font-size: var(--text-n1); color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 0.2em; transition: color var(--dur-ui) var(--ease-out); }
.cart-line__remove:hover { color: var(--color-error); }
@media (max-width: 40rem) {
  .cart-line { grid-template-columns: 4.5rem 1fr; }
  .cart-line__price { grid-column: 2; text-align: left; }
}

.cart-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; padding-block: var(--space-m); }
.cart-actions .coupon { display: flex; gap: var(--space-2xs); flex: 1 1 18rem; }
.cart-actions .coupon input { min-height: 3rem; }

.cart-summary { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + var(--space-m)); padding: var(--space-m); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg-raised); display: grid; gap: var(--space-s); }
.cart-summary__h { font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.cart-summary__row, .cart_totals tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding-block: 0.5rem; border-bottom: 1px solid var(--color-line); font-size: var(--text-n1); }
.cart-summary__row--total, .cart_totals tr.order-total { border-bottom: 0; padding-top: var(--space-s); font-size: var(--text-1); }
.cart-summary__row .amount, .cart_totals .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cart_totals table, .cart_totals th, .cart_totals td { display: block; width: 100%; text-align: left; padding: 0; border: 0; }
.cart_totals tr { width: 100%; }
.cart_totals th { font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.woocommerce-shipping-destination, .woocommerce-shipping-methods { font-size: var(--text-n1); }
.woocommerce-shipping-methods { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.shipping-calculator-button { font-size: var(--text-n1); text-decoration: underline; text-underline-offset: 0.2em; }
.wc-proceed-to-checkout .checkout-button {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.5rem; margin-top: var(--space-s);
  border-radius: var(--radius-md);
  background: var(--color-accent-9); color: var(--color-on-accent);
  font-family: var(--font-heading); font-size: var(--text-0); font-weight: 600;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--color-accent-10); }

.cart-empty-block { display: grid; gap: var(--space-m); justify-items: start; max-width: 40rem; }

/* ---- Checkout ----------------------------------------------------------- */
.woocommerce-checkout .checkout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 62rem) { .woocommerce-checkout .checkout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl); } }
/* Woo's form-checkout.php emits exactly three children: #customer_details, the
   #order_review_heading h3 and #order_review. Placing those three by id is why
   there is no form-checkout.php override - the layout is a grid assignment,
   not a markup change. */
.woocommerce-checkout #customer_details { grid-column: 1; display: grid; gap: var(--space-l); }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; }
@media (min-width: 62rem) {
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout #order_review {
    grid-column: 2; grid-row: 2;
    position: sticky;
    top: calc(var(--nav-h) + var(--nav-offset) + var(--space-m));
  }
}
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading {
  font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
  padding-bottom: var(--space-2xs); margin-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 48rem) {
  .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-s); }
  .form-row-wide, .form-row-first + .form-row-last ~ .form-row-wide { grid-column: 1 / -1; }
}

.woocommerce-checkout-review-order { padding: var(--space-m); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg-raised); }
.woocommerce-checkout-review-order-table { display: block; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; }
.woocommerce-checkout-review-order-table tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding-block: 0.55rem; border-bottom: 1px solid var(--color-line); }
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { display: block; padding: 0; border: 0; text-align: left; font-size: var(--text-n1); }
.woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table td[data-title] { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.woocommerce-checkout-review-order-table .order-total { border-bottom: 0; padding-top: var(--space-s); font-size: var(--text-1); }
.woocommerce-checkout-review-order-table .product-quantity { font-family: var(--font-mono); color: var(--color-text-muted); }

#payment { margin-top: var(--space-m); }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--space-m); display: grid; gap: var(--space-2xs); }
#payment ul.payment_methods li { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); padding: var(--space-s); transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
#payment ul.payment_methods li:has(input:checked) { border-color: var(--color-accent-9); background: var(--color-bg); }
#payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 600; cursor: pointer; }
#payment ul.payment_methods li img { display: inline-block; width: auto; max-height: 1.5rem; margin-left: 0.4rem; }
#payment .payment_box { margin-top: var(--space-s); padding: var(--space-s); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-n1); color: var(--color-text-muted); }
#payment .payment_box p:first-child { margin-top: 0; }
#payment .woocommerce-privacy-policy-text, #payment .woocommerce-terms-and-conditions-wrapper { font-size: var(--text-n1); color: var(--color-text-muted); }
#payment #place_order {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; min-height: 3.5rem; margin-top: var(--space-s);
  border: 0; border-radius: var(--radius-md);
  background: var(--color-accent-9); color: var(--color-on-accent);
  font-family: var(--font-heading); font-size: var(--text-0); font-weight: 600;
  transition: background-color var(--dur-ui) var(--ease-out);
}
#payment #place_order:hover { background: var(--color-accent-10); }
.blockUI.blockOverlay { background: var(--color-bg) !important; opacity: 0.6 !important; }

/* Stripe and PayPal inject their own fields; give them the same box so the
   card row does not read as a third-party widget dropped into our form. */
.wc-stripe-elements-field, .wc-stripe-iban-element-field, .wcpay-card-mount, #wc-stripe-payment-request-wrapper {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* ---- Order received / thank you ---------------------------------------- */
.order-received-head { display: grid; gap: var(--space-s); max-width: 44rem; margin-bottom: var(--space-xl); }
.woocommerce-order-overview {
  list-style: none; padding: var(--space-m); margin: 0 0 var(--space-xl);
  border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg-raised);
  display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.woocommerce-order-overview li { display: grid; gap: 0.2rem; font-family: var(--font-mono); font-size: var(--text-1); font-variant-numeric: tabular-nums; }
.woocommerce-order-overview li strong { font-weight: 400; }
.woocommerce-order-overview li > span:first-child, .woocommerce-order-overview li::first-line { }
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: var(--space-xl); }
.woocommerce-order-details__title, .woocommerce-column__title { font-family: var(--font-mono); font-size: var(--text-n2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: var(--space-2xs); margin-bottom: var(--space-s); border-bottom: 1px solid var(--color-line); }
.woocommerce-table--order-details { display: block; }
.woocommerce-table--order-details thead { display: none; }
.woocommerce-table--order-details tbody, .woocommerce-table--order-details tfoot { display: block; }
.woocommerce-table--order-details tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding-block: 0.6rem; border-bottom: 1px solid var(--color-line); }
.woocommerce-table--order-details td, .woocommerce-table--order-details th { display: block; padding: 0; border: 0; text-align: left; font-size: var(--text-n1); }
.woocommerce-table--order-details td.woocommerce-table__product-total, .woocommerce-table--order-details tfoot td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.woocommerce-customer-details .addresses { display: grid; gap: var(--space-l); }
@media (min-width: 48rem) { .woocommerce-customer-details .addresses { grid-template-columns: 1fr 1fr; } }
address { font-style: normal; font-size: var(--text-n1); line-height: 1.7; }

/* ---- My account --------------------------------------------------------- */
.woocommerce-account .woocommerce { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 56rem) { .woocommerce-account .woocommerce { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--color-line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.8rem 0; font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); transition: color var(--dur-ui) var(--ease-out), padding-left var(--dur-ui) var(--ease-out); }
.woocommerce-MyAccount-navigation li a:hover { color: var(--color-text); padding-left: 0.35rem; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--color-accent-11); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-orders-table, .woocommerce-table { display: block; }
.woocommerce-orders-table thead { display: none; }
.woocommerce-orders-table tbody { display: grid; gap: var(--space-2xs); }
.woocommerce-orders-table tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-s); padding: var(--space-s); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.woocommerce-orders-table td { display: grid; gap: 0.15rem; padding: 0; border: 0; font-size: var(--text-n1); }
.woocommerce-orders-table td::before { content: attr(data-title); font-family: var(--font-mono); font-size: var(--text-n2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---- Pagination --------------------------------------------------------- */
.woocommerce-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3xs); padding: 0; margin-top: var(--space-2xl); justify-content: center; }
.page-numbers { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: 0.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-n1); transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.page-numbers:hover { border-color: var(--color-text); }
.page-numbers.current { background: var(--color-btn); border-color: var(--color-btn); color: var(--color-btn-text); }

/* ---- Blocks. The classic shortcode cart and checkout are the default, but a
   client may be switched to the block checkout (PRODUCT.md records which), and
   Woo's mini-cart drawer is a block whatever the pages use. These are the
   variables Woo's block stylesheet reads, so pointing them at the tokens is
   the whole job rather than restyling every block class. ------------------- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wc-block-components-drawer {
  --wp--preset--color--contrast: var(--color-text);
  --wp--preset--color--base: var(--color-bg);
}
.wc-block-components-button:not(.is-link) {
  min-height: 3rem; border-radius: var(--radius-md);
  background: var(--color-accent-9); color: var(--color-on-accent);
  font-family: var(--font-heading); font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover { background: var(--color-accent-10); }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-combobox-control input {
  border: 1px solid var(--color-line-strong) !important; border-radius: var(--radius-sm) !important; background: var(--color-bg) !important; color: var(--color-text) !important;
}
.wc-block-components-totals-item__value, .wc-block-components-product-price, .wc-block-formatted-money-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wc-block-components-sidebar-layout .wc-block-components-sidebar { background: var(--color-bg-raised); border-radius: var(--radius-md); }

/* ---- Mini cart drawer --------------------------------------------------- */
.widget_shopping_cart_content ul.cart_list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.widget_shopping_cart_content li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-s); padding-bottom: var(--space-s); border-bottom: 1px solid var(--color-line); font-size: var(--text-n1); }
.widget_shopping_cart_content .total { display: flex; justify-content: space-between; padding-block: var(--space-s); font-family: var(--font-mono); }