/* ---------------------------------------------------------------------------
   WooCommerce's own pages, brought into the system.

   Cart, checkout, My Account and order-received are classic PHP templates with
   markup this theme does not author. They arrive carrying Woo's default look —
   rounded grey boxes, a pink notice bar, buttons in a purple this palette has
   never heard of — and next to the rest of the site they read as a different
   shop. This file is the join.

   It styles what those pages SHARE (notices, form rows, buttons, tables) plus
   My Account and order-received in full. The cart and checkout LAYOUTS are
   deliberately not here: both fork on open questions — whether a cart may hold
   a firearm and an accessory at once (AF), and classic against block checkout
   (AD) — and building either twice is worse than building it late.

   House rules this inherits from base.css, restated because Woo's own CSS
   fights all three:
     - No radius. Anywhere.
     - Every interactive target clears 44px (the Daylight Rule).
     - Money and quantities are tabular.
   ------------------------------------------------------------------------- */

/* ----------------------------------------------------------------- notices

   Woo prints three notice types and colours them from its own palette. They
   are the only feedback a customer gets when something goes wrong at checkout,
   so they are the last thing that should look like it came from elsewhere. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  border: 1px solid var(--wp--preset--color--rule);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--wp--preset--color--sunken);
  color: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--item);
  margin: 0 0 var(--wp--preset--spacing--group);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--leading--small);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--label);
}

/* Woo ships ::before glyphs in a webfont this theme does not load, which
   renders as a stray box. The border colour carries the meaning instead. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: none;
}

.woocommerce-message { border-left-color: var(--wp--preset--color--sage); background: var(--wp--preset--color--sage-wash); }
.woocommerce-info    { border-left-color: var(--wp--preset--color--copper); background: var(--wp--preset--color--copper-wash); }
.woocommerce-error   { border-left-color: var(--wp--preset--color--oxide-mark); background: var(--wp--preset--color--oxide-wash); }

.woocommerce-error li { margin: 0; }

/* The notice's own inline action ("View cart", "Undo") sits at the end. */
.woocommerce-message .button,
.woocommerce-info .button {
  margin-inline-start: auto;
}

/* ------------------------------------------------------------------ buttons

   One primary, one quiet. Woo applies `.button` to both, and `.alt` to the one
   it considers primary — which is the one this design fills with oxide. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  min-height: var(--wp--custom--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--hair);
  padding: 0 var(--wp--preset--spacing--item);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms var(--wp--custom--ease), border-color 120ms var(--wp--custom--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--wp--preset--color--sunken);
  border-color: var(--wp--preset--color--ink-3);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--wp--preset--color--oxide);
  border-color: var(--wp--preset--color--oxide);
  color: var(--wp--preset--color--on-oxide);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--wp--preset--color--oxide-deep);
  border-color: var(--wp--preset--color--oxide-deep);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- form rows

   Every address, login and account field on the site comes through here. */

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--hair);
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--item);
}

.woocommerce form .form-row label,
.woocommerce-account .woocommerce form label {
  font-size: var(--wp--preset--font-size--micro);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
}

/* Woo marks required with a bare asterisk and `aria-hidden`. Keep it visible
   and unmistakable rather than a grey speck beside an uppercase label. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
  color: var(--wp--preset--color--oxide-mark);
  border: 0;
  text-decoration: none;
  margin-inline-start: 0.2em;
}
.woocommerce form .form-row .optional { color: var(--wp--preset--color--ink-3); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  min-height: var(--wp--custom--tap);
  width: 100%;
  padding: 0 var(--wp--preset--spacing--label);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 0;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
}

.woocommerce form .form-row textarea {
  padding-block: var(--wp--preset--spacing--label);
  min-height: calc(var(--wp--custom--tap) * 2);
  line-height: var(--wp--custom--leading--base);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--wp--preset--color--oxide-mark);
}

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

/* A checkbox row is a row of two things side by side, not a stacked label. */
.woocommerce form .form-row.woocommerce-form__label-for-checkbox,
.woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--wp--preset--spacing--label);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
}

.woocommerce form .form-row input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

/* Woo's own "this field is required" hint under a row. */
.woocommerce .woocommerce-password-hint,
.woocommerce form .form-row .description {
  font-size: var(--wp--preset--font-size--micro);
  color: var(--wp--preset--color--ink-3);
}

/* --------------------------------------------------------------- my account

   Two columns on a desk, stacked on a phone. The navigation is a list of
   destinations, not a set of buttons: hairline separated, the current one
   marked with an oxide rule rather than a fill. */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--section);
  align-items: start;
}

/* The login page is one centred form, not a two-column account shell. */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 28rem;
  margin-inline: auto;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wp--preset--color--rule);
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--tap);
  padding-inline: var(--wp--preset--spacing--label);
  border-inline-start: 3px solid transparent;
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--wp--preset--color--sunken);
  color: var(--wp--preset--color--ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
  border-inline-start-color: var(--wp--preset--color--oxide-mark);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--sunken);
}

.woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }

/* ------------------------------------------------------------------ tables

   Orders, order details and downloads all use the same shape. Money and dates
   line up in columns, which is the whole reason to keep them tabular. */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table th {
  text-align: start;
  padding: var(--wp--preset--spacing--label);
  border-bottom: 2px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--sunken);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
}

.woocommerce table.shop_table td {
  padding: var(--wp--preset--spacing--label);
  border-bottom: 1px solid var(--wp--preset--color--rule-soft);
  vertical-align: middle;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--rule-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  border-top: 2px solid var(--wp--preset--color--rule);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
}

/* Money right, and tabular, so a column of totals reads as a column. */
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-total,
.woocommerce table.shop_table .amount,
.woocommerce table.shop_table .product-total,
.woocommerce table.shop_table .product-subtotal {
  font-variant-numeric: tabular-nums;
}

/* Woo's own responsive table CSS stacks with a ::before label. Keep the label
   in the theme's voice rather than Woo's bold sentence case. */
@media (max-width: 48em) {
  .woocommerce table.shop_table_responsive tr td::before {
    font-size: var(--wp--preset--font-size--micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-3);
  }
}

/* ------------------------------------------------------------ order status

   The status is what a customer opens this page to read. On a firearms order
   it sits at "processing" for as long as the transfer takes, so it has to be
   legible at a glance rather than a word in a cell. */

.woocommerce-orders-table__cell-order-status,
.woocommerce-order-overview__status {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- order received

   The confirmation, and the page a customer returns to. Woo renders the
   summary as a <ul> of label/value pairs; set it as a receipt. */

.woocommerce-order-overview,
ul.woocommerce-thankyou-order-details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--group);
  margin: 0 0 var(--wp--preset--spacing--section);
  padding: var(--wp--preset--spacing--item);
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 3px solid var(--wp--preset--color--oxide);
  background: var(--wp--preset--color--sunken);
}

.woocommerce-order-overview li,
ul.woocommerce-thankyou-order-details li {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--hair);
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}

.woocommerce-order-overview li strong,
ul.woocommerce-thankyou-order-details li strong {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--ink);
  font-variant-numeric: tabular-nums;
}

/* Both destinations, side by side. On a firearm order one of these is the
   dealer, and a customer must be able to tell them apart without reading. */
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-order-details + .woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--wp--preset--spacing--group);
}

.woocommerce-customer-details address {
  font-style: normal;
  padding: var(--wp--preset--spacing--item);
  border: 1px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--sunken);
  line-height: var(--wp--custom--leading--base);
}

/* ---------------------------------------------------------------- addresses */

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--wp--preset--spacing--group);
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--label);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding-bottom: var(--wp--preset--spacing--hair);
  margin-bottom: var(--wp--preset--spacing--label);
}

/* --------------------------------------------------------------- pagination */

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--hair);
  list-style: none;
  margin: var(--wp--preset--spacing--group) 0 0;
  padding: 0;
  border: 0;
}

.woocommerce-pagination ul.page-numbers li { border: 0; }

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wp--custom--tap);
  min-height: var(--wp--custom--tap);
  border: 1px solid var(--wp--preset--color--rule);
  color: var(--wp--preset--color--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.woocommerce-pagination .page-numbers.current {
  background: var(--wp--preset--color--oxide);
  border-color: var(--wp--preset--color--oxide);
  color: var(--wp--preset--color--on-oxide);
}

/* ------------------------------------------------------------------- phone */

@media (max-width: 48em) {
  .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--group);
  }

  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    align-items: flex-start;
    flex-direction: column;
  }

  .woocommerce-message .button,
  .woocommerce-info .button {
    margin-inline-start: 0;
  }
}

/* ------------------------------------------------- the two-destination cart

   A cart may hold a rifle and the scope for it, and those do not travel
   together. The summary panel is a block and carries its own stylesheet
   (copperhill-core/blocks/cart-destinations); what belongs to the theme is how
   a CLASSIC cart row is marked, because that markup is WooCommerce's.

   The block cart builds its own rows and ignores `woocommerce_cart_item_class`,
   so under blocks the per-item destination arrives as ordinary item metadata
   instead — a label and a value, styled below, with no class of ours to lose to
   the blocks' HTML stripping.
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table tr.ch-dest td:first-child {
  border-inline-start: 3px solid transparent;
}
.woocommerce table.shop_table tr.ch-dest--dealer td:first-child { border-inline-start-color: var(--wp--preset--color--sage); }
.woocommerce table.shop_table tr.ch-dest--unknown td:first-child { border-inline-start-color: var(--wp--preset--color--oxide-mark); }

/* The item metadata line, in both carts. Woo renders it as a definition list
   in the block cart and a <dl class="variation"> in the classic one. */
.woocommerce .variation,
.wc-block-components-product-details {
  margin: var(--wp--preset--spacing--hair) 0 0;
  font-size: var(--wp--preset--font-size--micro);
  line-height: 1.4;
}

.woocommerce .variation dt,
.wc-block-components-product-details__name {
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}

.woocommerce .variation dd,
.wc-block-components-product-details__value {
  margin: 0;
  color: var(--wp--preset--color--ink-2);
}

/* ------------------------------------------------- the block cart & checkout

   AD decided block (2026-09-16), so the cart and checkout are React, not PHP
   templates. There is nothing to override — you style around WooCommerce's own
   components through their `wc-block-components-*` classes.

   Restraint is the rule here, and it is not aesthetic. The block checkout is
   the most tested checkout on the platform: its floating labels, its validation
   timing and its focus management all work, and every one of them is easy to
   break from a stylesheet and hard to notice. So this sets surface, border,
   radius, colour and type — and leaves the mechanics alone. The three house
   rules still apply: no radius, 44px targets, tabular money.
   ------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  --wc-blocks-color-primary: var(--wp--preset--color--oxide);
}

/* Steps. Each is a titled section of the one-page checkout, and the title is
   the only navigation a customer gets now the stepper is gone. */
.wc-block-components-checkout-step {
  border: 0;
  padding-block: var(--wp--preset--spacing--group);
  border-block-start: 1px solid var(--wp--preset--color--rule-soft);
}
.wc-block-components-checkout-step:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--wp--preset--font-family--slab, inherit);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--lg);
  color: var(--wp--preset--color--ink);
}

.wc-block-components-checkout-step__description {
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--small);
}

/* Fields. Border, ground and radius only — the label float is theirs. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  min-height: var(--wp--custom--tap);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 0;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
  color: var(--wp--preset--color--ink-3);
}

.wc-block-components-validation-error {
  color: var(--wp--preset--color--oxide-mark);
  font-size: var(--wp--preset--font-size--micro);
}

/* Buttons. The place-order button is the one filled thing on the page. */
.wc-block-components-button:not(.is-link) {
  min-height: var(--wp--custom--tap);
  border-radius: 0;
  background: var(--wp--preset--color--oxide);
  color: var(--wp--preset--color--on-oxide);
  font-family: inherit;
  font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--wp--preset--color--oxide-deep);
}
.wc-block-components-button.is-link {
  color: var(--wp--preset--color--copper-text);
}

/* Totals. Money lines up or it is not a total. */
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--ink);
}
.wc-block-components-totals-item__label {
  color: var(--wp--preset--color--ink-2);
}
.wc-block-components-totals-footer-item {
  border-block-start: 2px solid var(--wp--preset--color--rule);
  font-weight: 700;
}

.wc-block-components-order-summary,
.wc-block-components-sidebar {
  background: var(--wp--preset--color--sunken);
  border: 1px solid var(--wp--preset--color--rule);
  padding: var(--wp--preset--spacing--item);
}

/* Woo's own notice banners, matched to the classic ones above. */
.wc-block-components-notice-banner {
  border-radius: 0;
  border: 1px solid var(--wp--preset--color--rule);
  border-inline-start-width: 3px;
  background: var(--wp--preset--color--sunken);
  color: var(--wp--preset--color--ink);
}
.wc-block-components-notice-banner.is-success { border-inline-start-color: var(--wp--preset--color--sage); background: var(--wp--preset--color--sage-wash); }
.wc-block-components-notice-banner.is-info    { border-inline-start-color: var(--wp--preset--color--copper); background: var(--wp--preset--color--copper-wash); }
.wc-block-components-notice-banner.is-error   { border-inline-start-color: var(--wp--preset--color--oxide-mark); background: var(--wp--preset--color--oxide-wash); }

/*
 * The mobile submit bar.
 *
 * WooCommerce fades the page out behind it with a hard-coded cream shadow that
 * assumes a light theme. On this site's dark ground it reads as a grey smear
 * across the last thing before you pay, so it is repainted from the token that
 * actually is the page.
 */
.wc-block-cart__submit-container {
  background-color: var(--wp--preset--color--paper);
}
.wc-block-cart__submit-container::before {
  box-shadow: none;
  border-block-start: 1px solid var(--wp--preset--color--rule);
}