/* The Procuress — WooCommerce skin ------------------------------------------
   Cart, checkout, account, notices, forms, tables and the buttons WooCommerce
   renders itself.

   DELIBERATELY UNLAYERED, and it must stay that way.

   WooCommerce ships woocommerce.css without an @layer, so an unlayered rule of
   ANY specificity beats every rule in the theme's layers. A `@layer components`
   version of this file would lose to `.woocommerce a.button` no matter how it
   was written. Being unlayered, this file also loads last (see inc/assets.php),
   so equal specificity resolves here.

   Two consequences to respect when editing:

   1. Selectors are element-qualified the way WooCommerce's are
      (`.woocommerce a.button`, not `.woocommerce .button`), so they match or
      exceed vendor specificity without reaching for !important.
   2. Everything is scoped under a WooCommerce ancestor. Nothing here may leak
      onto the Salon, the Collection, the narrative pages or the catalogue,
      which own their own components.

   Everything except the notices is scoped to the three screens WooCommerce
   actually owns — Cart, Checkout and My Account. The catalogue and product
   pages are Phase 5 and Phase 6 designs with their own components (the sort
   control, PurchaseControls, the grid), and an unlayered skin loaded after
   them would quietly outrank every one. Notices are the exception: they can
   surface anywhere, and WooCommerce's default box would be as wrong on the
   catalogue as it is in the cart.

   Values come from tokens.css. No colour is written literally. */

/* ==========================================================================
   0. The shell
   Cart, Checkout and My Account render through page.php, whose content column
   is a reading measure — right for prose, wrong for a cart table or an account
   dashboard. Only these three screens are released to the container width.
   ========================================================================== */
.woocommerce-cart .tp-page__content,
.woocommerce-checkout .tp-page__content,
.woocommerce-account .tp-page__content {
  max-width: none;
}

/* ==========================================================================
   1. Buttons
   WooCommerce draws its own; they should read as the house's. Hierarchy is
   preserved rather than flattened: `.alt` is the committing action (Place
   order, Update), a plain `.button` is secondary, and remove/cancel is a quiet
   text control rather than a red block.
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce #respond input#submit,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page a.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page button.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page input.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.woocommerce-button,
.woocommerce-account button.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tp-btn-h-secondary);
  padding: 0 var(--tp-space-6);
  background: none;
  background-image: none;
  border: var(--tp-border-brass);
  border-radius: var(--tp-radius);
  box-shadow: none;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-l);
  font-weight: var(--tp-weight-regular);
  letter-spacing: var(--tp-track-label);
  text-transform: uppercase;
  text-shadow: none;
  color: var(--tp-color-ink);
  line-height: 1.3;
  transition:
    background-color var(--tp-dur-fast) ease,
    border-color var(--tp-dur-fast) ease,
    color var(--tp-dur-fast) ease;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce #respond input#submit:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page a.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page button.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page input.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.woocommerce-button:hover,
.woocommerce-account button.woocommerce-Button:hover {
  background: var(--tp-color-paper-hover);
  background-image: none;
  border-color: var(--tp-color-brass);
  color: var(--tp-color-ink);
}

/* The committing action on a screen: navy fill, as everywhere else on the site. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce #respond input#submit.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page a.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page button.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page input.button.alt {
  min-height: var(--tp-btn-h-primary);
  background: var(--tp-color-ink);
  background-image: none;
  border-color: var(--tp-color-ink);
  color: var(--tp-color-paper);
  font-size: var(--tp-size-label-xl);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce #respond input#submit.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page a.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page button.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page input.button.alt:hover {
  background: var(--tp-color-cobalt);
  background-image: none;
  border-color: var(--tp-color-cobalt);
  color: var(--tp-color-paper);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled[disabled],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:disabled[disabled],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt.disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled[disabled],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.disabled:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled[disabled]:hover {
  background: none;
  background-image: none;
  border-color: var(--tp-color-line);
  color: var(--tp-color-text-muted);
  opacity: 1;
  cursor: not-allowed;
}

/* Remove / cancel: a quiet text control, not a red block.

   WooCommerce draws the cart's "×" with `color: var(--wc-red) !important`, so
   no ordinary declaration can recolour it. Rather than answer !important with
   !important, this redefines the CUSTOM PROPERTY that declaration reads:
   custom properties resolve in the element's own context, so the vendor rule
   keeps winning and simply resolves to a house colour. No !important needed.

   The hover state is the one place in this file that does use !important:
   WooCommerce hard-codes `color: #fff !important` there against a red fill
   this skin removes, which would leave the control invisible. There is no
   variable to redirect and no specificity that can reach it. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.remove,
.woocommerce-cart a.remove {
  --wc-red: var(--tp-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tp-tap-target);
  height: var(--tp-tap-target);
  background: none;
  border-radius: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-size-body-l);
  font-weight: var(--tp-weight-light);
  text-decoration: none;
  color: var(--tp-color-text-muted);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.remove:hover,
.woocommerce-cart a.remove:hover {
  background: none;
  /* See the note above: the vendor's own !important would otherwise paint
     this white on the background it no longer has. */
  color: var(--tp-color-ink) !important;
}

/* ==========================================================================
   2. Forms
   Native controls kept native: only the chrome changes, so validation,
   autofill, password managers and keyboard behaviour are untouched.
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row {
  margin: 0 0 var(--tp-space-5);
  padding: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row label,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row label,
.woocommerce-account form label,
.woocommerce-checkout form label {
  display: block;
  margin-bottom: var(--tp-space-2);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-s);
  letter-spacing: var(--tp-track-label);
  text-transform: uppercase;
  color: var(--tp-color-gold-text-deep);
}

/* The required marker is information, not an alarm. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row .required,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row .required,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .required {
  color: var(--tp-color-gold-text-deep);
  text-decoration: none;
  border: 0;
}

/* WooCommerce styles these as `.woocommerce form .form-row .input-text` — a
   three-class selector — and its checkout textarea carries `.input-text` too.
   Each selector below therefore names the element as well, so the pair matches
   at (0,3,1) and wins on source order rather than on luck. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row input.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row textarea.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row textarea,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row select,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row input.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row textarea.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row textarea,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row select,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce select,
.woocommerce-account input.woocommerce-Input,
.woocommerce-checkout input.input-text {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tp-btn-h-secondary);
  padding: 0 var(--tp-space-4);
  background: var(--tp-color-paper);
  border: var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: none;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-size-input);
  color: var(--tp-color-text);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row textarea,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row textarea.input-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row textarea,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea {
  min-height: 140px;
  padding: var(--tp-space-3) var(--tp-space-4);
  line-height: var(--tp-leading-body);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.input-text:focus,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea:focus,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce select:focus,
.woocommerce-account input.woocommerce-Input:focus,
.woocommerce-checkout input.input-text:focus {
  outline: 2px solid var(--tp-color-cobalt);
  outline-offset: 2px;
  border-color: var(--tp-color-cobalt);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.input-text::placeholder,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce textarea::placeholder {
  font-style: italic;
  color: var(--tp-color-text-muted);
}

/* Checkbox and radio rows read as a sentence, not as a field. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row label.checkbox,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row label.radio,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page form .form-row label.checkbox,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  margin: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-size-body-s);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tp-color-text-body);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="checkbox"],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--tp-color-cobalt);
}

/* WooCommerce boxes several forms by default. The house does not use boxes. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form.login,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form.register,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form.checkout_coupon,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.edit-account,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-EditAccountForm fieldset {
  margin: var(--tp-space-6) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  max-width: var(--tp-measure);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-EditAccountForm legend {
  padding: 0;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-s);
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
  color: var(--tp-color-gold-text-deep);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-LostPassword,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-privacy-policy-text,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-form-login__rememberme {
  font-size: var(--tp-size-body-s);
  color: var(--tp-color-text-muted);
}

/* ==========================================================================
   3. Notices
   Semantics are WooCommerce's; only the treatment changes. Each state keeps a
   distinct edge colour AND a distinct word, so the state never rests on hue
   alone.
   ========================================================================== */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-3) var(--tp-space-5);
  margin: 0 0 var(--tp-space-6);
  padding: var(--tp-space-4) var(--tp-space-5);
  background: var(--tp-color-paper-well);
  border: 0;
  border-left: 2px solid var(--tp-color-brass);
  border-radius: 0;
  list-style: none;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-size-body-s);
  line-height: var(--tp-leading-body);
  color: var(--tp-color-text-body);
}

/* WooCommerce's ::before tick/alert glyphs belong to its own palette. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before {
  content: none;
}

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
  border-left-color: var(--tp-color-cobalt);
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  /* Deliberately not a red block: the charcoal edge plus WooCommerce's own
     wording carries the state, and the contrast is well above 4.5:1. */
  border-left-color: var(--tp-color-charcoal);
  background: var(--tp-color-paper-hover);
}

.woocommerce .woocommerce-error li,
.woocommerce-page .woocommerce-error li {
  margin: 0;
  list-style: none;
}

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

/* Inline field validation keeps WooCommerce's own logic; only the edge changes. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--tp-color-charcoal);
}

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

/* ==========================================================================
   4. Tables — cart, orders, totals, addresses
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table {
  width: 100%;
  margin: 0 0 var(--tp-space-7);
  background: none;
  border: 0;
  border-top: var(--tp-border-brass-soft);
  border-radius: 0;
  border-collapse: collapse;
  font-size: var(--tp-size-body-s);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table th,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table th {
  padding: var(--tp-space-4) var(--tp-space-3);
  border: 0;
  border-bottom: var(--tp-border-soft);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-s);
  font-weight: var(--tp-weight-regular);
  letter-spacing: var(--tp-track-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--tp-color-gold-text-deep);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table td {
  padding: var(--tp-space-5) var(--tp-space-3);
  background: none;
  border: 0;
  border-bottom: var(--tp-border-soft);
  vertical-align: middle;
  color: var(--tp-color-text-body);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table tfoot th,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table tfoot td,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table tfoot th,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table tfoot td {
  font-weight: var(--tp-weight-regular);
  color: var(--tp-color-ink);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table .order-total td,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table .order-total th {
  border-bottom: 0;
  font-size: var(--tp-size-body-m);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.product-name a,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number a {
  color: var(--tp-color-ink);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.product-name a:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number a:hover {
  color: var(--tp-color-cobalt);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table img {
  width: 64px;
  height: auto;
  border-radius: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table .amount,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-Price-amount {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-l);
  letter-spacing: var(--tp-track-meta);
  color: var(--tp-color-ink);
}

/* Quantity: the catalogue's own control language. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .quantity input.qty,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page .quantity input.qty {
  width: 68px;
  min-height: var(--tp-qty-btn-h);
  padding: 0 var(--tp-space-2);
  background: var(--tp-color-paper);
  border: var(--tp-border);
  border-radius: var(--tp-radius);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-l);
  text-align: center;
  color: var(--tp-color-ink);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart td.actions {
  padding: var(--tp-space-6) 0;
  border-bottom: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-3);
  align-items: center;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart td.actions .coupon input.input-text {
  width: auto;
  min-width: 200px;
}

/* WooCommerce gives the coupon field its own four-class rule
   (`.woocommerce-cart table.cart td.actions .coupon .input-text`), which
   outranks the general field rule above. Named at the same weight here so it
   is not the one field on the site wearing a different border. */
.woocommerce-cart table.cart td.actions .coupon input.input-text,
.woocommerce-checkout table.cart td.actions .coupon input.input-text {
  border: var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 0 var(--tp-space-4);
  margin: 0;
}

/* Cart totals / order review. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cart_totals h2,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cross-sells h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-account h3 {
  font-weight: var(--tp-weight-regular);
  font-size: var(--tp-size-h2);
  letter-spacing: var(--tp-track-h);
  text-transform: uppercase;
  color: var(--tp-color-deep-blue);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cart-collaterals {
  width: 100%;
}

/* ==========================================================================
   5. My Account
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin: 0 0 var(--tp-space-7);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-3) var(--tp-space-6);
  margin: 0;
  padding: var(--tp-space-4) 0;
  border-top: var(--tp-border-brass-soft);
  border-bottom: var(--tp-border-soft);
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-l);
  letter-spacing: var(--tp-track-nav);
  text-transform: uppercase;
  color: var(--tp-color-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--tp-color-cobalt);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--tp-color-deep-blue);
  border-bottom: var(--tp-border-brass);
  padding-bottom: 3px;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content address {
  max-width: var(--tp-measure);
  font-size: var(--tp-size-body-s);
  font-style: normal;
  line-height: var(--tp-leading-body);
  color: var(--tp-color-text-body);
}

.woocommerce-account .addresses .col-1,
.woocommerce-account .addresses .col-2 {
  float: none;
  width: 100%;
}

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tp-space-7);
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-size: var(--tp-size-card-title-l);
  letter-spacing: var(--tp-track-tight);
}

/* ==========================================================================
   6. Empty states
   WooCommerce's own copy, in the house's quiet treatment.
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cart-empty,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-info.cart-empty,
.woocommerce-account .woocommerce-info,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-Message--info {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--tp-size-body-l);
  font-style: italic;
  font-weight: var(--tp-weight-light);
  color: var(--tp-color-text-body);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .return-to-shop {
  margin-top: var(--tp-space-6);
}

/* ==========================================================================
   7. Pagination and select2
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce nav.woocommerce-pagination ul {
  border: 0;
  gap: var(--tp-space-3);
  display: flex;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce nav.woocommerce-pagination ul li a,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce nav.woocommerce-pagination ul li span {
  padding: var(--tp-space-2) var(--tp-space-3);
  background: none;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-size-label-l);
  letter-spacing: var(--tp-track-meta);
  color: var(--tp-color-text);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce nav.woocommerce-pagination ul li span.current {
  background: none;
  color: var(--tp-color-deep-blue);
  border-bottom: var(--tp-border-brass);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .select2-container .select2-selection--single {
  height: var(--tp-btn-h-secondary);
  background: var(--tp-color-paper);
  border: var(--tp-border);
  border-radius: var(--tp-radius);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: var(--tp-btn-h-secondary);
  padding-left: var(--tp-space-4);
  font-family: var(--tp-font-serif);
  font-size: var(--tp-size-input);
  color: var(--tp-color-text);
}

/* ==========================================================================
   8. Tablet and mobile
   A cart or orders table is a desktop shape. Below 700 each row becomes a
   labelled block — WooCommerce already emits `data-title` on every cell, so
   the label comes from its own markup rather than from a duplicate copy here.
   ========================================================================== */
@media (max-width: 1099px) {
  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 699px) {
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table {
    border-top: 0;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table thead,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table thead {
    /* Hidden visually and from assistive tech together: every cell below
       repeats its own heading, so nothing is lost. */
    display: none;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table tr,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table tr {
    display: block;
    padding: var(--tp-space-5) 0;
    border-top: var(--tp-border-soft);
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-4);
    padding: var(--tp-space-2) 0;
    border-bottom: 0;
    text-align: right;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td::before,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table td::before {
    content: attr(data-title);
    flex: none;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    text-align: left;
    color: var(--tp-color-gold-text-deep);
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.product-remove::before,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.product-thumbnail::before,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.actions::before {
    content: none;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.actions {
    display: block;
    text-align: left;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart td.actions .coupon input.input-text {
    min-width: 0;
    width: 100%;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page a.button,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page button.button,
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page input.button {
    /* A full-width action rather than one that can be clipped by a narrow cell. */
    width: 100%;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table td.product-remove a.remove {
    margin-left: auto;
  }

  /* The cart row, compactly: the thumbnail and its remove control share the
     top line, and the labelled values stack beneath. WooCommerce's smallscreen
     CSS turns the row into a plain block, which leaves the thumbnail and the
     "×" stranded on lines of their own. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-thumbnail {
    flex: none;
    display: block;
    padding-right: var(--tp-space-4);
  }

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-remove {
    flex: none;
    order: 2;
    margin-left: auto;
    padding: 0;
  }

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-name,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-price,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-quantity,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.product-subtotal,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.cart tbody tr td.actions {
    order: 3;
    flex: 1 1 100%;
  }

  /* WooCommerce zebra-stripes alternate rows at small sizes. The house does
     not stripe; the hairline between rows is the separation. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }

  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .cart-collaterals .cart_totals {
    max-width: none;
  }
}