/*
 * AIRIX — WooCommerce overrides.
 *
 * Enqueued with `woocommerce-general` as a dependency (inc/enqueue.php), so it
 * always loads after it and wins on source order. That is why there is no
 * !important in this file and should not be.
 *
 * Woo's `woocommerce-layout` and `woocommerce-smallscreen` are not loaded at
 * all — we own layout and we own breakpoints (860px and 760px, against Woo's
 * 768px).
 *
 * PHASE 2 SCOPE. This file covers the surfaces that render as soon as
 * WooCommerce is active, before any of our templates exist:
 *
 *   - notices, which appear on every cart action and are the most visible
 *     break when left at Woo's defaults
 *   - form fields, so the checkout and My Account forms match the design
 *   - buttons, so Woo's own .button never renders as a grey browser default
 *   - the archive and single-product wrappers our unhooks leave behind
 *
 * The product card, gallery, cart, checkout, thank-you, My Account and spec
 * table are Phase 4, which replaces Woo's templates outright rather than
 * restyling them from here.
 */


/* ==========================================================================
   NOTICES
   --------------------------------------------------------------------------
   docs/design-spec.md: message teal, info --blue, error #C0392B. Woo's
   defaults are a green/blue/red bar with a 3px top border and an emoji-ish
   pseudo-element glyph; all three are replaced.
   ========================================================================== */

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  list-style:none;
  margin:0 0 24px;
  padding:16px 20px;
  border-radius:12px;
  border:1px solid var(--line);
  border-left-width:3px;
  background:var(--surface);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Woo's default glyph and top border. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none;}

/*
 * The three colours.
 *
 * Each is repeated with the `.woocommerce` prefix on purpose. The base rule
 * above lists both `.woocommerce-info` AND `.woocommerce .woocommerce-info`,
 * and the prefixed form is (0,2,0) — so it outranks an unprefixed colour rule
 * at (0,1,0) and its `border:1px solid var(--line)` shorthand wins, leaving
 * every notice with a grey left edge. That is a collision between two of our
 * OWN rules, not with Woo's, and it is why these are doubled rather than
 * reached for with !important.
 */
.woocommerce-message,
.woocommerce .woocommerce-message{
  border-left-color:var(--teal);
  background:#F0FBF9;
}

.woocommerce-info,
.woocommerce .woocommerce-info{
  border-left-color:var(--blue);
  background:#E4E9FA;
  color:var(--blue);
}

.woocommerce-error,
.woocommerce .woocommerce-error{
  border-left-color:#C0392B;
  background:#FCF0EE;

  /*
   * Darker than the border on purpose: #C0392B on #FCF0EE is about 4.1:1,
   * under the 4.5:1 body-text threshold Phase 7 requires. The border carries
   * the brand red; the text carries the contrast.
   */
  color:#8E2A20;
}

.woocommerce-error li{margin:0;}
.woocommerce-error li + li{margin-top:6px;}

/* The inline action Woo puts in its notices ("View basket"). */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  margin-left:auto;
  flex-shrink:0;
}


/* ==========================================================================
   BUTTONS
   --------------------------------------------------------------------------
   Woo emits `.button` in dozens of places we do not template. Mapping it onto
   .btn-primary means none of them render as a browser default.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg, var(--blue-2), var(--blue-dark));
  color:#fff;
  font-family:inherit;
  font-weight:600;
  font-size:14.5px;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 10px 24px -10px #1B2A7866;
  transition:transform .15s ease, box-shadow .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  transform:translateY(-1px);
  color:#fff;
}

/* Woo's secondary weight — "Update basket", "Apply coupon". */
.woocommerce a.button.wc-backward,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled]{
  background:var(--surface);
  color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:none;
}

.woocommerce button.button:disabled,
.woocommerce button.button[disabled]{
  color:var(--ink-dim);
  cursor:not-allowed;
  transform:none;
}

.woocommerce a.button.wc-backward:hover{
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px);
}


/* ==========================================================================
   FORM FIELDS
   --------------------------------------------------------------------------
   Checkout, My Account and the coupon field all use Woo's form-row markup.
   These match .form-field in the design system.
   ========================================================================== */

.woocommerce form .form-row{
  margin:0 0 14px;
  padding:0;
}

.woocommerce form .form-row label,
.woocommerce-form-row label{
  display:block;
  font-size:12.5px;
  color:var(--ink-dim);
  margin-bottom:6px;
  line-height:1.4;
}

.woocommerce form .form-row .required{
  color:#C0392B;
  text-decoration:none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:11px 13px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
  line-height:1.4;
  height:auto;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:1px;
  border-color:var(--blue-2);
}

/* Woo marks invalid fields on its own; match .form-field.invalid. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{
  border-color:#C0392B;
}

.woocommerce form .form-row.woocommerce-validated input.input-text{
  border-color:var(--teal);
}

/* Checkboxes — terms, "ship to a different address", "remember me". */
.woocommerce form .form-row.woocommerce-validated input[type="checkbox"],
.woocommerce form .form-row input[type="checkbox"]{
  width:auto;
  margin-right:8px;
  accent-color:var(--blue-2);
}

/* select2, which Woo loads for the country and state fields. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4;
  padding:0;
  color:var(--ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%;
  right:8px;
}

.woocommerce .select2-dropdown{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 48px -16px #0B0F1A33;
}

.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--blue);
}


/* ==========================================================================
   PAGE WRAPPERS
   --------------------------------------------------------------------------
   inc/woocommerce.php replaces Woo's wrapper with `.airix-woo > .wrap` and
   unhooks the sidebar. These give the Woo pages the same vertical rhythm as
   `.section` without inheriting its border-top on every one.
   ========================================================================== */

.airix-woo{
  padding:56px 0 84px;
}

.airix-woo .woocommerce-products-header{
  margin-bottom:44px;
}

.airix-woo .woocommerce-products-header__title,
.airix-woo .page-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.015em;
  margin-bottom:10px;
}

.airix-woo .term-description{
  color:var(--ink-dim);
  font-size:14.5px;
  max-width:520px;
}

/* No sidebar exists in the design; the columns Woo assumes are unhooked. */
.airix-woo .woocommerce-sidebar,
.airix-woo #secondary{display:none;}

/*
 * Woo's own product grid, which shows on the shop archive until Phase 4
 * replaces the template. Mapped onto the design's grid so the interim state
 * is the AIRIX layout rather than Woo's float-based columns — which is the
 * whole point of dequeuing woocommerce-layout.
 */
.airix-woo ul.products{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}

.airix-woo ul.products li.product{
  width:auto;
  margin:0;
  float:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  transition:box-shadow .2s, transform .2s;
}

.airix-woo ul.products li.product:hover{
  box-shadow:0 24px 48px -24px #0B0F1A22;
  transform:translateY(-4px);
}

.airix-woo ul.products li.product a img{
  border-radius:16px;
  margin-bottom:16px;
}

.airix-woo ul.products li.product .woocommerce-loop-product__title{
  font-family:'Space Grotesk', sans-serif;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-0.015em;
  color:var(--ink);
  padding:0;
  margin-bottom:14px;
}

.airix-woo ul.products li.product .price{
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  display:block;
  margin-bottom:14px;
}

.airix-woo ul.products li.product .price del{
  color:var(--ink-dim);
  font-weight:400;
  margin-right:6px;
}

.airix-woo ul.products li.product .price ins{
  text-decoration:none;
  color:var(--ink);
}

/* ==========================================================================
   PRICES
   --------------------------------------------------------------------------
   woocommerce-general colours and sizes prices itself, through selectors like
   `.woocommerce div.product span.price` — specific enough to beat
   `.price-row .price`. Left alone the product page price rendered OLIVE at
   20px instead of --ink at 28px, because Woo's accent colour won. The card
   price would drift the same way.
   ========================================================================== */

.woocommerce div.product .price-row .price,
.woocommerce div.product .price-row .price .woocommerce-Price-amount,
.woocommerce div.product .price-row .price bdi,
.price-row .price,
.price-row .price .woocommerce-Price-amount{
  font-family:'Space Grotesk', sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.015em;
  color:var(--ink);
  line-height:1.2;
}

/* The struck regular price keeps the dimmer tone and a smaller size. */
.woocommerce div.product .price-row .price del,
.woocommerce div.product .price-row .price del .woocommerce-Price-amount,
.price-row .price del,
.price-row .price del .woocommerce-Price-amount{
  color:var(--ink-dim);
  font-size:19px;
  font-weight:400;
  text-decoration:line-through;
}

.woocommerce div.product .price-row .price ins,
.woocommerce div.product .price-row .price ins .woocommerce-Price-amount,
.price-row .price ins{
  color:var(--ink);
  text-decoration:none;
}

/* Card price stays mono at 16px, per the design tokens. */
.woocommerce .prod-price,
.woocommerce .prod-price .woocommerce-Price-amount,
.woocommerce .prod-price bdi,
.prod-price .woocommerce-Price-amount{
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0;
}

.woocommerce .prod-price del,
.woocommerce .prod-price del .woocommerce-Price-amount,
.prod-price del .woocommerce-Price-amount{
  color:var(--ink-dim);
  font-weight:400;
  font-size:14px;
}


/* Woo's sale flash — the design's teal chip. */
.airix-woo span.onsale{
  position:absolute;
  background:var(--teal);
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  font-weight:500;
  padding:3px 9px;
  border-radius:6px;
  min-height:0;
  min-width:0;
  line-height:1.5;
  margin:0;
  top:22px;
  right:22px;
}

.airix-woo ul.products li.product{position:relative;}

/*
 * Out of stock, per the design spec's states table: the card image drops to
 * 60% opacity. The disabled button and label are Phase 4's template work.
 */
.airix-woo ul.products li.product.outofstock a img{opacity:.6;}

@media (max-width:860px){
  .airix-woo ul.products{grid-template-columns:1fr;}
}


/* ==========================================================================
   MY ACCOUNT
   --------------------------------------------------------------------------
   The prototype designs no account area, so this is assembled from the
   existing language: pill controls for the nav (the hero tick-badge shape),
   the design's form fields, and the spec-table treatment for order history.
   ========================================================================== */

.airix-account-content{max-width:820px;}

.airix-account-content h2,
.airix-account-content h3{
  font-family:'Space Grotesk', sans-serif; letter-spacing:-0.015em;
  font-size:19px; font-weight:700; margin:0 0 14px;
}

.airix-account-content p{color:var(--ink-dim); font-size:14.5px;}
.airix-account-content a{color:var(--blue);}
.airix-account-content a:hover{color:var(--blue-2);}

/* Woo's "Hello X (not X? Sign out)" dashboard line. */
.woocommerce-MyAccount-content > p:first-child{font-size:15.5px;}

/* Orders table — the spec-table language, right-aligned figures. */
.woocommerce-orders-table{font-size:13.5px;}
.woocommerce-orders-table__cell-order-number a{font-family:'IBM Plex Mono', monospace; font-weight:500;}
.woocommerce-orders-table__cell-order-actions{text-align:right;}

.woocommerce-orders-table__cell-order-actions .button{
  padding:8px 14px; font-size:12.5px; border-radius:10px; box-shadow:none;
}

/* The empty-orders state, so a new account is not a dead end. */
.woocommerce-account .woocommerce-info{margin-bottom:24px;}

/* Addresses: two cards side by side, matching .prod-card. */
.woocommerce-Addresses{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px;
}

.woocommerce-Address{
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:24px;
}

.woocommerce-Address-title{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3{margin:0; font-size:16.5px;}

.woocommerce-Address-title .edit{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  letter-spacing:.04em; flex-shrink:0;
}

.woocommerce-Address address{
  font-style:normal; color:var(--ink-dim); font-size:14px; line-height:1.7;
}

/* Login and register. */
.airix-login-split{display:grid; grid-template-columns:1fr 1fr; gap:22px;}

.airix-login-panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:28px;
}

.airix-login-panel h2{margin-bottom:18px;}
.airix-login-panel .form-field{margin-bottom:14px;}
.airix-login-panel .summary-note{margin-top:0; margin-bottom:18px;}

.airix-login-remember .woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim);
}

.airix-login-remember input[type="checkbox"]{accent-color:var(--blue-2);}

.airix-login-lost{margin:0; font-size:13px;}
.airix-login-lost a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}

.airix-login-shop{
  margin-top:24px; font-size:13px; font-family:'IBM Plex Mono', monospace;
}
.airix-login-shop a{color:var(--blue);}

/* Woo's own login/register field markup, when a plugin renders it. */
.woocommerce-account .woocommerce-form-row label,
.airix-login-panel label{
  display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:6px;
}

.airix-login-panel input.input-text{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:14px; font-family:inherit;
  background:#fff; color:var(--ink);
}

.airix-login-panel input.input-text:focus-visible{
  outline:2px solid var(--blue-2); outline-offset:1px; border-color:var(--blue-2);
}

.airix-login-panel .required{color:#C0392B; text-decoration:none;}

/* Lost password. */
.woocommerce-ResetPassword{max-width:420px;}
.woocommerce-ResetPassword .form-row-first{width:100%;}

@media (max-width:760px){
  .airix-login-split,
  .woocommerce-Addresses{grid-template-columns:1fr;}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  font-size:13px;
  color:var(--ink-dim);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  border-color:var(--blue);
  color:var(--blue);
}

.woocommerce table.shop_table{
  border:1px solid var(--line);
  border-radius:16px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  font-size:13.5px;
  width:100%;
}

.woocommerce table.shop_table th{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-dim);
  text-align:left;
  padding:14px 16px;
  background:var(--steel-1);
  border:none;
}

.woocommerce table.shop_table td{
  padding:14px 16px;
  border:none;
  border-top:1px solid var(--line);
  color:var(--ink-dim);
}


/* ==========================================================================
   CART
   --------------------------------------------------------------------------
   The prototype's basket overlay, as a real page. .basket-layout,
   .basket-row, .summary-card and their 760px collapse are all in the ported
   design system; these are the parts WooCommerce markup needs on top.
   ========================================================================== */

.airix-cart-heading,
.airix-checkout-heading{font-size:30px; margin-bottom:32px;}

.airix-cart-slot{width:84px; height:84px; border-radius:12px; font-size:9px;}

/* The quantity input inside a basket row. */
.airix-cart-qty .quantity input.qty{
  width:64px; padding:9px 8px;
  border:1.5px solid var(--line); border-radius:10px;
  font-family:'IBM Plex Mono', monospace; font-size:13.5px;
  text-align:center; color:var(--ink); background:#fff;
}

.airix-cart-qty .quantity input.qty:focus-visible{
  outline:2px solid var(--blue-2); outline-offset:1px; border-color:var(--blue-2);
}

.airix-cart-actions{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; padding-top:24px;
}

.airix-cart-actions .cart-panel-link{width:auto; flex-shrink:0;}

.airix-coupon{flex:1; min-width:260px;}
.airix-coupon-row{display:flex; gap:8px;}
.airix-coupon-row input{flex:1;}
.airix-coupon-row .cart-panel-link{width:auto; flex-shrink:0;}

/*
 * The free-delivery nudge. Teal is the design's success colour, but --teal on
 * --surface is about 2.2:1, so the TEXT uses a darkened tone that passes
 * 4.5:1 while still reading as the same colour. Phase 7 audits this properly.
 */
.airix-delivery-hint{
  margin-top:14px; padding:10px 14px; border-radius:10px;
  background:#F0FBF9; border:1px solid #B7E8E0; color:#00655A;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.5;
}

.airix-delivery-hint .woocommerce-Price-amount{font-weight:500;}
.summary-row .airix-free{color:#00655A;}

/* A plugin calling wc_cart_totals() would stack a second summary; hide its heading. */
.airix-cart-summary .cart_totals > h2{display:none;}


/* ==========================================================================
   CHECKOUT
   --------------------------------------------------------------------------
   There are no card fields here and there never will be. CLAUDE.md constraint
   2: card data is entered only inside the gateway's hosted iframe, which
   renders inside #payment.
   ========================================================================== */

.airix-checkout-main .checkout-section:last-child{margin-bottom:0;}

/* Woo emits .form-row elements; map them onto the design's .form-grid. */
.woocommerce-checkout .form-grid .form-row{margin-bottom:0;}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{grid-column:1 / -1;}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #order_comments_field{grid-column:1 / -1;}

.woocommerce-checkout h3{
  font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700;
  letter-spacing:-0.015em; margin:0 0 14px;
}

.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info{margin-bottom:20px;}

.woocommerce-form-login,
.woocommerce-form-coupon{
  border:1px solid var(--line); border-radius:16px; padding:24px;
  margin-bottom:28px; background:var(--surface);
}

/*
 * Order review table, inside the sticky summary card.
 *
 * These selectors are deliberately more specific than the generic
 * `.woocommerce table.shop_table` block further up, which exists for My
 * Account's order history. That rule gives a table a 16px radius, a border and
 * a --steel-1 header fill — right for a standalone order table, wrong for a
 * summary that already sits inside a bordered card. Without the extra
 * specificity the card ends up with a table drawn inside a table.
 */
.woocommerce-checkout .airix-checkout-summary table.shop_table,
.woocommerce .airix-checkout-summary table.shop_table{
  border:none; border-radius:0; font-size:13.5px; margin-bottom:0;
  background:none; overflow:visible;
}

.woocommerce-checkout .airix-checkout-summary table.shop_table th,
.woocommerce .airix-checkout-summary table.shop_table th{
  background:none; padding:7px 0; border:none; text-transform:none;
  letter-spacing:0; font-family:'Inter', sans-serif; font-size:13.5px;
  font-weight:500; color:var(--ink-dim);
}

.woocommerce-checkout .airix-checkout-summary table.shop_table td,
.woocommerce .airix-checkout-summary table.shop_table td{
  padding:7px 0; border:none; text-align:right; color:var(--ink-dim);
}

/* The PRODUCT / SUBTOTAL header row is noise in a two-line summary. */
.woocommerce-checkout .airix-checkout-summary table.shop_table thead{display:none;}

.airix-checkout-summary .shop_table .cart-subtotal td,
.airix-checkout-summary .shop_table .shipping td{border-top:1px solid var(--line);}

.airix-checkout-summary .shop_table .order-total th,
.airix-checkout-summary .shop_table .order-total td{
  border-top:1px solid var(--line); padding-top:14px;
  color:var(--ink); font-weight:700; font-size:16px;
}

.airix-checkout-summary .product-name{text-align:left; color:var(--ink);}
.airix-checkout-summary .product-quantity{color:var(--ink-dim);}

.airix-checkout-summary #shipping_method{list-style:none; margin:0; padding:0;}
.airix-checkout-summary #shipping_method li{padding:3px 0; font-size:13px;}

/*
 * Payment area — the gateway's iframe lives in here.
 *
 * woocommerce-general paints #payment with a grey fill and rounded corners,
 * on the assumption it is a standalone panel. Here it sits inside
 * .checkout-section, so the fill reads as an unstyled block. Reset rather than
 * restyled: the section around it already provides the container.
 */
.woocommerce-checkout #payment,
.woocommerce #payment{
  background:none; border-radius:0; padding:0;
}

.woocommerce-checkout #payment div.form-row,
.woocommerce #payment div.form-row{padding:0;}

.airix-payment .wc_payment_methods{list-style:none; margin:0 0 20px; padding:0;}

.airix-payment .wc_payment_method{
  border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  margin-bottom:10px; background:var(--surface);
}

.airix-payment .wc_payment_method label{
  font-weight:600; font-size:14px; color:var(--ink); cursor:pointer;
}

.airix-payment .payment_box{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-dim);
}

/*
 * The terms checkbox. Legally required for a UK store, so it is styled to be
 * seen rather than tucked away — a checkbox nobody notices is not consent.
 */
.woocommerce-terms-and-conditions-wrapper{
  margin:20px 0; padding:16px 18px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg); font-size:13px;
}

.woocommerce-terms-and-conditions-wrapper a{
  color:var(--blue); text-decoration:underline; text-underline-offset:2px;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]{
  margin-top:3px; accent-color:var(--blue-2); flex-shrink:0;
}

#place_order{width:100%; margin-top:6px;}


/* ==========================================================================
   ORDER RECEIVED
   ========================================================================== */

.airix-confirm-failed{background:#C0392B;}
.airix-confirm-actions{justify-content:center; margin-top:32px; margin-bottom:0;}
.airix-confirm-promise{max-width:420px; margin-left:auto; margin-right:auto;}

.woocommerce-order-details,
.woocommerce-customer-details{margin-top:44px; text-align:left;}

.woocommerce-order-details h2,
.woocommerce-customer-details h2{
  font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700;
  letter-spacing:-0.015em; margin-bottom:16px;
}

.woocommerce-order-overview{
  list-style:none; margin:0 0 32px; padding:0;
  display:flex; flex-wrap:wrap; gap:22px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-dim);
}

.woocommerce-order-overview strong{
  display:block; font-family:'Inter', sans-serif; font-size:14px;
  color:var(--ink); margin-top:4px;
}


/* ==========================================================================
   MINI-CART
   ========================================================================== */

.airix-mini-meta{
  display:block; font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; color:var(--ink-dim);
}

.airix-mini-total{
  border-top:1px solid var(--line); border-bottom:none;
  margin-top:6px; padding-top:12px; color:var(--ink); font-weight:600;
}


@media (max-width:760px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
    grid-template-columns:1fr;
  }

  .airix-cart-heading,
  .airix-checkout-heading{font-size:24px;}
}


/* ==========================================================================
   REDUCED MOTION
   --------------------------------------------------------------------------
   style.css has the theme's `prefers-reduced-motion` block, and its universal
   `transition-duration:.01ms !important` does reach this file. But
   `transform:none` cannot be universal — it would flatten every layout that
   uses a transform to position something — so it is listed per selector, and
   style.css can only list its own.

   These three hover lifts live here, so they need saying here. Someone who
   has asked their operating system to reduce motion should not get a card
   that jumps four pixels under the pointer.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce #respond input#submit:hover,
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover,
  .woocommerce a.button.wc-backward:hover,
  .airix-woo ul.products li.product:hover{
    transform:none;
  }
}