/*
Theme Name: White Ash Reserve Blocksy Child v1.0.16
Theme URI: https://whiteashreserve.com/
Description: Sitewide White Ash Reserve public storefront presentation for Blocksy and WooCommerce.
Author: White Ash Reserve
Template: blocksy
Version: 1.0.16
Text Domain: wa-reserve
*/

/*
 * Blocksy Premium Shortcuts Bar is intentionally disabled sitewide.
 *
 * The Friday Drop waiting-room template deliberately does not receive the
 * custom-chrome body class, so this rule must not depend on that class. Zeroing
 * Blocksy's height variables also prevents the removed bar from reserving
 * viewport space for drawers or other fixed elements.
 */
html,
body {
  --shortcuts-bar-height: 0px !important;
  --shortcuts-bar-parent-height: 0px !important;
}

.ct-shortcuts-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Approved custom-chrome routes own their visible header and footer. The body
 * class is the primary scope; a relational-selector fallback handles a stale
 * cached body tag paired with the current White Ash header markup.
 */
body.wa-reserve-custom-chrome #header,
body.wa-reserve-custom-chrome footer#footer.ct-footer,
body.wa-reserve-custom-chrome #footer.ct-footer,
body.wa-reserve-custom-chrome [data-block*="55483"],
body.wa-reserve-custom-chrome #blocksy-content-block-55483,
body.wa-reserve-custom-chrome #block-55483,
body.wa-reserve-custom-chrome .post-55483,
body.wa-reserve-custom-chrome [data-block*="53882"],
body.wa-reserve-custom-chrome #blocksy-content-block-53882,
body.wa-reserve-custom-chrome #block-53882,
body.wa-reserve-custom-chrome .post-53882,
body.wa-reserve-custom-chrome #offcanvas,
body.wa-reserve-custom-chrome [data-id="offcanvas"],
body.wa-reserve-custom-chrome [data-panel="offcanvas"],
body.wa-reserve-custom-chrome .ct-breadcrumbs,
body.wa-reserve-custom-chrome .woocommerce-breadcrumb,
body.wa-reserve-custom-chrome .rank-math-breadcrumb,
body.wa-reserve-custom-chrome .yoast-breadcrumb,
body.wa-reserve-custom-chrome nav.breadcrumbs,
body.wa-reserve-custom-chrome [typeof="BreadcrumbList"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@supports selector(body:has(.wa-site-header)) {
  body:has([data-wa-site-header]) #header,
  body:has([data-wa-site-header]) footer#footer.ct-footer,
  body:has([data-wa-site-header]) #footer.ct-footer,
  body:has([data-wa-site-header]) [data-block*="55483"],
  body:has([data-wa-site-header]) #blocksy-content-block-55483,
  body:has([data-wa-site-header]) #block-55483,
  body:has([data-wa-site-header]) .post-55483,
  body:has([data-wa-site-header]) [data-block*="53882"],
  body:has([data-wa-site-header]) #blocksy-content-block-53882,
  body:has([data-wa-site-header]) #block-53882,
  body:has([data-wa-site-header]) .post-53882,
  body:has([data-wa-site-header]) #offcanvas,
  body:has([data-wa-site-header]) [data-id="offcanvas"],
  body:has([data-wa-site-header]) [data-panel="offcanvas"],
  body:has([data-wa-site-header]) .ct-breadcrumbs,
  body:has([data-wa-site-header]) .woocommerce-breadcrumb,
  body:has([data-wa-site-header]) .rank-math-breadcrumb,
  body:has([data-wa-site-header]) .yoast-breadcrumb,
  body:has([data-wa-site-header]) nav.breadcrumbs,
  body:has([data-wa-site-header]) [typeof="BreadcrumbList"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/*
 * Sitewide public-document palette.
 *
 * This layer changes presentation only. WooCommerce remains responsible for
 * every form, field name, endpoint, nonce, validation message, and payment
 * handler. Protected payment/callback requests are excluded in functions.php.
 */
body.wa-reserve-custom-chrome {
  --theme-palette-color-1: #c87945;
  --theme-palette-color-2: #f4f0e5;
  --theme-palette-color-3: #d7d1c4;
  --theme-palette-color-4: #958f84;
  --theme-palette-color-5: #11120f;
  --theme-palette-color-6: #0b0c0a;
  --theme-palette-color-7: #080807;
  --theme-palette-color-8: #080807;
  background: #080807;
  color: #d7d1c4;
}

/*
 * Cache-resistant public-page surface ownership.
 *
 * Blocksy dynamic CSS and checkout/account plugins can print after the child
 * stylesheet. Keep the reviewed dark palette authoritative without changing
 * any WooCommerce form, endpoint, gateway, or plugin behavior.
 */
body.wa-reserve-custom-chrome:not(.wa-reserve-front-page) {
  color-scheme: dark;
  background-color: #080807 !important;
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(
    #main-container,
    .site-main,
    main#main,
    .site-content,
    .content-area,
    .entry-content,
    .ct-container,
    .ct-container-full,
    .ct-content,
    .woocommerce,
    .woocommerce-page,
    article
  ) {
  background-color: #080807 !important;
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(
    form.checkout,
    .woocommerce-checkout-review-order,
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content,
    .woocommerce-cart-form,
    .cart_totals,
    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword,
    #payment,
    table.shop_table,
    table.shop_table th,
    table.shop_table td
  ) {
  border-color: rgba(244, 240, 229, 0.14) !important;
  background-color: #11120f !important;
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(
    input.input-text,
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea
  ) {
  border-color: rgba(244, 240, 229, 0.28) !important;
  background-color: #0b0c0a !important;
  color: #f4f0e5 !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(button.button, a.button, input.button, #place_order) {
  border-color: #c87945 !important;
  background-color: #c87945 !important;
  color: #0b0c0a !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(.entry-title, .page-title, .product_title, h1, h2, h3, h4, h5, h6) {
  color: #f4f0e5 !important;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :where(.entry-content, .woocommerce, .woocommerce-page)
  a:not(.button) {
  color: #c87945;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page) #main-container,
body.wa-reserve-custom-chrome:not(.wa-reserve-front-page) .site-main {
  background: #080807;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :is(.entry-title, .page-title, .woocommerce-products-header__title, h1, h2, h3) {
  color: #f4f0e5;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :is(.entry-content, .woocommerce, .woocommerce-info, .woocommerce-message, .woocommerce-error)
  a:not(.button) {
  color: #c87945;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :is(.woocommerce-loop-product__title, .woocommerce div.product .product_title) {
  color: #f4f0e5;
}

body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
  :is(.price, .woocommerce-Price-amount) {
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(
    .woocommerce-cart-form,
    .cart_totals,
    form.checkout,
    .woocommerce-checkout-review-order,
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content,
    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword
  ) {
  border: 1px solid rgba(244, 240, 229, 0.14);
  background: #11120f;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(table.shop_table, table.shop_table th, table.shop_table td) {
  border-color: rgba(244, 240, 229, 0.14);
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(
    input.input-text,
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea
  ) {
  /* Mockup value — see --wa-commerce-line-strong. Accepted deviation from
     WCAG 1.4.11; do not raise. */
  border: 1px solid rgba(244, 240, 229, 0.28);
  background: #0b0c0a;
  color: #f4f0e5;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(
    input.input-text,
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea
  ):focus {
  border-color: #c87945;
  outline: 2px solid rgba(200, 121, 69, 0.34);
  outline-offset: 1px;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(button.button, a.button, input.button, #place_order) {
  border-color: #c87945;
  background: #c87945;
  color: #0b0c0a;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(button.button, a.button, input.button, #place_order):hover {
  border-color: #f4f0e5;
  background: #f4f0e5;
  color: #0b0c0a;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, #payment) {
  border-color: rgba(244, 240, 229, 0.16);
  background: #11120f;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box {
  background: #0b0c0a;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box::before {
  border-bottom-color: #0b0c0a;
}

body.wa-reserve-custom-chrome:is(
    .woocommerce-cart,
    .woocommerce-checkout,
    .woocommerce-account
  )
  input:is([type="checkbox"], [type="radio"]) {
  accent-color: #c87945;
}

.wa-site-header {
  --wa-header-ink: #080807;
  --wa-header-cream: #f4f0e5;
  --wa-header-cream-soft: #d7d1c4;
  --wa-header-muted: #958f84;
  --wa-header-action: #c87945;
  --wa-header-line: rgba(244, 240, 229, 0.14);
  --wa-header-content: 1360px;
  --wa-header-side: clamp(20px, 4vw, 64px);
  --wa-header-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-header-serif: Georgia, "Times New Roman", serif;

  position: relative;
  z-index: 90;
  width: 100%;
  background: var(--wa-header-ink);
  color: var(--wa-header-cream);
  font-family: var(--wa-header-sans);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.wa-site-header,
.wa-site-header *,
.wa-site-header *::before,
.wa-site-header *::after {
  box-sizing: border-box;
}

.wa-site-header a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.wa-site-header :focus-visible {
  outline: 2px solid var(--wa-header-action);
  outline-offset: 4px;
}

.wa-site-header__notice {
  min-height: 32px;
  display: flex;
  align-items: center;
  border-left: 3px solid var(--wa-header-action);
  background: var(--wa-header-cream);
  color: var(--wa-header-ink);
}

.wa-site-header__notice-inner,
.wa-site-header__main-inner {
  width: 100%;
  max-width: var(--wa-header-content);
  margin-inline: auto;
  padding-inline: var(--wa-header-side);
}

.wa-site-header__notice-inner {
  min-height: 32px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.wa-site-header__schedule {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  align-items: center;
  margin: 0;
}

.wa-site-header__schedule::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--wa-header-action);
  content: "";
}

.wa-site-header__schedule strong {
  font-weight: 800;
}

.wa-site-header__access {
  flex: 0 0 auto;
  text-decoration-color: rgba(8, 8, 7, 0.4);
  text-underline-offset: 3px;
}

.wa-site-header__access:hover {
  color: #7c3d1d;
  text-decoration-color: currentColor;
}

.wa-site-header__notice :focus-visible {
  outline-color: var(--wa-header-ink);
}

.wa-site-header__main {
  min-height: 74px;
  border-bottom: 1px solid var(--wa-header-line);
  background: rgba(8, 8, 7, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.wa-site-header__main-inner {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  align-items: center;
  padding-block: 11px;
}

.wa-site-header__brand {
  width: fit-content;
  display: inline-flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
}

.wa-site-header__mark {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 34px;
  object-fit: contain;
}

.wa-site-header__brand-type {
  display: flex;
  flex-direction: column;
  color: var(--wa-header-cream);
  line-height: 1;
  text-transform: uppercase;
}

.wa-site-header__brand-type strong {
  color: inherit;
  font-family: var(--wa-header-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.wa-site-header__brand-type small {
  margin-top: 5px;
  color: var(--wa-header-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.38em;
}

.wa-site-header__desktop-nav ul,
.wa-mobile-menu ul {
  display: flex;
  gap: clamp(18px, 2.2vw, 34px);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-site-header__desktop-nav a,
.wa-site-header__account,
.wa-header-cart,
.wa-mobile-menu summary {
  color: var(--wa-header-cream-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.wa-site-header__desktop-nav a {
  display: inline-flex;
  padding: 12px 0;
}

.wa-site-header__desktop-nav a:hover,
.wa-site-header__account:hover,
.wa-header-cart:hover,
.wa-mobile-menu summary:hover {
  color: var(--wa-header-action);
}

.wa-site-header__actions {
  position: relative;
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  justify-content: flex-end;
}

.wa-site-header__account,
.wa-header-cart,
.wa-mobile-menu summary {
  min-height: 44px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.wa-site-header__account-icon,
.wa-header-cart__icon,
.wa-mobile-menu__icon {
  position: relative;
  width: 17px;
  height: 17px;
  display: inline-block;
  flex: 0 0 17px;
}

.wa-site-header__account-icon::before {
  position: absolute;
  top: 1px;
  left: 5px;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.wa-site-header__account-icon::after {
  position: absolute;
  right: 2px;
  bottom: 0;
  left: 2px;
  height: 7px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  content: "";
}

.wa-header-cart__icon {
  height: 15px;
  border: 1px solid currentColor;
}

.wa-header-cart__icon::before {
  position: absolute;
  top: -5px;
  left: 4px;
  width: 7px;
  height: 6px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  content: "";
}

.wa-header-cart__count {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  padding: 0 5px;
  place-items: center;
  border: 1px solid var(--wa-header-action);
  border-radius: 999px;
  color: var(--wa-header-action);
  font-size: 9px;
  line-height: 1;
}

.wa-mobile-menu {
  position: relative;
  display: none;
}

.wa-mobile-menu summary {
  cursor: pointer;
  list-style: none;
}

.wa-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.wa-mobile-menu__icon {
  height: 12px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.wa-mobile-menu__icon::after {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  border-top: 1px solid currentColor;
  content: "";
}

.wa-mobile-menu__panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 20px;
  border: 1px solid rgba(244, 240, 229, 0.22);
  background: #0b0b09;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.54);
}

.wa-mobile-menu__panel ul {
  align-items: stretch;
  flex-direction: column;
  gap: 0;
}

.wa-mobile-menu__panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--wa-header-line);
  color: var(--wa-header-cream-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.wa-mobile-menu__panel li:last-child a {
  border-bottom: 0;
}

.wa-mobile-menu__panel a:hover {
  color: var(--wa-header-action);
}

.wa-home {
  --wa-ink: #080807;
  --wa-ink-soft: #11110f;
  --wa-cream: #f4f0e5;
  --wa-cream-soft: #d7d1c4;
  --wa-muted: #958f84;
  --wa-action: #c87945;
  --wa-action-hover: #d58a54;
  --wa-action-ink: #0b0c0a;
  --wa-line: rgba(244, 240, 229, 0.14);
  --wa-line-strong: rgba(244, 240, 229, 0.28);
  --wa-content: 1360px;
  --wa-side: clamp(20px, 4vw, 64px);
  --wa-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-serif: Georgia, "Times New Roman", serif;

  overflow-x: clip;
  background: var(--wa-ink);
  color: var(--wa-cream);
  font-family: var(--wa-sans);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wa-home *,
.wa-home *::before,
.wa-home *::after {
  box-sizing: border-box;
}

.wa-home a,
.wa-home button,
.wa-home input {
  font: inherit;
}

.wa-home a,
.wa-home button {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.wa-home img {
  max-width: 100%;
}

.wa-home :focus-visible,
.wa-drop-schedule--announcement:focus-visible {
  outline: 2px solid var(--wa-action, #c87945);
  outline-offset: 4px;
}

.wa-drop-schedule--announcement {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  color: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.wa-drop-schedule--announcement::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: #c87945;
  content: "";
}

.wa-drop-schedule__label {
  color: #a95f31;
  font-weight: 800;
}

.wa-hero {
  position: relative;
  isolation: isolate;
  min-height: min(680px, calc(100svh - 106px));
  overflow: hidden;
  border-bottom: 1px solid var(--wa-line);
  background:
    radial-gradient(circle at 78% 42%, rgba(200, 121, 69, 0.18), transparent 26%),
    linear-gradient(135deg, #181713, var(--wa-ink) 68%);
}

.wa-hero__media,
.wa-hero__shade {
  position: absolute;
  inset: 0;
}

.wa-hero__media {
  z-index: -2;
}

.wa-hero__media picture,
.wa-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
}

.wa-hero__media img {
  object-fit: cover;
  object-position: center;
}

.wa-hero__shade {
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 7, 0.94) 0%,
      rgba(8, 8, 7, 0.72) 33%,
      rgba(8, 8, 7, 0.04) 70%
    ),
    linear-gradient(0deg, rgba(8, 8, 7, 0.54), transparent 40%);
}

.wa-hero__copy {
  width: min(100%, var(--wa-content));
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  padding: clamp(52px, 8vw, 120px) var(--wa-side);
}

.wa-hero h1 {
  max-width: min(52vw, 620px);
  margin: 0;
  color: var(--wa-cream);
  font-family: var(--wa-serif);
  font-size: clamp(60px, 6.6vw, 100px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.91;
  text-transform: none;
}

.wa-hero__description {
  max-width: 470px;
  margin: 28px 0 22px;
  color: var(--wa-cream-soft);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
}

.wa-hero__meta {
  width: min(48vw, 540px);
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(200, 121, 69, 0.74);
}

.wa-hero__drop-time {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  align-items: baseline;
  margin: 0;
  color: var(--wa-cream);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-hero__drop-time > span {
  margin-right: 5px;
  color: var(--wa-action);
  font-size: 9px;
  font-weight: 800;
}

.wa-hero__drop-time strong {
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.wa-hero__drop-time i {
  color: rgba(241, 235, 222, 0.36);
  font-style: normal;
}

.wa-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-hero__proof li {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--wa-cream-soft);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.wa-hero__proof li span {
  color: var(--wa-cream);
  font-size: 10px;
}

.wa-hero__signature {
  margin: 0;
  color: rgba(241, 235, 222, 0.5);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.wa-hero__signature span {
  margin: 0 7px;
  color: rgba(241, 235, 222, 0.28);
}

.wa-category-section {
  width: calc(100% - (var(--wa-side) * 2));
  max-width: var(--wa-content);
  margin: 0 auto;
  padding: clamp(60px, 6vw, 84px) 0;
}

.wa-compact-heading {
  display: flex;
  gap: 36px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.wa-compact-heading h2,
.wa-selection-note h2,
.wa-drop-access h2 {
  margin: 0;
  color: var(--wa-cream);
  font-family: var(--wa-serif);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-transform: none;
}

.wa-carousel-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wa-carousel-controls__count {
  display: flex;
  margin-right: 10px;
  color: var(--wa-action);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.wa-carousel-controls button {
  width: 46px;
  height: 46px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid var(--wa-line-strong);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.wa-carousel-controls button:hover:not(:disabled) {
  border-color: var(--wa-action);
  background: var(--wa-action);
  color: var(--wa-action-ink);
}

.wa-carousel-controls button:disabled {
  cursor: default;
  opacity: 0.25;
}

.wa-category-track {
  display: flex;
  gap: 12px;
  margin: 0;
  overflow-x: auto;
  padding-left: 0;
  padding-right: max(
    clamp(48px, 10vw, 160px),
    calc(100% - clamp(330px, 56vw, 760px))
  );
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  list-style: none;
  scrollbar-width: none;
}

.wa-category-track::-webkit-scrollbar {
  display: none;
}

.wa-category-card {
  --wa-card-scale: 1;
  --wa-card-hover-scale: 1.025;

  position: relative;
  min-height: clamp(430px, 46vw, 610px);
  display: flex;
  flex: 0 0 clamp(330px, 56vw, 760px);
  overflow: hidden;
  border: 1px solid var(--wa-line);
  background:
    radial-gradient(circle at 68% 30%, rgba(200, 121, 69, 0.16), transparent 30%),
    var(--wa-ink-soft);
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.wa-category-card:focus-visible {
  outline-offset: -3px;
}

.wa-category-card__image,
.wa-category-card__shade,
.wa-category-card__fallback {
  position: absolute;
  inset: 0;
}

.wa-category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--wa-card-scale));
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wa-category-card--flower {
  --wa-card-scale: 1;
  --wa-card-hover-scale: 1;
}

.wa-category-card--flower .wa-category-card__image {
  object-fit: contain;
  object-position: center;
}

.wa-category-card--vapes {
  --wa-card-scale: 0.94;
  --wa-card-hover-scale: 0.98;

  background: #050505;
}

.wa-category-card--vapes .wa-category-card__image {
  object-fit: contain;
}

.wa-category-card:hover .wa-category-card__image {
  transform: scale(var(--wa-card-hover-scale));
}

.wa-category-card__fallback {
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, transparent 0 44%, rgba(244, 240, 229, 0.04) 45% 46%, transparent 47%),
    radial-gradient(circle at 65% 35%, rgba(200, 121, 69, 0.24), transparent 30%),
    #11110f;
}

.wa-category-card__fallback span {
  color: rgba(244, 240, 229, 0.12);
  font-family: var(--wa-serif);
  font-size: clamp(90px, 18vw, 230px);
  letter-spacing: -0.08em;
}

.wa-category-card__shade {
  background: linear-gradient(0deg, rgba(8, 8, 7, 0.9), transparent 58%);
}

.wa-category-card__copy {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
}

.wa-category-card__copy small {
  margin-bottom: 8px;
  color: var(--wa-cream-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wa-category-card__copy strong {
  font-family: var(--wa-serif);
  font-size: clamp(46px, 6vw, 86px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-transform: none;
}

.wa-swipe-note {
  display: none;
}

.wa-selection-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(64px, 7vw, 96px) var(--wa-side);
  border-top: 1px solid rgba(8, 8, 7, 0.14);
  background: var(--wa-cream);
  color: var(--wa-ink);
  text-align: center;
}

.wa-section-kicker {
  margin: 0 0 18px;
  color: rgba(8, 8, 7, 0.64);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wa-selection-note h2 {
  max-width: 860px;
  color: var(--wa-ink);
}

.wa-selection-note > p:not(.wa-section-kicker) {
  max-width: 590px;
  margin: 24px 0 36px;
  color: rgba(8, 8, 7, 0.66);
  font-size: 16px;
  line-height: 1.6;
}

.wa-selection-note__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.wa-selection-note__proof span {
  padding: 10px 13px;
  border: 1px solid rgba(8, 8, 7, 0.18);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wa-drop-access {
  width: calc(100% - (var(--wa-side) * 2));
  max-width: var(--wa-content);
  display: grid;
  grid-template-columns: 1fr minmax(360px, 0.7fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: end;
  margin: 0 auto;
  padding: clamp(60px, 7vw, 88px) 0;
}

.wa-drop-access__copy p {
  margin: 20px 0 0;
  color: var(--wa-muted);
  font-size: 15px;
}

.wa-drop-access__form form,
.wa-drop-access__form .ct-newsletter-subscribe-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  border-bottom: 1px solid var(--wa-cream);
}

.wa-drop-access__form label {
  color: var(--wa-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-drop-access__form input[type="email"] {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wa-cream);
  font-size: 16px;
  box-shadow: none;
}

.wa-drop-access__form input[type="email"]::placeholder {
  color: #706b63;
}

.wa-drop-access__form input[type="email"]:focus {
  outline: 0;
}

.wa-drop-access__form button,
.wa-newsletter-fallback a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  padding: 0 18px;
  border: 1px solid var(--wa-action);
  border-radius: 0;
  background: var(--wa-action);
  color: var(--wa-action-ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.wa-drop-access__form button:hover,
.wa-newsletter-fallback a:hover {
  border-color: var(--wa-action-hover);
  background: var(--wa-action-hover);
  transform: translateY(-1px);
}

.wa-drop-access__consent {
  margin: 11px 0 0;
  /* Neither .wa-drop-access nor .wa-drop-access__form declares a background,
     so this composites against .wa-home's --wa-ink #080807 (style.css:679,697).
     #777168 on #080807 = 4.149:1; at 9px this is normal text, so AA requires
     4.5:1 and it fails. The theme's own --wa-muted #958f84 on the same ink
     = 6.240:1, so no new colour is needed. This is already the colour of the
     sibling .wa-drop-access__copy p and .wa-drop-access__form label, so the
     block stays internally consistent. Hierarchy is carried by the 9px size,
     not by hue; if the line needs to read subordinate again, do that with
     size or spacing, never by darkening it back below 4.5:1. */
  color: var(--wa-muted);
  font-size: 9px;
}

.wa-newsletter-fallback {
  display: grid;
  gap: 12px;
  margin: 0;
  color: var(--wa-muted);
  font-size: 13px;
  line-height: 1.5;
}

.wa-newsletter-fallback a {
  width: fit-content;
  margin-left: 0;
}

body.wa-age-gate-open {
  overflow: hidden;
}

.wa-age-gate[hidden] {
  display: none;
}

/*
 * The gate is a direct child of <body> so that it can render on every route,
 * not only the homepage. It therefore has no .wa-home ancestor and inherits
 * none of that block's design tokens, so it declares its own — the same pattern
 * .wa-site-footer uses at the end of this file. Keep this list in sync with
 * .wa-home; a missing token here renders the gate unstyled, which means an
 * unblocked page.
 */
.wa-age-gate {
  --wa-ink: #080807;
  --wa-ink-soft: #11110f;
  --wa-cream: #f4f0e5;
  --wa-cream-soft: #d7d1c4;
  --wa-muted: #958f84;
  --wa-action: #c87945;
  --wa-action-hover: #d58a54;
  --wa-action-ink: #0b0c0a;
  --wa-line: rgba(244, 240, 229, 0.14);
  --wa-line-strong: rgba(244, 240, 229, 0.28);
  --wa-content: 1360px;
  --wa-side: clamp(20px, 4vw, 64px);
  --wa-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-serif: Georgia, "Times New Roman", serif;

  position: fixed;
  /* Above everything, deliberately. Blocksy Companion ships overlays at 999999
     and plugins routinely use 9999+; an age gate that loses a z-index race is
     an age gate that is not there. Keep this the highest value in the package. */
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(3, 3, 3, 0.95);
  color: var(--wa-cream);
  font-family: var(--wa-sans);
  text-transform: none;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Also inherited from .wa-home previously; the dialog's fixed widths and
   padding overflow without it. */
.wa-age-gate,
.wa-age-gate *,
.wa-age-gate *::before,
.wa-age-gate *::after {
  box-sizing: border-box;
}

.wa-age-gate a,
.wa-age-gate button {
  font: inherit;
}

/* Carried over from .wa-home:728. A modal focus trap without a visible focus
   ring is unusable by keyboard, and this one cannot be escaped. */
.wa-age-gate :focus-visible,
.wa-legal-notice :focus-visible {
  outline: 2px solid var(--wa-action);
  outline-offset: 3px;
}

.wa-age-gate__dialog {
  width: min(920px, 100%);
  min-height: min(620px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(26px, 5vw, 62px);
  border: 1px solid var(--wa-line-strong);
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 7, 0.99),
      rgba(8, 8, 7, 0.87) 48%,
      rgba(8, 8, 7, 0.2)
    ),
    var(--wa-age-image, linear-gradient(135deg, #191815, #080807)) center / cover no-repeat;
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.72);
}

.wa-age-gate__brand {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.wa-wordmark {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.wa-wordmark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.wa-wordmark__type {
  display: flex;
  flex-direction: column;
  color: var(--wa-cream);
  line-height: 1;
  text-transform: uppercase;
}

.wa-wordmark__type strong {
  font-family: var(--wa-serif);
  font-size: 14px;
  letter-spacing: 0.045em;
}

.wa-wordmark__type small {
  margin-top: 5px;
  color: var(--wa-muted);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.38em;
}

.wa-age-gate__brand > span {
  color: var(--wa-cream-soft);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wa-age-gate__copy {
  max-width: 540px;
  align-self: end;
  margin: 54px 0 30px;
}

.wa-age-gate__copy .wa-section-kicker {
  color: var(--wa-cream-soft);
}

.wa-age-gate__copy h2 {
  margin: 0;
  color: var(--wa-cream);
  font-family: var(--wa-serif);
  font-size: clamp(56px, 8vw, 94px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-transform: none;
}

.wa-age-gate__copy > p:last-child {
  margin: 20px 0 0;
  color: var(--wa-cream-soft);
  font-size: 15px;
}

.wa-age-gate__actions {
  display: flex;
  gap: 22px;
  align-items: center;
}

.wa-button {
  min-height: 50px;
  display: inline-flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--wa-action);
  color: var(--wa-action-ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.wa-button:hover {
  background: var(--wa-action-hover);
  color: var(--wa-action-ink);
  transform: translateY(-2px);
}

/*
 * Blocksy's global button rules can otherwise turn the age-confirmation text
 * white. Keep this critical action readable regardless of Customizer values.
 */
.wa-age-gate .wa-age-gate__actions > button.wa-button {
  border-color: var(--wa-action) !important;
  background: var(--wa-action) !important;
  color: var(--wa-action-ink) !important;
  font-family: var(--wa-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--wa-action-ink) !important;
}

.wa-age-gate .wa-age-gate__actions > button.wa-button:hover,
.wa-age-gate .wa-age-gate__actions > button.wa-button:focus-visible {
  border-color: var(--wa-action-hover) !important;
  background: var(--wa-action-hover) !important;
  color: var(--wa-action-ink) !important;
  -webkit-text-fill-color: var(--wa-action-ink) !important;
}

.wa-age-gate__actions > a {
  color: var(--wa-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

.wa-age-gate noscript {
  color: var(--wa-cream-soft);
  font-size: 12px;
}

/*
 * Compact disclaimer block for routes the custom chrome does not own, where
 * Blocksy renders its own footer and a second full .wa-site-footer would stack.
 * Fully self-contained: own tokens, own box-sizing, no .wa-home ancestor.
 */
.wa-legal-notice {
  --wa-cream: #f4f0e5;
  --wa-cream-soft: #d7d1c4;
  --wa-action: #c87945;
  --wa-line: rgba(244, 240, 229, 0.14);
  --wa-side: clamp(20px, 4vw, 64px);
  --wa-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  display: block;
  width: 100%;
  padding: 24px var(--wa-side);
  border-top: 1px solid var(--wa-line);
  background: #050504;
  color: var(--wa-cream-soft);
  font-family: var(--wa-sans);
  font-size: 12px;
  line-height: 1.6;
  text-transform: none;
}

.wa-legal-notice,
.wa-legal-notice *,
.wa-legal-notice *::before,
.wa-legal-notice *::after {
  box-sizing: border-box;
}

.wa-legal-notice__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1360px;
  margin: 0 auto;
}

.wa-legal-notice__grid p {
  margin: 0;
}

.wa-legal-notice strong {
  color: var(--wa-cream);
}

.wa-legal-notice__terms {
  max-width: 1360px;
  margin: 16px auto 0;
}

.wa-legal-notice__terms a {
  color: var(--wa-action);
}

.wa-site-footer {
  --wa-cream: #f4f0e5;
  --wa-cream-soft: #d7d1c4;
  --wa-action: #c87945;
  --wa-line: rgba(244, 240, 229, 0.14);
  --wa-content: 1360px;
  --wa-side: clamp(20px, 4vw, 64px);
  --wa-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  box-sizing: border-box;
  width: 100%;
  padding: 28px var(--wa-side) 22px;
  border-top: 1px solid var(--wa-line);
  background: #050504;
  color: var(--wa-cream);
  font-family: var(--wa-sans);
  text-transform: none;
}

.wa-site-footer *,
.wa-site-footer *::before,
.wa-site-footer *::after {
  box-sizing: border-box;
}

.wa-site-footer__legal,
.wa-site-footer__bottom {
  width: 100%;
  max-width: var(--wa-content);
  margin-inline: auto;
}

.wa-site-footer__legal {
  padding-bottom: 28px;
}

.wa-site-footer__heading {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.wa-site-footer__heading p,
.wa-site-footer__bottom p {
  margin: 0;
}

.wa-site-footer__heading p,
.wa-site-footer__heading a {
  color: var(--wa-cream-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-site-footer__heading a,
.wa-site-footer__heading a:visited {
  color: var(--wa-cream-soft);
  text-decoration-color: rgba(232, 226, 211, 0.34);
  text-underline-offset: 4px;
}

.wa-site-footer__heading a:hover {
  color: var(--wa-cream);
  text-decoration-color: currentColor;
}

.wa-site-footer__heading a:focus-visible {
  outline: 2px solid var(--wa-action);
  outline-offset: 4px;
}

.wa-site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 38px;
}

.wa-site-footer__grid p {
  margin: 0;
  color: #858077;
  font-size: 12px;
  line-height: 1.65;
}

.wa-site-footer__grid strong {
  margin-right: 0.28em;
  color: #b4aea2;
  font-weight: 700;
}

.wa-site-footer__grid b {
  color: var(--wa-cream-soft);
  font-weight: 700;
}

.wa-site-footer__bottom {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--wa-line);
}

.wa-site-footer__bottom p {
  color: #958f84;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * Blocksy and late-loading Content Block styles must not be able to turn the
 * reviewed footer back into a white, inherited theme surface.
 */
body.wa-reserve-custom-chrome footer.wa-site-footer {
  display: block !important;
  margin: 0 !important;
  border-color: rgba(244, 240, 229, 0.14) !important;
  background: #050504 !important;
  color: #f4f0e5 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__heading p,
body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__heading a {
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__grid p {
  margin: 0 !important;
  color: #858077 !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__grid strong {
  color: #b4aea2 !important;
}

body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__grid b {
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome footer.wa-site-footer .wa-site-footer__bottom p {
  margin: 0 !important;
  color: #958f84 !important;
  font-size: 9px !important;
}

@supports selector(body:has(.wa-site-header)) {
  body:has([data-wa-site-header]) footer.wa-site-footer {
    display: block !important;
    margin: 0 !important;
    border-color: rgba(244, 240, 229, 0.14) !important;
    background: #050504 !important;
    color: #f4f0e5 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }

  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__heading p,
  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__heading a {
    color: #d7d1c4 !important;
  }

  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__grid p {
    margin: 0 !important;
    color: #858077 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__grid strong {
    color: #b4aea2 !important;
  }

  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__grid b {
    color: #d7d1c4 !important;
  }

  body:has([data-wa-site-header]) footer.wa-site-footer .wa-site-footer__bottom p {
    margin: 0 !important;
    color: #958f84 !important;
    font-size: 9px !important;
  }
}

@media (max-width: 999px) {
  .wa-site-header__main-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wa-site-header__desktop-nav {
    display: none;
  }

  .wa-mobile-menu {
    display: block;
  }
}

@media (max-width: 980px) {
  .wa-drop-access {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) {
  /*
   * Preserve the full Grove Bag on short and ultra-wide desktop screens.
   * The source's dark left edge blends into the hero background while the
   * exact bag artwork remains uncropped on the right.
   */
  .wa-hero__media picture {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .wa-hero__media img {
    position: absolute;
    top: 50%;
    right: 0;
    width: auto;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: right center;
    transform: translateY(-50%);
  }
}

@media (min-width: 1800px) {
  .wa-hero {
    min-height: min(780px, calc(100svh - 106px));
  }

  .wa-hero__media img {
    height: 100%;
    max-height: 780px;
  }

  .wa-hero__copy {
    padding-block: clamp(68px, 6vw, 108px);
  }

  .wa-hero h1 {
    max-width: 680px;
    font-size: 116px;
  }

  .wa-hero__description {
    max-width: 540px;
    font-size: 22px;
  }

  .wa-hero__meta {
    width: min(52vw, 620px);
    gap: 16.5px;
  }

  .wa-hero__drop-time {
    font-size: 11.5px;
  }

  .wa-hero__drop-time > span {
    font-size: 10.5px;
  }

  .wa-hero__proof li {
    font-size: 9.25px;
  }

  .wa-hero__proof li span {
    font-size: 11.5px;
  }

  .wa-hero__signature {
    font-size: 9.25px;
  }
}

@media (max-width: 720px) {
  .wa-site-header {
    --wa-header-side: 16px;
  }

  .wa-site-header__notice,
  .wa-site-header__notice-inner {
    min-height: 30px;
  }

  .wa-site-header__notice-inner {
    justify-content: center;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .wa-site-header__schedule {
    gap: 4px 8px;
  }

  .wa-site-header__schedule strong,
  .wa-site-header__access {
    display: none;
  }

  .wa-site-header__main,
  .wa-site-header__main-inner {
    min-height: 66px;
  }

  .wa-site-header__main-inner {
    gap: 14px;
    padding-block: 9px;
  }

  .wa-site-header__brand {
    gap: 8px;
  }

  .wa-site-header__mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .wa-site-header__brand-type strong {
    font-size: 12px;
  }

  .wa-site-header__brand-type small {
    margin-top: 4px;
    font-size: 9px;
  }

  .wa-site-header__actions {
    gap: 12px;
  }

  .wa-header-cart,
  .wa-mobile-menu summary {
    gap: 6px;
    font-size: 10px;
  }

  .wa-site-header__account > span:last-child,
  .wa-header-cart__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wa-home {
    --wa-side: 16px;
  }

  /*
   * Mobile hero: a media BAND above the copy, not a full-bleed backdrop behind
   * it.
   *
   * The bag was never mis-cropped. Measured at 390px: the 1536x1024 source
   * renders 855x570 under `cover`, and `object-position: 82%` puts the bag
   * (source x 785-1153) fully inside the 390px window at full height. What hid
   * it was the SHADE. The old gradient was
   *     linear-gradient(0deg, #080807 0%, #080807 58%, ...)
   * -- 0deg means bottom-up, so the bottom 58% of the hero was SOLID ink. The
   * bag spans the whole height, so everything below that line was painted out
   * and only a fading strip survived at the top. Desktop was fine because it
   * uses a horizontal gradient with the copy on the left.
   *
   * Softening the gradient alone would not fix it: the copy is bottom-aligned
   * and sits exactly where the bag is, so anything legible enough for the text
   * still buries the bag. Giving the image its own band separates them. The
   * space is already there -- `justify-content: flex-end` was leaving the top
   * of the hero empty -- so this costs very little extra height.
   */
  .wa-hero {
    display: grid;
    grid-template-rows: auto auto;
    /* Content-driven now that the copy no longer overlays the image. */
    min-height: 0;

    /* The media band height. Declared HERE, on the common ancestor, because
       .wa-hero__media and .wa-hero__shade are SIBLINGS -- custom properties
       inherit down, never across, so setting this on the media element would
       leave the scrim unresolved and collapse it to zero height.

       The svh cap is the point of the expression. Safari on iOS overlays a
       toolbar roughly 88px tall on the layout viewport, and measured on the
       live site the Quick Shop CTA finished 50px under it at 375x812, 33px at
       390x844 and 27px at 393x852 (430x932 was already clear). Width alone
       cannot fix that -- the phones needing the most room are the NARROWEST,
       so a vw-only value shrinks the band least exactly where it must shrink
       most. svh is the small viewport, i.e. height with the browser bars
       showing, which is the variable that actually governs the problem.

       Only ~28px comes out of the band; the rest is reclaimed from the copy
       padding below. Splitting it holds the vertical crop on the bag near 6%
       instead of the ~19% an image-only fix would have cost. */
    /* 27svh. At 29 the CTA finished 15px under Safari's toolbar on a 375x812
       iPhone; at 28 it was still 3px short, which is inside the error bar on
       the 88px toolbar figure (that bar is not a fixed height across devices,
       and it shrinks on scroll). 27 clears every phone tested with room to
       spare rather than landing on the boundary. */
    --wa-hero-band: clamp(200px, min(68vw, 27svh), 300px);
  }

  .wa-hero__media {
    /* A grid item, not an overlay. z-index must return to auto: at -2 it would
       paint behind the hero's own background gradient and vanish. */
    position: relative;
    z-index: auto;
    inset: auto;
    grid-row: 1;
    /* Sized from --wa-hero-band on .wa-hero; the scrim below reads the same
       property, so the two always move together. */
    height: var(--wa-hero-band);
  }

  .wa-hero__media img {
    object-position: 82% center;
  }

  .wa-hero__shade {
    /* Scoped to the band. A gentle top-down wash keeps the bag bright while
       settling into flat ink exactly where the copy starts, so the seam is
       invisible. */
    inset: 0 0 auto 0;
    /* Must equal the band height at 1985. Declared on .wa-hero so both the
       media and the shade can read it -- they are siblings, so a custom
       property set on .wa-hero__media would not inherit across. */
    height: var(--wa-hero-band);
    background: linear-gradient(
      180deg,
      rgba(8, 8, 7, 0.06) 0%,
      rgba(8, 8, 7, 0.16) 55%,
      rgba(8, 8, 7, 0.76) 88%,
      rgba(8, 8, 7, 1) 100%
    );
  }

  .wa-hero__copy {
    grid-row: 2;
    min-height: 0;
    justify-content: flex-start;
    /* Was 30px 22px 50px. Trimming 12px top and 26px bottom reclaims 38px of
       the ~50px the CTA needed to clear Safari's toolbar; the remaining ~12px
       comes off the media band above. Splitting it that way costs the bag ~9%
       of its height instead of the ~19% an image-only fix would have. */
    padding: 18px 22px 22px;
  }

  .wa-hero h1 {
    max-width: 340px;
    font-size: clamp(46px, 13.2vw, 62px);
  }

  .wa-hero__description {
    margin: 18px 0;
    font-size: 14px;
  }

  .wa-hero__meta {
    width: 100%;
    gap: 12px;
    padding-top: 14px;
  }

  .wa-hero__drop-time {
    gap: 6px 9px;
    font-size: 9px;
  }

  .wa-hero__proof {
    gap: 9px 16px;
  }

  .wa-hero__signature {
    max-width: 330px;
  }

  .wa-category-section {
    width: calc(100% - 32px);
    padding: 50px 0;
  }

  .wa-compact-heading {
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .wa-compact-heading h2,
  .wa-selection-note h2,
  .wa-drop-access h2 {
    font-size: clamp(39px, 11.5vw, 56px);
  }

  .wa-carousel-controls__count {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wa-carousel-controls button {
    width: 44px;
    height: 44px;
  }

  .wa-category-track {
    width: calc(100vw - 16px);
    gap: 10px;
    padding-right: 22vw;
  }

  .wa-category-card {
    min-height: min(112vw, 500px);
    flex-basis: 78vw;
  }

  .wa-category-card__copy {
    right: 20px;
    bottom: 20px;
    left: 20px;
  }

  .wa-category-card__copy strong {
    font-size: clamp(48px, 14vw, 68px);
  }

  .wa-swipe-note {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    color: var(--wa-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .wa-selection-note {
    padding: 56px 22px;
  }

  .wa-selection-note > p:not(.wa-section-kicker) {
    margin: 20px 0 28px;
    font-size: 14px;
  }

  .wa-drop-access {
    width: calc(100% - 32px);
    padding: 54px 0;
  }

  .wa-drop-access__form form,
  .wa-drop-access__form .ct-newsletter-subscribe-form {
    grid-template-columns: 1fr auto;
  }

  .wa-age-gate {
    padding: 0;
  }

  .wa-age-gate__dialog {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 22px 20px 26px;
    border: 0;
    background:
      linear-gradient(
        0deg,
        rgba(8, 8, 7, 0.99),
        rgba(8, 8, 7, 0.72) 50%,
        rgba(8, 8, 7, 0.1)
      ),
      var(--wa-age-image, linear-gradient(135deg, #191815, #080807)) 70% center / cover no-repeat;
  }

  .wa-age-gate__brand > span {
    display: none;
  }

  .wa-age-gate__copy {
    margin: 44px 0 24px;
  }

  .wa-age-gate__copy h2 {
    font-size: clamp(55px, 16vw, 72px);
  }

  .wa-age-gate__copy > p:last-child {
    font-size: 14px;
  }

  .wa-age-gate__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .wa-age-gate__actions .wa-button {
    width: 100%;
  }

  .wa-age-gate__actions > a {
    text-align: center;
  }

  .wa-site-footer {
    --wa-side: 16px;
  }

  .wa-site-footer__legal {
    padding-bottom: 24px;
  }

  .wa-site-footer__heading,
  .wa-site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .wa-site-footer__heading {
    gap: 12px;
    margin-bottom: 20px;
  }

  .wa-site-footer__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wa-site-footer__bottom {
    gap: 11px;
  }
}

@media (max-width: 480px) {
  .wa-category-card--flower {
    --wa-card-scale: 1;
    --wa-card-hover-scale: 1;
  }
}

@media (max-width: 430px) {
  .wa-site-header__main-inner {
    gap: 10px;
  }

  .wa-site-header__actions {
    gap: 8px;
  }

  .wa-site-header__account,
  .wa-header-cart,
  .wa-mobile-menu summary {
    min-width: 40px;
  }

  .wa-mobile-menu summary > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wa-hero {
    min-height: 570px;
  }

  .wa-compact-heading {
    gap: 18px;
  }

  .wa-carousel-controls {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-home *,
  .wa-home *::before,
  .wa-home *::after,
  .wa-age-gate *,
  .wa-age-gate *::before,
  .wa-age-gate *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
 * WooCommerce product surfaces
 *
 * These rules are intentionally activated by PHP body classes only on public
 * product archives and single-product templates. Checkout, cart, account,
 * order-pay, callbacks, and Friday Drop never receive this scope.
 * -------------------------------------------------------------------------- */

body.wa-reserve-commerce-page {
  --wa-commerce-bg: #080807;
  --wa-commerce-panel: #10100f;
  --wa-commerce-panel-raised: #151410;
  --wa-commerce-cream: #f4f0e5;
  --wa-commerce-cream-soft: #d7d1c4;
  --wa-commerce-muted: #958f84;
  --wa-commerce-action: #c87945;
  --wa-commerce-action-dark: #0b0c0a;
  --wa-commerce-line: #34332f;
  /* Mockup value. rgba(...,0.28) composites to ~#4a4945, matching the approved
     mockups' opaque `border: 1px solid #4b4943` on form fields.
     ACCEPTED DEVIATION FROM WCAG 2.1 AA 1.4.11: measures ~2.2:1 against the
     field fill where 3:1 is required, and the fill is only 1.04:1 against the
     panel, so this border is the field's only visible boundary. Raised to 0.40
     earlier; owner directed that approved mockup values take precedence.
     Do not "fix" this — it is a design decision, not an oversight. */
  --wa-commerce-line-strong: rgba(244, 240, 229, 0.28);
  --wa-commerce-side: clamp(18px, 4vw, 64px);
  --wa-commerce-content: 1360px;
  --wa-commerce-serif: Georgia, "Times New Roman", serif;
  --wa-commerce-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --theme-text-color: var(--wa-commerce-cream-soft);
  --theme-link-initial-color: var(--wa-commerce-cream);
  --theme-link-hover-color: var(--wa-commerce-action);
  --theme-heading-color: var(--wa-commerce-cream);
  --theme-button-background-initial-color: var(--wa-commerce-action);
  --theme-button-background-hover-color: #d78c59;
  --theme-button-text-initial-color: var(--wa-commerce-action-dark);
  --theme-button-text-hover-color: var(--wa-commerce-action-dark);
  --theme-form-field-background-initial-color: var(--wa-commerce-panel);
  --theme-form-field-border-initial-color: var(--wa-commerce-line-strong);
  --theme-form-field-border-focus-color: var(--wa-commerce-action);

  background: var(--wa-commerce-bg);
  color: var(--wa-commerce-cream-soft);
  font-family: var(--wa-commerce-sans);
  -webkit-font-smoothing: antialiased;
}

body.wa-reserve-commerce-page,
body.wa-reserve-commerce-page #main-container,
body.wa-reserve-commerce-page .site-main,
body.wa-reserve-commerce-page [data-content="normal"],
body.wa-reserve-commerce-page [data-content="narrow"] {
  background-color: var(--wa-commerce-bg);
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-commerce-page #main-container *,
body.wa-reserve-commerce-page #main-container *::before,
body.wa-reserve-commerce-page #main-container *::after {
  box-sizing: border-box;
}

body.wa-reserve-commerce-page
  #main-container
  :where(a, button, input, select, textarea) {
  font-family: inherit;
}

body.wa-reserve-commerce-page
  #main-container
  :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: 3px;
}

body.wa-reserve-commerce-page
  #main-container
  :where(
    select,
    textarea,
    input:not([type]),
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="hidden"]
      ):not([type="color"]):not([type="button"]):not([type="submit"]):not(
        [type="reset"]
      ):not([type="file"])
  ) {
  min-height: 46px;
  border: 1px solid var(--wa-commerce-line-strong);
  border-radius: 0;
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream);
  color-scheme: dark;
}

body.wa-reserve-commerce-page
  #main-container
  :where(
    select,
    textarea,
    input:not([type]),
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="hidden"]
      ):not([type="color"]):not([type="button"]):not([type="submit"]):not(
        [type="reset"]
      ):not([type="file"])
  ):focus {
  border-color: var(--wa-commerce-action);
  box-shadow: 0 0 0 1px var(--wa-commerce-action);
}

body.wa-reserve-commerce-page
  #main-container
  :where(input, textarea)::placeholder {
  color: var(--wa-commerce-muted);
  opacity: 1;
}

body.wa-reserve-commerce-page
  #main-container
  :where(select option) {
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream);
}

body.wa-reserve-commerce-page #main-container :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error
  ) {
  margin: 0 0 24px;
  padding: 18px 20px 18px 24px;
  border: 1px solid var(--wa-commerce-line);
  border-left: 3px solid var(--wa-commerce-action);
  border-radius: 0;
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream-soft);
  font-size: 14px;
  line-height: 1.65;
}

body.wa-reserve-commerce-page .woocommerce-error {
  border-left-color: #df715f;
}

body.wa-reserve-commerce-page #main-container :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error
  )::before {
  color: var(--wa-commerce-action);
}

body.wa-reserve-commerce-page #main-container :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error
  )
  a {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}

body.wa-reserve-commerce-page .woocommerce-breadcrumb {
  width: min(100%, var(--wa-commerce-content));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 50px) var(--wa-commerce-side) 0;
  color: var(--wa-commerce-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.wa-reserve-commerce-page .woocommerce-breadcrumb a {
  color: var(--wa-commerce-cream-soft);
  text-decoration: none;
}

body.wa-reserve-commerce-page .woocommerce-breadcrumb a:hover {
  color: var(--wa-commerce-action);
}

/* Single-product presentation. */

body.wa-reserve-product-page #main-container {
  overflow: clip;
}

body.wa-reserve-product-page .site-main > .ct-container,
body.wa-reserve-product-page .site-main > .ct-container-full,
body.wa-reserve-product-page [data-content="normal"] > .ct-container,
body.wa-reserve-product-page [data-content="narrow"] > .ct-container {
  width: 100%;
  max-width: var(--wa-commerce-content);
  margin-inline: auto;
  padding-inline: var(--wa-commerce-side);
}

body.wa-reserve-product-page div.product {
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-product-page div.product .product-entry-wrapper {
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(34px, 6vw, 84px);
}

/*
 * Keep the native WooCommerce gallery controls and markup, but explicitly
 * bound the two visual columns. Blocksy's parent layout can otherwise let a
 * large source image determine the gallery track and push the summary below.
 */
@media (min-width: 900px) {
  body.wa-reserve-custom-chrome.single-product
    div.product
    .product-entry-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(360px, 400px) minmax(340px, 1fr);
    justify-content: center;
    align-items: start;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    .woocommerce-product-gallery {
    width: 100%;
    max-width: 400px;
    min-width: 0;
    float: none;
    justify-self: start;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    :is(.summary, .entry-summary) {
    width: 100%;
    max-width: 620px;
    min-width: 0;
    float: none;
    clear: none;
    justify-self: start;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    .woocommerce-product-gallery__image
    > a {
    width: 100%;
    aspect-ratio: 0.84;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    .woocommerce-product-gallery__image
    > a
    > img {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin-inline: auto;
    object-fit: contain;
  }
}

@media (max-width: 899px) {
  body.wa-reserve-custom-chrome.single-product
    div.product
    .product-entry-wrapper {
    width: 100%;
    display: block;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    .woocommerce-product-gallery,
  body.wa-reserve-custom-chrome.single-product
    div.product
    :is(.summary, .entry-summary) {
    width: 100%;
    max-width: none;
    min-width: 0;
    float: none;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    :is(.summary, .entry-summary) {
    clear: both;
  }

  body.wa-reserve-custom-chrome.single-product
    div.product
    .woocommerce-product-gallery__image
    > a
    > img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin-inline: auto;
    object-fit: contain;
  }
}

body.wa-reserve-product-page div.product .woocommerce-product-gallery {
  position: relative;
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid var(--wa-commerce-line);
  background:
    radial-gradient(circle at 50% 25%, rgba(200, 121, 69, 0.08), transparent 44%),
    var(--wa-commerce-panel);
}

body.wa-reserve-product-page div.product .woocommerce-product-gallery__trigger {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wa-commerce-line-strong);
  border-radius: 50%;
  background: rgba(8, 8, 7, 0.88);
  color: var(--wa-commerce-cream);
}

body.wa-reserve-product-page div.product .woocommerce-product-gallery__image {
  overflow: hidden;
  background: #0c0c0a;
}

body.wa-reserve-product-page div.product .woocommerce-product-gallery__image a {
  display: block;
}

body.wa-reserve-product-page div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

body.wa-reserve-product-page div.product .flex-control-thumbs {
  gap: 10px;
  margin: 12px 0 0;
}

body.wa-reserve-product-page div.product .flex-control-thumbs li {
  min-width: 64px;
  margin: 0;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
}

body.wa-reserve-product-page div.product .flex-control-thumbs img {
  opacity: 0.58;
}

body.wa-reserve-product-page div.product .flex-control-thumbs img:hover,
body.wa-reserve-product-page div.product .flex-control-thumbs img.flex-active {
  opacity: 1;
  outline: 1px solid var(--wa-commerce-action);
  outline-offset: -1px;
}

body.wa-reserve-product-page div.product .summary,
body.wa-reserve-product-page div.product .entry-summary {
  min-width: 0;
  margin: 0;
  padding-top: clamp(20px, 3vw, 42px);
  border-top: 2px solid var(--wa-commerce-action);
}

body.wa-reserve-product-page div.product .product_title {
  max-width: 14ch;
  margin: 0 0 20px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(42px, 5.4vw, 84px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

body.wa-reserve-product-page div.product .price {
  margin: 0 0 24px;
  color: var(--wa-commerce-cream);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

body.wa-reserve-product-page div.product .price del {
  margin-right: 8px;
  color: var(--wa-commerce-muted);
  font-size: 0.68em;
  opacity: 0.75;
}

body.wa-reserve-product-page div.product .price ins {
  color: var(--wa-commerce-action);
  text-decoration: none;
}

body.wa-reserve-product-page div.product .woocommerce-product-details__short-description {
  max-width: 62ch;
  margin-bottom: 26px;
  color: var(--wa-commerce-cream-soft);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.75;
}

body.wa-reserve-product-page div.product .woocommerce-product-details__short-description > :first-child {
  margin-top: 0;
}

body.wa-reserve-product-page div.product .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

body.wa-reserve-product-page div.product p.stock {
  width: fit-content;
  margin: 0 0 20px;
  padding: 6px 10px;
  border: 1px solid rgba(200, 121, 69, 0.42);
  color: var(--wa-commerce-cream-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-product-page div.product p.stock.out-of-stock {
  border-color: rgba(223, 113, 95, 0.5);
  color: #f0a89b;
}

body.wa-reserve-product-page div.product form.cart {
  gap: 12px;
  margin: 28px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--wa-commerce-line);
  border-bottom: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-product-page div.product form.cart .variations {
  width: 100%;
  margin: 0 0 18px;
  border: 0;
}

body.wa-reserve-product-page div.product form.cart .variations th,
body.wa-reserve-product-page div.product form.cart .variations td {
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  text-align: left;
  vertical-align: middle;
}

body.wa-reserve-product-page div.product form.cart .variations th {
  width: min(30%, 150px);
  padding-right: 16px;
}

body.wa-reserve-product-page div.product form.cart .variations label {
  color: var(--wa-commerce-cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.wa-reserve-product-page div.product form.cart .variations select {
  width: 100%;
  min-height: 48px;
  padding-inline: 14px 42px;
  border-color: var(--wa-commerce-line-strong);
  background-color: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream);
}

body.wa-reserve-product-page div.product form.cart .reset_variations {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  color: var(--wa-commerce-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration-color: var(--wa-commerce-action);
  text-transform: uppercase;
  text-underline-offset: 4px;
}

body.wa-reserve-product-page div.product form.cart .single_variation {
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-product-page div.product form.cart .woocommerce-variation-price {
  margin-bottom: 14px;
}

body.wa-reserve-product-page div.product form.cart .quantity {
  min-width: 112px;
  margin: 0;
}

body.wa-reserve-product-page div.product form.cart .quantity .qty {
  width: 100%;
  min-height: 52px;
  padding-inline: 12px;
  border: 1px solid var(--wa-commerce-line-strong);
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream);
  text-align: center;
}

body.wa-reserve-product-page div.product form.cart .single_add_to_cart_button,
body.wa-reserve-product-page div.product form.cart .button {
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid var(--wa-commerce-action);
  border-radius: 0;
  background: var(--wa-commerce-action);
  color: var(--wa-commerce-action-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.wa-reserve-product-page div.product form.cart .single_add_to_cart_button:hover,
body.wa-reserve-product-page div.product form.cart .button:hover {
  border-color: #d78c59;
  background: #d78c59;
  color: var(--wa-commerce-action-dark);
}

body.wa-reserve-product-page div.product form.cart .single_add_to_cart_button.disabled,
body.wa-reserve-product-page div.product form.cart .single_add_to_cart_button:disabled {
  border-color: var(--wa-commerce-line-strong);
  background: var(--wa-commerce-panel-raised);
  color: var(--wa-commerce-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

body.wa-reserve-product-page div.product .product_meta {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  color: var(--wa-commerce-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.wa-reserve-product-page div.product .product_meta > span {
  display: block;
}

body.wa-reserve-product-page div.product .product_meta a {
  color: var(--wa-commerce-cream-soft);
  text-decoration: none;
}

body.wa-reserve-product-page div.product .product_meta a:hover {
  color: var(--wa-commerce-action);
}

body.wa-reserve-product-page div.product .woocommerce-tabs {
  margin-top: clamp(54px, 8vw, 110px);
  padding-top: 0;
  border-top: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs {
  gap: clamp(22px, 4vw, 52px);
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  scrollbar-width: thin;
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs::before,
body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li::before,
body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li a {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-bottom: 2px solid transparent;
  color: var(--wa-commerce-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li.active a,
body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li a:hover {
  border-bottom-color: var(--wa-commerce-action);
  color: var(--wa-commerce-cream);
}

body.wa-reserve-product-page div.product .woocommerce-tabs .panel {
  max-width: 880px;
  margin: 0;
  padding: clamp(28px, 4vw, 54px) 0;
  color: var(--wa-commerce-cream-soft);
  font-size: 15px;
  line-height: 1.8;
}

body.wa-reserve-product-page div.product .woocommerce-tabs .panel h2,
body.wa-reserve-product-page :where(.related.products, .up-sells.products) > h2 {
  margin: 0 0 24px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

body.wa-reserve-product-page #reviews {
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-product-page #reviews .commentlist {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

body.wa-reserve-product-page #reviews .comment_container,
body.wa-reserve-product-page #review_form_wrapper {
  padding: 20px;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
}

body.wa-reserve-product-page #reviews #respond label {
  display: block;
  margin-bottom: 8px;
  color: var(--wa-commerce-cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.wa-reserve-product-page #reviews #respond textarea {
  width: 100%;
  min-height: 140px;
}

body.wa-reserve-product-page :where(.related.products, .up-sells.products) {
  margin-top: clamp(52px, 8vw, 104px);
  padding-top: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--wa-commerce-line);
}

/* Native shop and non-reviewed product-taxonomy archives. */

body.wa-reserve-product-archive:not(.wa-category-shop-page) .site-main {
  width: 100%;
  max-width: var(--wa-commerce-content);
  margin-inline: auto;
  padding: clamp(34px, 5vw, 72px) var(--wa-commerce-side)
    clamp(70px, 8vw, 120px);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  .woocommerce-products-header {
  margin-bottom: clamp(30px, 5vw, 64px);
  padding-bottom: clamp(24px, 4vw, 46px);
  border-bottom: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  .woocommerce-products-header__title,
body.wa-reserve-product-archive:not(.wa-category-shop-page) .page-title {
  margin: 0;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  .term-description {
  max-width: 68ch;
  margin-top: 20px;
  color: var(--wa-commerce-muted);
  font-size: 15px;
  line-height: 1.75;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  .woocommerce-result-count {
  color: var(--wa-commerce-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 46px;
  text-transform: uppercase;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  .woocommerce-ordering
  select {
  min-width: min(100%, 240px);
  min-height: 46px;
  padding-inline: 14px 40px;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products {
  gap: clamp(22px, 3vw, 42px);
  clear: both;
  padding-top: clamp(28px, 4vw, 52px);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product {
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product:focus-within {
  border-color: var(--wa-commerce-action);
  box-shadow: 0 0 0 1px var(--wa-commerce-action);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  figure,
body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  .ct-media-container {
  overflow: hidden;
  margin: 0;
  background: #0c0c0a;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  img {
  transition:
    transform 260ms ease,
    opacity 260ms ease;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product:hover
  img {
  transform: scale(1.025);
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  .woocommerce-loop-product__title,
body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  .ct-woo-card-title {
  padding-inline: 18px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(22px, 2.4vw, 31px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  .price {
  padding-inline: 18px;
  color: var(--wa-commerce-cream-soft);
  font-size: 15px;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  :where(.button, .added_to_cart) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px 18px;
  padding: 12px 17px;
  border: 1px solid var(--wa-commerce-action);
  border-radius: 0;
  background: var(--wa-commerce-action);
  color: var(--wa-commerce-action-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

body.wa-reserve-product-archive:not(.wa-category-shop-page)
  ul.products
  > li.product
  :where(.button, .added_to_cart):hover {
  border-color: #d78c59;
  background: #d78c59;
  color: var(--wa-commerce-action-dark);
}

body.wa-reserve-commerce-page .onsale {
  min-width: 0;
  min-height: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  background: var(--wa-commerce-action);
  color: var(--wa-commerce-action-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body.wa-reserve-commerce-page .woocommerce-pagination {
  margin-top: clamp(36px, 6vw, 74px);
}

body.wa-reserve-commerce-page .woocommerce-pagination ul.page-numbers {
  gap: 8px;
  border: 0;
}

body.wa-reserve-commerce-page .woocommerce-pagination ul.page-numbers li {
  border: 0;
}

body.wa-reserve-commerce-page .woocommerce-pagination .page-numbers a,
body.wa-reserve-commerce-page .woocommerce-pagination .page-numbers span {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream-soft);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

body.wa-reserve-commerce-page .woocommerce-pagination .page-numbers a:hover,
body.wa-reserve-commerce-page .woocommerce-pagination .page-numbers .current {
  border-color: var(--wa-commerce-action);
  background: var(--wa-commerce-action);
  color: var(--wa-commerce-action-dark);
}

@media (min-width: 1800px) {
  body.wa-reserve-commerce-page {
    --wa-commerce-content: 1540px;
  }

  body.wa-reserve-product-page div.product .product_title {
    font-size: clamp(76px, 4.8vw, 96px);
  }

  body.wa-reserve-product-page
    div.product
    .woocommerce-product-details__short-description {
    font-size: 19px;
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    .woocommerce-products-header__title,
  body.wa-reserve-product-archive:not(.wa-category-shop-page) .page-title {
    font-size: clamp(80px, 5.7vw, 110px);
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    ul.products
    > li.product
    .woocommerce-loop-product__title,
  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    ul.products
    > li.product
    .ct-woo-card-title {
    font-size: clamp(28px, 1.8vw, 34px);
  }
}

@media (max-width: 760px) {
  body.wa-reserve-commerce-page {
    --wa-commerce-side: 16px;
  }

  body.wa-reserve-commerce-page .woocommerce-breadcrumb {
    padding-top: 20px;
    font-size: 11px;
  }

  body.wa-reserve-product-page div.product .product-entry-wrapper {
    gap: 28px;
    padding-block: 28px 54px;
  }

  body.wa-reserve-product-page div.product .woocommerce-product-gallery {
    padding: 10px;
  }

  body.wa-reserve-product-page div.product .summary,
  body.wa-reserve-product-page div.product .entry-summary {
    padding-top: 24px;
  }

  body.wa-reserve-product-page div.product .product_title {
    max-width: none;
    font-size: clamp(40px, 13vw, 60px);
  }

  body.wa-reserve-product-page div.product form.cart .variations th,
  body.wa-reserve-product-page div.product form.cart .variations td {
    width: 100%;
    display: block;
    padding: 0;
  }

  body.wa-reserve-product-page div.product form.cart .variations th {
    padding: 0 0 7px;
  }

  body.wa-reserve-product-page div.product form.cart .variations td {
    padding: 0 0 16px;
  }

  body.wa-reserve-product-page div.product form.cart .variations select {
    min-height: 50px;
  }

  body.wa-reserve-product-page div.product form.cart .woocommerce-variation-add-to-cart,
  body.wa-reserve-product-page div.product.product-type-simple form.cart {
    gap: 10px;
    display: grid;
    grid-template-columns: minmax(94px, 0.32fr) minmax(0, 1fr);
  }

  body.wa-reserve-product-page div.product form.cart .single_add_to_cart_button,
  body.wa-reserve-product-page div.product form.cart .button {
    width: 100%;
  }

  body.wa-reserve-product-page div.product .woocommerce-tabs {
    margin-top: 54px;
  }

  body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs {
    gap: 24px;
  }

  body.wa-reserve-product-page div.product .woocommerce-tabs .panel {
    font-size: 14px;
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    .site-main {
    padding-top: 30px;
    padding-bottom: 76px;
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    .woocommerce-result-count,
  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    .woocommerce-ordering {
    width: 100%;
    float: none;
    margin: 0 0 10px;
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    .woocommerce-ordering
    select {
    width: 100%;
  }
}

@media (max-width: 420px) {
  body.wa-reserve-product-page div.product form.cart .woocommerce-variation-add-to-cart,
  body.wa-reserve-product-page div.product.product-type-simple form.cart {
    grid-template-columns: 1fr;
  }

  body.wa-reserve-product-page div.product form.cart .quantity {
    width: 100%;
  }

  body.wa-reserve-product-page div.product .woocommerce-tabs ul.tabs li a {
    min-height: 50px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-commerce-page #main-container *,
  body.wa-reserve-commerce-page #main-container *::before,
  body.wa-reserve-commerce-page #main-container *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.wa-reserve-product-archive:not(.wa-category-shop-page)
    ul.products
    > li.product:hover
    img {
    transform: none;
  }
}

/*
 * Release 1.0.16 shared chrome.
 *
 * This final layer is intentionally authoritative over Blocksy and the former
 * compact menu. The same announcement, sticky header, editorial mobile menu,
 * and native WooCommerce Turkey Bag are used on every approved custom route.
 */
.wa-site-announcement,
.wa-site-header,
.wa-mobile-menu-panel,
.wa-turkey-bag-backdrop,
.wa-site-toast {
  --wa-chrome-ink: #080807;
  --wa-chrome-ink-soft: #11110f;
  --wa-chrome-cream: #f4f0e5;
  --wa-chrome-cream-soft: #d7d1c4;
  --wa-chrome-muted: #958f84;
  --wa-chrome-action: #c87945;
  /*
   * Brand copper, per the approved mockups.
   * ACCEPTED DEVIATION FROM WCAG 1.4.3 AA: #c87945 on the cream announcement
   * bar (#f4f0e5) measures 2.94:1 where 4.5:1 is required for this 11px/700
   * promo copy. A darker step (#9a5527, 4.98:1) was applied earlier; the owner
   * directed that approved mockup values take precedence. Do not "fix" it.
   * The same token is 5.99:1 on the dark header, which passes — only the
   * cream-background usage is affected.
   */
  --wa-chrome-action-on-cream: #c87945;
  --wa-chrome-action-ink: #0b0c0a;
  --wa-chrome-line: rgba(244, 240, 229, 0.14);
  --wa-chrome-line-strong: rgba(244, 240, 229, 0.28);
  --wa-chrome-side: clamp(20px, 4vw, 64px);
  --wa-chrome-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-chrome-serif: Georgia, "Times New Roman", serif;

  box-sizing: border-box;
  font-family: var(--wa-chrome-sans);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.wa-site-announcement *,
.wa-site-announcement *::before,
.wa-site-announcement *::after,
.wa-site-header *,
.wa-site-header *::before,
.wa-site-header *::after,
.wa-mobile-menu-panel *,
.wa-mobile-menu-panel *::before,
.wa-mobile-menu-panel *::after,
.wa-turkey-bag-backdrop *,
.wa-turkey-bag-backdrop *::before,
.wa-turkey-bag-backdrop *::after,
.wa-site-toast *,
.wa-site-toast *::before,
.wa-site-toast *::after {
  box-sizing: border-box;
}

.wa-mobile-menu-panel[hidden],
.wa-turkey-bag-backdrop[hidden],
.wa-site-toast[hidden] {
  display: none !important;
}

body.wa-chrome-overlay-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.wa-site-announcement {
  position: relative;
  z-index: 171;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  border-left: 3px solid var(--wa-chrome-action);
  background: var(--wa-chrome-cream);
  color: var(--wa-chrome-ink);
}

.wa-site-announcement__inner {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 6px var(--wa-chrome-side);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.wa-site-announcement p {
  margin: 0;
}

.wa-site-announcement .wa-site-header__schedule {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.wa-site-announcement .wa-site-header__schedule::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--wa-chrome-action);
  content: "";
}

.wa-site-announcement .wa-site-header__schedule strong {
  font-weight: 800;
}

.wa-site-announcement__offers {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: rgba(8, 8, 7, 0.68);
  white-space: nowrap;
}

.wa-site-announcement__offer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wa-site-announcement__offer + .wa-site-announcement__offer::before {
  width: 1px;
  height: 11px;
  margin-right: 2px;
  background: rgba(8, 8, 7, 0.2);
  content: "";
}

.wa-site-announcement__offer strong {
  color: var(--wa-chrome-action);
  font-weight: 850;
}

.wa-site-announcement__offer--age {
  color: rgba(8, 8, 7, 0.48);
}

.wa-site-announcement__mobile-copy {
  display: none;
}

.wa-site-header {
  position: sticky !important;
  z-index: 170;
  top: 0;
  width: 100%;
  min-height: 74px;
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--wa-chrome-line);
  background: rgba(8, 8, 7, 0.92);
  color: var(--wa-chrome-cream);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.wa-site-header a,
.wa-site-header button,
.wa-mobile-menu-panel a,
.wa-mobile-menu-panel button,
.wa-turkey-bag-backdrop a,
.wa-turkey-bag-backdrop button {
  -webkit-tap-highlight-color: transparent;
}

.wa-site-header a,
.wa-mobile-menu-panel a,
.wa-turkey-bag-backdrop a {
  color: inherit;
}

.wa-site-header button,
.wa-mobile-menu-panel button,
.wa-turkey-bag-backdrop button {
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
}

.wa-site-header :focus-visible,
.wa-mobile-menu-panel :focus-visible,
.wa-turkey-bag-backdrop :focus-visible {
  outline: 2px solid var(--wa-chrome-action);
  outline-offset: 4px;
}

.wa-site-header__main-inner {
  width: 100%;
  max-width: none;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 11px var(--wa-chrome-side);
}

.wa-site-header__brand {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--wa-chrome-cream);
  text-decoration: none;
}

.wa-site-header__mark {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 34px;
  margin: 0;
  border: 1px solid var(--wa-chrome-line-strong);
  background: var(--wa-chrome-ink);
  object-fit: cover;
}

.wa-site-header__brand-type {
  display: flex;
  flex-direction: column;
  color: var(--wa-chrome-cream);
  line-height: 1;
  text-transform: uppercase;
}

.wa-site-header__brand-type strong {
  color: inherit;
  font-family: var(--wa-chrome-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.wa-site-header__brand-type small {
  margin-top: 5px;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.38em;
}

.wa-site-header__desktop-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-site-header__desktop-nav li {
  margin: 0;
}

.wa-site-header__desktop-nav a,
.wa-site-header__menu-trigger,
.wa-header-cart {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wa-chrome-cream-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.wa-site-header__desktop-nav a:hover,
.wa-site-header__menu-trigger:hover,
.wa-header-cart:hover {
  border-color: transparent;
  background: transparent;
  color: var(--wa-chrome-action);
}

.wa-site-header__actions {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.wa-site-header__menu-trigger {
  display: none;
}

.wa-header-cart {
  gap: 5px;
}

.wa-header-cart__count {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  margin-left: 0;
  padding: 0 4px;
  place-items: center;
  border: 1px solid var(--wa-chrome-action);
  border-radius: 50%;
  color: var(--wa-chrome-action);
  font-size: 10px;
  line-height: 1;
}

.wa-mobile-menu-panel {
  position: fixed;
  z-index: 220;
  inset: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding:
    max(18px, env(safe-area-inset-top))
    max(var(--wa-chrome-side), env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(var(--wa-chrome-side), env(safe-area-inset-left));
  background: var(--wa-chrome-cream);
  color: var(--wa-chrome-ink);
  animation: wa-panel-in 220ms ease both;
}

.wa-mobile-menu-panel .wa-site-header__brand {
  color: var(--wa-chrome-ink);
}

.wa-mobile-menu-panel .wa-site-header__mark {
  border-color: rgba(8, 8, 7, 0.24);
}

.wa-mobile-menu-panel .wa-site-header__brand-type {
  color: var(--wa-chrome-ink);
}

.wa-mobile-menu-panel .wa-site-header__brand-type small {
  color: rgba(8, 8, 7, 0.55);
}

.wa-mobile-menu-panel__header,
.wa-turkey-bag__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(8, 8, 7, 0.18);
}

.wa-mobile-menu-panel__header > button,
.wa-turkey-bag__header > button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wa-mobile-menu-panel > nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wa-mobile-menu-panel > nav a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 23px 0;
  border-bottom: 1px solid rgba(8, 8, 7, 0.16);
  color: var(--wa-chrome-ink);
  font-family: var(--wa-chrome-serif);
  font-size: clamp(44px, 7vw, 82px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-decoration: none;
}

.wa-mobile-menu-panel > nav a > span {
  font-family: var(--wa-chrome-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.wa-mobile-menu-panel > nav a > strong {
  color: inherit;
  font: inherit;
  font-weight: 400;
}

.wa-mobile-menu-panel > nav a > i {
  font-family: var(--wa-chrome-sans);
  font-size: 18px;
  font-style: normal;
}

.wa-mobile-menu-panel > nav a:hover > i {
  color: var(--wa-chrome-action);
}

.wa-mobile-menu-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(8, 8, 7, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-mobile-menu-panel__footer p {
  margin: 0;
}

.wa-turkey-bag-backdrop {
  position: fixed;
  z-index: 230;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.wa-turkey-bag {
  width: min(480px, 100%);
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding:
    max(26px, env(safe-area-inset-top))
    max(26px, env(safe-area-inset-right))
    max(26px, env(safe-area-inset-bottom))
    26px;
  border-left: 1px solid var(--wa-chrome-line);
  background: var(--wa-chrome-ink-soft);
  color: var(--wa-chrome-cream);
  animation: wa-drawer-in 220ms ease both;
}

.wa-turkey-bag__header {
  border-color: var(--wa-chrome-line);
}

.wa-turkey-bag__header > div {
  min-width: 0;
}

.wa-turkey-bag__header p {
  margin: 0 0 6px;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-turkey-bag__header h2 {
  margin: 0;
  color: var(--wa-chrome-cream);
  font-family: var(--wa-chrome-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.wa-turkey-bag__header > button {
  color: var(--wa-chrome-cream);
}

.wa-turkey-bag__contents {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wa-turkey-bag .woocommerce-mini-cart {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 !important;
  padding: 18px 4px 18px 0 !important;
  list-style: none !important;
}

.wa-turkey-bag .woocommerce-mini-cart-item {
  position: relative;
  min-height: 115px;
  display: block !important;
  margin: 0 !important;
  padding: 13px 42px 13px 89px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wa-chrome-line) !important;
  background: transparent !important;
  color: var(--wa-chrome-cream);
}

.wa-turkey-bag .woocommerce-mini-cart-item::before,
.wa-turkey-bag .woocommerce-mini-cart-item::after {
  display: none !important;
}

.wa-turkey-bag .woocommerce-mini-cart-item > a:not(.remove) {
  display: block;
  color: var(--wa-chrome-cream) !important;
  font-family: var(--wa-chrome-serif);
  font-size: 17px;
  font-weight: 400 !important;
  line-height: 1.2;
  text-decoration: none;
}

.wa-turkey-bag .woocommerce-mini-cart-item img {
  position: absolute;
  top: 13px;
  left: 0;
  width: 74px !important;
  height: 88px !important;
  max-width: none !important;
  display: block;
  float: none !important;
  margin: 0 !important;
  background: var(--wa-chrome-ink);
  object-fit: cover;
}

.wa-turkey-bag .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 8px;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.wa-turkey-bag .woocommerce-mini-cart-item .amount {
  color: var(--wa-chrome-cream);
}

.wa-turkey-bag .woocommerce-mini-cart-item .remove_from_cart_button {
  position: absolute;
  right: 0;
  bottom: 13px;
  width: auto !important;
  height: auto !important;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-chrome-cream-soft) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none;
}

.wa-turkey-bag
  .woocommerce-mini-cart-item
  .remove_from_cart_button::after {
  border-bottom: 1px solid var(--wa-chrome-action);
  content: "Remove";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.6;
  text-transform: uppercase;
}

.wa-turkey-bag .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 !important;
  padding: 17px 0 16px !important;
  border-top: 1px solid var(--wa-chrome-line) !important;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.wa-turkey-bag .woocommerce-mini-cart__total strong,
.wa-turkey-bag .woocommerce-mini-cart__total .amount {
  color: var(--wa-chrome-cream);
  font-weight: 700;
}

.wa-turkey-bag .woocommerce-mini-cart__buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

.wa-turkey-bag .woocommerce-mini-cart__buttons .button {
  min-width: 0;
  min-height: 52px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--wa-chrome-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-chrome-cream) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}

.wa-turkey-bag .woocommerce-mini-cart__buttons .checkout {
  background: var(--wa-chrome-action) !important;
  color: var(--wa-chrome-action-ink) !important;
}

.wa-turkey-bag__note {
  display: block;
  margin-top: 10px;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  line-height: 1.4;
}

.wa-turkey-bag__empty {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wa-turkey-bag__empty > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wa-chrome-line);
  border-radius: 50%;
  color: var(--wa-chrome-muted);
}

.wa-turkey-bag__empty h3 {
  margin: 24px 0 9px;
  color: var(--wa-chrome-cream);
  font-family: var(--wa-chrome-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
}

.wa-turkey-bag__empty p {
  max-width: 300px;
  margin: 0 0 26px;
  color: var(--wa-chrome-muted);
  font-size: 14px;
  line-height: 1.55;
}

.wa-turkey-bag__empty button {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--wa-chrome-cream);
  border-radius: 0;
  background: transparent;
  color: var(--wa-chrome-cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wa-turkey-bag__empty-summary {
  padding-top: 17px;
  border-top: 1px solid var(--wa-chrome-line);
}

.wa-turkey-bag__empty-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: var(--wa-chrome-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wa-turkey-bag__empty-summary strong {
  color: var(--wa-chrome-cream);
}

.wa-turkey-bag__empty-summary > a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid var(--wa-chrome-line);
  color: var(--wa-chrome-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.wa-site-toast {
  position: fixed;
  z-index: 250;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 44px));
  padding: 15px 18px;
  border: 1px solid var(--wa-chrome-line);
  background: var(--wa-chrome-ink-soft);
  color: var(--wa-chrome-cream);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
  font-size: 11px;
  line-height: 1.4;
  animation: wa-toast-in 200ms ease both;
}

.wa-site-toast > span:first-child {
  color: var(--wa-chrome-action);
}

@keyframes wa-panel-in {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes wa-drawer-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes wa-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 999px) {
  .wa-site-header__main-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wa-site-header__desktop-nav {
    display: none;
  }

  .wa-site-header__menu-trigger {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .wa-site-announcement,
  .wa-site-header,
  .wa-mobile-menu-panel,
  .wa-turkey-bag-backdrop,
  .wa-site-toast {
    --wa-chrome-side: 16px;
  }

  .wa-site-announcement,
  .wa-site-announcement__inner {
    min-height: 30px;
  }

  .wa-site-announcement__inner {
    justify-content: space-between;
    gap: 10px;
    padding-block: 5px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .wa-site-announcement .wa-site-header__schedule {
    flex: 0 0 auto;
    gap: 4px 8px;
    white-space: nowrap;
  }

  .wa-site-announcement .wa-site-header__schedule strong,
  .wa-site-announcement__desktop-copy,
  .wa-site-announcement__offer--age {
    display: none;
  }

  .wa-site-announcement__offers {
    flex: 0 1 auto;
    gap: 7px;
    overflow: hidden;
  }

  .wa-site-announcement__offer {
    gap: 0;
  }

  .wa-site-announcement__offer + .wa-site-announcement__offer::before {
    height: 9px;
    margin-right: 7px;
  }

  .wa-site-announcement__mobile-copy {
    display: inline;
  }

  .wa-site-header,
  .wa-site-header__main-inner {
    min-height: 66px;
  }

  .wa-site-header__main-inner {
    gap: 14px;
    padding-block: 9px;
  }

  .wa-site-header__brand {
    gap: 8px;
  }

  .wa-site-header__mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .wa-site-header__brand-type strong {
    font-size: 12px;
  }

  .wa-site-header__brand-type small {
    margin-top: 4px;
    font-size: 10px;
  }

  .wa-site-header__actions {
    gap: 14px;
  }

  .wa-site-header__menu-trigger,
  .wa-header-cart {
    font-size: 10px;
  }

  .wa-mobile-menu-panel {
    overflow-y: auto;
    padding:
      max(18px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .wa-mobile-menu-panel > nav a {
    padding: 20px 0;
    font-size: clamp(42px, 12vw, 60px);
  }

  .wa-turkey-bag {
    width: 100%;
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    border-left: 0;
  }

  .wa-site-toast {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
    justify-content: center;
    font-size: 10px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .wa-site-announcement__inner {
    min-height: 44px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
    padding-block: 4px;
  }

  .wa-site-announcement__offers {
    justify-content: center;
    overflow: visible;
  }
}

@media (max-width: 420px) {
  .wa-site-header__main-inner {
    max-width: none;
    gap: 10px;
  }

  .wa-site-header__actions {
    gap: 10px;
  }

  .wa-site-header__menu-trigger,
  .wa-header-cart {
    min-width: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .wa-header-cart__count {
    width: 19px;
    min-width: 19px;
    height: 19px;
  }

  .wa-mobile-menu-panel__header,
  .wa-turkey-bag__header {
    gap: 10px;
  }

  .wa-turkey-bag__header h2 {
    font-size: clamp(24px, 8vw, 28px);
  }

  .wa-mobile-menu-panel__header > button,
  .wa-turkey-bag__header > button {
    min-width: 56px;
    flex: 0 0 56px;
    padding-inline: 6px;
  }

  .wa-turkey-bag .woocommerce-mini-cart__buttons {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-site-announcement *,
  .wa-site-announcement *::before,
  .wa-site-announcement *::after,
  .wa-site-header *,
  .wa-site-header *::before,
  .wa-site-header *::after,
  .wa-mobile-menu-panel,
  .wa-mobile-menu-panel *,
  .wa-turkey-bag,
  .wa-turkey-bag *,
  .wa-site-toast,
  .wa-site-toast * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Release 1.0.16 approved public-document pages.
 *
 * Presentation only: stable route body classes preserve the published About
 * copy, Contact Form 7 markup/handlers, and Terms legal text. Shared header and
 * footer chrome remain exclusively owned by the approved global .wa-site-* system.
 */
body.wa-reserve-custom-chrome:is(.wa-page-about, .wa-page-contact, .wa-page-terms) {
  --wa-document-bg: #080807;
  --wa-document-panel: #11120f;
  --wa-document-panel-soft: #0b0c0a;
  --wa-document-cream: #f4f0e5;
  --wa-document-copy: #d7d1c4;
  --wa-document-muted: #958f84;
  --wa-document-copper: #c87945;
  --wa-document-copper-hover: #d58a54;
  --wa-document-line: rgba(244, 240, 229, 0.14);
  --wa-document-line-strong: rgba(244, 240, 229, 0.28);
  --wa-document-side: clamp(20px, 5vw, 72px);
  --wa-document-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-document-serif: Georgia, "Times New Roman", serif;

  background: var(--wa-document-bg);
  color: var(--wa-document-copy);
}

body.wa-reserve-custom-chrome:is(.wa-page-about, .wa-page-contact, .wa-page-terms)
  :is(#main-container, #main.site-main) {
  background: var(--wa-document-bg);
  color: var(--wa-document-copy);
}

body.wa-reserve-custom-chrome:is(.wa-page-about, .wa-page-contact, .wa-page-terms)
  #main
  > .ct-container-full[data-content="normal"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--wa-document-bg);
}

body.wa-reserve-custom-chrome:is(.wa-page-about, .wa-page-contact, .wa-page-terms)
  #main
  > .ct-container-full
  > article {
  margin: 0;
  background: var(--wa-document-bg);
  color: var(--wa-document-copy);
}

/* About Us. */
body.wa-reserve-custom-chrome.wa-page-about article.page > .entry-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--wa-document-bg);
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  > .entry-content
  > .wp-block-group.alignfull {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: clamp(68px, 8vw, 118px) var(--wa-document-side);
  background: var(--wa-document-bg) !important;
  color: var(--wa-document-copy);
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  > .entry-content
  > .wp-block-group
  > .wp-block-columns {
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: flex-start;
  gap: clamp(42px, 7vw, 104px);
  margin: 0 auto;
  padding: 0;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-columns
  > .wp-block-column {
  min-width: 0;
  margin: 0;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-columns
  > .wp-block-column:first-child {
  padding-top: 18px;
  border-top: 1px solid var(--wa-document-copper);
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > h3.wp-block-heading {
  max-width: 420px;
  margin: 0;
  color: var(--wa-document-cream);
  font-family: var(--wa-document-serif);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-transform: none;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > h3.wp-block-heading
  > br:first-child {
  display: none;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > h3.wp-block-heading
  strong {
  color: inherit;
  font: inherit;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-columns
  > .wp-block-column:last-child {
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 1px solid rgba(200, 121, 69, 0.62);
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > p.wp-block-paragraph {
  margin: 0;
  padding: 0 0 24px;
  background: transparent !important;
  color: var(--wa-document-copy);
  font-family: var(--wa-document-sans);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > p.wp-block-paragraph
  + p.wp-block-paragraph {
  padding-top: 24px;
  border-top: 1px solid var(--wa-document-line);
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > p.wp-block-paragraph:last-child {
  padding-bottom: 0;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  .wp-block-column
  > p.wp-block-paragraph
  strong {
  color: var(--wa-document-cream);
  font-weight: 700;
}

body.wa-reserve-custom-chrome.wa-page-about
  article.page
  > .entry-content
  > p.wp-block-paragraph:empty {
  display: none;
}

/* Contact Us body wash -- folded in from the retired assets/css/contact.css.
 *
 * This was the ONE rule in that stylesheet that ever painted (contact.css:40).
 * Its custom properties (--wa-contact-*) are consumed nowhere outside that
 * file, its `color: #f4f0e5` already lost to the critical wp_head block's
 * `color: #d7d1c4 !important`, and its `font-family: Inter, ...` pointed at a
 * webfont this theme never enqueues -- dropping it puts Contact on the same
 * --wa-document-sans stack as the signed-off About and Terms pages.
 *
 * CASCADE: style.css:4352 sets `background: var(--wa-document-bg)` on the
 * shared :is(.wa-page-about, .wa-page-contact, .wa-page-terms) scope at the
 * same (0,2,1) specificity, and that shorthand resets background-image to
 * none -- so this rule must sit LATER in the file, which it does. The wp_head
 * critical block (functions.php:2509) forces `background-color: #080807
 * !important` on this same body; that is background-COLOR only and leaves
 * these image layers alone. Scoped to Contact on purpose: About and Terms
 * ship flat and are already approved.
 */
body.wa-reserve-custom-chrome.wa-page-contact {
  min-width: 320px;
  overflow-x: clip;
  background-image:
    radial-gradient(
      circle at 83% 24%,
      rgba(200, 121, 69, 0.08),
      transparent 25rem
    ),
    linear-gradient(180deg, #080807 0%, #0b0c0a 100%);
}

/* Contact Us and its existing Contact Form 7 instance. */
body.wa-reserve-custom-chrome.wa-page-contact article.page > .entry-content {
  width: min(
    calc(100% - (var(--wa-document-side) * 2)),
    1120px
  );
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 104px) 0 clamp(78px, 9vw, 126px);
  background: var(--wa-document-bg);
  color: var(--wa-document-copy);
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  > .entry-content
  > p.wp-block-paragraph {
  min-height: 74px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 20px;
  border-top: 1px solid var(--wa-document-copper);
  background: var(--wa-document-panel-soft);
  color: var(--wa-document-copy);
  font-family: var(--wa-document-sans);
  font-size: 14px;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wp-block-contact-form-7-contact-form-selector {
  position: relative;
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid var(--wa-document-line);
  background: var(--wa-document-panel);
  color: var(--wa-document-copy);
}

/* mockup `.form-shell::before { content:""; position:absolute;
   inset:-1px auto -1px -1px; width:3px; background:var(--action) }` -- the
   copper spine down the left edge is the form panel's identifying mark in the
   approved comp and was missing entirely. `position: relative` is added above
   solely to give this the containing block. */
body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wp-block-contact-form-7-contact-form-selector::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  background: var(--wa-document-copper);
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7[data-wpcf7-id="1220"],
body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"] {
  margin: 0;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  > p {
  min-width: 0;
  margin: 0;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  > p:nth-of-type(n + 3) {
  grid-column: 1 / -1;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  label {
  display: block;
  /* mockup `label { color: var(--soft) }` -- #d7d1c4, i.e.
     --wa-document-copy, NOT the cream. */
  color: var(--wa-document-copy);
  font-family: var(--wa-document-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  .wpcf7-form-control-wrap {
  display: block;
  margin-top: 10px;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  :is(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  max-width: none;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--wa-document-line-strong);
  border-radius: 0;
  background: var(--wa-document-panel-soft);
  color: var(--wa-document-cream);
  box-shadow: none;
  font-family: var(--wa-document-sans);
  font-size: 16px;
  line-height: 1.45;
  transition:
    border-color 160ms ease,
    outline-color 160ms ease;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  textarea {
  min-height: 176px;
  resize: vertical;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  :is(input[type="text"], input[type="email"], textarea):hover {
  /* mockup `input:hover, textarea:hover { border-color: #66635c }`. There was
     no hover affordance on these fields at all before this.
     !important is REQUIRED, not stylistic: the critical block printed from
     functions.php at wp_head priority 100 -- i.e. AFTER this stylesheet --
     forces `border-color: rgba(244,240,229,.28) !important` on
     input[type="text"], input[type="email"] and textarea at (0,2,1). This
     selector is (0,7,3) but !important beats specificity, so without a
     matching !important the hover would never paint.
     #66635c on the #0b0c0a field fill measures 3.3:1, so the hover state
     clears WCAG 2.1 AA 1.4.11 even though the resting border (an accepted,
     documented deviation at functions.php:2570-2586) does not. */
  border-color: #66635c !important;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  :is(input[type="text"], input[type="email"], textarea):focus {
  /* WAS DEAD. Without !important this lost to the same wp_head critical
     border-color, so a focused field never showed the copper edge the mockup
     specifies -- only the outline below ever rendered. */
  border-color: var(--wa-document-copper) !important;
  outline: 2px solid rgba(200, 121, 69, 0.42);
  outline-offset: 2px;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  :is(input[type="text"], input[type="email"], textarea)[aria-invalid="true"] {
  /* WAS DEAD for the same reason as :focus above -- the wp_head critical
     border-color !important beat it, so a Contact Form 7 validation failure
     turned the field's border no colour at all and the only signal left was
     the .wpcf7-not-valid-tip text below it. */
  border-color: #e2a07a !important;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  input.wpcf7-submit {
  min-width: 146px;
  min-height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 1px solid var(--wa-document-copper);
  border-radius: 0;
  background: var(--wa-document-copper);
  color: #0b0c0a;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--wa-document-sans);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  input.wpcf7-submit:hover {
  /* mockup `.submit:hover { background: #d48954 }` -- a slight copper lift,
     not the cream inversion that shipped. --wa-document-copper-hover is
     #d58a54, one unit of red and one of green off the mockup literal; the
     existing token is used so this surface keeps one source per colour with
     the rest of the About/Contact/Terms document system (style.css:4360,
     already consumed at 4888). Swap to #d48954 if byte-exactness is
     preferred. */
  border-color: var(--wa-document-copper-hover);
  background: var(--wa-document-copper-hover);
  color: #0b0c0a;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  input.wpcf7-submit:focus-visible {
  outline: 2px solid var(--wa-document-copper);
  outline-offset: 4px;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  .wpcf7-spinner {
  vertical-align: middle;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: #e2a07a;
  font-size: 13px;
  line-height: 1.45;
}

body.wa-reserve-custom-chrome.wa-page-contact
  article.page
  .wpcf7-form[aria-label="Contact form"]
  .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-color: var(--wa-document-copper);
  background: var(--wa-document-panel-soft);
  color: var(--wa-document-copy);
  font-size: 14px;
  line-height: 1.55;
}

/* Terms & Conditions and its existing policy wrapper. */
body.wa-reserve-custom-chrome.wa-page-terms article.page > .entry-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--wa-document-bg);
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page {
  margin: 0;
  padding: clamp(68px, 8vw, 112px) var(--wa-document-side);
  background: var(--wa-document-bg);
  color: var(--wa-document-copy);
  font-family: var(--wa-document-sans);
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  .wa-policy-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h1 {
  margin: 0 0 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--wa-document-copper);
  color: var(--wa-document-cream);
  font-family: var(--wa-document-serif);
  font-size: clamp(48px, 6.2vw, 76px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-shadow: none;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h2 {
  margin: clamp(44px, 6vw, 68px) 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200, 121, 69, 0.56);
  color: var(--wa-document-cream);
  font-family: var(--wa-document-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-shadow: none;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h2:first-of-type {
  margin-top: 38px;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h3 {
  margin: 32px 0 12px;
  color: var(--wa-document-cream);
  font-family: var(--wa-document-serif);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 400;
  line-height: 1.25;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  p {
  margin: 0 0 16px;
  color: var(--wa-document-copy);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.78;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h1
  + p {
  margin-bottom: 4px;
  color: var(--wa-document-cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  h1
  + p
  + p {
  color: var(--wa-document-muted);
  font-size: 13px;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  :is(strong, b) {
  color: var(--wa-document-cream);
  font-weight: 700;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  a {
  color: var(--wa-document-copper);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 160ms ease;
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  a:hover {
  color: var(--wa-document-copper-hover);
}

body.wa-reserve-custom-chrome.wa-page-terms
  article.page
  .wa-policy-page.wa-terms-page
  a:focus-visible {
  border-radius: 1px;
  outline: 2px solid var(--wa-document-copper);
  outline-offset: 4px;
}

@media (max-width: 780px) {
  body.wa-reserve-custom-chrome.wa-page-about
    article.page
    > .entry-content
    > .wp-block-group
    > .wp-block-columns {
    flex-direction: column;
    gap: 38px;
  }

  body.wa-reserve-custom-chrome.wa-page-about
    article.page
    .wp-block-columns
    > .wp-block-column {
    width: 100%;
    flex-basis: auto !important;
  }

  body.wa-reserve-custom-chrome.wa-page-about
    article.page
    .wp-block-columns
    > .wp-block-column:last-child {
    padding: 32px 0 0;
    border-top: 1px solid rgba(200, 121, 69, 0.62);
    border-left: 0;
  }

  body.wa-reserve-custom-chrome.wa-page-contact article.page > .entry-content,
  body.wa-reserve-custom-chrome.wa-page-contact
    article.page
    .wpcf7-form[aria-label="Contact form"] {
    grid-template-columns: 1fr;
  }

  body.wa-reserve-custom-chrome.wa-page-contact
    article.page
    .wpcf7-form[aria-label="Contact form"]
    > p {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  body.wa-reserve-custom-chrome:is(.wa-page-about, .wa-page-contact, .wa-page-terms) {
    --wa-document-side: 18px;
  }

  body.wa-reserve-custom-chrome.wa-page-about
    article.page
    > .entry-content
    > .wp-block-group.alignfull {
    padding-block: 54px 64px;
  }

  body.wa-reserve-custom-chrome.wa-page-about
    article.page
    .wp-block-column
    > h3.wp-block-heading {
    font-size: clamp(36px, 11vw, 48px);
  }

  body.wa-reserve-custom-chrome.wa-page-contact article.page > .entry-content {
    width: calc(100% - (var(--wa-document-side) * 2));
    padding-block: 50px 72px;
  }

  body.wa-reserve-custom-chrome.wa-page-contact
    article.page
    .wp-block-contact-form-7-contact-form-selector {
    padding: 28px 20px 30px;
  }

  body.wa-reserve-custom-chrome.wa-page-contact
    article.page
    .wpcf7-form[aria-label="Contact form"]
    input.wpcf7-submit {
    width: 100%;
  }

  body.wa-reserve-custom-chrome.wa-page-terms
    article.page
    .wa-policy-page.wa-terms-page {
    padding-block: 54px 72px;
  }

  body.wa-reserve-custom-chrome.wa-page-terms
    article.page
    .wa-policy-page.wa-terms-page
    h1 {
    padding-bottom: 22px;
    font-size: clamp(40px, 13vw, 56px);
  }

  body.wa-reserve-custom-chrome.wa-page-terms
    article.page
    .wa-policy-page.wa-terms-page
    h2 {
    margin-top: 42px;
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.wa-page-contact
    article.page
    .wpcf7-form[aria-label="Contact form"]
    :is(input, textarea),
  body.wa-reserve-custom-chrome.wa-page-terms
    article.page
    .wa-policy-page.wa-terms-page
    a {
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
 * WooCommerce My Account and White Ash Loyalty Enterprise compatibility - BEGIN
 *
 * Presentation only: WooCommerce and installed account extensions continue to
 * own endpoint navigation, live member data, forms, nonces, calculations, and
 * actions such as Recalculate Points.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome.woocommerce-account {
  --wa-account-ink: #080807;
  --wa-account-panel: #10100f;
  --wa-account-panel-raised: #161614;
  --wa-account-cream: #f4f0e5;
  --wa-account-cream-soft: #d7d1c4;
  --wa-account-muted: #958f84;
  --wa-account-action: #c87945;
  /* The ACCOUNT mockup specifies `--line: rgba(244, 240, 229, .18)`, not the
     opaque #34332f the cart and checkout mockups use. Over the #10100f panel
     that composites to #393836, and over #171715 to #3f3e3a -- both lighter
     than #34332f. Translucency is load-bearing here because the account
     hairline crosses panel, raised and page fills. */
  --wa-account-line: rgba(244, 240, 229, 0.18);
  --wa-account-line-strong: rgba(244, 240, 229, 0.26);
  --wa-account-side: clamp(18px, 4vw, 64px);

  background: var(--wa-account-ink);
  color: var(--wa-account-cream-soft);
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  :where(.site-main, .ct-container, .ct-container-full, .entry-content) {
  background: var(--wa-account-ink);
  color: var(--wa-account-cream-soft);
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .ct-container {
  width: 100%;
  max-width: 1488px;
  padding-inline: var(--wa-account-side);
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: minmax(230px, 292px) minmax(0, 1fr);
  /* Row 1 absorbs notices, row 2 the identity block, row 3 the navigation.
     The content panel spans 2 to the end so it sits beside both. */
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(48px, 7vw, 104px);
}

/*
 * Explicit placement for the account shell.
 *
 * This grid had NO placement rules at all, so all four children auto-placed:
 * the identity block (emitted by inc/account.php on
 * woocommerce_before_account_navigation, i.e. BEFORE the nav element opens)
 * took the first cell, which pushed the navigation into column 2 and dropped
 * the content panel into a row beneath the sidebar. Every logged-in account
 * page rendered with the layout inside out.
 *
 * The catch-all uses :not(:where(...)) so its argument contributes zero
 * specificity and the four named rules below still win. Anything a plugin
 * injects into this container therefore spans the full width and behaves,
 * without this stylesheet having to know its selector.
 */
body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce:has(> .woocommerce-MyAccount-navigation)
  > :not(
    :where(
      .woocommerce-MyAccount-navigation,
      .woocommerce-MyAccount-content,
      .wa-account-identity,
      .woocommerce-notices-wrapper,
      .woocommerce-NoticesGroup,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error
    )
  ) {
  grid-column: 1 / -1;
  /* auto, never a fixed row: notices already stack correctly by auto-flow and
     pinning them to row 1 would overlap a second notice on top of the first. */
  grid-row: auto;
  min-width: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce
  > .wa-account-identity {
  grid-column: 1;
  grid-row: 2;
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce
  > .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 3;
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce
  > .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 2 / -1;
  min-width: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce
  > :where(.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-info, .woocommerce-error) {
  grid-column: 1 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--wa-account-line);
  background: var(--wa-account-panel);
  color: var(--wa-account-cream-soft);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation {
  position: sticky;
  top: 126px;
  padding: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--wa-account-line);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li:last-child {
  border-bottom: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: var(--wa-account-cream-soft);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1.35;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a:hover {
  background: var(--wa-account-panel-raised);
  color: var(--wa-account-cream);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"] {
  background: var(--wa-account-action);
  color: var(--wa-account-ink);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content {
  min-height: 440px;
  padding: clamp(26px, 4vw, 58px);
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h1, h2, h3, h4) {
  color: var(--wa-account-cream);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h1, h2) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a:not(.button), .woocommerce-Address-title a) {
  color: var(--wa-account-action);
  text-decoration-color: rgba(200, 121, 69, 0.55);
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  a:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wa-account-action);
  outline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table, th, td, .woocommerce-Address, fieldset) {
  border-color: var(--wa-account-line);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-Address, fieldset) {
  background: var(--wa-account-panel-raised);
}

@media (max-width: 880px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    #main-container
    .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
    /* Single column: rows must go back to auto-flow, otherwise the three-row
       template above strands the content panel. */
    grid-template-rows: none;
    gap: 18px;
    padding-block: 36px 64px;
  }

  /*
   * Reset the desktop placement explicitly.
   *
   * The named column/row assignments further up are unconditional, so without
   * this every child would keep its desktop cell inside a one-column grid and
   * the content panel would stay pinned to a column that no longer exists.
   * This is the highest regression risk of the placement fix — keep it.
   */
  body.wa-reserve-custom-chrome.woocommerce-account
    #main-container
    .woocommerce:has(> .woocommerce-MyAccount-navigation)
    > * {
    grid-column: 1;
    grid-row: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation {
    position: static;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li {
    border-right: 1px solid var(--wa-account-line);
  }
}

@media (max-width: 520px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    ul {
    grid-template-columns: 1fr;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li {
    border-right: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content {
    min-height: 0;
    padding: 24px 18px 32px;
  }
}

/* WooCommerce My Account and White Ash Loyalty Enterprise compatibility - END */

/*
 * White Ash checkout plugin presentation compatibility - BEGIN
 *
 * These selectors style native controls rendered by the White Ash Cold Pack
 * add-on and BTCPay For WooCommerce V2. The plugins continue to own field
 * names, selection state, checkout refreshes, fees, gateway events, and
 * payment processing.
 */
body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart) {
  border-color: rgba(244, 240, 229, 0.2);
  background: linear-gradient(145deg, #151612, #0b0c0a);
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)::before {
  background: linear-gradient(to bottom, #c87945, rgba(200, 121, 69, 0));
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(
    #wa-cold-pack-wrap.wa-cold-pack-recommended,
    #wa-cold-pack-wrap-cart.wa-cold-pack-recommended
  ) {
  border-color: rgba(200, 121, 69, 0.56);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(200, 121, 69, 0.1) inset;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  :is(label, span, p, small, .optional, .wa-price, .amount) {
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  :is(.wa-cold-pack-badge-summer, .wa-shipping-note) {
  border-color: rgba(200, 121, 69, 0.52);
  color: #f4f0e5 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-cold-pack-badge-summer {
  background: rgba(200, 121, 69, 0.14);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .wa-cold-pack-banner {
  border-color: rgba(244, 240, 229, 0.2);
  background: linear-gradient(145deg, #151612, #0b0c0a);
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .wa-cold-pack-banner.wa-cold-pack-banner-summer {
  border-color: rgba(200, 121, 69, 0.52);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(200, 121, 69, 0.1) inset;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .wa-cold-pack-banner
  :is(strong, span) {
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .wa-cold-pack-banner
  a,
body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-terms
  a {
  color: #c87945 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  label {
  cursor: pointer;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  input[data-wa-cold-pack-toggle="1"] {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-inline-end: 10px;
  accent-color: #c87945;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  input[data-wa-cold-pack-toggle="1"]:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-checkout
  .wa-cold-pack-banner
  a:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-terms
  a:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  input[name="payment_method"][value^="btcpaygf_"]:focus-visible {
  border-radius: 2px;
  outline: 2px solid #c87945;
  outline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  li[class*="payment_method_btcpaygf_"] {
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  li[class*="payment_method_btcpaygf_"]
  > label {
  color: #f4f0e5;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  li[class*="payment_method_btcpaygf_"]
  > label
  img {
  width: auto;
  max-width: min(10rem, 42%);
  max-height: 2.25rem;
  object-fit: contain;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  li[class*="payment_method_btcpaygf_"]
  .payment_box
  :is(p, small, label) {
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  li[class*="payment_method_btcpaygf_"]
  .payment_box
  a {
  color: #c87945;
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
    input[data-wa-cold-pack-toggle="1"] {
    inline-size: 1rem;
    block-size: 1rem;
    margin-inline-end: 8px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #payment
    ul.payment_methods
    li[class*="payment_method_btcpaygf_"]
    > label
    img {
    max-width: min(8rem, 38%);
    max-height: 2rem;
  }
}

/* White Ash checkout plugin presentation compatibility - END */

/*
 * Native WooCommerce checkout coupon presentation - BEGIN
 *
 * WooCommerce retains its standard checkout hook, toggle behavior, field
 * names, nonce handling, validation, and coupon calculations.
 */
body.wa-reserve-custom-chrome.woocommerce-checkout
  .woocommerce-form-coupon-toggle {
  margin: 0 0 18px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .woocommerce-form-coupon-toggle
  .woocommerce-info {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(244, 240, 229, 0.16);
  border-left: 3px solid #c87945;
  border-radius: 0;
  background: #11120f;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .woocommerce-form-coupon-toggle
  a.showcoupon {
  color: #c87945;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon {
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid rgba(244, 240, 229, 0.16);
  border-radius: 0;
  background: #11120f;
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  p {
  color: #d7d1c4;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  input#coupon_code {
  min-height: 46px;
  border: 1px solid rgba(244, 240, 229, 0.28);
  border-radius: 0;
  background: #0b0c0a;
  color: #f4f0e5;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  input#coupon_code::placeholder {
  color: #958f84;
  opacity: 1;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  button[name="apply_coupon"] {
  min-height: 46px;
  border: 1px solid #c87945;
  border-radius: 0;
  background: #c87945;
  color: #0b0c0a;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  button[name="apply_coupon"]:hover {
  border-color: #f4f0e5;
  background: #f4f0e5;
  color: #0b0c0a;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .woocommerce-form-coupon-toggle
  a.showcoupon:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  :is(input#coupon_code, button[name="apply_coupon"]):focus-visible {
  outline: 2px solid #c87945;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout_coupon.woocommerce-form-coupon {
    padding: 18px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout_coupon.woocommerce-form-coupon
    :is(.form-row-first, .form-row-last) {
    width: 100%;
    float: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout_coupon.woocommerce-form-coupon
    button[name="apply_coupon"] {
    width: 100%;
  }
}

/* Native WooCommerce checkout coupon presentation - END */

/*
 * Single-product add-to-cart notices.
 *
 * WooCommerce, Blocksy, and reservation plugins may each ship a later notice
 * background/text declaration. Keep this override at the end of the bundle
 * and scope it to the approved single-product chrome so those notices cannot
 * fall back to a white panel or low-contrast reservation copy.
 */
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border: 1px solid rgba(243, 234, 214, 0.2) !important;
  border-left: 3px solid #c87945 !important;
  background: #11120f !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ded7c8 !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :where(p, span, li, strong, em),
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :where(p, span, li, strong, em) {
  color: inherit !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  color: #c87945 !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a:not(.button),
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a:not(.button) {
  color: #f3ead6 !important;
  text-decoration-color: #c87945 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, .button),
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, .button) {
  border: 1px solid #c87945 !important;
  background: #c87945 !important;
  box-shadow: none !important;
  color: #0b0c0a !important;
}

body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, .button):hover,
body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, .button):hover {
  border-color: #f3ead6 !important;
  background: #f3ead6 !important;
  color: #0b0c0a !important;
}

/* Single-product add-to-cart notices - END */

/* --------------------------------------------------------------------------
 * Approved checkout and account fidelity layer - BEGIN
 *
 * This is a presentation-only layer for native WooCommerce markup. Checkout
 * fields, coupon handling, payment gateways, cold-pack controls, account
 * endpoints, loyalty data, and every nonce/action remain owned by WooCommerce
 * and their respective plugins.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome.woocommerce-checkout,
body.wa-reserve-custom-chrome.woocommerce-account {
  --wa-commerce-ink: #080807;
  --wa-commerce-panel: #10100f;
  --wa-commerce-raised: #171715;
  --wa-commerce-cream: #f4f0e5;
  --wa-commerce-soft: #d7d1c4;
  --wa-commerce-muted: #958f84;
  --wa-commerce-action: #c87945;
  --wa-commerce-line: #34332f;
  /* Mockup value. rgba(...,0.28) composites to ~#4a4945, matching the approved
     mockups' opaque `border: 1px solid #4b4943` on form fields.
     ACCEPTED DEVIATION FROM WCAG 2.1 AA 1.4.11: measures ~2.2:1 against the
     field fill where 3:1 is required, and the fill is only 1.04:1 against the
     panel, so this border is the field's only visible boundary. Raised to 0.40
     earlier; owner directed that approved mockup values take precedence.
     Do not "fix" this — it is a design decision, not an oversight. */
  --wa-commerce-line-strong: rgba(244, 240, 229, 0.28);
  --wa-commerce-side: clamp(20px, 4vw, 64px);

  color-scheme: dark;
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-soft) !important;
}

/* The block above is shared by checkout AND account, but only the cart and
   checkout mockups specify the opaque `--line: #34332f`. The My Account mockup
   specifies `--line: rgba(244, 240, 229, .18)`, which composites to #393836
   over the #10100f panel and #3f3e3a over #171715 -- both lighter. Overridden
   here rather than by splitting the block, so the account route keeps every
   other shared token (ink, panel, raised, cream, soft, muted, action,
   line-strong). */
body.wa-reserve-custom-chrome.woocommerce-account {
  --wa-commerce-line: rgba(244, 240, 229, 0.18);
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(
    #main-container,
    main#main,
    .site-main,
    .site-content,
    .content-area,
    .ct-container,
    .ct-container-full,
    .ct-content,
    article,
    .entry-content,
    .woocommerce
  ) {
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  #main-container
  > main {
  min-height: 62vh;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  #main-container
  :where(.ct-container, .ct-container-full) {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding-inline: var(--wa-commerce-side) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.entry-header, .hero-section, .page-title-section) {
  border-color: var(--wa-commerce-line) !important;
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.entry-title, .page-title, h1, h2, h3, h4) {
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.entry-title, .page-title, h1, h2) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border: 1px solid var(--wa-commerce-line) !important;
  border-left: 3px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :where(a:not(.button), strong, span, li, p) {
  color: inherit !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  color: var(--wa-commerce-action) !important;
}

/* Classic WooCommerce checkout. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #main-container
  .entry-content
  > .woocommerce {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding-block: clamp(38px, 5vw, 78px) clamp(64px, 7vw, 110px);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout {
  display: grid !important;
  /* Kept in step with the winning declaration at 7719 -- this one is dead
     (same specificity, earlier in the file) and a stale value here has sent me
     hunting the wrong rule before. */
  grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.95fr);
  gap: 0 clamp(28px, 4vw, 64px);
  align-items: start;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--wa-commerce-ink) !important;
  box-shadow: none !important;
}

/* Blocksy Companion Pro re-templates the classic checkout and wraps each half
   in a div of its own:

     form.checkout.woocommerce-checkout.ct-woocommerce-checkout
       > div.ct-customer-details  > #customer_details
       > div.ct-order-review      > #order_review_heading, #order_review

   Those two wrappers -- not #customer_details and #order_review -- are the
   grid items, and Blocksy gives each `grid-column: 1 / -1`, so both spanned the
   full width and the order review stacked 1311px BELOW the form instead of
   beside it. Measured on the production markup.

   Placing the wrappers is what actually builds the mockup's two columns. The
   placement declarations on the inner elements further down this file are
   harmless when the wrappers are present (a non-grid-item ignores
   grid-column), and still correct on a site without Blocksy Companion, where
   #customer_details IS the direct child. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > .ct-customer-details {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > .ct-order-review {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-width: 0;
  /* `.order { position: sticky; top: 24px }` from the checkout mockup. */
  position: sticky;
  top: 24px;
}

/* Single column below the mockup's 980px breakpoint. Resetting grid-column to 1
   matters: with one explicit track, `grid-column: 2` would mint an implicit
   second column and the summary would sit off to the side again. */
@media (max-width: 980px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > :is(.ct-customer-details, .ct-order-review) {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #customer_details {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(26px, 3.2vw, 50px) !important;
  border: 1px solid var(--wa-commerce-line) !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-identity {
  /* Placement lives with the rest of the account grid, further up this file.
     Deliberately NOT set here: this rule comes later in source order and would
     override it. */
  min-height: 100px;
  display: flex;
  align-items: center;
  gap: 13px;
  /* The mockup draws this block INSIDE the sidebar card. The markup emits it as
     a SIBLING of the nav -- inc/account.php hooks it to
     woocommerce_before_account_navigation -- so the card is reconstructed here:
     this rule owns the top, left and right edges and the nav below drops its
     own top border.

     It must also carry a fill of its own. Nothing in this theme gave the bare
     <div> a background, so it inherited whatever the parent theme painted,
     which is what put a light box behind the "Signed in as" line. */
  margin: 0;
  padding: 22px;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-identity__mark {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--wa-commerce-cream);
  color: var(--wa-commerce-ink);
  font-size: 0.8rem;
  font-weight: 900;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-identity__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-identity__copy
  small {
  color: var(--wa-commerce-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-identity__copy
  strong {
  overflow: hidden;
  color: var(--wa-commerce-soft);
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--wa-commerce-line);
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review {
  grid-column: 2;
  grid-row: 2 / span 2;
  min-width: 0;
  margin: 18px 0 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(.col-1, .col-2) {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  .col-2 {
  margin-top: clamp(34px, 4vw, 56px) !important;
  padding-top: clamp(34px, 4vw, 56px) !important;
  border-top: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(
    .woocommerce-billing-fields > h3,
    .woocommerce-shipping-fields > h3,
    .woocommerce-additional-fields > h3
  ) {
  margin: 0 0 26px !important;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.form-row, .woocommerce-input-wrapper) {
  min-width: 0;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.form-row-first, .form-row-last) {
  width: calc(50% - 8px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.form-row-wide, .form-row.notes) {
  width: 100% !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .form-row {
  margin: 0 0 20px !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(.form-row label, .woocommerce-form-row label) {
  display: block;
  margin: 0 0 8px;
  color: var(--wa-commerce-soft) !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(
    input.input-text,
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea,
    .select2-container--default .select2-selection--single
  ) {
  min-height: 50px !important;
  border: 1px solid var(--wa-commerce-line-strong) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-ink) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  textarea {
  min-height: 124px !important;
  padding: 14px !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(input, select, textarea)::placeholder {
  color: var(--wa-commerce-muted) !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(
    input.input-text,
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea,
    .select2-container--default .select2-selection--single
  ):focus {
  border-color: var(--wa-commerce-action) !important;
  outline: 2px solid rgba(200, 121, 69, 0.3) !important;
  outline-offset: 1px;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--wa-commerce-cream) !important;
  line-height: 48px !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 48px !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-dropdown,
body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-results__option {
  border-color: var(--wa-commerce-line-strong) !important;
  background: var(--wa-commerce-panel) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-results__option--highlighted[aria-selected] {
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table {
  width: 100%;
  margin: 0 0 28px !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  :where(th, td) {
  padding: 17px 0 !important;
  border-width: 0 0 1px !important;
  /* Dashed, per both approved mockups: the money rows read as a receipt rather
     than a grid. */
  border-style: dashed !important;
  border-color: #44413b !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
  vertical-align: top;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  :where(th, strong, .amount) {
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  #payment {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods {
  margin: 0 !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:last-child {
  border-bottom: 0;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box {
  margin: 14px 0 0 !important;
  padding: 16px !important;
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box::before {
  border-bottom-color: var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  .place-order {
  margin: 0 !important;
  padding: 24px 0 0 !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper) {
  color: var(--wa-commerce-muted) !important;
  font-size: 12px;
  line-height: 1.65;
}

body.wa-reserve-custom-chrome.woocommerce-checkout #place_order {
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 18px !important;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-action) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-ink) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-checkout #place_order:hover {
  border-color: var(--wa-commerce-cream) !important;
  background: var(--wa-commerce-cream) !important;
  color: var(--wa-commerce-ink) !important;
}

/* Logged-in and logged-out WooCommerce account surfaces. */
body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .entry-content
  > .woocommerce {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
}

body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  padding-block: clamp(52px, 7vw, 104px) clamp(70px, 8vw, 120px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li {
  border-color: var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a {
  min-height: 56px;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"] {
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content {
  min-height: 520px;
  padding: clamp(30px, 4vw, 60px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(p, li, address, label, dt, dd) {
  color: var(--wa-commerce-soft);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-Address, fieldset, table.shop_table) {
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-raised) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table.shop_table
  :where(th, td) {
  border-color: var(--wa-commerce-line) !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.u-columns, .col2-set):has(> .col-1, > .col-2) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.u-columns, .col2-set):has(> .col-1, > .col-2)
  > :where(.col-1, .col-2) {
  float: none !important;
  width: auto !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(
    form.woocommerce-form-login,
    form.woocommerce-form-register,
    form.woocommerce-ResetPassword,
    form.woocommerce-EditAccountForm,
    form.woocommerce-address-fields
  ) {
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(button.button, a.button, input.button, #place_order) {
  min-height: 48px;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-action) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-ink) !important;
  font-weight: 800 !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(button.button, a.button, input.button, #place_order):hover {
  border-color: var(--wa-commerce-cream) !important;
  background: var(--wa-commerce-cream) !important;
  color: var(--wa-commerce-ink) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wa-commerce-action) !important;
  outline-offset: 3px;
}

@media (min-width: 1081px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    position: sticky;
    top: 116px;
  }
}

@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review_heading,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    margin-top: -8px !important;
  }
}

@media (max-width: 880px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce
    :where(.u-columns, .col2-set):has(> .col-1, > .col-2) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account) {
    --wa-commerce-side: 16px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #main-container
    .entry-content
    > .woocommerce {
    padding-block: 28px 64px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    padding: 22px 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    :where(.form-row-first, .form-row-last) {
    width: 100% !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    #main-container
    .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    padding-block: 28px 64px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content {
    padding: 24px 18px 32px !important;
  }

  body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
    :where(button.button, a.button, input.button, #place_order) {
    min-height: 50px;
  }
}

/* Approved checkout and account fidelity layer - END */

/* Global WooCommerce notice treatment - BEGIN */
body.wa-reserve-custom-chrome
  :where(
    .blocksy-woo-messages-default.woocommerce-notices-wrapper,
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    p.cart-empty.woocommerce-info,
    ul.woocommerce-error[role="alert"] > li,
    .woocommerce-form-login-toggle .woocommerce-info,
    .woocommerce-form-coupon-toggle .woocommerce-info,
    .woocommerce-notice,
    .woocommerce-notice--success,
    .woocommerce-notice--error,
    .woocommerce-notice--info,
    .woocommerce-thankyou-order-received,
    .woocommerce-store-notice.demo_store,
    .wc-block-components-notices,
    .wc-block-components-notice-banner,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning,
    .wc-block-components-validation-error
  ) {
  --background-color: #11120f !important;
  --theme-text-color: #f3ead6 !important;
  --theme-link-hover-color: #c87945 !important;
  border: 1px solid rgba(243, 234, 214, 0.2) !important;
  border-left: 3px solid #c87945 !important;
  border-radius: 0 !important;
  background: #11120f !important;
  background-color: #11120f !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #d7d1c4 !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .wc-block-components-notice-banner,
    .wc-block-components-notice-banner__content
  )
  :where(p, li, div, span, strong, em, small) {
  color: inherit !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .wc-block-components-notice-banner
  )::before {
  color: #c87945 !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .wc-block-components-notice-banner
  )
  svg {
  fill: #c87945 !important;
  color: #c87945 !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .wc-block-components-notice-banner
  )
  :where(a.button, .button, .wc-block-components-notice-banner__content a) {
  border: 1px solid #c87945 !important;
  border-radius: 0 !important;
  background: #c87945 !important;
  background-color: #c87945 !important;
  color: #0b0c0a !important;
  font-weight: 800 !important;
  text-decoration-color: #0b0c0a !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .wc-block-components-notice-banner
  )
  :where(a.button, .button, .wc-block-components-notice-banner__content a):hover {
  border-color: #f3ead6 !important;
  background: #f3ead6 !important;
  color: #0b0c0a !important;
}

body.wa-reserve-custom-chrome
  :where(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .wc-block-components-notice-banner
  )
  :where(a, button):focus-visible {
  outline: 2px solid #c87945 !important;
  outline-offset: 3px;
}
/* Global WooCommerce notice treatment - END */

/* WooCommerce My Account and plugin compatibility - BEGIN */
body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  /* The column gap separates the two cards, per the approved mockup. The ROW
     gap stays zero on purpose: the identity block sits in row 2 and the nav in
     row 3 of the same column, and they must read as one continuous sidebar
     card, not two stacked ones. */
  column-gap: 28px !important;
  row-gap: 0 !important;
  align-items: stretch;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  min-height: 650px;
  padding-block: clamp(40px, 5vw, 72px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation {
  position: static !important;
  top: auto !important;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wa-commerce-line) !important;
  /* The identity block directly above draws the card's top edge and its own
     bottom hairline, so a top border here would double the seam. */
  border-top: 0 !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  ul {
  width: 100%;
  margin: 0 !important;
  /* Insetting the list is what stops the active row reading as a full-bleed
     slab of copper: the fill is framed by panel on all four sides instead of
     running edge to edge across the rail. */
  padding: 8px !important;
  list-style: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a {
  min-height: 52px;
  display: grid !important;
  /* Two tracks: label, then the trailing chevron. The leading 36px counter
     track is gone with the numbers themselves -- at the counter's size the
     36px column was also too narrow for "01" and wrapped it onto two lines.
     The `auto` track collapses to zero on rows that have no ::after, so
     inactive rows are unaffected. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 14px !important;
  /* The mockup separates rows by hover fill alone. Per-row hairlines inside an
     inset list read as a second, competing grid. */
  border: 0 !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a:hover {
  background: var(--wa-account-panel-raised) !important;
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--wa-commerce-action) !important;
  outline-offset: -3px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li[class*="--dashboard"].is-active
  a {
  border-color: #c87945 !important;
  background: #c87945 !important;
  color: #080807 !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content {
  min-width: 0;
  min-height: 650px;
  padding: clamp(28px, 5vw, 72px) !important;
  overflow-wrap: break-word;
  border: 1px solid var(--wa-commerce-line) !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :first-child {
  margin-top: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :last-child {
  margin-bottom: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > p:first-child {
  max-width: 900px;
  margin-bottom: 22px;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4.2vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > p:first-child
  a {
  font-family: inherit;
  font-size: 0.25em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > p:nth-child(2) {
  max-width: 760px;
  margin: 0 0 clamp(34px, 5vw, 54px);
  color: var(--wa-commerce-muted) !important;
  font-size: 0.95rem;
  line-height: 1.75;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcuts {
  display: block;
  margin-top: clamp(34px, 5vw, 54px);
  border-top: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut {
  min-height: 84px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
  text-decoration: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut:hover {
  background: transparent !important;
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut__number {
  color: var(--wa-commerce-action);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut__copy {
  display: grid;
  gap: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut__copy
  strong {
  color: var(--wa-commerce-cream);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut__copy
  small {
  color: var(--wa-commerce-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-shortcut__arrow {
  color: var(--wa-commerce-action);
  font-size: 1rem;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-support {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-support
  p {
  margin: 0 0 10px;
  color: var(--wa-commerce-action) !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-support
  h2 {
  margin: 0;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .wa-account-support
  > a {
  min-width: 166px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 22px;
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(
    .woocommerce-orders-table,
    .woocommerce-MyAccount-orders,
    table.shop_table,
    .woocommerce-Addresses,
    .woocommerce-Address,
    form.woocommerce-EditAccountForm,
    form.woocommerce-address-fields,
    form.woocommerce-form-login,
    form.woocommerce-form-register,
    form.woocommerce-ResetPassword
  ) {
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(button, .button, input[type="submit"]):disabled,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(button, .button)[aria-disabled="true"],
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(button, .button).disabled {
  cursor: not-allowed !important;
  border-color: rgba(243, 234, 214, 0.16) !important;
  background: #20211e !important;
  color: #817c72 !important;
  opacity: 0.72 !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea, .select2-container) {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 880px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    #main-container
    .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation {
    border-right: 1px solid var(--wa-commerce-line) !important;
    border-bottom: 0 !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content {
    min-height: 0;
  }

  /* The mockup's shortcut list is one column at every width: neither
     @media(max-width:900px) (white-ash-my-account-mockup.html:315-322) nor
     @media(max-width:620px) (:323-340) carries a .shortcut or .shortcuts
     rule. The 3-up grid and the card min-height it needed are both gone.
     Removing the 138px floor is not cosmetic - it would otherwise beat the
     84px row height the base rule now sets on every viewport under 880px. */
}

@media (max-width: 760px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    #main-container
    .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation {
    border-right: 1px solid var(--wa-commerce-line) !important;
    border-bottom: 0 !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    ul {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: max-content;
    min-width: 100%;
    scroll-snap-type: x proximity;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li {
    flex: 0 0 auto;
    min-width: 176px;
    border-right: 1px solid var(--wa-commerce-line) !important;
    border-bottom: 0 !important;
    scroll-snap-align: start;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li
    a {
    min-height: 52px;
    white-space: nowrap;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content {
    min-height: 0;
    padding: 30px 20px 40px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .wa-account-support {
    align-items: stretch;
    flex-direction: column;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .wa-account-support
    > a {
    width: 100%;
  }
}

@media (max-width: 520px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(.woocommerce-orders-table, .woocommerce-MyAccount-orders, table.shop_table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.wa-reserve-custom-chrome
    :where(
      .woocommerce-notices-wrapper,
      .woocommerce-NoticesGroup,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .wc-block-components-notice-banner
    )
    :where(a.button, .button, .wc-block-components-notice-banner__content a) {
    display: flex !important;
    width: 100% !important;
    min-height: 48px;
    margin: 12px 0 0 !important;
    align-items: center;
    justify-content: center;
  }
}
/* WooCommerce My Account and plugin compatibility - END */

/* --------------------------------------------------------------------------
 * Approved cart and checkout fidelity completion - BEGIN
 *
 * Presentation only. Native WooCommerce owns every cart line, quantity,
 * coupon, shipping method, checkout field, reservation message, discount,
 * cold-pack control, gateway, nonce, and submission.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome.woocommerce-cart {
  --wa-commerce-ink: #080807;
  --wa-commerce-panel: #10100f;
  --wa-commerce-raised: #171715;
  --wa-commerce-cream: #f4f0e5;
  --wa-commerce-soft: #d7d1c4;
  --wa-commerce-muted: #958f84;
  --wa-commerce-action: #c87945;
  --wa-commerce-line: #34332f;
  /* Mockup value. rgba(...,0.28) composites to ~#4a4945, matching the approved
     mockups' opaque `border: 1px solid #4b4943` on form fields.
     ACCEPTED DEVIATION FROM WCAG 2.1 AA 1.4.11: measures ~2.2:1 against the
     field fill where 3:1 is required, and the fill is only 1.04:1 against the
     panel, so this border is the field's only visible boundary. Raised to 0.40
     earlier; owner directed that approved mockup values take precedence.
     Do not "fix" this — it is a design decision, not an oversight. */
  --wa-commerce-line-strong: rgba(244, 240, 229, 0.28);
  --wa-commerce-side: clamp(20px, 4vw, 64px);

  color-scheme: dark;
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :where(
    #main-container,
    main#main,
    .site-main,
    .site-content,
    .content-area,
    .ct-container,
    .ct-container-full,
    .ct-content,
    article,
    .entry-content,
    .woocommerce
  ) {
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: clamp(24px, 3vw, 48px);
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding: clamp(38px, 5vw, 78px) var(--wa-commerce-side)
    clamp(64px, 7vw, 110px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > :where(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .cart-empty,
    .return-to-shop
  ) {
  grid-column: 1 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(20px, 2.4vw, 36px) !important;
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :where(th, td) {
  padding: 18px 12px !important;
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--wa-commerce-line) !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
  vertical-align: middle;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  th {
  color: var(--wa-commerce-muted) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :where(.product-name a, .product-price .amount, .product-subtotal .amount) {
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  .product-thumbnail {
  width: 112px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  .product-thumbnail
  img {
  width: 88px !important;
  height: 88px !important;
  border: 1px solid var(--wa-commerce-line);
  border-radius: 0;
  object-fit: cover;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :where(.variation, .variation dt, .variation dd, .variation p, .product-name small) {
  color: var(--wa-commerce-muted) !important;
  font-size: 12px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove {
  display: inline-grid;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wa-commerce-line-strong);
  border-radius: 999px;
  place-items: center;
  color: var(--wa-commerce-action) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove:hover {
  border-color: var(--wa-commerce-action);
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  .quantity
  .qty {
  min-width: 72px;
  min-height: 46px !important;
  border: 1px solid var(--wa-commerce-line-strong) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-ink) !important;
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions {
  padding: 24px 0 0 !important;
  border-bottom: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  width: min(100%, 480px);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :where(input#coupon_code, button[name="apply_coupon"], button[name="update_cart"]) {
  min-height: 48px !important;
  border-radius: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  button[name="update_cart"] {
  float: right;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals {
  grid-column: 2;
  min-width: 0;
  margin: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :where(.cart_totals, .cross-sells) {
  float: none !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: clamp(22px, 2.6vw, 36px) !important;
  border: 1px solid var(--wa-commerce-line) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-panel) !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :where(.cart_totals, .cross-sells)
  > h2 {
  margin: 0 0 22px;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table {
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  :where(th, td) {
  padding: 17px 0 !important;
  border-width: 0 0 1px !important;
  /* Dashed, per both approved mockups: the money rows read as a receipt rather
     than a grid. */
  border-style: dashed !important;
  border-color: #44413b !important;
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  :where(.order-total, .order-total .amount, strong) {
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :where(#shipping_method, .woocommerce-shipping-methods)
  label,
body.wa-reserve-custom-chrome.woocommerce-cart
  :where(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout {
  padding: 24px 0 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  .checkout-button {
  display: flex !important;
  width: 100% !important;
  min-height: 54px;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  .checkout-button:hover {
  border-color: var(--wa-commerce-cream) !important;
  background: var(--wa-commerce-cream) !important;
  color: var(--wa-commerce-ink) !important;
}

/*
 * Some checkout extensions wrap native sections in colored containers. Make
 * those structural wrappers transparent while leaving their controls and
 * server-rendered content intact.
 */
body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(
    .woocommerce-billing-fields,
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields,
    .woocommerce-additional-fields__field-wrapper,
    .woocommerce-account-fields,
    .woocommerce-checkout-review-order-table,
    .woocommerce-checkout-payment
  ) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  :where(
    .cart-subtotal,
    .shipping,
    .order-total,
    .fee,
    .discount,
    .coupon
  )
  :where(th, td, .amount, strong, small) {
  background: transparent !important;
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  .order-total
  :where(th, td, .amount, strong) {
  color: var(--wa-commerce-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  .cart_item
  :where(.product-name, .product-total, .amount, small, p) {
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(#shipping_method, .woocommerce-shipping-methods)
  label,
body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-cart, .woocommerce-checkout)
  input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--wa-commerce-action, #c87945);
}

body.wa-reserve-custom-chrome:is(.woocommerce-cart, .woocommerce-checkout)
  :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wa-commerce-action, #c87945) !important;
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :where(form.woocommerce-cart-form, .cart-collaterals) {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-commerce-side: 16px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    gap: 18px;
    padding-block: 28px 64px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart-collaterals
    :where(.cart_totals, .cross-sells) {
    padding: 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :where(th, td) {
    padding: 14px 0 !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    .coupon {
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    button[name="update_cart"] {
    float: none;
    width: 100%;
    margin-top: 10px;
  }
}

/* Approved cart and checkout fidelity completion - END */

/* --------------------------------------------------------------------------
 * Approved checkout structural parity - BEGIN
 *
 * The local checkout approval is more than a dark palette: it is an editorial
 * two-column ledger with a continuous details rail, a contained order panel,
 * deliberate heading scale, and a clean one-column mobile reflow. These rules
 * map that presentation onto WooCommerce's native checkout markup only. No
 * fields, fees, coupons, reservations, gateways, or submission controls are
 * duplicated or moved in the document.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.entry-header, .hero-section, .page-title-section) {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding: clamp(48px, 6vw, 92px) var(--wa-commerce-side)
    clamp(42px, 5vw, 74px) !important;
  border-bottom: 1px solid var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.entry-title, .page-title, h1.entry-title) {
  max-width: 860px;
  margin: 0 !important;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(52px, 6vw, 88px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.92 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #main-container
  .entry-content
  > .woocommerce {
  padding-top: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout {
  /* THIS IS THE DECLARATION THAT WINS. 5982 is identical but dead (same
     specificity, earlier in the file); keep the two in step.

     Widened at the owner's request. The order column was 1.1fr / 0.7fr, which
     measured 514px against a 1323px form at 1440 -- narrow enough that the
     BTCPay reminder list wrapped after two or three words per line. At
     1.1 / 0.95 the same form gives ~613px, a 19% gain, while the details rail
     keeps ~710px, which is still comfortable for the paired first/last name
     fields.

     The 440px floor (was 400px) holds the summary readable on narrow desktops:
     at a 1000px form the split is 536 / 464, still above the floor, so the
     floor only engages below roughly 950px -- and by 980px the layout has
     already collapsed to one column anyway. */
  grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.95fr);
  gap: 0 !important;
  border-right: 1px solid var(--wa-commerce-line) !important;
  border-left: 1px solid var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #customer_details {
  padding: clamp(34px, 4vw, 64px) !important;
  border: 0 !important;
  border-right: 1px solid var(--wa-commerce-line) !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review_heading {
  padding: clamp(34px, 4vw, 58px) clamp(34px, 4vw, 58px) 18px !important;
  border-bottom: 0 !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review {
  margin: 0 !important;
  padding: 0 clamp(34px, 4vw, 58px) clamp(34px, 4vw, 58px) !important;
  border: 0 !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > :where(.woocommerce-checkout-review-order-table, #payment),
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart, .wa-cold-pack-banner) {
  border-right: 1px solid var(--wa-commerce-line) !important;
  border-left: 1px solid var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > .woocommerce-checkout-review-order-table {
  margin-bottom: 0 !important;
  border-top: 1px solid var(--wa-commerce-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > .woocommerce-checkout-review-order-table
  :where(th, td) {
  padding-inline: clamp(22px, 2.5vw, 34px) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > #payment {
  padding: 0 clamp(22px, 2.5vw, 34px) clamp(22px, 2.5vw, 34px) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--wa-commerce-line) !important;
  background: var(--wa-commerce-panel) !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  thead
  th {
  color: var(--wa-commerce-muted) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.shop_table
  .order-total
  :where(th, td, .amount, strong) {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :where(.woocommerce-form-coupon-toggle, form.checkout_coupon.woocommerce-form-coupon) {
  width: min(100%, 1540px);
  margin-inline: auto !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  > p:first-child {
  grid-column: 1 / -1;
  margin: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  :where(.form-row-first, .form-row-last) {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :where(.entry-header, .hero-section, .page-title-section) {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding: clamp(48px, 6vw, 92px) var(--wa-commerce-side)
    clamp(42px, 5vw, 74px) !important;
  border-bottom: 1px solid var(--wa-commerce-line) !important;
  background: var(--wa-commerce-ink) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :where(.entry-title, .page-title, h1.entry-title) {
  margin: 0 !important;
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(52px, 6vw, 88px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.92 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :where(.cart-empty.woocommerce-info, .return-to-shop) {
  width: 100%;
  max-width: 960px;
  margin-inline: auto !important;
}

@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
    border-inline: 0 !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details {
    border-right: 0 !important;
    border-bottom: 1px solid var(--wa-commerce-line) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :where(.entry-header, .hero-section, .page-title-section),
  body.wa-reserve-custom-chrome.woocommerce-cart
    :where(.entry-header, .hero-section, .page-title-section) {
    padding: 42px 16px 36px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    :where(.entry-title, .page-title, h1.entry-title),
  body.wa-reserve-custom-chrome.woocommerce-cart
    :where(.entry-title, .page-title, h1.entry-title) {
    font-size: clamp(46px, 14vw, 65px) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review_heading {
    padding: 34px 18px 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    padding: 0 18px 34px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > #payment {
    padding-inline: 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > .woocommerce-checkout-review-order-table
    :where(th, td) {
    padding-inline: 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout_coupon.woocommerce-form-coupon {
    grid-template-columns: 1fr;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout_coupon.woocommerce-form-coupon
    > p:first-child {
    grid-column: auto;
  }
}

/* Approved checkout structural parity - END */

/* ==========================================================================
 * v1.0.16 — My Account CONTENT panel deltas.
 *
 * The generic layer here is the point: plugin endpoints (Discord Profile,
 * Ratings & Points, Store Credit, Loyalty Dashboard, My Coupons) are styled
 * as ordinary descendants of .woocommerce-MyAccount-content, so any endpoint
 * — including ones added after this ships — inherits the treatment without
 * this stylesheet knowing its class names. NO PLUGIN SELECTOR IS NAMED.
 *
 * CAVEAT: 2 of 3 reviewer passes died on a connection error, so this block
 * has had less adversarial review than the cart/checkout/product blocks.
 * ========================================================================== */

/* ==========================================================================
 * WHITE ASH RESERVE - MY ACCOUNT CONTENT PANEL (child v1.0.16 / v107)
 * CORRECTED DELIVERABLE. Deltas only.
 *
 * APPEND AT THE VERY END of style.css, AFTER
 *   17623  "White Ash Reserve - checkout right column deltas - END"
 * and BEFORE the Quick Shop boundary comment at 17627.
 * Source order is load-bearing in several places (noted inline).
 *
 * Presentation only. WooCommerce and every installed extension keep ownership
 * of endpoint registration, callbacks, markup, live data, forms, nonces and
 * actions. NO PLUGIN SELECTOR IS NAMED. Plugin endpoints (Discord Profile,
 * Ratings & Points, Store Credit, Loyalty Dashboard, My Coupons) are styled
 * as ordinary descendants of .woocommerce-MyAccount-content, so any endpoint
 * - including ones added after this ships - inherits the treatment. Nothing
 * is display:none, nothing loses an affordance, no control is hidden.
 *
 * LINE REFERENCES BELOW WERE RE-READ IN THE FILE. The reviewed draft's
 * citations were all short by ~18-22 lines; these are the real ones.
 *   168      body.wa-...:not(.wa-reserve-front-page) :where(...h1..h6)
 *            color:#f4f0e5 !IMPORTANT at (0,2,1). Duplicated INLINE at
 *            functions.php:2364 on wp_head priority 100, i.e. AFTER the
 *            enqueued style.css. Any non-!important heading colour written
 *            at (0,2,1) or below is dead. See C2.
 *   2339     functions.php inline: input/select/textarea border-color
 *            rgba(244,240,229,0.28) !IMPORTANT at (0,2,1), later than
 *            style.css. This is what currently defeats the 0.40 field
 *            border on account. See D5 - the single worst live defect.
 *   322-329  accent-color:#c87945 for cart/checkout/account checkboxes and
 *            radios. Correct; not restated.
 *   5119-5130 grid placement (identity col1/row2, nav col1/row3, content
 *            col2/row2/-1, notices grid-column 1/-1 with NO grid-row).
 *            Nothing here touches placement.
 *   5212-5216 panel min-height 440 / padding / overflow-wrap - superseded by
 *            6699-6707.
 *   5218-5230 h1-h4 cream; h1/h2 Georgia 400 -0.035em. No SIZES.
 *   5233-5237 link colour + decoration-colour + offset. Correct.
 *   5241-5247 focus-visible a/button/input/select/textarea (no summary).
 *   5733-5752 --wa-commerce-* token set for checkout+account. NOTE:
 *            --wa-commerce-serif is declared ONLY on body.wa-reserve-
 *            commerce-page (2252), a scope that excludes account, so every
 *            serif declaration here writes the Georgia stack literally,
 *            exactly as 5227 / 6715 / 6801 already do.
 *   5794-5802 h1-h4 cream !important; h1/h2 Georgia 400.
 *   5820     notice descendants colour:inherit !important - C4/C6 are
 *            deliberately NON-!important so notices stay one colour.
 *   5990-6006 .form-row geometry - CHECKOUT ONLY. Account form rows are
 *            unstyled. See D3.
 *   6011-6020 .form-row label 11px/750/UPPERCASE for checkout+account.
 *            Correct for "Email address", wrong for a sentence-length
 *            consent row. L6 fixed that for #customer_details only. See D6.
 *   6041-6058 field box for checkout+account at (0,2,1)!important, border
 *            line-strong. Defeated on border-colour by functions.php:2339.
 *   6067-6070 field :focus border + ring at (0,3,1)!important. Survives.
 *   6276-6280 panel min-height 520, padding !important - superseded by 6703.
 *   6282-6285 p/li/address/label/dt/dd colour soft. Not restated.
 *   6288-6301 .woocommerce-Address / fieldset / table.shop_table frame, and
 *            shop_table th/td colour, both !important. Neither sets PADDING,
 *            border-collapse, or any typography. See D1/D3/D8.
 *   6304-6317 .u-columns / .col2-set two-up grid - covers .woocommerce-
 *            Addresses too. Not restated.
 *   6320-6335 login/register/reset/edit-account/address form frame.
 *   6337-6344 :where(a,button,input,select,textarea):focus-visible outline
 *            2px ACTION !important. On a solid-action button the ring is
 *            orange-on-orange until it clears the 3px offset. See D7.
 *   6459-6497 global notice palette, border+background !IMPORTANT, applies
 *            to .woocommerce-notices-wrapper itself. See C1b.
 *   6571-6580 account grid (:has()).
 *   6699-6707 THE live panel rule: min-width 0, min-height 720px, padding
 *            clamp(38px,5vw,68px) !important, overflow-wrap break-word,
 *            1px line border, ink fill.
 *   6709-6719 > :first-child margin-top 0 / > :last-child margin-bottom 0,
 *            both !important. C3's rhythm composes with them.
 *   6721-6732 > p:first-child   = the display greeting.   See C9/C10.
 *   6734-6743 > p:first-child a = the Log out link, 0.25em. See C9/C11.
 *   6745-6753 > p:nth-child(2)  = the lead paragraph.     See C9/C10.
 *   6756-6874 .wa-account-shortcuts / .wa-account-shortcut / .wa-account-
 *            support, theme-owned (inc/account.php:129/146), all at (0,3,1)
 *            or (0,3,2). C2/C6/C7 are written at (0,3,1) with :where() so
 *            they cannot out-specify any of it.
 *   6876-6889 max-width:100% for the known account blocks.
 *   6891-6907 disabled BUTTON treatment. Disabled FIELDS uncovered. See D5.
 *   6909-6913 input/select/textarea min-width 0 / max-width 100%.
 *   6991-6994 @media(<=760) panel padding 30px 20px 40px !important.
 *   7010-7020 @media(<=520) shop_table becomes its own scroll container.
 *            Generic plugin tables get nothing, and 521-880px is uncovered.
 *            See D2.
 *   9646-9663 / 10207-10212 img/video/iframe/pre containment - scoped to
 *            body.wa-reserve-product-page, never reaches account. C1 is new.
 *   15293-15612 shipped NAVIGATION deltas (A1-A12). Untouched.
 *   15977-16004 abbr.required / .optional / label wrap - CHECKOUT ONLY
 *            (#customer_details). Account is unfixed. See D4.
 *   17304    abbr.required in #order_review - checkout only.
 *
 * PALETTE (literal fallbacks everywhere, because no var() may be assumed):
 *   ink #080807  deep #050504  panel #10100f  raised #151513
 *   cream #f4f0e5  soft #d7d1c4  muted #958f84
 *   action #c87945  action-hover #d58a54
 * ========================================================================== */


/* ==========================================================================
 * PART 1 - SHELL, TYPOGRAPHY, GENERIC ENDPOINT LAYER
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * C1 - PANEL SHELL
 * 6699-6707 owns the box (min-width, min-height, padding, border, fill,
 * overflow-wrap). None of that is restated. What it has no opinion about is
 * a reading measure, what happens when an endpoint emits an image or a
 * preformatted block, and where an anchored heading lands under the sticky
 * header.
 *
 * The containment is the hard "no page-level horizontal overflow at 390px or
 * 320px" rule. The panel is min-width:0 inside minmax(0,1fr), so it can
 * shrink - but an unconstrained <img width="900"> or a long <pre> from a
 * Store Credit or Discord endpoint still pushes the grid track and, through
 * it, the page.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content {
  /* A ch measure, not the mockup's flat 760px (account.module.css:384,:502):
     ch tracks each element's own font size, so it holds for a 0.68rem micro
     label and a 1.1rem lead alike, and it keeps holding at 200% zoom where a
     px cap would not. */
  --wa-account-measure: 76ch;
  /* The file's own sticky offsets are 116px (6367) and 126px (5148). */
  --wa-account-anchor-offset: clamp(84px, 14vh, 132px);
  scroll-margin-block-start: var(--wa-account-anchor-offset);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where([id]) {
  scroll-margin-block-start: var(--wa-account-anchor-offset, 116px);
}

/* svg is excluded from the block-size reset on purpose: an inline icon with
   an intrinsic height and no viewBox collapses to zero if height is forced to
   auto, which would silently remove a plugin's icon. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(img, svg, video, canvas, iframe, embed, object) {
  max-inline-size: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(img, video, canvas) {
  block-size: auto;
}

/* A preformatted block scrolls ITSELF, never the page. white-space:pre is
   restated deliberately - 6704 sets overflow-wrap:break-word on the panel and
   it inherits, which would mangle an order key or a token mid-string. With
   pre there are no soft-wrap opportunities, so the container is the scroller
   and overscroll-behavior-x keeps the gesture off the document. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(pre) {
  max-inline-size: 100%;
  margin-block: 1.25em;
  padding: 14px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  background: var(--wa-commerce-raised, #151513);
  color: var(--wa-commerce-cream, #f4f0e5);
  scrollbar-width: thin;
  scrollbar-color: var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4))
    var(--wa-commerce-raised, #151513);
  white-space: pre;
  tab-size: 2;
}


/* C1b - THE EMPTY NOTICES WRAPPER.
 * woocommerce_output_all_notices() prints <div class="woocommerce-notices-
 * wrapper"> UNCONDITIONALLY - the div is emitted with zero notices inside.
 * 6459 gives that class `border:1px solid rgba(243,234,214,0.2) !important;
 * border-left:3px solid #c87945 !important; background:#11120f !important` at
 * (0,1,1). An EMPTY wrapper therefore renders as a hairline box with a 3px
 * orange stub on every notice-free page load, in BOTH possible arrangements
 * (inside the panel, or as a grid sibling above it).
 *
 * :empty is the whole guard - the instant WooCommerce puts a notice inside,
 * the wrapper stops matching and 6459's palette returns untouched. Nothing is
 * hidden and no grid placement is altered: 5127's `grid-column: 1 / -1` with
 * NO grid-row is not referenced here. (0,4,1) beats (0,1,1). */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > .woocommerce-notices-wrapper:empty,
body.wa-reserve-custom-chrome.woocommerce-account
  #main-container
  .woocommerce
  > .woocommerce-notices-wrapper:empty {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > .woocommerce-notices-wrapper:not(:empty) {
  margin-block-end: clamp(20px, 3vw, 32px);
}


/* --------------------------------------------------------------------------
 * C2 - HEADING HIERARCHY
 * 5794 locks h1-h4 to cream !important and 5798 gives h1/h2 Georgia 400.
 * Neither sets a SIZE, and h5/h6 get nothing - so every heading a plugin
 * endpoint emits below h2 currently falls back to Blocksy's global scale on a
 * panel that shares none of Blocksy's other typography. That is the single
 * biggest reason an unknown endpoint reads as unstyled.
 *
 * Hierarchy is carried by size, weight and tracking, never by colour: h1-h4
 * cannot change colour, and colour alone is not a hierarchy anyone perceives
 * in greyscale or forced-colors.
 *
 * h5/h6 colour DOES carry !important, and that is a correction: style.css:168
 * AND its inline duplicate at functions.php:2364 both set h1-h6 to cream with
 * !important at (0,2,1), and the inline copy loads after style.css. Without
 * !important here the h6 micro-label colour is dead on arrival.
 *
 * SPECIFICITY: these are (0,3,1). 6846 `.wa-account-support h2` is (0,3,2)
 * and keeps its own clamp. Every :not() sits inside :where() so it cannot
 * creep past (0,3,1) and start clobbering the theme-owned dashboard sections.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h1:not(.screen-reader-text)) {
  max-inline-size: 22ch;
  margin-block: 0 0.5em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h2:not(.screen-reader-text)) {
  max-inline-size: 28ch;
  margin-block: 1.7em 0.6em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h3:not(.screen-reader-text)) {
  max-inline-size: 34ch;
  margin-block: 1.6em 0.55em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

/* h4 stays sentence-case. It is the level at which endpoints start printing
   user-supplied strings - a Discord handle, a coupon code, a tier name - and
   uppercasing someone's data is a change to the data, not to its
   presentation. The step down is carried by weight and size. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h4:not(.screen-reader-text)) {
  margin-block: 1.5em 0.5em;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h5:not(.screen-reader-text)) {
  margin-block: 1.4em 0.45em;
  color: var(--wa-commerce-cream, #f4f0e5) !important;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* muted #958f84 on the panel's #080807 fill = 6.18:1, clear of the 4.5:1 AA
   floor even at this size. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h6:not(.screen-reader-text)) {
  margin-block: 1.3em 0.45em;
  color: var(--wa-commerce-muted, #958f84) !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* A heading that opens its container carries no top margin. This is what lets
   an arbitrary nested plugin container sit correctly without this stylesheet
   knowing anything about it; 6711 only covers the panel's own first child.
   Same (0,3,1) as the six rules above - wins by coming after them. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}


/* --------------------------------------------------------------------------
 * C3 - PARAGRAPH AND LIST RHYTHM
 * 6282 sets the COLOUR of p/li/address/label/dt/dd and nothing else - no
 * measure, no leading, no rhythm. At the 1540px container cap an endpoint's
 * paragraph currently sets a ~1200px line at Blocksy's default leading.
 * (0,3,1), so the dashboard's two framing paragraphs (6721/6745 at (0,4,2))
 * keep their bespoke treatment and everything else gets this.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(p) {
  max-inline-size: var(--wa-account-measure, 76ch);
  margin-block: 0 1.15em;
  font-size: 0.95rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Rhythm and marker colour for every list; indentation only for lists an
   endpoint has NOT classed. A plugin that ships its own CSS almost always
   hangs it on a class and very often sets list-style:none to build a card
   grid or a chip row out of <li>; forcing padding-inline-start onto that
   would indent a layout that was never a list visually. An unclassed <ul> is
   prose and needs the indent or its markers hang outside the panel padding.
   Nothing is taken away from classed lists. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(ul, ol) {
  margin-block: 0 1.15em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(ul:not([class]), ol:not([class])) {
  padding-inline-start: 1.35em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(li) {
  margin-block: 0 0.4em;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* action #c87945 on ink = 5.96:1, so the marker reads as a deliberate accent
   rather than a UA default someone forgot. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(li)::marker {
  color: var(--wa-commerce-action, #c87945);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(li) > :where(ul, ol) {
  margin-block: 0.4em 0.2em;
}


/* --------------------------------------------------------------------------
 * C4 - LINKS AND THE FOCUS GAP
 * 5233 sets resting colour, decoration colour and offset and is correct. It
 * never gave links a hover, an active state or a decoration weight, so a link
 * in a plugin endpoint is inert under the pointer today.
 *
 * :hover adds a class-level, so these land at (0,4,1) over 5235's (0,3,1). NO
 * !important anywhere: 5820 sets colour:inherit !important on links inside
 * notices and must keep winning, or every WooCommerce message goes two-tone.
 * action #c87945 = 5.96:1, hover #d58a54 = 7.20:1 on ink; both clear AA.
 * #d58a54 is literal - no --wa-commerce-action-hover token exists in the file
 * (--theme-button-background-hover-color at 2260 is commerce-page scoped and
 * does not resolve on account routes).
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a:not(.button)) {
  text-decoration-thickness: 1px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a:not(.button)):hover {
  color: #d58a54;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a:not(.button)):active {
  color: var(--wa-commerce-cream, #f4f0e5);
}

/* 6337 covers focus-visible for a/button/input/select/textarea. It does NOT
   cover summary, roving-tabindex widgets, or the ARIA-role controls a loyalty
   or Discord dashboard is likely to build out of divs - all of which focus
   invisibly today. Same ring and offset, so the two are indistinguishable in
   use. The panel has no overflow:hidden, so a 3px outward ring is not
   clipped. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(
    summary,
    [tabindex]:not([tabindex="-1"]),
    [role="button"],
    [role="link"],
    [role="tab"],
    [role="checkbox"],
    [role="radio"],
    [role="switch"],
    [contenteditable]
  ):focus-visible {
  outline: 2px solid var(--wa-commerce-action, #c87945);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * C5 - DEFINITION LISTS
 * The key/value shape a points balance, a store-credit ledger or a Discord
 * profile reaches for first, and the one WooCommerce itself uses for
 * variation meta. 6282 colours dt and dd and stops, so both render at the
 * same size with a 40px UA indent on dd and read as an accident.
 *
 * Stacked, not a two-column grid. A grid dl looks better on the even dt/dd
 * pairing WooCommerce emits, but it silently misaligns the moment an endpoint
 * emits two <dd> for one <dt> - legal, and used by plugins for multi-value
 * fields - because the second dd wraps into the label column. Stacking is
 * correct for every legal dl, which is the point of a generic layer.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(dl) {
  margin-block: 0 1.4em;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(dt) {
  margin-block-start: 1.1em;
  color: var(--wa-commerce-muted, #958f84);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(dt):first-child {
  margin-block-start: 0;
}

/* margin-inline-start:0 replaces the UA's 40px indent, which is the single
   thing that makes an unstyled dl look broken on a dark panel. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(dd) {
  max-inline-size: var(--wa-account-measure, 76ch);
  margin: 0.4em 0 0;
  color: var(--wa-commerce-cream, #f4f0e5);
  font-size: 0.95rem;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
 * C6 - INLINE TEXT AND SEPARATORS
 * Codes, references and balances are what these endpoints exist to show.
 * SPECIFICITY: (0,3,1). 6799 `.wa-account-shortcut__copy strong` is (0,3,2)
 * and keeps its Georgia clamp.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(strong, b) {
  color: var(--wa-commerce-cream, #f4f0e5);
  font-weight: 750;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(em, i) {
  font-style: italic;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(small) {
  color: var(--wa-commerce-muted, #958f84);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* 0.875em, not a rem: a code span inside a 0.68rem dt must not out-size its
   own label, and inside an h3 it must scale with it. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(code, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* A standalone code/kbd/samp span becomes a chip.
   CORRECTION: the reviewed draft wrote this as
     :where(:not(pre) > code, kbd, samp)
   and a comma inside :where() splits the WHOLE list, so the `:not(pre) >`
   constraint bound to `code` only - kbd and samp inside a <pre> got the chip
   border and background on top of the block frame. Each branch now carries
   its own ancestor guard. cream on the raised fill = 16.1:1. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(code, kbd, samp):not(pre *) {
  padding: 0.14em 0.42em;
  border: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  background: var(--wa-commerce-raised, #151513);
  color: var(--wa-commerce-cream, #f4f0e5);
  /* A long unbroken token - an order key, a coupon code, a Discord snowflake
     - must break rather than push the panel wide at 320px. */
  overflow-wrap: anywhere;
}

/* cream on the composited highlight = 13.5:1. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(mark) {
  padding: 0.05em 0.25em;
  background: rgba(200, 121, 69, 0.22);
  color: var(--wa-commerce-cream, #f4f0e5);
  /* Not colour alone: the underline survives greyscale and forced-colors. */
  text-decoration: underline;
  text-decoration-color: var(--wa-commerce-action, #c87945);
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(abbr[title]) {
  text-decoration: underline dotted;
  text-decoration-color: var(--wa-commerce-muted, #958f84);
  text-underline-offset: 3px;
  cursor: help;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(hr) {
  block-size: 0;
  margin-block: clamp(26px, 4vw, 44px);
  border: 0;
  border-block-start: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(blockquote) {
  margin: 0 0 1.4em;
  padding: 4px 0 4px 20px;
  border-inline-start: 2px solid var(--wa-commerce-action, #c87945);
  color: var(--wa-commerce-cream, #f4f0e5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-style: normal;
  line-height: 1.45;
}


/* --------------------------------------------------------------------------
 * C7 - GENERIC NESTED CONTAINERS AND <details>
 * The "make an unknown endpoint look deliberate" layer, expressed only in
 * sectioning ELEMENTS - no class is guessed at.
 *
 * A hairline-and-rhythm treatment, not a filled card. A filled bordered box
 * would double-frame the moment an endpoint puts a table or a fieldset inside
 * its section (6288 already gives those the raised fill), and a plugin
 * dashboard nested three sections deep would end up with three concentric
 * frames. A top hairline with generous space is the mockup's own idiom
 * (account.module.css:461-469 .support) and it composes at any depth.
 *
 * Direct children only, and the two theme-owned sections from
 * inc/account.php:129/146 are excluded by name so 6825's own margin/padding/
 * border-top keeps working. Both exclusions sit inside :where(), so this
 * stays (0,3,1) and cannot out-specify anything in 6756-6874.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :where(
    section:not(.wa-account-shortcuts):not(.wa-account-support),
    article,
    aside
  ) {
  margin-block-start: clamp(30px, 4.5vw, 52px);
  padding-block-start: clamp(20px, 3vw, 32px);
  border-block-start: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :where(section, article, aside):first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

/* <details> is the one generic element a plugin can drop in that is a real
   CONTROL, and it is completely unstyled here today.
 *
 * summary keeps display:list-item. Setting display:flex - the obvious way to
 * centre a label in a 48px row - removes the native disclosure triangle in
 * Chromium, which strips the only affordance telling anyone whether the
 * section is open. That would be hiding a plugin control. The marker stays,
 * recoloured to the action tone (5.48:1 on the raised fill, clear of the 3:1
 * non-text floor), and padding does the vertical work.
 *
 * line-strong, not line, for the box: summary is an interactive control, so
 * its container boundary is what 1.4.11 measures. line composites to ~1.45:1
 * against ink, line-strong to 3.43:1. The token is used unchanged at 0.40 and
 * no form field is touched. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(details) {
  margin-block: 1.25em;
  border: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4));
  background: var(--wa-commerce-raised, #151513);
}

/* padding-inline-start is 34px at EVERY viewport. CORRECTION: the reviewed
   draft set `padding: 14px 16px 14px 34px` here and then `padding-inline:
   16px` in its <=760 block, which collapsed the marker gutter to 16px and
   ran the disclosure triangle into the label on exactly the screens where
   the row is tightest. Only the BLOCK padding changes on mobile now. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(summary) {
  min-block-size: 48px;
  padding-block: 14px;
  padding-inline: 34px 16px;
  color: var(--wa-commerce-cream, #f4f0e5);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(summary)::marker {
  color: var(--wa-commerce-action, #c87945);
}

/* Safari renders the legacy -webkit marker instead of ::marker. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(summary)::-webkit-details-marker {
  color: var(--wa-commerce-action, #c87945);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(details) > :where(:not(summary)) {
  padding-inline: 16px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(details) > :where(:not(summary)):last-child {
  padding-block-end: 16px;
}


/* --------------------------------------------------------------------------
 * C8 - COMPOSITION INSIDE UNKNOWN CONTAINERS
 * A paragraph immediately after a heading is a deck, not a new block. Costs
 * nothing and is the difference between "styled" and "typeset" on an endpoint
 * nobody has seen. `table` and `form` appear as SIBLINGS only; no property is
 * set on them here.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, dl) {
  margin-block-start: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(p, ul, ol, dl, table, form) + :where(h2, h3) {
  margin-block-start: clamp(28px, 4vw, 48px);
}


/* --------------------------------------------------------------------------
 * C9 - DASHBOARD GREETING, RE-ANCHORED  (a correction, not a restatement)
 *
 * 6721 targets the greeting as `> p:first-child` and 6745 the lead paragraph
 * as `> p:nth-child(2)`. Both are POSITIONAL and both break the moment
 * anything non-<p> precedes them inside the panel.
 *
 * Something does. woocommerce_output_all_notices() prints
 *   <div class="woocommerce-notices-wrapper"></div>
 * UNCONDITIONALLY, and on stock WooCommerce it is hooked into
 * woocommerce_account_content, i.e. INSIDE .woocommerce-MyAccount-content.
 * Blocksy may relocate it - this file knows the relocated
 * .blocksy-woo-messages-default form at 6460, and 5127 places a wrapper as a
 * SIBLING of the panel - so which arrangement is live cannot be settled
 * without staging.
 *
 * If the wrapper is inside the panel every child index shifts by one:
 *   p:first-child  matches NOTHING  -> the greeting loses its treatment
 *   p:nth-child(2) matches the GREETING -> the store's welcome renders as
 *                  0.95rem muted body copy and the dashboard has no visual
 *                  page title at all.
 *
 * :first-of-type / :nth-of-type(2) count only same-type siblings, so they
 * skip the notices div and land on the right paragraph in BOTH arrangements.
 * The declarations are written out in full because when the wrapper IS
 * present 6721/6734 do not match and there is nothing to inherit; when it is
 * absent these resolve to the same element with the same values, so there is
 * no visible change and no double application.
 *
 * GATING: :has(.wa-account-support, .wa-account-shortcuts) restricts this to
 * the dashboard. Both are THEME markers from inc/account.php:129/146, printed
 * on woocommerce_account_dashboard, which fires on the dashboard endpoint
 * only - so this is a theme selector, not a plugin one, and it needs no
 * knowledge of any endpoint slug.
 *
 * SPECIFICITY: 3 classes + :has() (max of args = 1 class) + :first-of-type
 * (1 class) = 5 classes, body + p = 2 types -> (0,5,2) over (0,4,2).
 * DEGRADATION: without :has() the selector is invalid and dropped, leaving
 * 6721/6745 exactly as they are today - the current state, not a worse one,
 * and such an engine has already lost the layout since the grid at 6571 is
 * itself a :has() selector.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:has(.wa-account-support, .wa-account-shortcuts)
  > p:first-of-type {
  max-inline-size: 900px;
  /* NO hairline and NO bottom padding. The approved HTML mockup's .intro
     (white-ash-my-account-mockup.html:205-210) is a bare flex row with no
     border and no padding, and its h1 (:198-203) is separated from the lead
     paragraph by margin alone. The account.module.css:320-322 rule the
     previous note cited belongs to a DIFFERENT mockup and does not govern
     this surface. */
  margin-block: 0 26px;
  color: var(--wa-commerce-cream, #f4f0e5) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

/* The "Log out" link inside the greeting.
 * 6739 sizes it at 0.25em of the greeting. At 390px the greeting clamps to
 * its 2rem floor, so 0.25em resolves to 8px - an 8px uppercase 700 label at
 * 0.08em tracking, neither readable nor hittable, and the only way to sign
 * out from this screen.
 *
 * em in a font-size resolves against the PARENT, so the clamp still tracks
 * the greeting but can no longer fall below 12px or climb past 16px (0.25em
 * of the 4.9rem desktop greeting is 19.6px, which over-weights a secondary
 * action sitting next to the member's name). */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:has(.wa-account-support, .wa-account-shortcuts)
  > p:first-of-type
  a {
  font-family: inherit;
  font-size: clamp(0.75rem, 0.22em, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The lead paragraph. 760px is 6748's own measure and is kept deliberately -
   this rule exists to survive the index shift, not to redesign the page. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:has(.wa-account-support, .wa-account-shortcuts)
  > p:nth-of-type(2) {
  max-inline-size: 700px;
  margin: 0 0 46px;
  color: var(--wa-commerce-muted, #958f84) !important;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
 * C10 - CONTAINMENT: the greeting treatment must never reach a plugin endpoint
 * THE MOST IMPORTANT RULE IN THIS BLOCK.
 *
 * 6721 is `.woocommerce-MyAccount-content > p:first-child`. It carries no
 * endpoint condition, so it fires on EVERY endpoint whose panel opens with a
 * paragraph. A Discord Profile, Ratings & Points, Store Credit, Loyalty
 * Dashboard or My Coupons endpoint that begins with one sentence of
 * explanatory copy renders that sentence at clamp(2rem,4.2vw,4.9rem) Georgia,
 * -0.045em, line-height 0.98 - a 78px display line wrapping four or five
 * times at the desktop cap. 6745 does the matching damage one paragraph down.
 *
 * Neither can be edited (deltas only), so both are neutralised for every
 * panel that is not the dashboard. All four positional forms are listed so
 * the reset holds whether or not the notices wrapper shifts the index.
 *
 * Only `color` carries !important, because only 6726/6750 use it. Everything
 * else wins on specificity alone, which deliberately leaves a plugin's own
 * stylesheet able to take these paragraphs back on a tie. The padding/border
 * resets the reviewed draft carried here were dead code - 6721 and 6745 set
 * neither - and are gone.
 *
 * Specificity: 3 classes + :not(:has()) (1 class) + :first-child (1 class)
 * = 5 classes, body + p = 2 -> (0,5,2).
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:first-child,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:first-of-type,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:nth-child(2),
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:nth-of-type(2) {
  max-inline-size: var(--wa-account-measure, 76ch);
  margin-block: 0 1.15em;
  color: var(--wa-commerce-soft, #d7d1c4) !important;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.75;
  text-wrap: pretty;
}

/* And the link inside it goes back to being a link, not a 0.25em micro-cap
   (6734 has the same unconditional reach). Colour is left alone so 5235 still
   supplies the action tone. (0,5,3) beats 6734's (0,4,3). */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:first-child
  a,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content:not(:has(.wa-account-support, .wa-account-shortcuts))
  > p:first-of-type
  a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}


/* ==========================================================================
 * PART 2 - THE SURFACE THE REVIEWED DRAFT DECLARED "ANOTHER PRODUCER'S LANE"
 *
 * There is no other producer. The content-panel producer died mid-run and
 * this is the gap fill, so tables, forms, fieldsets, legends, fields,
 * checkboxes, radios, buttons, .woocommerce-Address, pagination, empty
 * states, disabled controls and the logged-out forms are all in scope.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * D1 - TABLES (orders, downloads, order details, and any plugin ledger)
 * 6288 gives table.shop_table a border and the raised fill and 6296 sets
 * th/td colour, both !important. NEITHER sets padding, border-collapse,
 * alignment or any typography, and a plugin's bare <table> gets nothing at
 * all - it lands on Blocksy's global table styling over an ink panel.
 *
 * The bare-table rule is non-!important so a plugin that ships its own table
 * CSS can still win. shop_table keeps its own !important frame from 6288.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0 clamp(24px, 3.5vw, 40px);
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* A plugin ledger gets the same frame shop_table already has, so an unknown
   endpoint's table does not read as a different component. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table:not(.shop_table) {
  border: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  background: var(--wa-commerce-raised, #151513);
  color: var(--wa-commerce-soft, #d7d1c4);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) :where(th, td) {
  padding: 14px 16px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  vertical-align: top;
  text-align: start;
  /* An order key or a long product title must break, not widen the row. */
  overflow-wrap: anywhere;
}

/* Column headers as the mockup's micro-label. Both branches are listed
   explicitly because 6296 sets shop_table th/td colour !important at (0,4,2);
   the second selector is (0,4,3) and clears it. muted on the raised fill =
   5.73:1, on ink = 6.18:1. Headers WRAP - nowrap here would set the table's
   min-content width from a long translated string. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table thead th,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table.shop_table thead th {
  padding-block: 12px;
  border-block-end: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4)) !important;
  color: var(--wa-commerce-muted, #958f84) !important;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Row headers (the first cell of a tbody row, e.g. the order number) read as
   the row's identity. Same two-branch construction, same reason. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table tbody th,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  table.shop_table tbody th {
  color: var(--wa-commerce-cream, #f4f0e5) !important;
  font-weight: 750;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) :where(tbody) > :where(tr):last-child > :where(th, td) {
  border-block-end: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) :where(tfoot) :where(th, td) {
  border-block-start: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4));
  color: var(--wa-commerce-cream, #f4f0e5);
  font-weight: 750;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) :where(caption) {
  padding-block-end: 12px;
  color: var(--wa-commerce-muted, #958f84);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: start;
  text-transform: uppercase;
}

/* The order-actions cell holds 1-3 buttons. Without a flex context they stack
   at 100% width on some themes and collide on others. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(table) :where(td) > :where(a.button, button.button, .button) {
  margin: 4px 6px 4px 0;
}


/* --------------------------------------------------------------------------
 * D2 - WIDE TABLES SCROLL THEMSELVES, NOT THE PAGE
 * 7010 already does this, but only at <=520px and only for the three named
 * WooCommerce order tables. A plugin ledger has no such class, and 521-880px
 * (where the grid is already single-column and the panel is full width) is
 * uncovered for everything. This is the hard "no page-level horizontal
 * overflow" rule, so it applies to every table in the panel.
 *
 * display:block on the table generates an anonymous table wrapper around the
 * row groups, so columns stay aligned and the block box becomes the scroll
 * container. See RISKS - this is the only CSS-only route and it costs the
 * implicit table role in Chromium/WebKit.
 * ------------------------------------------------------------------------ */

@media (max-width: 880px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(table) {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4))
      var(--wa-commerce-panel, #10100f);
  }

  /* A focused control inside the scroller must not land flush against the
     clipped edge. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(table) {
    scroll-padding-inline: 16px;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(table) :where(th, td) {
    padding: 12px 14px;
  }
}


/* --------------------------------------------------------------------------
 * D3 - FORMS, FIELDSETS, LEGENDS
 * 5990-6006 gives .form-row its geometry for CHECKOUT ONLY, so account form
 * rows (edit-address, edit-account, register) fall back to WooCommerce core's
 * `margin: 0 0 6px; padding: 3px 0` and read as a cramped stack. 6288 gives
 * fieldset a border and the raised fill but NO padding, so on edit-account
 * the "Password change" legend sits on the border with the first field
 * jammed against the frame.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(form) {
  margin-block-end: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.form-row, .woocommerce-form-row),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login :where(.form-row, .woocommerce-form-row),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register :where(.form-row, .woocommerce-form-row),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-ResetPassword :where(.form-row, .woocommerce-form-row) {
  min-inline-size: 0;
  margin: 0 0 20px;
  padding: 0;
}

/* Two-up on wide panels, stacked below. 6304 already grids .u-columns and
   .col2-set; this is the intra-form pairing WooCommerce uses on
   edit-address and edit-account. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.form-row-first, .form-row-last) {
  inline-size: calc(50% - 8px);
  float: none;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.form-row-wide, .form-row.notes) {
  inline-size: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-address-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(fieldset) {
  min-inline-size: 0;
  margin-block: clamp(28px, 4vw, 44px) 0;
  padding: clamp(20px, 3vw, 30px);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(fieldset) > :last-child {
  margin-block-end: 0;
}

/* legend rendered as the mockup's micro-label. padding-inline:0 removes the
   UA's inset so the label aligns with the fields under it rather than
   floating in the border gap. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(legend) {
  max-inline-size: 100%;
  margin-block-end: 18px;
  padding-inline: 0;
  color: var(--wa-commerce-cream, #f4f0e5);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  overflow-wrap: break-word;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
 * D4 - LABELS, REQUIRED, OPTIONAL
 * 6011 handles `.form-row label` for checkout+account. A plugin endpoint's
 * bare <label> gets colour from 6282 and nothing else.
 *
 * The generic label is deliberately NOT uppercased. WooCommerce's own field
 * names ("Email address") are known strings and 6011 may shout them; a plugin
 * label may be a Discord handle, a tier name or a user-supplied string, and
 * uppercasing that changes the data, not its presentation.
 *
 * WooCommerce prints <abbr class="required" title="required">*</abbr>, which
 * core colours #a00 - 2.71:1 on the ink panel, an outright AA failure on a
 * character that is announced. 15977 fixed this for #customer_details on
 * checkout only; account was never covered. action = 5.96:1. The UA's dotted
 * abbr[title] underline (which C6 also sets) reads as a typo next to a label,
 * so it is removed on this one element.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label:not(.form-row label):not(.woocommerce-form-row label):not(.checkbox):not(
    .woocommerce-form__label-for-checkbox
  ) {
  display: block;
  margin: 0 0 8px;
  color: var(--wa-commerce-soft, #d7d1c4);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.45;
  overflow-wrap: break-word;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(label, legend) {
  overflow-wrap: break-word;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(abbr.required, span.required, .required),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register :where(abbr.required, span.required, .required),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-ResetPassword :where(abbr.required, span.required, .required) {
  border: 0 !important;
  color: var(--wa-commerce-action, #c87945) !important;
  text-decoration: none !important;
  cursor: help;
}

/* "(optional)" must not shout as loudly as the field name. muted = 6.18:1. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label .optional {
  color: var(--wa-commerce-muted, #958f84) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}


/* --------------------------------------------------------------------------
 * D5 - FIELDS: THE 0.40 BORDER, RESTORED
 * THE WORST LIVE DEFECT ON THIS SURFACE.
 *
 * 6041 correctly gives every account field `border: 1px solid
 * var(--wa-commerce-line-strong)` (0.40 alpha) at (0,2,1)!important. BUT
 * functions.php:2339 prints a duplicate critical block on wp_head priority
 * 100 - AFTER the enqueued style.css - containing
 *   body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
 *     :where(input.input-text, ..., select, textarea)
 *   { border-color: rgba(244,240,229,0.28) !important;
 *     background-color: #0b0c0a !important; }
 * which is ALSO (0,2,1)!important. Equal specificity, later source: the
 * INLINE 0.28 wins, on every account field, in every browser.
 *
 * Measured: 0.28 cream over the #0b0c0a fill composites to #4A4945 = 2.18:1.
 * WCAG 2.1 AA 1.4.11 requires 3:1 for a UI component's visual boundary, and
 * the fill is 1.04:1 against the panel so the border is the only edge there
 * is. The account form fields currently have no perceivable boundary at rest.
 *
 * This rule restores 0.40 (3.43:1) at (0,3,1)!important, which clears both
 * layers. The token is NOT redefined and NOT lowered; only the losing side of
 * a specificity tie is corrected. The three logged-out forms are scoped
 * separately because they are not inside .woocommerce-MyAccount-content.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
        [type="button"]
      ):not([type="reset"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
    select,
    textarea
  ),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-ResetPassword
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 48px;
  padding: 12px 14px;
  border: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4)) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-ink, #080807) !important;
  background-color: var(--wa-commerce-ink, #080807) !important;
  box-shadow: none !important;
  color: var(--wa-commerce-cream, #f4f0e5) !important;
  font-size: 1rem;
  line-height: 1.4;
}

/* font-size:1rem above is 16px minimum on the field text: anything smaller
   triggers the iOS zoom-on-focus, which is itself a horizontal-overflow event
   on a 320px viewport.
 *
 * Full-bleed width is applied ONLY where the markup is a known form row or
 * one of the three logged-out forms. A plugin endpoint's bare inline input -
 * a points-redemption quantity box, a coupon lookup - keeps its own width and
 * only gains the max-inline-size guard, so this layer never rearranges a
 * layout it cannot see. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.form-row, .woocommerce-form-row, .woocommerce-input-wrapper)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-ResetPassword
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  inline-size: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(textarea) {
  min-block-size: 124px;
  resize: vertical;
}

/* WooCommerce marks the ROW, not the field, on validation failure. The
   palette has no error tone, so the cue is a 3px inline-start rule - a shape
   change, not a colour change - plus the hover tone. Never colour alone. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-invalid)
  :where(input, select, textarea),
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea)[aria-invalid="true"] {
  border-color: #d58a54 !important;
  border-inline-start-width: 3px !important;
}

/* Disabled and readonly FIELDS. 6891 covers disabled buttons only. Nothing is
   hidden and the boundary stays at 0.40 - a disabled control still has to be
   perceivable, and 1.4.11's exemption for inactive components is not a reason
   to make a readonly balance field invisible. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea):disabled,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea)[readonly],
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea)[aria-disabled="true"] {
  border-color: var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4)) !important;
  background: var(--wa-commerce-panel, #10100f) !important;
  color: var(--wa-commerce-soft, #d7d1c4) !important;
  cursor: not-allowed;
  opacity: 1;
}

/* A readonly field is still readable and still selectable; only the disabled
   state loses the pointer affordance. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input, select, textarea)[readonly] {
  cursor: text;
}


/* --------------------------------------------------------------------------
 * D6 - CHECKBOX AND RADIO ROWS
 * accent-color is already correct (322-329) and is not restated.
 *
 * Two live defects. First, the control itself is the UA's ~13px box, which is
 * under any target-size floor. Second - and worse - 6011 makes EVERY
 * `.form-row label` 11px / 750 / UPPERCASE with 0.075em tracking. That is
 * right for "Email address" and wrong for "I have read and agree to the
 * website terms and conditions", which is what the register and edit-account
 * consent rows actually contain. L6 fixed this for checkout's
 * #customer_details only; account was never covered.
 *
 * The label is the target: a <label> wrapping (or bound to) the control is
 * itself clickable, so a 48px label row is a 48px target without resizing the
 * native control past what accent-color can paint. Specificity (0,4,1) over
 * 6011's (0,2,1)!important.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label.woocommerce-form__label-for-checkbox,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label.checkbox,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label:has(> input[type="checkbox"]),
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  label:has(> input[type="radio"]),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login label.woocommerce-form__label-for-checkbox,
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register label.woocommerce-form__label-for-checkbox {
  min-block-size: 48px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  color: var(--wa-commerce-soft, #d7d1c4) !important;
  cursor: pointer;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* em, not px, so the box scales with the label and at 200% zoom; the min-*
   pair keeps it usable if a plugin sets a very small label size. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(input[type="checkbox"], input[type="radio"]),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login :where(input[type="checkbox"], input[type="radio"]),
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register :where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.25em;
  block-size: 1.25em;
  min-inline-size: 18px;
  min-block-size: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* A radio/checkbox GROUP a plugin builds out of <li> still gets a real row. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(li):has(> input[type="radio"], > input[type="checkbox"]) {
  min-block-size: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* --------------------------------------------------------------------------
 * D7 - BUTTONS
 * 6866 gives every .button the solid action fill at min-height 48px (50px at
 * <=520) and 6337 gives every focusable thing an ACTION-coloured focus ring.
 * On a solid action button that ring is orange separated from orange by the
 * 3px offset: it clears 3:1 against the ink it sits on, but it has almost no
 * contrast against the control it is supposed to be marking. Cream is 17.2:1
 * on ink and is already the palette's high-contrast tone, so filled controls
 * take a cream ring. (0,3,1)!important over 6337's (0,2,1)!important.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.button, button.button, input.button, button[type="submit"]):focus-visible,
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login :where(button, input.button):focus-visible,
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-register :where(button, input.button):focus-visible,
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-ResetPassword :where(button, input.button):focus-visible {
  outline: 3px solid var(--wa-commerce-cream, #f4f0e5) !important;
  outline-offset: 2px !important;
}

/* Primary buttons: 6866 owns the fill. This adds only the box geometry it has
   no opinion about, so a long translated label wraps inside a growing button
   instead of setting the panel's min-content width at 320px. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.button, button.button, input.button, button[type="submit"]) {
  max-inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* SECONDARY - navigational, not committal. The mockup's own secondary is an
   action-coloured outline on transparent (account.module.css:706-722). Used
   for pagination and the address edit link, which are movements between
   views, never a submission. action text on ink = 5.96:1; the 1px action
   border = 5.96:1, well over the 3:1 boundary floor. (0,4,1)!important over
   6866's (0,2,1)!important. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.woocommerce-Button--previous, a.woocommerce-Button--next),
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.woocommerce-button--previous, a.woocommerce-button--next) {
  border: 1px solid var(--wa-commerce-action, #c87945) !important;
  background: transparent !important;
  color: var(--wa-commerce-action, #c87945) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.woocommerce-Button--previous, a.woocommerce-Button--next):hover,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(a.woocommerce-button--previous, a.woocommerce-button--next):hover {
  border-color: var(--wa-commerce-cream, #f4f0e5) !important;
  background: var(--wa-commerce-cream, #f4f0e5) !important;
  color: var(--wa-commerce-ink, #080807) !important;
}

/* Disabled: 6891 covers .button. This extends the same treatment to a plain
   <button> or a submit input a plugin endpoint renders without .button, and
   pins the boundary at 0.40 so a disabled control is still perceivable.
   NOTHING is hidden and pointer-events is never removed - a disabled control
   must stay discoverable and announceable. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(button, input[type="submit"], input[type="button"], a[role="button"]):disabled,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(button, input[type="submit"], input[type="button"], a[role="button"])[aria-disabled="true"] {
  border: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4)) !important;
  background: #20211e !important;
  color: #a49e93 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* #a49e93 on #20211e = 4.62:1, over the AA floor. 6899's #817c72 on the same
   fill is 3.11:1 and fails for the 0.72rem label it carries; this rule is
   later at (0,3,1) and corrects it for the elements it names without
   touching 6891's own .button branch. */


/* --------------------------------------------------------------------------
 * D8 - .woocommerce-Address / .woocommerce-Addresses
 * 6288 gives .woocommerce-Address a border and the raised fill and stops.
 * With no padding the address text sits on the frame; with no title layout
 * the "Billing address" heading and its "Edit" link stack awkwardly.
 * 6304 already grids .col2-set, which .woocommerce-Addresses carries, so the
 * two-up is not restated.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-Address {
  block-size: 100%;
  padding: clamp(20px, 3vw, 30px);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  margin-block-end: 16px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-Address-title :where(h2, h3) {
  max-inline-size: none;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-Address-title a {
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(address) {
  margin: 0;
  color: var(--wa-commerce-soft, #d7d1c4);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.8;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-Addresses {
  margin-block-end: clamp(24px, 3.5vw, 40px);
}


/* --------------------------------------------------------------------------
 * D9 - PAGINATION
 * .woocommerce-pagination is styled at 3102-3135 for body.wa-reserve-
 * commerce-page ONLY, a scope that explicitly excludes account (2231-2232).
 * The orders endpoint's Previous/Next row therefore has no layout at all
 * today, and a plugin endpoint that paginates a ledger gets nothing either.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: clamp(28px, 4vw, 44px);
  padding-block-start: clamp(20px, 3vw, 28px);
  border-block-start: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination)
  :where(ul.page-numbers) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination)
  :where(ul.page-numbers) > li {
  margin: 0;
  border: 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination)
  :where(a.page-numbers, span.page-numbers) {
  min-inline-size: 48px;
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4));
  background: transparent;
  color: var(--wa-commerce-soft, #d7d1c4);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination)
  :where(a.page-numbers):hover {
  border-color: var(--wa-commerce-cream, #f4f0e5);
  background: var(--wa-commerce-raised, #151513);
  color: var(--wa-commerce-cream, #f4f0e5);
}

/* Current page: fill AND weight, so the state survives greyscale. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-pagination, .woocommerce-Pagination)
  :where(span.page-numbers.current, a.page-numbers.current) {
  border-color: var(--wa-commerce-action, #c87945);
  background: var(--wa-commerce-action, #c87945);
  color: var(--wa-commerce-ink, #080807);
  font-weight: 800;
}


/* --------------------------------------------------------------------------
 * D10 - EMPTY STATES
 * "You have no orders yet", "No downloads available yet", "No saved payment
 * methods" - WooCommerce prints these as .woocommerce-info inside the panel,
 * usually with an inline .button. The global notice palette (6459) already
 * owns their colour with !important and is NOT touched; this is rhythm and
 * the CTA's relationship to the copy only.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :where(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
  margin-block: 0 clamp(24px, 3.5vw, 36px);
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  > :where(.woocommerce-info, .woocommerce-message):last-child {
  margin-block-end: 0;
}

/* The CTA drops to its own line rather than colliding with the icon and the
   sentence. 7025 already makes it full width and 48px at <=520; this is the
   >=521 case. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-content
  :where(.woocommerce-info, .woocommerce-message)
  :where(a.button, .button) {
  margin-block-start: 14px;
  float: none !important;
}


/* --------------------------------------------------------------------------
 * D11 - LOGIN / REGISTER / LOST PASSWORD
 * When the visitor is logged out WooCommerce renders form-login.php directly
 * inside .woocommerce and .woocommerce-MyAccount-content DOES NOT EXIST, so
 * nothing scoped to the panel can reach these. body.woocommerce-account is
 * present either way (wc_body_class / is_account_page()), which is what makes
 * this reachable at all.
 *
 * 6320 already frames the three forms (padding, border, panel fill) and 6304
 * already grids .u-columns two-up. Missing: the column headings, the
 * remember-me row, the lost-password link, and the submit's mobile width.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.u-column1, .u-column2, .col-1, .col-2) > h2 {
  margin: 0 0 clamp(18px, 2.5vw, 26px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(form.woocommerce-form-login, form.woocommerce-form-register, form.woocommerce-ResetPassword)
  > :last-child {
  margin-block-end: 0;
}

/* Core prints the remember-me checkbox and the submit button in the same
   <p class="form-row">, which collapses to a 13px checkbox glued to a button
   at 320px. */
body.wa-reserve-custom-chrome.woocommerce-account
  form.woocommerce-form-login
  .woocommerce-form-login__rememberme {
  min-block-size: 48px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  color: var(--wa-commerce-soft, #d7d1c4) !important;
  cursor: pointer;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.woocommerce-LostPassword, .lost_password) {
  margin: 18px 0 0;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.woocommerce-LostPassword, .lost_password) a {
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--wa-commerce-action, #c87945);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce
  :where(.woocommerce-privacy-policy-text, .woocommerce-form-register__notice) {
  color: var(--wa-commerce-muted, #958f84);
  font-size: 0.78rem;
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
 * D12 - PASSWORD STRENGTH AND HINT (register, edit-account, reset)
 * Core ships this with light backgrounds intended for wp-admin. On the ink
 * panel the "bad"/"short" states render dark-on-dark. The strength meter also
 * prints its own WORD ("Very weak", "Strong"), so the state is never carried
 * by colour alone.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.woocommerce-account
  :where(.woocommerce-password-strength) {
  margin-block-start: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.4)) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-raised, #151513) !important;
  color: var(--wa-commerce-cream, #f4f0e5) !important;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: start;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(.woocommerce-password-strength.short, .woocommerce-password-strength.bad) {
  border-inline-start-width: 3px !important;
  color: #e0b18e !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(.woocommerce-password-strength.good, .woocommerce-password-strength.strong) {
  border-inline-start-width: 3px !important;
  border-inline-start-color: var(--wa-commerce-action, #c87945) !important;
}

body.wa-reserve-custom-chrome.woocommerce-account
  :where(.woocommerce-password-hint) {
  display: block;
  margin-block-start: 8px;
  color: var(--wa-commerce-muted, #958f84) !important;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
}


/* ==========================================================================
 * PART 3 - VIEWPORT, MOTION, FORCED COLORS
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * M1 - SMALL VIEWPORTS
 * Panel padding is already handled (6991 at <=760, 6444 at <=600, 5325 at
 * <=520) and is not restated. These are the touch-target and overflow items.
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* The sign-out control. See C9 for why 0.25em fails here. inline-flex keeps
     it in the sentence flow while giving it a real 48px box. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content:has(.wa-account-support, .wa-account-shortcuts)
    > p:first-of-type
    a {
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
    vertical-align: middle;
  }

  /* Georgia at -0.045em on an unbroken display name is the one string that
     can outrun a 320px panel. 6704's break-word inherits, but hyphenation
     finds a better break point first. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content:has(.wa-account-support, .wa-account-shortcuts)
    > p:first-of-type {
    hyphens: auto;
  }

  /* CORRECTION: the reviewed draft used `li > a:only-child, p > a:only-child`
     to find "standalone" links. :only-child counts ELEMENTS, not content, so
     `<p>Check your <a>balance</a> now.</p>` matches - and the rule then
     yanked an inline link in running prose into a 48px inline-flex box,
     breaking the line. That is the exact opposite of the draft's own stated
     intent. The li form is kept (a list of links IS a list of controls) and
     the paragraph form is replaced by the named WooCommerce controls that
     are genuinely standalone. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(li > a:only-child):not(.button) {
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(
      td.woocommerce-orders-table__cell-order-actions a,
      .woocommerce-MyAccount-downloads a,
      .woocommerce-Address-title a,
      .woocommerce-MyAccount-paymentMethods a
    ) {
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
  }

  /* Only the BLOCK padding moves; the 34px marker gutter set in C7 stays. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(summary) {
    padding-block: 15px;
  }

  /* Paired fields stack rather than halving a 320px panel. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(.form-row-first, .form-row-last) {
    inline-size: 100%;
  }

  /* A submit that is the form's only action takes the full row so the target
     is unambiguous; nothing is hidden and nothing is reordered. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(button.button, input.button, button[type="submit"]),
  body.wa-reserve-custom-chrome.woocommerce-account
    form.woocommerce-form-login :where(button.button, input.button),
  body.wa-reserve-custom-chrome.woocommerce-account
    form.woocommerce-form-register :where(button.button, input.button),
  body.wa-reserve-custom-chrome.woocommerce-account
    form.woocommerce-ResetPassword :where(button.button, input.button) {
    inline-size: 100%;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(.woocommerce-pagination, .woocommerce-Pagination) {
    justify-content: stretch;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(.woocommerce-pagination, .woocommerce-Pagination)
    :where(a.woocommerce-Button--previous, a.woocommerce-Button--next) {
    flex: 1 1 auto;
  }
}


/* --------------------------------------------------------------------------
 * M2 - REDUCED MOTION
 * The file's existing blocks (2202, 3264, 4297, 4974, and the checkout block
 * at the end) cover other routes; A10 at 15594 covers the navigation only.
 * Scoped to the content panel so it composes with A10 rather than duplicating
 * it. C1/D2 introduce the only motion vectors in this block - scroll-margin
 * plus the panel's scroll containers, which animate if anything up the tree
 * sets scroll-behavior:smooth. The transition reset is defensive: this block
 * declares no transition, but a plugin endpoint's own stylesheet may, and it
 * lives inside this panel.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content,
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(pre, table, details) {
    scroll-behavior: auto !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(a, button, summary, details, input, select, textarea, .button) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
 * M3 - FORCED COLORS
 * The OS discards every custom colour, which in this block would silently
 * remove: the action-toned ::marker and summary triangle, the mark
 * highlight, the code chip's border, the table hairlines, the pagination
 * current-page fill, and the secondary button's outline. A7 (15531) set this
 * precedent for the navigation rail; the content panel needs the same.
 * System colour keywords are used so the OS palette stays authoritative.
 * ------------------------------------------------------------------------ */

@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(table, table th, table td, details, pre, fieldset, .woocommerce-Address) {
    border-color: CanvasText !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(input, select, textarea) {
    border: 1px solid CanvasText !important;
  }

  /* The current page and the active state must not rely on a fill the OS has
     thrown away. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(span.page-numbers.current, a.page-numbers.current) {
    outline: 2px solid Highlight !important;
    outline-offset: -4px;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }

  /* mark keeps a non-colour cue - C6 already underlines it, this makes the
     underline survive. */
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-content
    :where(mark) {
    text-decoration: underline !important;
  }
}

/* ===== White Ash Reserve - My Account content panel deltas - END ========== */


/* ==========================================================================
 * v1.0.16 — Native single-product deltas, from the app/product mockup.
 * This mockup had never been implemented. Presentation only: no WooCommerce
 * template, hook, script or plugin control is replaced or suppressed, and no
 * `display` is set on anything WooCommerce toggles via JS (.reset_variations,
 * .single_variation_wrap, variation availability) — doing so breaks the
 * variations form in ways that only appear after a selection.
 * ========================================================================== */

/* ==========================================================================
 * WHITE ASH RESERVE — NATIVE SINGLE PRODUCT
 * Layer 1 of N: PAGE SHELL + GALLERY + TITLE/PRICE  (CORRECTED)
 *
 * Append after style.css line 7716. Presentation only. No WooCommerce
 * template, hook, script or plugin control is replaced, suppressed,
 * duplicated or given a parallel implementation.
 *
 * Scope: body.wa-reserve-custom-chrome.wa-reserve-product-page
 * (functions.php:610-646 emits wa-reserve-custom-chrome +
 *  wa-reserve-commerce-page + wa-reserve-product-page together on is_product()).
 *
 * ---- SUPERSEDED BLOCKS (verified line numbers, v1.0.16 style.css) ---------
 * Every rule below is overridden by this layer on specificity AND source
 * order, so the page renders correctly whether or not they are removed.
 * Removing them is a readability decision, not a correctness one.
 *   2399         #main-container { overflow: clip }        -> 0.1
 *   2416-2420    .product-entry-wrapper gap/padding        -> 1.1
 *   2427-2483    @media(min-width:900px) column sizing     -> 1.1 / 1.2 / 2.3
 *   2485-2523    @media(max-width:899px) column reset      -> 1.3 / 2.3
 *   2525-2533    gallery panel border + radial glow        -> 2.1
 *   2548-2562    gallery image / link / img sizing         -> 2.3
 *   2564-2574    .flex-control-thumbs + li                 -> 2.4
 *   2588-2593    .summary 2px orange top rail              -> 3.1
 *   2595-2604    .product_title scale                      -> 3.3
 *   3126-3128    @media(min-width:1800px) title bump       -> 3.3
 *   3169-3171    mobile gallery padding                    -> 5
 *   3178-3181    mobile title size                         -> 5
 * PARTIALLY KEPT:
 *   2535-2546  trigger box — 2.2 adds the missing `position` and replaces
 *              its FIXED `width:44px; height:44px` with min-size + ratio.
 *   2576-2585  thumb opacity + img.flex-active outline — kept deliberately
 *              as the no-`:has()` active indicator; 2.4 layers a border on.
 *   2606-2624  .price / ins / del colour — 3.4 retunes scale in the summary
 *              only and leaves the ins/del treatment untouched.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 0. STRUCTURAL PREREQUISITES
 * ------------------------------------------------------------------------ */

/* 0.1 REPLACES 2399.
 * `overflow: clip` on an ancestor does not create a scroll container, but the
 * shorthand sets BOTH axes, and the theme relies on it purely to stop
 * horizontal bleed. Splitting the axes is still worth doing: it documents the
 * intent, and it guarantees the sticky summary in 3.2 is measured against the
 * viewport. Per CSS Overflow 3 the pair (clip, visible) is preserved verbatim
 * — the visible->auto / clip->hidden fixup only fires when the *other* value
 * is neither `visible` nor `clip`.
 * `overflow-clip-margin` keeps a 4px focus ring from being shaved at the
 * clip edge; it is ignored where unsupported. */
body.wa-reserve-custom-chrome.wa-reserve-product-page #main-container {
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 4px;
}

/* 0.2 A long strain name or a long currency string must never push the
 * document sideways at 320px. `break-word` rather than `anywhere`: it breaks
 * only when a single word cannot fit, and unlike `anywhere` it does not alter
 * min-content contribution, so grid tracks measure the same as before. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.product_title, .price) {
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
 * 1. THE TWO-COLUMN RAIL — mockup .productGrid (product.module.css:192-203)
 *
 * The theme currently makes the gallery the NARROW column
 * (minmax(360px,400px) minmax(340px,1fr), style.css:2427-2457) and centres
 * the pair. The approved mockup inverts that: gallery dominant, summary a
 * 380px-floor rail, gap 0, hairlines doing the separation instead of
 * whitespace.
 * ------------------------------------------------------------------------ */

/* 1.1 REPLACES 2416-2420 and the grid half of 2427-2436. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product-entry-wrapper {
  width: 100%;
  gap: 0;
  /* The theme's 2416 rule adds vertical padding; the mockup grid is flush and
   * the rail borders in 1.2 must reach the top and bottom of the block. */
  padding-block: 0;
  /* .woocommerce-breadcrumb is hidden by the custom chrome (style.css:59),
   * so the grid needs its own headroom under the 74px sticky header. */
  margin-block: clamp(24px, 4vw, 54px) clamp(40px, 6vw, 84px);
}

@media (min-width: 900px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product-entry-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.78fr);
    /* CORRECTION vs. the reviewed draft, which set `align-items: start`.
     * With `start`, neither column stretches to the row height, so the
     * gallery's centre hairline in 1.2 stops at the bottom of the shorter
     * column and the rail visibly breaks. The mockup's .productGrid sets no
     * align-items at all, i.e. `stretch`. Stretch is therefore required here,
     * and the summary opts out per-item in 3.2 where sticky needs it. */
    align-items: stretch;
    /* 2433 sets `justify-content: center`, which would strand the two tracks
     * mid-rail now that they no longer have fixed max-widths. */
    justify-content: start;
    border-right: 1px solid var(--wa-commerce-line);
    border-left: 1px solid var(--wa-commerce-line);
  }

  /* Anything in the wrapper that is neither the gallery nor the summary —
   * WooCommerce notices printed by woocommerce_before_single_product, a
   * Blocksy prev/next nav, Reserved Stock Pro reservation copy, an unknown
   * plugin panel — spans the full rail instead of stealing a track and
   * collapsing the layout. Nothing is hidden and no `display` is set; an
   * unrecognised child is simply given a sane placement. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product-entry-wrapper
    > *:not(.woocommerce-product-gallery):not(.summary):not(.entry-summary) {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* 1.2 REPLACES 2438-2456. Both tracks fill their column; the gallery
   * carries the centre hairline and stretches so that hairline runs the full
   * height of the taller column. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery {
    max-width: none;
    justify-self: stretch;
    align-self: stretch;
    border-right: 1px solid var(--wa-commerce-line);
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    :is(.summary, .entry-summary) {
    max-width: none;
    clear: none;
    justify-self: stretch;
  }
}

/* 1.3 REPLACES 2485-2523. Below 900px the wrapper is a plain block stack and
 * the gallery keeps a bottom hairline (mockup 1040px breakpoint, 592-595).
 * The rail borders in 1.1 are inside the min-width:900px query, so there is
 * nothing to unset here. */
@media (max-width: 899px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product-entry-wrapper {
    display: block;
    margin-block: 0 clamp(34px, 6vw, 54px);
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery {
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--wa-commerce-line);
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    :is(.summary, .entry-summary) {
    max-width: none;
    clear: both;
  }
}

/* 1.4 Fallback for a template that does NOT emit .product-entry-wrapper
 * (classic content-single-product.php, or a plugin override). Gated three
 * ways so it can only fire on markup it actually fits: wrapper absent, and
 * both the gallery and a summary present as direct children. The rail
 * borders are deliberately omitted — on a bare div.product they would also
 * enclose the tabs and related products, which the mockup keeps outside the
 * bordered grid.
 * UNVERIFIED against a rendered page; see risks. */
@supports selector(:has(*)) {
  @media (min-width: 900px) {
    body.wa-reserve-custom-chrome.wa-reserve-product-page
      div.product:not(:has(> .product-entry-wrapper)):has(
        > .woocommerce-product-gallery
      ):has(> :is(.summary, .entry-summary)) {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.78fr);
      gap: 0;
      align-items: stretch;
    }

    body.wa-reserve-custom-chrome.wa-reserve-product-page
      div.product:not(:has(> .product-entry-wrapper)):has(
        > .woocommerce-product-gallery
      ):has(> :is(.summary, .entry-summary))
      > *:not(.woocommerce-product-gallery):not(.summary):not(.entry-summary) {
      grid-column: 1 / -1;
      min-width: 0;
    }
  }
}


/* --------------------------------------------------------------------------
 * 2. GALLERY — mockup .gallery / .imageStage / .thumbnails (199-251)
 *
 * Core scripts are untouched. FlexSlider still owns .flex-viewport, the
 * inline slide widths, .flex-control-thumbs and the .flex-active bookkeeping.
 * PhotoSwipe still owns .woocommerce-product-gallery__trigger and reads
 * data-large_image_* off the <img>. jquery.zoom still owns img.zoomImg and
 * still sets its own position on the zoom target. No `display` is set on
 * anything those scripts toggle, and no control is hidden.
 * ------------------------------------------------------------------------ */

/* 2.1 REPLACES 2525-2533. Flush, borderless stage — no card border, no radial
 * glow. The column hairline from 1.2 is the only rule on this side.
 * `position: relative` is retained because the lightbox trigger anchors to it.
 *
 * --wa-gallery-fit is the single switch for the crop decision (see 2.3).
 * --wa-gallery-pad is reused by the trigger so it sits inside the stage.
 * --wa-gallery-void is the letterbox colour behind a `contain` image. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery {
  --wa-gallery-fit: cover;
  --wa-gallery-pad: clamp(18px, 2.3vw, 34px);
  --wa-gallery-void: #0c0c0b;
  --wa-thumb-size: 84px;
  position: relative;
  width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
  padding: var(--wa-gallery-pad);
  border: 0;
  background: transparent;
}

/* WooCommerce's wrapper is a <figure>, which carries UA margins. Margin reset
 * only — FlexSlider writes display/width/transform on it inline. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

/* FlexSlider writes overflow/position/height on .flex-viewport inline. Colour
 * only, so a slide transition never flashes the page background. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-viewport {
  background: var(--wa-gallery-void);
}

/* 2.2 Lightbox trigger.
 * 2535-2546 sets top/right/width/height but never `position`, so today it
 * only lands because core woocommerce.css happens to supply
 * `position: absolute`. Assert it rather than depend on that.
 *
 * It also sets a FIXED width:44px/height:44px. Replaced here with min-size +
 * aspect-ratio so the control grows with its own content at 200% zoom instead
 * of clipping, and reaches a 48px target on coarse pointers. The trigger is a
 * core-owned control: styled, never hidden, never re-implemented. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 5;
  /* Absolutely positioned offsets resolve from the containing block's PADDING
   * box, so a bare 14px would land the trigger in the gallery's padding
   * gutter rather than inside the image stage. */
  top: calc(var(--wa-gallery-pad) + 14px);
  right: calc(var(--wa-gallery-pad) + 14px);
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 6px;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__trigger:hover {
  border-color: var(--wa-commerce-action);
  color: var(--wa-commerce-action);
}

/* 2.3 REPLACES 2548-2562 and the aspect-ratio / object-fit halves of
 * 2459-2483 and 2511-2521.
 *
 * The stage ratio now lives on __image rather than on `> a`, so it survives
 * markup without the anchor and applies at every width instead of desktop
 * only (the mockup's .imageStage is ~108vw tall on mobile, 648-650).
 *
 * 0.92 = width/height, i.e. the stage is ~1.09x as tall as it is wide, which
 * is what the mockup's `min-height: clamp(540px,66vw,900px)` at ~840px wide
 * and its `108vw` at mobile both work out to. The theme's old 0.84 was sized
 * for a 400px-wide gallery and is far too tall now that the gallery is the
 * dominant column.
 *
 * `position: relative` is asserted so anything WooCommerce or a plugin
 * absolutely positions inside the stage anchors to the stage. jquery.zoom
 * sets this itself, but only on the slides it has initialised. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__image {
  position: relative;
  aspect-ratio: 0.92;
  overflow: hidden;
  background: var(--wa-gallery-void);
}

/* Flow-based fill, not `position:absolute; inset:0`. If aspect-ratio were
 * ever unsupported the anchor still takes its height from the image rather
 * than collapsing the stage to zero and hiding the product photo. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__image
  > a {
  width: 100%;
  height: 100%;
  display: block;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__image
  img:not(.zoomImg) {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: block;
  margin-inline: auto;
  object-fit: var(--wa-gallery-fit);
}

/* jquery.zoom appends img.zoomImg and sizes/positions it inline at the source
 * image's natural dimensions. Do NOT give it object-fit or a percentage size
 * — that is exactly what misregisters the magnifier. The only thing it needs
 * from us is immunity from a global `img { max-width: 100% }`. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery
  img.zoomImg {
  max-width: none;
  max-height: none;
  object-fit: fill;
}

/* REVERT SWITCH: if product photography is composed off-centre, or if
 * woocommerce_single_product_zoom is enabled and the magnified overlay stops
 * matching the cropped stage, change `cover` to `contain` in 2.1. Nothing
 * else in this file depends on it. */

/* 2.4 REPLACES 2564-2574. Square thumb cells in a flush wrapping row (mockup
 * .thumbnails, 228-251). Core floats these <li> at 25% via the
 * .woocommerce-product-gallery--columns-N classes; `float: none` + flex
 * overrides that without touching FlexSlider's click handling, its index
 * lookup, or its .flex-active bookkeeping. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-control-thumbs
  li {
  flex: 0 0 var(--wa-thumb-size);
  width: var(--wa-thumb-size);
  aspect-ratio: 1;
  overflow: hidden;
  float: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-gallery-void);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-control-thumbs
  li
  img {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  object-fit: cover;
}

/* Active cell takes the action border. The existing outline on img.flex-active
 * (2580-2585) is left in place on purpose as the fallback indicator for
 * engines without :has(). :focus-within is speculative cover for the case
 * where a plugin or a future core release makes the thumb focusable — it
 * costs nothing and hides nothing if it never matches. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-control-thumbs
  li:has(img.flex-active),
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .flex-control-thumbs
  li:focus-within {
  border-color: var(--wa-commerce-action);
}


/* --------------------------------------------------------------------------
 * 3. SUMMARY SHELL, TITLE, PRICE
 * ------------------------------------------------------------------------ */

/* 3.1 REPLACES 2588-2593. No orange rail: the mockup summary is generous
 * padding inside the bordered column (.summary, 253-258). */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary) {
  width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
  padding: clamp(40px, 5vw, 76px) clamp(28px, 4vw, 60px);
  border-top: 0;
}

/* Generic containment for summary children this layer does not know about —
 * Reserved Stock Pro reservation copy, #wa-cold-pack-wrap, a loyalty notice,
 * a subscription plugin panel. Overflow protection only. No `display`, no
 * `visibility`, no colour assumption, nothing hidden, no invented selector.
 * This is the "style unknown plugin output generically via descendants of
 * .summary.entry-summary" rule, and it is the only thing this layer does to
 * plugin output. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary)
  > * {
  max-width: 100%;
  min-width: 0;
}

/* 3.2 Sticky rail. Requires 0.1.
 * `top` clears the 74px sticky .wa-site-header (style.css:3431-3437) plus
 * 16px of air. The announcement bar above it is not sticky, so it does not
 * enter the calculation.
 *
 * `align-self: start` is mandatory, not decoration: 1.1 stretches grid items
 * so the gallery hairline runs full height, and a stretched item fills its
 * row and has no room to move, which makes `position: sticky` a no-op.
 *
 * Gated on a wide AND a tall viewport. A sticky block taller than the
 * viewport pins its top and puts its own bottom permanently out of reach, so
 * the height gate is an accessibility requirement rather than polish: at 200%
 * zoom on a 1080p display the viewport is ~960x540 CSS px, the width gate
 * still passes, and only the height gate returns the summary to normal
 * document flow. */
@media (min-width: 900px) and (min-height: 820px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    :is(.summary, .entry-summary) {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}

/* 3.3 REPLACES 2595-2604 and the 1800px bump at 3126-3128.
 * The old 84px / 96px scale and `max-width: 14ch` were sized for the theme's
 * 620px-wide summary. In the mockup's rail the text box is ~400px at the
 * theme's 1360px content width, where 84px wraps to three or four characters
 * a line. 4.2vw reaches the mockup's 76px ceiling around a 1800px viewport,
 * which is exactly where --wa-commerce-content widens to 1540px (3121-3123)
 * and the mockup's own arithmetic becomes correct again. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_title {
  max-width: 620px;
  margin: 0 0 19px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(42px, 4.2vw, 76px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

/* 3.4 Summary price only.
 * `> .price` is a direct child of the summary, so this can never reach
 * .woocommerce-variation-price .price (which lives at
 * form.cart > .single_variation_wrap > .single_variation >
 * .woocommerce-variation-price > .price) and never reaches the .price inside
 * a related-products or up-sells card. The second selector picks the price up
 * again if Blocksy wraps summary content one level deep; `:not(form)` keeps
 * it off the variation price for the same reason.
 * The ins/del colour treatment at 2614-2624 still applies underneath. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary)
  > .price,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary)
  > :not(form)
  > .price {
  margin: 0 0 24px;
  color: var(--wa-commerce-cream);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* A single money figure should not break mid-number. A "from–to" range still
 * wraps at the separator because each amount is its own element. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary)
  > .price
  .amount {
  color: inherit;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
 * 4. NOT IMPLEMENTED — DELIBERATELY
 *
 * The mockup's .eyebrow (260-267), .productStatement (463-504) and the
 * in-summary <details> accordions (430-461) have no native WooCommerce output
 * to attach to. No selector is invented for them and no mockup copy is
 * reproduced. They need a template/hook decision first
 * (woocommerce_single_product_summary / woocommerce_after_single_product),
 * at which point they get a selector that actually exists.
 *
 * .imageCount (216-226) is likewise mockup-only; FlexSlider emits no slide
 * counter and none is faked here.
 *
 * WooCommerce's span.onsale is intentionally left to whichever layer owns the
 * price block. It is native, it is not hidden by anything here, and inventing
 * a position for it without knowing whether Blocksy renders it inside
 * .product-entry-wrapper would be guessing.
 * ------------------------------------------------------------------------ */


/* --------------------------------------------------------------------------
 * 5. RESPONSIVE REFLOW
 * Mockup breaks at 1040 and 640. 899 and 760 are used instead because the
 * existing theme block already pivots there and --wa-commerce-side drops to
 * 16px at 760.
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* REPLACES 3169-3171 and 3178-3181. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery {
    --wa-gallery-pad: 12px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    :is(.summary, .entry-summary) {
    padding: 38px 18px 50px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product_title {
    max-width: none;
    font-size: clamp(40px, 12vw, 58px);
  }

  /* 48px minimum touch target for the lightbox control on mobile. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery__trigger {
    min-width: 48px;
    min-height: 48px;
  }
}

@media (max-width: 640px) {
  /* 66px thumbs (mockup 652-655). Still well above the 48px touch minimum. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery {
    --wa-thumb-size: 66px;
  }
}

/* 320-360px. Worst case is three thumbs on one line:
 * 3 x 66 + 2 x 8 = 214px, inside (320 - 2x16 container - 2x10 gallery) =
 * 268px. flex-wrap absorbs anything beyond that, so there is no horizontal
 * overflow at either 320px or 390px. */
@media (max-width: 360px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-gallery {
    --wa-gallery-pad: 10px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .flex-control-thumbs {
    gap: 8px;
  }
}


/* --------------------------------------------------------------------------
 * 6. FOCUS
 *
 * The commerce-wide ring at 2280-2284 is
 * `body.wa-reserve-commerce-page #main-container :where(a, button, …)`, i.e.
 * specificity (1,1,1) — the :where() contributes nothing. A restatement
 * without #main-container would be (0,4,3) and would LOSE, so #main-container
 * is included here to make this (1,4,3). It covers the gallery anchor and the
 * lightbox trigger whether the trigger renders as <a> (today) or <button>.
 *
 * NOT FIXABLE IN CSS: FlexSlider renders gallery thumbnails as bare <img>
 * with a click handler, no tabindex and no role, so they are not keyboard
 * reachable at all. That is a core/FlexSlider gap needing markup or JS —
 * flagged rather than papered over. The li:focus-within rule in 2.4 is ready
 * for the day that is fixed.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  #main-container
  div.product
  :is(
    .woocommerce-product-gallery__trigger,
    .woocommerce-product-gallery__image > a
  ):focus-visible {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: 3px;
}

/* The outline would otherwise be clipped by `overflow: hidden` on the stage
 * (2.3). Inset it instead of offsetting it outward. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  #main-container
  div.product
  .woocommerce-product-gallery__image
  > a:focus-visible {
  outline-offset: -4px;
}


/* --------------------------------------------------------------------------
 * 7. MOTION
 *
 * The commerce-wide reduce block at 3264-3274 already neutralises animation
 * and transition durations across #main-container, which covers everything in
 * this layer. Nothing here introduces a transform or a transition.
 *
 * Sticky positioning is deliberately NOT disabled under
 * prefers-reduced-motion: it is scroll-linked layout, not animation, and
 * .wa-site-header is sticky unconditionally with !important (3431-3432), so
 * switching one and not the other would read as a bug. If the project's
 * accessibility standard counts sticky panels as motion, add the summary to
 * the 3264 block rather than adding a competing rule here.
 * ------------------------------------------------------------------------ */

/* ==========================================================================
 * WHITE ASH RESERVE - NATIVE SINGLE PRODUCT: PURCHASE PATH DELTA
 *
 * INSERT AT LINE 7712 of style.css - immediately after the
 * "Approved checkout structural parity - END" comment (line 7711) and BEFORE
 * the "Future Quick Shop release styles belong below this boundary" comment at
 * lines 7713-7716. Appending after 7716 as briefed would place commerce CSS
 * inside a block the file explicitly reserves for Quick Shop.
 *
 * PURELY ADDITIVE. Nothing in style.css needs to be deleted. Every rule here
 * carries two body classes (.wa-reserve-custom-chrome.wa-reserve-product-page)
 * against the existing single-class .wa-reserve-product-page rules, so it wins
 * on specificity as well as source order. Verified against the three blocks it
 * supersedes: 2723-2725, 3202-3207, 3248-3256.
 *
 * Presentation only. WooCommerce keeps every template, hook, nonce, field
 * name, script and control. Nothing is hidden. No plugin selector is invented.
 *
 * JS-TOGGLE CONTRACT - read before editing anything here:
 *   .single_variation_wrap        jQuery slideDown/slideUp  -> no display,
 *                                 no height, no max-height, no overflow
 *   .single_variation             jQuery fadeIn/fadeOut     -> no display,
 *                                 no opacity
 *   .reset_variations             .css('visibility', ...)   -> no visibility,
 *                                 no display
 *   .wc-no-matching-variations    .show()/.hide()           -> no display
 *   .single_add_to_cart_button    must stay clickable while .disabled so
 *                                 WooCommerce can alert -> no pointer-events
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * P1. The purchase rail
 *
 * Mockup .purchase (product.module.css:377-381) is a 2-up row at EVERY width.
 * The theme only builds it below 760px (3202-3207); above that the quantity
 * and CTA stack. Two elements are the rail, depending on product type:
 *   simple    -> form.cart itself
 *   variable  -> .woocommerce-variation-add-to-cart (core puts
 *                .variations_button on the same div)
 * form.variations_form is deliberately NOT a grid: it also holds
 * table.variations and .single_variation_wrap, which must stay in normal flow
 * for the jQuery slide.
 *
 * product-type-external is deliberately excluded - it emits a CTA with no
 * quantity, and would land in the 92px column. Grouped is excluded too.
 *
 * Track floor is 92px + 0 + 10px gap = 102px, so the rail cannot overflow the
 * 380px summary column (product.module.css:194) at any width.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product.product-type-simple
  form.cart,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :is(.woocommerce-variation-add-to-cart, .variations_button) {
  display: grid;
  grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* Anything WooCommerce or a plugin hooks into the rail spans it instead of
 * stealing a cell. This is what keeps reservation copy and the cold-pack
 * control legible rather than crushed into a 92px column. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product.product-type-simple
  form.cart
  > *:not(.quantity):not(.single_add_to_cart_button),
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :is(.woocommerce-variation-add-to-cart, .variations_button)
  > *:not(.quantity):not(.single_add_to_cart_button) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Collapse to one column when there is no visible quantity field:
 *  - sold-individually emits <div class="quantity hidden"> (core CSS hides it)
 *  - a plugin or filter may remove the quantity input entirely
 * No display is set on .quantity.hidden here - hiding WooCommerce output is
 * core's call, not this stylesheet's. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product.product-type-simple
  form.cart:is(:has(> .quantity.hidden), :not(:has(.quantity))),
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :is(.woocommerce-variation-add-to-cart, .variations_button):is(
    :has(> .quantity.hidden),
    :not(:has(.quantity))
  ) {
  grid-template-columns: minmax(0, 1fr);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .quantity.hidden {
  min-height: 0;
  margin: 0;
}

/* External/affiliate products render a bare CTA in a non-grid form.cart.
 * 3209-3212 only widths it below 760px; make it consistent at every width. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product.product-type-external
  form.cart
  .single_add_to_cart_button {
  width: 100%;
}


/* --------------------------------------------------------------------------
 * P2. table.variations
 *
 * Base treatment (2668-2703) and the mobile stacking (3183-3200) are correct
 * and are kept. These are the gaps: default table chrome, unavailable options
 * rendering as unreadable UA grey, and long attribute names at 320px.
 * Matched on the .variations CLASS, not table.variations, so a future
 * non-table variations wrapper is still caught.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .variations {
  border-collapse: collapse;
  border-spacing: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .variations
  :is(th, td) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .variations
  select {
  max-width: 100%;
  text-overflow: ellipsis;
}

/* WooCommerce marks unpurchasable combinations as disabled options. Keep them
 * readable and obviously unavailable - never remove them. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .variations
  select
  option:disabled {
  color: var(--wa-commerce-muted);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .variations
  select:disabled {
  border-color: var(--wa-commerce-line);
  color: var(--wa-commerce-muted);
  cursor: not-allowed;
  opacity: 0.72;
}


/* --------------------------------------------------------------------------
 * P3. .reset_variations
 *
 * WooCommerce toggles this with .css('visibility', 'hidden'|'visible').
 * Setting display OR visibility here would destroy the control or pin it on
 * screen permanently. Hover, focus and the mobile touch target only; the
 * display:inline-flex at 2707 is left untouched.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .reset_variations:hover {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .reset_variations:focus-visible {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * P4. .single_variation_wrap and the variation ledger
 *
 * .single_variation_wrap gets min-width only. It is jQuery-slid, so height,
 * max-height, overflow, display and visibility are all off limits.
 *
 * .woocommerce-variation.single_variation is the nearest legitimate native
 * equivalent of the mockup's bordered price cell (.price, 383-394). No
 * ::before label is added - injecting text here would be untranslatable.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .single_variation_wrap {
  min-width: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation.single_variation {
  min-width: 0;
  margin: 0 0 12px;
  padding: 15px 17px;
  border: 1px solid var(--wa-commerce-line);
  border-left: 3px solid var(--wa-commerce-action);
  background: var(--wa-commerce-panel);
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation.single_variation
  > :last-child {
  margin-bottom: 0;
}

/* The variation figure is a compact ledger number, not the 32px hero .price it
 * currently inherits from 2606-2612. del/ins colour from 2614-2624 still
 * applies unchanged. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-price {
  margin: 0 0 9px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-price
  .price {
  margin: 0;
  color: var(--wa-commerce-cream);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-price
  .price
  .amount {
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-description {
  margin: 0 0 9px;
  color: var(--wa-commerce-muted);
  font-size: 13px;
  line-height: 1.65;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-description
  > :last-child {
  margin-bottom: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-availability {
  margin: 0;
}

/* The availability chip inside the ledger must not re-inherit the 20px bottom
 * margin the standalone summary chip carries at 2644. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .woocommerce-variation-availability
  p.stock {
  margin: 0;
}

/* Core prints this with inline display:none and toggles it with .show()/
 * .hide(). Colour and spacing only - no display, no visibility. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  p.wc-no-matching-variations {
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px solid var(--wa-commerce-line);
  border-left: 3px solid var(--wa-commerce-action);
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream-soft);
  font-size: 13px;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
 * P5. .quantity input.qty
 *
 * min-height only, never height: the field has to grow at 200% zoom. Native
 * number spinners are left alone - they are controls.
 *
 * min-width:0 is load-bearing. 2728 sets min-width:112px on .quantity; as a
 * grid item that would force the 92px track wider and reintroduce overflow.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .quantity {
  min-width: 0;
  margin: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .quantity
  input.qty {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding-inline: 10px;
  accent-color: var(--wa-commerce-action);
  color-scheme: dark;
  font-size: 15px;
  text-align: center;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .quantity
  input.qty:hover {
  border-color: rgba(244, 240, 229, 0.4);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .quantity
  input.qty:focus-visible {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
 * P6. button.single_add_to_cart_button
 *
 * Colour, hover and disabled states (2742-2771) are correct and are kept.
 * This is scale, the space-between arrow affordance from the mockup
 * (.purchase > button, 396-410), and wrap safety.
 *
 * The button MUST remain clickable while .disabled - WooCommerce relies on the
 * click to alert "Please select some product options...". No pointer-events.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .single_add_to_cart_button {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Decorative arrow. The first declaration is the fallback for engines without
 * content alt-text; the second replaces it and hides the glyph from assistive
 * technology where supported. No opacity is set on the disabled variant - the
 * button already carries opacity:0.72 at 2770 and the two would compound. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .single_add_to_cart_button::after {
  content: "\2192";
  content: "\2192" / "";
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .single_add_to_cart_button:hover:not(.disabled):not(:disabled) {
  border-color: #d58a54;
  background: #d58a54;
  color: var(--wa-commerce-action-dark);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--wa-commerce-cream);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * P7. Stock states
 *
 * The generic chip (2642-2653) and the out-of-stock variant (2655-2658)
 * already exist. In-stock was never distinguished from the generic chip.
 * out-of-stock re-declares its colour so the rule is self-sufficient rather
 * than depending on 2655 surviving a future edit.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  p.stock.in-stock {
  border-color: rgba(200, 121, 69, 0.42);
  background: rgba(200, 121, 69, 0.08);
  color: var(--wa-commerce-cream);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  p.stock.out-of-stock {
  background: rgba(223, 113, 95, 0.08);
  color: #f0a89b;
}

/* Some stores print available-on-backorder through the same p.stock node.
 * Give it the muted treatment rather than letting it read as in-stock. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  p.stock.available-on-backorder {
  border-color: var(--wa-commerce-line-strong);
  background: transparent;
  color: var(--wa-commerce-cream-soft);
}


/* --------------------------------------------------------------------------
 * P8. Grouped product purchase table
 *
 * Native purchase-path markup that is currently completely unstyled, so a
 * grouped product renders a white browser-default table on the ink page.
 * Minimal dark guard; every input stays native.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  table.woocommerce-grouped-product-list {
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--wa-commerce-line);
  border-collapse: collapse;
  background: var(--wa-commerce-panel);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  table.woocommerce-grouped-product-list
  td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  background: transparent;
  color: var(--wa-commerce-cream-soft);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  table.woocommerce-grouped-product-list
  tr:last-child
  td {
  border-bottom: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  table.woocommerce-grouped-product-list
  td.woocommerce-grouped-product-list-item__label
  a {
  color: var(--wa-commerce-cream);
  text-decoration: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  table.woocommerce-grouped-product-list
  .quantity
  input.qty {
  min-height: 48px;
}


/* --------------------------------------------------------------------------
 * P9. Generic floor for plugin output inside the purchase rail
 *
 * Reserved Stock Pro reservation and countdown copy, and any add-on hooking
 * woocommerce_before/after_add_to_cart_button|quantity, renders here. No
 * plugin selector is named or guessed - these are descendant defaults so
 * unknown markup is legible, reachable and correctly sized. Nothing is hidden,
 * nothing is repositioned, no timer and no fee is reimplemented.
 *
 * COLOUR IS SET ON form.cart ITSELF AND INHERITED. A blanket
 * ":where(p, span, strong, ...) { color: inherit }" would compute to (0,4,3),
 * tying with the existing p.stock.out-of-stock rule at 2655 and winning on
 * source order - silently stripping the warning colour off out-of-stock
 * variation messaging. Inheritance achieves the same result and cannot
 * outrank anything.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart {
  color: var(--wa-commerce-cream-soft);
}

/* Overflow safety only - no colour, so nothing is outranked. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :where(p, li, dd, dt, small, span, time, output, strong, em, label) {
  overflow-wrap: anywhere;
}

/* Live regions are how reservation timers and stock counters announce
 * themselves. Tabular numerals stop a counting digit reflowing the row. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :where([aria-live], [role="status"], [role="timer"], [role="alert"]) {
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  a:not(.button):not(.single_add_to_cart_button):not(.reset_variations) {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}

/* Any control a plugin renders in the rail stays a real touch target.
 * min-height is a floor, never a fixed height, so nothing clips at 200% zoom.
 * input.qty and the CTA are excluded because they set their own 62px. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :where(button, select, a.button, input[type="submit"], input[type="button"]):not(
    .single_add_to_cart_button
  ) {
  min-height: 48px;
  border-radius: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :where(input[type="checkbox"], input[type="radio"]) {
  min-height: 0;
  accent-color: var(--wa-commerce-action);
}

/* Notices printed inside the rail (add-to-cart validation, reservation
 * warnings). The authoritative colour hardening at 5615-5697 still wins on
 * colour; this is spacing and rail placement only. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  form.cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  grid-column: 1 / -1;
  margin: 0 0 14px;
  font-size: 13px;
}


/* --------------------------------------------------------------------------
 * P10. White Ash Cold Pack control on the purchase rail
 *
 * The approved treatment at 5315-5420 is scoped to .woocommerce-checkout and
 * therefore never reaches this template; if the control renders here it is
 * currently unstyled. This mirrors that block, including its !important on
 * plugin-owned colour declarations - the checkout block needed them because
 * the add-on ships its own colours, and the same markup ships the same
 * colours here. The plugin keeps its field name, fee, recommendation state
 * and refresh. Never hidden, never duplicated.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart, .wa-cold-pack-banner) {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 14px;
  border-color: rgba(244, 240, 229, 0.2);
  border-radius: 0;
  background: linear-gradient(145deg, #151612, #0b0c0a);
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)::before {
  background: linear-gradient(to bottom, #c87945, rgba(200, 121, 69, 0));
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(
    #wa-cold-pack-wrap.wa-cold-pack-recommended,
    #wa-cold-pack-wrap-cart.wa-cold-pack-recommended,
    .wa-cold-pack-banner.wa-cold-pack-banner-summer
  ) {
  border-color: rgba(200, 121, 69, 0.56);
  box-shadow: 0 0 0 1px rgba(200, 121, 69, 0.1) inset;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  :is(label, span, p, small, .optional, .wa-price, .amount) {
  color: #d7d1c4 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  :is(.wa-cold-pack-badge-summer, .wa-shipping-note) {
  border-color: rgba(200, 121, 69, 0.52);
  color: #f4f0e5 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-cold-pack-badge-summer {
  background: rgba(200, 121, 69, 0.14);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  label {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  input[data-wa-cold-pack-toggle="1"] {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  min-height: 0;
  margin-inline-end: 10px;
  accent-color: #c87945;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .wa-cold-pack-banner
  a,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-terms
  a {
  color: #c87945 !important;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  input[data-wa-cold-pack-toggle="1"]:focus-visible,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .wa-cold-pack-banner
  a:focus-visible,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  .wa-terms
  a:focus-visible {
  border-radius: 2px;
  outline: 2px solid #c87945;
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * P11. Responsive reflow
 *
 * Overrides 3202-3207 and 3248-3256 by specificity; neither needs deleting.
 * The collapse point moves 420px -> 480px: between 421 and 480 the CTA label
 * and the quantity field collide on 430px-class phones and on a 390px device
 * held in landscape.
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .reset_variations {
    min-height: 48px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .woocommerce-variation.single_variation {
    padding: 14px 15px;
  }
}

@media (max-width: 480px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product.product-type-simple
    form.cart,
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    :is(.woocommerce-variation-add-to-cart, .variations_button) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .quantity {
    width: 100%;
  }

  /* Still well above the 48px minimum after the reduction. */
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .quantity
    input.qty,
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .single_add_to_cart_button {
    min-height: 58px;
  }
}

/* 320px: no fixed widths anywhere in the rail, so this is padding trim only. */
@media (max-width: 360px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .single_add_to_cart_button {
    padding-inline: 15px;
    letter-spacing: 0.09em;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    form.cart
    .woocommerce-variation.single_variation {
    padding: 13px 13px;
  }
}


/* --------------------------------------------------------------------------
 * P12. Motion - NO RULES REQUIRED, INTENTIONALLY.
 *
 * style.css:3264-3272 already applies transition-duration:0.01ms !important to
 * every descendant of #main-container under prefers-reduced-motion. A
 * "transition: none" block here would be dead code: it cannot outrank an
 * !important declaration. Nothing in this delta introduces an animation that
 * the existing block does not already neutralise.
 *
 * WooCommerce's jQuery slideDown/fadeIn on the variation panel are script
 * animations and cannot be disabled from CSS - that is a core/plugin concern.
 * ------------------------------------------------------------------------ */

/* PURCHASE PATH DELTA - END */

/* ==========================================================================
 * WHITE ASH RESERVE — NATIVE WOOCOMMERCE SINGLE PRODUCT
 * SUPPORTING-CONTENT DELTA (corrected)
 *
 * Append to style.css after line 7716 (current EOF).
 *
 * Every rule is scoped body.wa-reserve-custom-chrome.wa-reserve-product-page.
 * functions.php:624-641 emits wa-reserve-custom-chrome + wa-reserve-commerce-page
 * + wa-reserve-product-page together on is_product(), so the palette tokens
 * defined on .wa-reserve-commerce-page (style.css:2224-2238) are inherited, and
 * two body classes outrank the existing single-class product rules
 * (body.wa-reserve-product-page div.product ...) regardless of file order.
 *
 * Presentation only. Nothing is hidden. `display` is set only on containers
 * WooCommerce never toggles by script (.product_meta, ul.tabs, ul.products).
 * No `display` on .panel, .single_variation_wrap, .single_variation,
 * .reset_variations, <summary>, or any plugin table.
 * No plugin selector is invented — unknown output is reached only through
 * descendants of .summary / .entry-summary / .woocommerce-tabs .panel.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1. Short description
 *    Base exists at 2626-2640 (62ch / clamp(15px,1.2vw,18px) / 1.75) and is
 *    not restated. Delta: the mockup's narrower measure, plus the inner
 *    typography the base never covered.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description {
  max-width: min(100%, 510px);
  margin-block: 26px 34px;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description
  p {
  margin: 0 0 14px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description
  :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 20px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description
  li {
  margin-bottom: 6px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description
  :is(strong, b) {
  color: var(--wa-commerce-cream);
  font-weight: 700;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-details__short-description
  a {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * 2. Native rating output — no rule exists for this anywhere in style.css
 *
 *    .star-rating paints the EMPTY track on ::before and the FILLED stars on
 *    span::before. Colouring only the element leaves the empty track at
 *    WooCommerce's #d3ced2, which is near-white on the ink background and
 *    reads as five filled stars. Both layers must be set.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary)
  .star-rating {
  margin: 0 0 14px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .star-rating::before {
  color: var(--wa-commerce-line-strong);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .star-rating
  span::before {
  color: var(--wa-commerce-action);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-review-link {
  color: var(--wa-commerce-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * 3. .product_meta as the mockup's bordered spec rail
 *    SUPERSEDES the stacked list at 2773-2787.
 *
 *    Native markup (single-product/meta.php) is bare-text labels inside
 *    spans: .sku_wrapper / .posted_in / .tagged_as. The label cannot be given
 *    its own line without a template override, so what maps is the rail, the
 *    dividers, and the label/value contrast. auto-fit stays correct at one,
 *    two, or three cells, and at any count a plugin adds.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: 0;
  margin-top: 28px;
  padding: 19px 0;
  border-top: 1px solid var(--wa-commerce-line);
  border-bottom: 1px solid var(--wa-commerce-line);
  color: var(--wa-commerce-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* `> *`, not `> span`: anything hooked onto woocommerce_product_meta_end
 * still gets a cell instead of sitting flush against the dividers. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  > * {
  min-width: 0;
  padding: 0 15px;
  border-right: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  > :first-child {
  padding-left: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  > :last-child {
  border-right: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  :is(a, .sku) {
  color: var(--wa-commerce-cream-soft);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  a:hover {
  color: var(--wa-commerce-action);
  text-decoration: underline;
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}

/* If a template override or plugin wraps the label in <strong>/<b>, the cell
 * becomes the mockup's true two-line label/value pair. Inert when that markup
 * is absent (core does not emit it). 10px floor, not the mockup's 8px —
 * 8px uppercase is below a readable floor. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .product_meta
  > *
  > :is(strong, b) {
  display: block;
  margin-bottom: 6px;
  color: var(--wa-commerce-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}


/* --------------------------------------------------------------------------
 * 4. Tabs
 *    The bar is styled at 2804-2850 via `ul.tabs` only. WooCommerce ships
 *    <ul class="tabs wc-tabs">; this adds the wc-tabs alias plus the explicit
 *    flex context the existing `gap` silently depends on.
 *
 *    NO `display` is set on .panel — the core tabs script owns panel
 *    visibility.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  ul.wc-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(22px, 4vw, 52px);
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  list-style: none;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  ul.wc-tabs
  li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The bar is an overflow-x scroll container, so the global +3px focus offset
 * (2279-2284) is clipped on the first and last tab. Inset the ring instead. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  :is(ul.tabs, ul.wc-tabs)
  li
  a:focus-visible {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: -3px;
}

/* Panel prose. Measure (880px) and base size live at 2852-2859. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel {
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  > :first-child,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#tab-description, #tab-additional_information)
  > :first-child {
  margin-top: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  > :last-child,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(#tab-description, #tab-additional_information)
  > :last-child {
  margin-bottom: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  p {
  margin: 0 0 18px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(h3, h4) {
  margin: 32px 0 12px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(h5, h6) {
  margin: 28px 0 10px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(ul, ol) {
  margin: 0 0 18px;
  padding-left: 20px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  li {
  margin-bottom: 7px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(strong, b) {
  color: var(--wa-commerce-cream);
  font-weight: 700;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--wa-commerce-action);
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: normal;
  line-height: 1.4;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  hr {
  height: 0;
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--wa-commerce-line);
}

/* Nothing inside a panel may widen the page at 320px. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(img, video, iframe, embed, object) {
  max-width: 100%;
  height: auto;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-tabs
  .panel
  :is(pre, code) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}


/* --------------------------------------------------------------------------
 * 5. Additional information — table.woocommerce-product-attributes
 *    Zero rules exist for this table today (grep: 0 hits for shop_attributes),
 *    so it renders as browser-default light chrome on ink. Both native class
 *    names are matched: core emits
 *    class="woocommerce-product-attributes shop_attributes".
 *
 *    Row idiom matches the sibling checkout order table — flush hairline rows,
 *    small-caps label column, no outer box — so product, checkout and account
 *    read as one system.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes) {
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  border: 0;
  border-top: 1px solid var(--wa-commerce-line);
  border-collapse: collapse;
  background: transparent;
  color: var(--wa-commerce-cream-soft);
  table-layout: auto;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  :is(th, td) {
  padding: 15px 16px 15px 0;
  border: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  background: transparent;
  font-style: normal;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  :is(th, td):last-child {
  padding-right: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  tr
  > th:first-child {
  width: min(38%, 220px);
  color: var(--wa-commerce-cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  td {
  font-size: 14px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  td
  :is(p, ul, ol) {
  margin: 0;
  padding: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  td
  li {
  margin: 0 0 4px;
  list-style-position: inside;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  table:is(.woocommerce-product-attributes, .shop_attributes)
  td
  a {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
 * 6. Variation availability and non-<p> stock output
 *    The theme styles `p.stock` (2642-2658) and `.woocommerce-variation-price`
 *    (2723) but has no rule at all for .woocommerce-variation-availability,
 *    and none for a `.stock` element that is not a <p> (some templates and
 *    add-ons emit <span class="stock in-stock">).
 *
 *    No `display` is set here — .single_variation_wrap and .single_variation
 *    are shown and hidden by add-to-cart-variation.js.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-variation-availability {
  margin-bottom: 12px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .stock:not(p) {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 6px 10px;
  border: 1px solid rgba(200, 121, 69, 0.42);
  color: var(--wa-commerce-cream-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .stock.out-of-stock:not(p) {
  border-color: rgba(223, 113, 95, 0.5);
  color: #f0a89b;
}


/* --------------------------------------------------------------------------
 * 7. Gallery trigger — accessibility correction to an existing rule
 *    2535-2546 sets width:44px; height:44px. That is a fixed height and a
 *    sub-48px touch target that does not grow at 200% zoom. Same circle,
 *    intrinsically sized, 48px floor. The lightbox anchor, its href, and the
 *    photoswipe/zoom scripts are untouched.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  .woocommerce-product-gallery__trigger {
  width: auto;
  min-width: 48px;
  height: auto;
  min-height: 48px;
  aspect-ratio: 1;
}


/* --------------------------------------------------------------------------
 * 8. Related products and up-sells
 *
 *    These get NOTHING today: every card rule at 2965-3070 is scoped
 *    body.wa-reserve-product-archive, which the single-product body never
 *    carries (functions.php:636-641). Only the section border/spacing at
 *    2903-2907 applies. This is that card system re-scoped for this template,
 *    plus the grid the archive rules assume is already in place.
 *
 *    Same `:is(.related.products, .up-sells.products)` shape as 2903 — core
 *    emits <section class="related products"> and
 *    <section class="up-sells upsells products">.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  clear: both;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product {
  position: relative;
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-cream-soft);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product:focus-within {
  border-color: var(--wa-commerce-action);
  box-shadow: 0 0 0 1px var(--wa-commerce-action);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  :is(figure, .ct-media-container) {
  overflow: hidden;
  margin: 0;
  background: #0c0c0a;
}

/* max-width, not width — a plugin badge or payment icon inside the card must
 * not be stretched to the card width. The product thumbnail itself is filled
 * by the narrower rule below. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  img {
  max-width: 100%;
  height: auto;
  transition: transform 260ms ease;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  :is(figure, .ct-media-container, a[class*="LoopProduct"])
  > img,
body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  img[class*="attachment-woocommerce"],
body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  img.woocommerce-placeholder {
  width: 100%;
  display: block;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product:hover
  img {
  transform: scale(1.025);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  a:not(.button):not(.added_to_cart) {
  color: inherit;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  :is(.woocommerce-loop-product__title, .ct-woo-card-title) {
  margin: 16px 0 8px;
  padding-inline: 18px;
  color: var(--wa-commerce-cream);
  font-family: var(--wa-commerce-serif);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  .price {
  margin: 0 0 14px;
  padding-inline: 18px;
  color: var(--wa-commerce-cream-soft);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  .price del {
  color: var(--wa-commerce-muted);
  font-size: 0.82em;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  .price ins {
  color: var(--wa-commerce-action);
  text-decoration: none;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  .star-rating {
  margin: 0 18px 10px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  :is(.button, .added_to_cart) {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px 18px;
  padding: 12px 17px;
  border: 1px solid var(--wa-commerce-action);
  border-radius: 0;
  background: var(--wa-commerce-action);
  color: var(--wa-commerce-action-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  :is(.button, .added_to_cart):hover {
  border-color: #d78c59;
  background: #d78c59;
  color: var(--wa-commerce-action-dark);
}

/* The post-AJAX "View cart" link is secondary to the add button above it. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  ul.products
  > li.product
  .added_to_cart {
  border-color: var(--wa-commerce-line-strong);
  background: transparent;
  color: var(--wa-commerce-cream);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  :is(.related.products, .up-sells.products)
  > h2 {
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * 9. Generic floor for unknown output
 *
 *    Reserved Stock Pro reservation messaging, the White Ash Cold Pack control
 *    and any other add-on hooked to woocommerce_single_product_summary or
 *    woocommerce_product_tabs renders inside these containers. No plugin
 *    selector is named, nothing is hidden, no parallel timer or fee is built,
 *    and `display` is set on nothing in this section.
 *
 *    Note the deliberate :where() around each negation below. A bare
 *    `a:not(.button):not(.single_add_to_cart_button):not(.added_to_cart)`
 *    scores (0,7,3) and would outrank the tab-bar link rule at 2832 (0,4,5),
 *    repainting every tab cream and destroying the active/inactive
 *    distinction. :where() zeroes the negations, and the tab bar is excluded
 *    from the container list outright by targeting .woocommerce-tabs .panel
 *    rather than .woocommerce-tabs.
 * ------------------------------------------------------------------------ */

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :where(p, li, dd, dt, small, span, time, output, figcaption, td, th) {
  overflow-wrap: anywhere;
}

/* Live regions — reservation clocks, stock counters. Made legible only;
 * never re-implemented, never suppressed. Tabular figures stop a counting
 * digit from reflowing the line it sits in. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :where([aria-live], [role="status"], [role="timer"], [role="alert"]) {
  color: var(--wa-commerce-cream);
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  a:where(:not(.button)):where(:not(.single_add_to_cart_button)):where(
    :not(.added_to_cart)
  ) {
  color: var(--wa-commerce-cream);
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}

/* Any control an add-on renders here stays a real 48px target. min-height is
 * a floor, never a fixed height, so it still grows at 200% zoom. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :where(button, select, a.button, input[type="submit"], input[type="button"]) {
  min-height: 48px;
  border-radius: 0;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--wa-commerce-action);
}

/* Generic accordions (the mockup's in-summary <details> pattern, and what
 * most add-on panels use).
 *
 * NO `display` on <summary>. display:flex on a summary element removes the
 * native disclosure marker in Chrome and Safari, which strips the only
 * open/closed affordance from a plugin's own control. Padding plus a
 * min-height floor gives the same rhythm and keeps the marker. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  details {
  border-bottom: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  details
  > summary {
  min-height: 48px;
  box-sizing: border-box;
  padding: 15px 0;
  color: var(--wa-commerce-cream-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  details
  > summary::marker {
  color: var(--wa-commerce-action);
}

/* Unknown tables (lab panels, potency sheets). The attributes and variations
 * tables are excluded — section 5 and 2668-2686 own those.
 *
 * `display: block` is deliberately NOT used to make these scrollable, even
 * though that is the usual trick: it flattens a plugin table's own column
 * sizing, and a table is exactly the kind of node an add-on shows and hides by
 * script. Cell-level wrapping keeps the page inside 320px without touching
 * display. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  table:not(.woocommerce-product-attributes):not(.shop_attributes):not(
    .variations
  ) {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  color: var(--wa-commerce-cream-soft);
  font-size: 13px;
  table-layout: auto;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  table:not(.woocommerce-product-attributes):not(.shop_attributes):not(
    .variations
  )
  :is(th, td) {
  padding: 12px 14px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--wa-commerce-line);
  background: transparent;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  table:not(.woocommerce-product-attributes):not(.shop_attributes):not(
    .variations
  )
  th {
  color: var(--wa-commerce-cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Notices printed inside either container. The authoritative colour hardening
 * at 2336-2373 and 5615-5697 still wins; this is spacing only. */
body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  margin: 0 0 18px;
  font-size: 13px;
}

body.wa-reserve-custom-chrome.wa-reserve-product-page
  div.product
  :is(.summary, .entry-summary, .woocommerce-tabs .panel)
  :where(img, video, iframe, embed, object, svg) {
  max-width: 100%;
}


/* --------------------------------------------------------------------------
 * 10. Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product_meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product_meta
    > *,
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .product_meta
    > :first-child {
    padding: 0;
    border-right: 0;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    .woocommerce-product-details__short-description {
    max-width: none;
    margin-block: 22px 28px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    table:is(.woocommerce-product-attributes, .shop_attributes)
    :is(th, td) {
    padding: 13px 12px 13px 0;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    div.product
    table:is(.woocommerce-product-attributes, .shop_attributes)
    tr
    > th:first-child {
    width: 40%;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product
    :is(.woocommerce-loop-product__title, .ct-woo-card-title) {
    padding-inline: 14px;
    font-size: clamp(19px, 5vw, 24px);
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product
    .price {
    padding-inline: 14px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product
    .star-rating {
    margin-inline: 14px;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product
    :is(.button, .added_to_cart) {
    margin: 0 14px 14px;
  }
}

/* At 430px and below a two-up card row is too tight for the serif title. */
@media (max-width: 430px) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
 * 11. Motion
 *     The commerce-wide block at 3264-3280 collapses transition duration but
 *     leaves the transform in place, and its hover reset is archive-scoped.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product
    img {
    transition: none;
  }

  body.wa-reserve-custom-chrome.wa-reserve-product-page
    :is(.related.products, .up-sells.products)
    ul.products
    > li.product:hover
    img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
 * 12. NOT IMPLEMENTED — needs markup, not CSS. Deliberately left undone.
 *
 *   Mockup .details accordions (product.module.css:430-461) sit inside the
 *     summary; native WooCommerce puts the same content in .woocommerce-tabs
 *     below the fold. Section 4 styles the real tabs and section 9 styles
 *     <details> generically, so a hook-rendered accordion lands correctly.
 *     No fake accordion is built and the tabs are not hidden.
 *   Mockup .productStatement band (463-504) has no native counterpart; it
 *     needs markup on woocommerce_after_single_product_summary.
 *   Mockup .releaseMeta's three authored labels (287-327) are not reproduced.
 *     Section 3 maps the rail onto .product_meta but the labels stay
 *     WooCommerce's own. A ::before label was NOT added — it would inject
 *     untranslatable English into a localised template.
 *   Mockup .eyebrow (260-267) sits above the H1; native emits categories
 *     inside .product_meta below the form. Blocksy may print a category node
 *     in the summary, but I could not confirm a class for it in this build —
 *     UNSURE, so nothing is targeted rather than guessing a selector.
 *   Mockup .options size buttons (329-375) are a bespoke control; the native
 *     equivalent is table.variations select, already styled at 2668-2703.
 *     Not re-created, so add-to-cart-variation.js keeps working.
 * ------------------------------------------------------------------------ */



/* ==========================================================================
 * v1.0.16 — Cart, global notices, My Account and Classic Checkout deltas.
 * Produced against the approved mockups and reviewed before integration.
 * Placed here deliberately: several rules are same-property corrections to
 * earlier !important declarations and win only on source order. Do not
 * reorder this block above the sections it corrects.
 * ========================================================================== */

/* ==========================================================================
 * WHITE ASH RESERVE — NATIVE WOOCOMMERCE CART + GLOBAL NOTICES
 * Corrected deliverable (review pass over the submitted cart-table layer).
 *
 * PLACEMENT: append immediately above the boundary comment
 *   "Future Quick Shop release styles belong below this boundary"
 * (end of "Approved checkout structural parity - END", style.css ~7711 in the
 * 7,716-line snapshot read for this review). Many rules below are same-property
 * corrections to earlier !important declarations and win only on source order.
 *
 * WHY !important IS EVERYWHERE: the sheet already declares padding, border,
 * background, colour, width, float and height on these exact selectors with
 * !important (cart block ~7018-7449; global notice block ~6425-6560; the
 * sitewide :where(button.button, a.button, input.button) rule ~160). A later
 * rule cannot beat an earlier !important without one of its own. It is omitted
 * on every property nothing upstream declares.
 *
 * SCOPE: every selector begins with body.wa-reserve-custom-chrome. Cart rules
 * add .woocommerce-cart. Nothing here can reach a route the custom chrome does
 * not own.
 *
 * Presentation only. WooCommerce owns every cart line, quantity, coupon,
 * shipping method, nonce and submission; Reserved Stock Pro owns all
 * reservation state and its countdown. No display/visibility/opacity/height is
 * set on any plugin-owned message or control, and no price, quantity, total or
 * product name is written by CSS.
 * ========================================================================== */


/* ==========================================================================
 * PART 1 — CART
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1.1 TOKENS THIS BLOCK ADDS
 *
 * The existing --wa-commerce-* block on body.wa-reserve-custom-chrome
 * .woocommerce-cart is reused as-is. Only the values it lacks are added, so
 * this stays one system rather than a parallel one.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart {
  /* Field surface. checkout.module.css `.field input` = #0c0c0b: darker than
     the panel it sits on, so an input reads as an inset, never a raised chip.
     The cart block currently paints the qty box with --wa-commerce-ink
     (#080807), which is darker still and loses the step. */
  --wa-cart-field: #0c0c0b;
  /* Aliased, NOT a literal. A fresh 0.22 here silently undid the audited 0.40
     raise (WCAG 2.1 AA 1.4.11) on the cart's own form fields, because these
     tokens are consumed with !important and win on source order. Aliasing
     means a future change to the audited value propagates instead of
     diverging again. */
  --wa-cart-line-field: var(--wa-commerce-line-strong);
  --wa-cart-line-hover: rgba(244, 240, 229, 0.4);  /* `.field input:hover` */
  /* #958f84, not #6f6a62: 6.10:1 on the #0c0c0b field vs 3.65:1, and matches
     --wa-commerce-muted. The coupon field has no visible label, so its
     placeholder is the only thing naming it. */
  /* Mockup value (#6e6a62). Accepted deviation: 3.64:1 where AA wants 4.5:1.
     Weak case anyway — the approved cart mockup gives the coupon field a real
     visually-hidden <label>, so this placeholder is redundant, not the field's
     only name. */
  --wa-cart-placeholder: #6e6a62;
  --wa-cart-action-hover: #d58a54;                 /* `.placeOrder:hover` */
  --wa-cart-serif: Georgia, "Times New Roman", serif;
  --wa-cart-thumb: 72px;                           /* `.productLine img` */
  --wa-cart-ease: 140ms ease;
  /* Minimum interactive box. max() so the floor holds even if the root font
     size is below 16px, while still growing under text-only zoom. */
  --wa-cart-tap: max(48px, 3rem);
  --wa-cart-tap-sm: max(44px, 2.75rem);
}


/* --------------------------------------------------------------------------
 * 1.2 THE FORM PANEL AND THE TABLE'S OWN SCROLL CONTAINER
 *
 * The panel chrome (1px hairline, #10100f, square, no shadow) already exists
 * and is not restated. What is added is the scroll container: if a currency
 * switcher, a long locale string or a plugin column ever pushes the table past
 * the panel, the FORM scrolls and the page never scrolls sideways. Above 860px
 * only — below that the table is cards and there is nothing to scroll.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart form.woocommerce-cart-form {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-commerce-line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar {
  height: 8px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar-thumb {
  background: var(--wa-commerce-line-strong);
}

/* A scroll container clips at its PADDING box and the panel's padding is
   clamp(20px, 2.4vw, 36px), so a 2px focus ring on a control in the last
   column still paints. No negative outline-offset is needed. */


/* --------------------------------------------------------------------------
 * 1.3 TABLE GEOMETRY
 *
 * Deliberately NO table-layout:fixed and NO min-width on the table. Column
 * sizing uses the auto-layout idiom: the name cell claims the slack
 * (width:100%) and every numeric/control cell shrinks to content (width:1%).
 * With overflow-wrap:anywhere on the name (1.6) this is what makes a long
 * release or variation title WRAP instead of pushing price and subtotal off
 * screen, and it lets the table compress into the 1050-1250px band where the
 * two-column shell gives the form only ~640px, without a scrollbar.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart {
  table-layout: auto;
  min-width: 0;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th).product-name {
  width: 100%;
  min-width: 10rem;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th):is(
    .product-remove,
    .product-thumbnail,
    .product-price,
    .product-quantity,
    .product-subtotal
  ) {
  width: 1%;
  white-space: nowrap;
}

/* Flush edges: the approved order table has no outer border and no side
   padding, so the first and last columns line up with the panel edge. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th):first-child {
  padding-left: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th):last-child {
  padding-right: 0 !important;
}

/* WooCommerce's smallscreen sheet zebra-stripes responsive tables with
   rgba(0,0,0,.025), which reads as banding on an already-dark panel. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  tbody
  tr:nth-child(2n)
  :is(td, th) {
  background-color: transparent !important;
}

/* --- 1.3a Column heads --------------------------------------------------
 * checkout.module.css `.orderTable thead th`: muted, 8px, 800, 0.13em,
 * uppercase, no top padding. Raised 8px -> 9px because the cart table is far
 * wider than the checkout order panel and 8px caps read as texture at that
 * measure. Deliberate one-step divergence.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart thead th {
  padding-top: 0 !important;
  color: var(--wa-commerce-muted) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
}

/* Money columns right-aligned. EXTRAPOLATION: the mockup right-aligns only the
   LAST column (`.orderTable th:last-child`); generalised to both money columns
   because two adjacent left-aligned currency columns do not scan. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(thead th, tbody td):is(.product-price, .product-subtotal) {
  text-align: right;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  tr:is(.woocommerce-cart-form__cart-item, .cart_item) {
  transition: background-color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  tr:is(.woocommerce-cart-form__cart-item, .cart_item):hover {
  background: rgba(244, 240, 229, 0.03);
}


/* --------------------------------------------------------------------------
 * 1.4 REMOVE CONTROL
 *
 * Circular outlined icon button — the one circle the system allows, echoing
 * the header bag counter (`.bag span`, 22px, 1px action ring, 50%) and the
 * account status dot. Corrects the existing 40x40 box, which is under the
 * touch minimum. width/height become min-width/min-height so the control grows
 * with text-only zoom instead of clipping its glyph, and the floor rises to
 * 48px from 860px down (the stacked/touch layout).
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th).product-remove {
  padding-left: 0 !important;
  padding-right: 12px !important;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart a.remove {
  width: auto !important;
  height: auto !important;
  min-width: var(--wa-cart-tap-sm);
  min-height: var(--wa-cart-tap-sm);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--wa-commerce-line-strong);
  border-radius: 999px;
  background: transparent !important;
  color: var(--wa-commerce-action) !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--wa-cart-ease),
    border-color var(--wa-cart-ease), color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove:hover {
  border-color: var(--wa-commerce-action);
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}


/* --------------------------------------------------------------------------
 * 1.5 THUMBNAIL
 *
 * checkout.module.css `.productLine img`: 72px square, 1px hairline, cover
 * crop, no radius (58px at <=620px, mirrored in 1.12).
 *
 * Two corrections. (a) The existing rule sets `height: 88px !important`, a
 * fixed height; replaced with aspect-ratio + height:auto so the box scales
 * under 200% zoom instead of squashing. (b) WooCommerce's smallscreen sheet
 * contains `.woocommerce table.cart .product-thumbnail { display: none }`, so
 * on every phone the product image silently disappears; 1.12 puts it back.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td, th).product-thumbnail {
  width: 1%;
  padding-right: 16px !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-thumbnail
  img {
  width: var(--wa-cart-thumb) !important;
  height: auto !important;
  max-width: none;
  aspect-ratio: 1 / 1;
  display: block;
  border: 1px solid var(--wa-commerce-line);
  border-radius: 0;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
 * 1.6 PRODUCT NAME, VARIATIONS, LINE MESSAGING
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name {
  min-width: 0;
  white-space: normal;
  /* `anywhere` (not `break-word`) is load-bearing: it lets the cell's
     MIN-CONTENT width collapse, which is what stops an unbroken
     "WHITE-ASH-RESERVE-SINGLE-BARREL-CASK-STRENGTH" style name from forcing
     the table wider than its container. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  > a {
  max-width: 100%;
  display: inline-block;
  color: var(--wa-commerce-cream) !important;
  font-family: var(--wa-cart-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  > a:hover {
  color: var(--wa-commerce-action) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Variation list. WooCommerce emits
   <dl class="variation"><dt>..</dt><dd><p>..</p></dd></dl>.
   `.productLine span` in the mockup is 9px muted; raised to 11px because cart
   variations carry real values (size, proof, engraving) rather than a
   one-word qualifier. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: var(--wa-commerce-muted) !important;
  font-size: 11px;
  line-height: 1.45;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation
  :is(dt, dd) {
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation
  dt {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation
  dd {
  color: var(--wa-commerce-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation
  dd
  p {
  margin: 0 !important;
}

/* Backorder line WooCommerce prints under the name. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  .backorder_notification {
  display: block;
  margin-top: 6px;
  color: var(--wa-commerce-action) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* --- 1.6a RESERVED STOCK PRO reservation messaging ----------------------
 * Verified against the plugin source in this repo
 * (build/plugin-review/reserved-stock-pro/classes/class-frontend.php:473,
 * hooked at class-frontend.php:52 to woocommerce_after_cart_item_name, so it
 * renders INSIDE td.product-name):
 *
 *   <div class="reserved-stock-pro-cart-wrapper">
 *     <div class="reserved-stock-pro-cart-expiry"> … </div>
 *   </div>
 *
 * The plugin ships no CSS for these two classes (its only stylesheet is
 * assets/css/countdown.css) and the theme has none, so the message currently
 * inherits the cell colour and reads as leftover text.
 *
 * There is deliberately NO display, visibility, opacity, height, max-height,
 * overflow, clip, transform or font-size:0 declaration in this sub-section.
 * The plugin owns whether the message appears, the timestamp inside it, and
 * its countdown. No second countdown is created anywhere in this stylesheet.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome .reserved-stock-pro-cart-wrapper {
  max-width: 100%;
  margin-top: 9px;
}

body.wa-reserve-custom-chrome .reserved-stock-pro-cart-expiry {
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  border-left: 3px solid var(--wa-commerce-action, #c87945);
  background: #0c0c0b;
  color: var(--wa-commerce-soft, #d7d1c4) !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The plugin's fixed countdown bar: recolour only. It carries its own
   `.rsp-no-reservations { display: none }` state in countdown.css, so no
   display rule is set here and none may be added. position/inset stay the
   plugin's. */
body.wa-reserve-custom-chrome .rsp-countdown-wrapper {
  max-width: min(calc(100vw - 24px), 520px);
  border: 1px solid var(--wa-commerce-line, rgba(244, 240, 229, 0.15));
  border-left: 3px solid var(--wa-commerce-action, #c87945);
  border-radius: 0;
  background: var(--wa-commerce-panel, #10100f);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  color: var(--wa-commerce-soft, #d7d1c4);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome .rsp-countdown-wrapper :is(strong, b, time) {
  color: var(--wa-commerce-cream, #f4f0e5);
}

body.wa-reserve-custom-chrome .rsp-countdown-loading-dots--dot {
  background-color: var(--wa-commerce-action, #c87945);
}

/* --- 1.6a-cat  THE COUNTDOWN ON THE CATEGORY ARCHIVE --------------------
 * The live countdown is Reserved Stock Pro's own fixed bottom bar, printed at
 * wp_footer on every route. Until now only the cart gave it the approved
 * treatment, so it appeared on the catalog in the plugin's shipped grey. This
 * section extends the CART treatment - the values are copied verbatim from
 * C.2 (style.css 22925-22980) and from that block's own responsive steps
 * (24542-24545 declares --wa-cart-gutter: 28px, 24823-24825 the 18px padding,
 * 24850-24854 the smaller figure clamp, 24877-24880 the motion rule and
 * 24886-24898 the forced-colors border), which read them from --wa-cart-*;
 * those tokens are declared only on body.woocommerce-cart, so the same
 * literals are written out here. No colour value that was not already in this
 * file is introduced.
 *
 * SKIN ONLY, exactly as on the cart:
 *   - no position, inset, transform, z-index or width: placement stays the
 *     plugin's ('rsp_default_countdown_location' / the [rsp_countdown]
 *     shortcode) and is not overridden;
 *   - no display, visibility or opacity: the plugin's own
 *     `.rsp-no-reservations { display: none }` in its countdown.css is what
 *     hides the bar for a shopper with nothing reserved, and nothing here
 *     defeats it;
 *   - nothing reads, formats or recomputes the expiry, and no timer is built.
 *
 * THAT HIDING IS SERVER STATE, NOT A CSS GUARANTEE - and unlike the cart, this
 * route is page-cached. Reserved Stock Pro computes the wrapper class for the
 * visitor who generated the response (class-countdown.php:100-108); its cart
 * fragment replaces only .rsp-countdown-content (class-countdown.php:76) and
 * its countdown.js only ever REMOVES that class (assets/js/countdown.js:259),
 * never adds it. A full-page cache would therefore serve one shopper's
 * "reservation live" response to a visitor with an empty cart, whose
 * countdown.js never starts (it requires the woocommerce_items_in_cart cookie,
 * countdown.js:242) and who would sit on the plugin's loading dots
 * indefinitely - now inside the large, branded panel below. The cart, checkout
 * and account are dynamic and outside the page cache; the archive is a route
 * this theme itself treats as publicly cacheable
 * (functions.php: wa_reserve_maybe_adjust_current_drop_litespeed_ttl), so the
 * guarantee is restored on the server instead:
 * wa_reserve_maybe_block_reservation_countdown_page_cache() in functions.php
 * keeps a response carrying a visible bar out of the page cache. Do not extend
 * this treatment to another cacheable route without that guard.
 *
 * The scope is the archive the theme actually owns - .wa-category-shop-page is
 * added by wa_reserve_wc_category_body_classes() only when the category
 * surface is ready - so every other route keeps the general 1.6a treatment.
 * Quick Shop cannot collide with these selectors: its markup and its
 * stylesheet load only on the front page (wa_reserve_quick_shop_is_available()
 * requires is_front_page()), so body.wa-quick-shop-open and
 * .wa-category-shop-page never appear together.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-wrapper {
  /* C.2: min(calc(100vw - var(--wa-cart-gutter)), 560px), gutter 48px. */
  max-width: min(calc(100vw - 48px), 560px);
  padding: 24px;
  border: 1px solid #34332f;      /* --wa-cart-line */
  border-top: 2px solid #c87945;  /* --wa-cart-action */
  border-radius: 0;
  background: #10100f;            /* --wa-cart-panel */
  box-shadow: none;               /* the plugin ships 0 0 8px -1px #000000bf */
  color: #958f84;                 /* --wa-cart-muted */
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;               /* the plugin centres it */
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-content {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  overflow-wrap: anywhere;
}

/* Renders only where the owner has wrapped {minutes}/{seconds} in <strong>,
   <b> or <time> in Reserved Stock Pro's countdown-text setting. Absent that it
   matches nothing and the bar is muted body copy, exactly as on the cart. */
body.wa-reserve-custom-chrome.wa-category-shop-page
  .rsp-countdown-wrapper
  :is(strong, b, time) {
  display: block;
  color: #f4f0e5;                 /* --wa-cart-cream */
  font-family: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  font-size: clamp(36px, 4vw, 54px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-wrapper p {
  margin: 12px 0 0;
  color: #958f84;                 /* --wa-cart-muted */
  font-size: 13px;
}

body.wa-reserve-custom-chrome.wa-category-shop-page
  .rsp-countdown-loading-dots--dot {
  background-color: #c87945;      /* --wa-cart-action */
}

/* The bar is FIXED and it overlaps the catalog. The plugin pins it
   position: fixed; bottom: 30px; z-index: 50 (its countdown.css), and the
   archive's cards paint at z-index 0/1/2 (assets/css/category-shop.css), so
   whatever sits at the bottom of the viewport is covered and untappable. The
   card layout filter does remove product_add_to_cart
   (wa_reserve_wc_filter_category_card_layout), but the card is not without a
   control: wa_reserve_wc_render_product_variation_groups() renders real
   <button data-wa-variation-option> bubbles, and on this archive - where
   purchasing moves to Quick Shop - those bubbles ARE the card's tappable
   control. At the end of the list there is nothing left to scroll, so the last
   row's bubbles and the pagination would stay under the bar. The panel below
   is also taller than the plugin's own 10px/20px pill, which is what turned an
   overlap into an obstruction.

   The fix is a scroll gutter on the DOCUMENT, not a new inset on the plugin's
   widget: placement stays the plugin's, and nothing here moves, re-parents or
   re-layers it. :has() keeps the gutter conditional - with no wrapper, or with
   the plugin's own .rsp-no-reservations state, the page is exactly what it was.
   The value is derived from declared values, not guessed: the plugin's 30px
   bottom inset + this panel's 24px padding top and bottom + two lines of its
   13px/1.55 copy, which is what the plugin's default counting text wraps to at
   this max-width. Longer custom countdown text, or an owner who wraps
   {minutes} in <strong> and gets the clamp(36px, 4vw, 54px) figure, makes the
   panel taller than this clears and should be revisited with that copy. */
body.wa-reserve-custom-chrome.wa-category-shop-page:has(
    .rsp-countdown-wrapper:not(.rsp-no-reservations)
  ) {
  padding-bottom: calc(30px + (24px * 2) + (13px * 1.55 * 2));
}

/* The cart's own responsive steps for this bar, reproduced. 720px is where the
   cart drops --wa-cart-gutter to 28px (24542-24545); 390px is where it drops
   the padding to 18px (24823-24825); 340px is where the figure clamp drops so
   a long word still fits (24850-24854). The archive's only other fixed
   surface, .wa-filter-panel, sits at z-index 180, above the plugin's z-index
   50, so the filter panel is not covered and needs no rule. */
@media (max-width: 720px) {
  body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-wrapper {
    max-width: min(calc(100vw - 28px), 560px);
  }
}

@media (max-width: 390px) {
  body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-wrapper {
    padding: 18px;
  }

  /* Same derivation against the 18px padding above. */
  body.wa-reserve-custom-chrome.wa-category-shop-page:has(
      .rsp-countdown-wrapper:not(.rsp-no-reservations)
    ) {
    padding-bottom: calc(30px + (18px * 2) + (13px * 1.55 * 2));
  }
}

@media (max-width: 340px) {
  body.wa-reserve-custom-chrome.wa-category-shop-page
    .rsp-countdown-wrapper
    :is(strong, b, time) {
    font-size: clamp(28px, 11vw, 36px);
  }
}

/* Reserved Stock Pro's infinite loading-dot pulse is exactly what a vestibular
   preference is asking about. `animation: none` leaves the dots VISIBLE at
   their base style; only the motion stops. Nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.wa-category-shop-page
    .rsp-countdown-loading-dots--dot {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.wa-category-shop-page .rsp-countdown-wrapper {
    border: 1px solid CanvasText !important;
  }
}

/* --- 1.6b Any other plugin-injected cart row ----------------------------
 * Colour, size and wrapping only — no layout instruction, so a plugin that
 * shows and hides its own row keeps working.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  tbody
  > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item)
  :is(td, th):not(.actions) {
  color: var(--wa-commerce-soft) !important;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * 1.7 PRICE AND SUBTOTAL
 *
 * Unit price is secondary (soft, sans, 13px); the line subtotal is the figure
 * that matters and takes the mockup's serif-cream figure treatment.
 * tabular-nums keeps the two columns in vertical register.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-price
  .amount {
  color: var(--wa-commerce-soft) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-subtotal
  .amount {
  color: var(--wa-commerce-cream) !important;
  font-family: var(--wa-cart-serif);
  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Sale lines: WooCommerce prints <del> + <ins>. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  :is(del, del .amount) {
  color: var(--wa-commerce-muted) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  ins {
  background: none;
  color: inherit;
  text-decoration: none;
}

/* The per-line tax hint some stores enable. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  small {
  display: block;
  color: var(--wa-commerce-muted) !important;
  font-size: 10px;
  white-space: normal;
}


/* --------------------------------------------------------------------------
 * 1.8 QUANTITY
 *
 * checkout.module.css `.field input`: min-height 48px, 1px rgba(...,0.22),
 * #0c0c0b, square, 14px. Corrects the existing 46px (under the 48px floor)
 * and the ink-coloured background.
 *
 * .quantity is a flex row so a plus/minus control added by a plugin stays in
 * line and stays hittable. Nothing inside .quantity is hidden.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity {
  color: var(--wa-commerce-soft) !important;
  font-size: 12px;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart .quantity {
  max-width: 100%;
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  input.qty {
  box-sizing: border-box;
  width: auto;
  min-width: 4.5rem;
  min-height: var(--wa-cart-tap) !important;
  padding: 0 10px !important;
  border: 1px solid var(--wa-cart-line-field) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-commerce-cream) !important;
  color-scheme: dark;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  input.qty:hover {
  border-color: var(--wa-cart-line-hover) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  input.qty:focus {
  border-color: var(--wa-commerce-action) !important;
}

/* Plugin stepper buttons, if present. Styled, never hidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  .quantity
  :is(button, a.plus, a.minus, .plus, .minus) {
  min-width: var(--wa-cart-tap-sm);
  min-height: var(--wa-cart-tap);
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border: 1px solid var(--wa-cart-line-field);
  border-radius: 0;
  background: transparent;
  color: var(--wa-commerce-cream);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  .quantity
  :is(button, a.plus, a.minus, .plus, .minus):hover {
  border-color: var(--wa-commerce-action);
  color: var(--wa-commerce-action);
}

/* Non-editable lines (sold individually, fixed-quantity bundles) print a plain
   string instead of an input. Keep it legible rather than letting it read as a
   dead control. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity:not(:has(input.qty)) {
  color: var(--wa-commerce-soft) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
 * 1.9 ACTIONS ROW — COUPON + UPDATE CART
 *
 * CORRECTED FROM THE SUBMITTED DRAFT. The draft set `display: flex` on
 * td.actions. A <td> that is not `display: table-cell` is no longer a table
 * cell: CSS table fixup wraps it in an ANONYMOUS table-cell, the colspan="6"
 * attribute stops applying, and the anonymous cell lands in column 1 — the
 * width:1% remove column — which either distorts every column width or
 * squeezes the coupon into ~44px. Above the stacked breakpoint the row is
 * therefore laid out with floats inside a real table-cell (which is what
 * WooCommerce core does), and switched to flex only at <=860px where the
 * containing <tr> is already display:block and no table fixup applies.
 *
 * Other corrections to what ships today:
 *  (a) only `button[name="update_cart"]` is targeted; WooCommerce's legacy
 *      markup is `<input type="submit" name="update_cart">` and goes unstyled.
 *      Both are covered here, as is apply_coupon in both forms.
 *  (b) WooCommerce ships Update cart DISABLED until a quantity changes, and
 *      that state is not handled at all, so a dead control renders as a live
 *      primary button.
 *  (c) the floated update button had no clearance, so the cell could collapse
 *      around it.
 *
 * Button tiers: Apply coupon is the mockup's ghost `.coupon button`. Update
 * cart is quieter still — EXTRAPOLATION, there is no mockup for it; it is a
 * maintenance control and Proceed to checkout must remain the only filled
 * action on the page. Both deliberately out-specify the sitewide
 * `:where(button.button, a.button, input.button) { background: #c87945 }`.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions {
  /* Explicit: never let a later rule blockify this cell above the stacked
     breakpoint. */
  display: table-cell;
  padding: 24px 0 0 !important;
  border-bottom: 0 !important;
  text-align: left !important;
  white-space: normal;
}

/* Clearance for the floats below, so the cell cannot collapse. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions::after {
  display: block;
  clear: both;
  content: "";
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon {
  /* checkout.module.css `.coupon > div`: joined field + ghost button. */
  float: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  width: min(100%, 480px);
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* WooCommerce's coupon <label> is screen-reader-text by contract — it is the
   accessible name for #coupon_code. Kept out of the grid flow and IN the
   accessibility tree; not removed, not unhidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon
  label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  input#coupon_code {
  box-sizing: border-box;
  /* Core's smallscreen sheet floats this at width:48%. */
  float: none !important;
  width: 100% !important;
  min-width: 0;
  min-height: var(--wa-cart-tap) !important;
  padding: 0 13px !important;
  border: 1px solid var(--wa-cart-line-field) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-commerce-cream) !important;
  font: inherit;
  font-size: 14px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  input#coupon_code::placeholder {
  color: var(--wa-cart-placeholder) !important;
  opacity: 1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  input#coupon_code:hover {
  border-color: var(--wa-cart-line-hover) !important;
}

/* Apply coupon — GHOST (secondary). */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input)[name="apply_coupon"] {
  box-sizing: border-box;
  float: none !important; /* core smallscreen floats it right at width:48% */
  width: auto !important;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-commerce-action) !important;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
  transition: background-color var(--wa-cart-ease), color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input)[name="apply_coupon"]:hover {
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}

/* Update cart — TERTIARY (quiet). */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input)[name="update_cart"] {
  box-sizing: border-box;
  float: right;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 18px !important;
  padding: 0 18px !important;
  border: 1px solid var(--wa-commerce-line-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-commerce-soft) !important;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
  transition: border-color var(--wa-cart-ease), color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input)[name="update_cart"]:hover:not([disabled]):not(
    [aria-disabled="true"]
  ) {
  border-color: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-action) !important;
}

/* Disabled state. Still focusable — no pointer-events:none, and no opacity
   fade below the contrast floor: #958f84 on #10100f is ~6.9:1. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input)[name="update_cart"]:is(
    [disabled],
    [aria-disabled="true"],
    .disabled
  ) {
  border-color: var(--wa-commerce-line) !important;
  background: transparent !important;
  color: var(--wa-commerce-muted) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* Anything else hooked into woocommerce_cart_actions keeps a sane baseline and
   cannot overflow. Nothing is hidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  > :not(.coupon):not([name="update_cart"]) {
  min-width: 0;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
 * 1.10 AJAX BUSY OVERLAY
 *
 * jQuery blockUI paints an INLINE white sheet over the cart and the totals on
 * every quantity, coupon and shipping update. On this site that is a white
 * flash. Inline styles can only be beaten with !important. Scoped to the
 * chrome rather than to the cart because blockUI is also used by the mini
 * cart, the checkout and add-to-cart.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome .blockUI.blockOverlay {
  background: var(--wa-commerce-ink, #080807) !important;
  background-color: var(--wa-commerce-ink, #080807) !important;
  opacity: 0.72 !important;
}


/* --------------------------------------------------------------------------
 * 1.11 CART COLLATERALS, TOTALS, SHIPPING, PROCEED TO CHECKOUT
 *
 * The submitted draft deferred all of this to "another block"; the brief names
 * these selectors, so they are corrected here. The existing panel chrome at
 * style.css ~7221-7320 is not restated — only what is wrong or missing.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals,
body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals {
  min-width: 0;
  max-width: 100%;
}

/* Fixed layout + anywhere-wrapping is what keeps a long tax or fee label from
   widening the totals panel past the column. */
body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  :is(th, td) {
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* `.orderTable tfoot th` in the mockup: muted, 9px, 700, 0.06em, uppercase. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  th {
  width: 45%;
  color: var(--wa-commerce-muted) !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  td {
  color: var(--wa-commerce-soft) !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* `.orderTable .totalRow`: serif, no bottom rule, cream label / action figure.
   The existing rule paints the amount cream; the approved mockup paints it
   --action. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  :is(th, td) {
  padding-block: 21px !important;
  border-bottom: 0 !important;
  font-family: var(--wa-cart-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  th {
  color: var(--wa-commerce-cream) !important;
  font-size: clamp(18px, 1.7vw, 20px);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  :is(td, td .amount, td strong) {
  color: var(--wa-commerce-action) !important;
  font-family: var(--wa-cart-serif);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
}

/* The "(estimated for …)" small print core prints under the total. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  :is(th, td)
  small {
  display: block;
  margin-top: 5px;
  color: var(--wa-commerce-muted) !important;
  font-family: var(--wa-commerce-sans, inherit);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

/* --- Shipping ------------------------------------------------------------
 * IMPORTANT: `.shipping-calculator-form` is toggled by WooCommerce's own
 * jQuery slideToggle and ships with an inline `display: none`. NO display,
 * visibility, height or overflow declaration is made on that element anywhere
 * in this stylesheet — only on its descendants — so the toggle keeps working.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  tr.woocommerce-shipping-totals.shipping
  :is(th, td) {
  vertical-align: top;
}

body.wa-reserve-custom-chrome.woocommerce-cart ul#shipping_method,
body.wa-reserve-custom-chrome.woocommerce-cart .woocommerce-shipping-methods {
  display: grid;
  gap: 6px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  list-style: none;
  text-align: left;
}

/* `.paymentMethods label` in the mockup: 1px hairline, #0c0c0b, 12px gap.
   Row floor is the 48px touch target rather than the mockup's 68px, because a
   shipping option is one line. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li {
  min-height: var(--wa-cart-tap);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-cart-field);
  color: var(--wa-commerce-soft) !important;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li:has(input:checked) {
  border-color: var(--wa-commerce-action);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li
  label {
  min-width: 0;
  margin: 0 !important;
  color: inherit !important;
  cursor: pointer;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li
  input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--wa-commerce-action);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-destination {
  color: var(--wa-commerce-muted) !important;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart a.shipping-calculator-button {
  min-height: var(--wa-cart-tap-sm);
  display: inline-flex;
  align-items: center;
  color: var(--wa-commerce-action) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

/* Descendants only — the wrapper's display stays WooCommerce's business. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .form-row {
  width: 100% !important;
  min-width: 0;
  float: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input.input-text, input[type="text"], select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--wa-cart-tap) !important;
  padding: 0 13px !important;
  border: 1px solid var(--wa-cart-line-field) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-commerce-cream) !important;
  color-scheme: dark;
  font-size: 14px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"] {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px !important;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-commerce-action) !important;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"]:hover {
  background: var(--wa-commerce-action) !important;
  color: var(--wa-commerce-ink) !important;
}

/* select2, if WooCommerce enhances the country/state selects. Its dropdown is
   appended to <body>, which is why these are chrome-scoped rather than
   cart-scoped. Nothing is hidden; colours only. UNVERIFIED: select2 may not be
   enqueued on this build's cart — these rules are inert if it is not. */
/* Route-qualified. These were chrome-scoped so the body-appended dropdown
   would match — but that also let them reach Checkout and My Account, where
   --wa-cart-line-field is undefined and the literal 0.22 fallback applied,
   reverting those routes' field borders below AA. select2 reparents to
   <body>, which still carries .woocommerce-cart, so the dropdown still
   matches on the cart. */
body.wa-reserve-custom-chrome.woocommerce-cart .select2-container--default .select2-selection,
body.wa-reserve-custom-chrome.woocommerce-cart .select2-container--default .select2-dropdown,
body.wa-reserve-custom-chrome.woocommerce-cart
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  border-color: var(--wa-cart-line-field, rgba(244, 240, 229, 0.4)) !important;
  border-radius: 0 !important;
  background: #0c0c0b !important;
  color: var(--wa-commerce-cream, #f4f0e5) !important;
}

body.wa-reserve-custom-chrome
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: var(--wa-commerce-action, #c87945) !important;
  color: #080807 !important;
}

/* Proceed to checkout — the ONE filled action on the page. The existing rule
   hovers it to cream; the approved mockup hovers every primary action to
   --action-hover #d58a54. min-height 54px already exists; height:auto here
   removes any inherited fixed height so a two-line label cannot clip. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  .checkout-button {
  height: auto !important;
  padding: 14px 20px !important;
  overflow-wrap: anywhere;
  text-align: center;
  transition: background-color var(--wa-cart-ease),
    border-color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  .checkout-button:hover {
  border-color: var(--wa-cart-action-hover) !important;
  background: var(--wa-cart-action-hover) !important;
  color: var(--wa-commerce-ink) !important;
}


/* --------------------------------------------------------------------------
 * 1.12 RESPONSIVE
 *
 *   860px  the line table becomes stacked cards (checkout.module.css collapses
 *          its two-column grid at this width).
 *   600px  compact chrome, 16px inputs, single-column actions.
 *   400px  the 320px floor.
 *
 * Why 860 and not WooCommerce's own 768: below ~1050px the cart shell is
 * already single column, and a six-column table with a 72px thumbnail, a 72px
 * quantity field and two money columns needs roughly 750px of content width.
 * At 860px the panel offers about 780px; at 800px it does not. Below 768 core's
 * smallscreen sheet stacks the table too, so 768-860 is precisely the band that
 * would otherwise scroll sideways with no fallback.
 * -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    /* `.productLine img` at <=620 in the mockup. One token drives both the
       image and the card's thumbnail column so they cannot drift apart. */
    --wa-cart-thumb: 58px;
    /* Touch layout: the remove control joins the 48px floor. */
    --wa-cart-tap-sm: max(48px, 3rem);
  }

  /* Nothing left to scroll once the table is cards. */
  body.wa-reserve-custom-chrome.woocommerce-cart form.woocommerce-cart-form {
    overflow-x: visible;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart,
  body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart > tbody {
    width: 100% !important;
    min-width: 0;
    display: block;
  }

  /*
   * thead is dropped rather than visually hidden. Once tr/td become grid and
   * block boxes the header/cell association is gone regardless, so a hidden run
   * of "Product Price Quantity Subtotal" would only duplicate the per-cell
   * labels restored below. This is what WooCommerce's own smallscreen sheet
   * does at 768px. thead is not a control.
   */
  body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart > thead {
    display: none;
  }

  /* One cart line = one card. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr:is(.woocommerce-cart-form__cart-item, .cart_item) {
    display: grid;
    grid-template-columns: var(--wa-cart-thumb) minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name     remove"
      "thumb price    price"
      "thumb quantity quantity"
      "thumb subtotal subtotal";
    align-items: center;
    gap: 8px 14px;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--wa-commerce-line) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr:is(.woocommerce-cart-form__cart-item, .cart_item)
    > td {
    width: auto !important;
    min-width: 0;
    display: block;
    padding: 0 !important;
    border: 0 !important;
    clear: none;
    text-align: left;
    white-space: normal;
    vertical-align: baseline;
  }

  /*
   * Below 768px WooCommerce's smallscreen sheet prints
   *   table.shop_table_responsive tr td::before { content: attr(data-title) ": " }
   * on EVERY cell. .product-remove and .product-thumbnail carry no data-title,
   * so they render a stray ": " next to the image and the remove control, and
   * .product-name renders a redundant "Product: " above a name that is already
   * the largest thing in the card. Reset all of them, then restore only the
   * three cells whose value genuinely needs a label.
   */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr
    > td::before {
    content: none !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail {
    grid-area: thumb;
    /* Core's smallscreen sheet hides this outright. Put it back. */
    display: block !important;
    align-self: start;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-name {
    grid-area: name;
    align-self: start;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-remove {
    grid-area: remove;
    align-self: start;
    justify-self: end;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-price {
    grid-area: price;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-quantity {
    grid-area: quantity;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-subtotal {
    grid-area: subtotal;
  }

  /* Label + value on one line, using the data-title attribute WooCommerce
     already prints on .product-name/.product-price/.product-quantity/
     .product-subtotal in core cart.php. No text is invented, no value is
     hard-coded, and .product-remove / .product-thumbnail — which carry no
     data-title — are gated out by the [data-title] attribute selector. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr
    > td:is(.product-price, .product-quantity, .product-subtotal) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 14px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr
    > td:is(.product-price, .product-quantity, .product-subtotal)[data-title]::before {
    /* Core smallscreen prints `attr(data-title) ": "` floated left; replaced
       with the system's eyebrow, unfloated and without the colon. */
    float: none !important;
    color: var(--wa-commerce-muted);
    content: attr(data-title) !important;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* The actions row and any plugin-injected row go full width. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item) {
    width: 100%;
    display: block;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item)
    > :is(td, th) {
    width: auto !important;
    display: block;
    text-align: left;
  }

  /* The containing <tr> is display:block here, so making the cell a flex
     container triggers no table fixup and the colspan is already irrelevant. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    padding: 22px 0 0 !important;
  }

  /* The clearfix pseudo would otherwise become a zero-width flex item and add
     one gap. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions::after {
    display: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    .coupon {
    float: none;
    flex: 1 1 320px;
    width: auto;
    max-width: 480px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    :is(button, input)[name="update_cart"] {
    float: none;
    flex: 0 0 auto;
    margin: 0 !important;
  }
}

@media (max-width: 600px) {
  /* 16px is the threshold below which iOS Safari zooms the viewport on focus;
     that zoom is itself a source of phantom horizontal overflow. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(td.product-quantity .quantity input.qty, td.actions input#coupon_code),
  body.wa-reserve-custom-chrome.woocommerce-cart
    .shipping-calculator-form
    :is(input.input-text, input[type="text"], select) {
    min-height: max(50px, 3.125rem) !important;
    font-size: 16px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-name
    > a {
    font-size: 14px;
  }

  /* Actions stack; every control is full width and >= 48px. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    .coupon {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  /* The joined edge only exists while the two controls sit side by side. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    input#coupon_code {
    border-right: 1px solid var(--wa-cart-line-field) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    :is(button, input):is([name="apply_coupon"], [name="update_cart"]) {
    width: 100% !important;
    flex: 1 1 100%;
  }
}

@media (max-width: 400px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-cart-thumb: 52px;
  }

  /* Remove moves onto the name row's right edge so the title keeps its full
     measure, and the money rows keep their label + value pairing. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > tbody
    > tr:is(.woocommerce-cart-form__cart-item, .cart_item) {
    grid-template-columns: var(--wa-cart-thumb) minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "quantity quantity"
      "subtotal subtotal";
    gap: 8px 12px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-remove {
    grid-area: name;
    align-self: start;
    justify-self: end;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-name {
    /* Clears the remove control: 48px target + 8px breathing room. */
    padding-right: 56px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-quantity
    .quantity,
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-quantity
    .quantity
    input.qty {
    width: 100%;
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
 * 1.13 EMPTY CART
 *
 * `p.cart-empty` also carries `.woocommerce-info`, so the card treatment comes
 * from the notice layer in Part 2; this only handles the layout of the pair and
 * the size of the return action.
 *
 * NOTE / OVERLAP: the single-column rule below touches the cart shell grid
 * declared at style.css ~7046. It is included because an empty cart otherwise
 * leaves a 320px empty second column. If the shell block is later given the
 * same rule, delete one of the two — do not keep both.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce:not(:has(form.woocommerce-cart-form)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 960px;
}

body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty {
  font-size: 15px;
  text-align: center;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop {
  display: flex;
  justify-content: center;
  margin: 20px auto 0 !important;
  text-align: center;
}

/* checkout.module.css `.placeOrder`: 54px, filled action, ink text,
   10px/850/0.13em uppercase. */
body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop a.button {
  box-sizing: border-box;
  height: auto !important;
  min-height: max(54px, 3.375rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px !important;
  border: 1px solid var(--wa-commerce-action) !important;
  border-radius: 0 !important;
  background: var(--wa-commerce-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-commerce-ink) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.3;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: background-color var(--wa-cart-ease),
    border-color var(--wa-cart-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop a.button:hover {
  border-color: var(--wa-cart-action-hover) !important;
  background: var(--wa-cart-action-hover) !important;
  color: var(--wa-commerce-ink) !important;
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop a.button {
    width: 100%;
  }
}


/* ==========================================================================
 * PART 2 — GLOBAL WOOCOMMERCE NOTICES
 *
 * Corrects the existing global notice block (style.css ~6425-6560). That block
 * is right about the palette and wrong about the box:
 *
 *  (a) it paints border + background + a 3px orange rule onto
 *      `.woocommerce-notices-wrapper` ITSELF. That wrapper is printed on every
 *      commerce template whether or not there is a notice in it, so an EMPTY
 *      bordered slab renders above the content on ordinary page loads. Fixed by
 *      stripping the wrapper to a bare stack and letting the notices carry the
 *      chrome.
 *  (b) it gives the same card treatment to `ul.woocommerce-error[role=alert]
 *      > li`, so every error line becomes a nested panel inside the panel.
 *      Fixed by resetting the li.
 *  (c) it cards `.wc-block-components-validation-error`, which is an inline
 *      per-field message, not a banner.
 *  (d) core's `::before` glyph is absolutely positioned inside a 3.5em left
 *      padding that the theme's `padding: 18px 20px 18px 24px` removes, so the
 *      tick/info mark lands on top of the message text. Fixed by reserving the
 *      gutter and positioning the glyph in it.
 *  (e) the mobile rule pushes the notice `.button` to `margin: 12px 0 0`, but
 *      the button is FIRST in WooCommerce's source order, so the space lands
 *      above the button and the text sits flush against it.
 *  (f) hover on notice buttons goes to cream; the approved mockup hovers every
 *      primary action to --action-hover #d58a54.
 *
 * The notice box is `display: flow-root`, NOT flex or grid. Flex and grid
 * blockify inline children, which would tear "Have a coupon? <a>Click here…</a>"
 * into two separate boxes — the coupon and login toggles on checkout are
 * `.woocommerce-info` and contain exactly that markup.
 *
 * Nothing here sets display/visibility/opacity on a notice, a notice link, a
 * dismiss control, or an error <li>. Content, links, dismiss behaviour and
 * error text are untouched.
 * ========================================================================== */

body.wa-reserve-custom-chrome {
  --wa-notice-panel: #10100f;
  --wa-notice-line: rgba(244, 240, 229, 0.15);
  --wa-notice-cream: #f4f0e5;
  --wa-notice-soft: #d7d1c4;
  --wa-notice-action: #c87945;
  --wa-notice-action-hover: #d58a54;
  --wa-notice-ink: #0b0c0a;
  /* Already used by this theme for error accents at style.css ~2352. */
  --wa-notice-error: #df715f;
  --wa-notice-gutter: clamp(36px, 4vw, 46px);
  --wa-notice-tap: max(44px, 2.75rem);
}

/* --- 2.1 Wrapper: a stack, not a slab ---------------------------------- */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .blocksy-woo-messages-default,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout
  ) {
  min-width: 0;
  max-width: 100%;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-notice-soft);
}

/* An empty wrapper occupies nothing but stays in the DOM and in the
   accessibility tree, so plugins that inject notices into it still work.
   Deliberately not display:none. */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .blocksy-woo-messages-default,
    .woocommerce-NoticesGroup
  ):empty {
  margin: 0 !important;
}

/* --- 2.2 The notice card ------------------------------------------------
 * notices.module.css `.notice`: 1px hairline, 3px action left rule, --panel,
 * --soft text, 17px 18px, 0 12px 34px rgba(0,0,0,.22).
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  position: relative;
  min-width: 0;
  max-width: 100%;
  display: flow-root;
  margin: 0 0 14px !important;
  padding: 17px 18px 17px var(--wa-notice-gutter) !important;
  border: 1px solid var(--wa-notice-line) !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22) !important;
  color: var(--wa-notice-soft) !important;
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
  opacity: 1 !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):last-child {
  margin-bottom: 0 !important;
}

/* Core positions its glyph absolutely inside a 3.5em gutter. The gutter is
   restored above; this puts the glyph back in it. `content` is never touched,
   and no width/height is imposed in case the mark is an SVG background. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  position: absolute;
  top: 1.15em;
  left: clamp(13px, 1.5vw, 17px);
  margin: 0;
  color: var(--wa-notice-action) !important;
  font-size: 13px;
  line-height: 1;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  svg {
  fill: var(--wa-notice-action) !important;
  color: var(--wa-notice-action) !important;
}

/* Errors carry the one palette variation this theme already uses. */
body.wa-reserve-custom-chrome .woocommerce-error {
  border-left-color: var(--wa-notice-error) !important;
}

body.wa-reserve-custom-chrome .woocommerce-error::before {
  color: var(--wa-notice-error) !important;
}

/* Body copy. Anything a plugin nests inside a notice inherits, so a
   reservation or stock message printed into a notice stays visible. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(p, span, div, strong, em, small, li, time, code) {
  color: inherit !important;
  opacity: 1 !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  p {
  margin: 0 0 8px;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  p:last-child {
  margin-bottom: 0;
}

/* An eyebrow, where WooCommerce prints one. notices.module.css `.notice small`:
   action, 8px, 800, 0.13em, uppercase. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  > small {
  display: block;
  margin-bottom: 7px;
  color: var(--wa-notice-action) !important;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* --- 2.3 Error lists ---------------------------------------------------- */
body.wa-reserve-custom-chrome :is(ul, ol).woocommerce-error {
  margin-inline: 0 !important;
}

/* Correction: the existing block gives every <li> its own border, background
   and shadow, producing a panel inside a panel. */
body.wa-reserve-custom-chrome :is(ul, ol).woocommerce-error > li {
  min-width: 0;
  max-width: 100%;
  display: list-item;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit;
  line-height: inherit;
  list-style: none;
  opacity: 1 !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome :is(ul, ol).woocommerce-error > li + li {
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--wa-notice-line) !important;
}

/* --- 2.4 Links inside notices ------------------------------------------- */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a:not(.button):not(.wc-forward) {
  color: var(--wa-notice-cream) !important;
  text-decoration: underline;
  text-decoration-color: var(--wa-notice-action);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a:not(.button):not(.wc-forward):hover {
  color: var(--wa-notice-action) !important;
}

/* --- 2.5 The action inside a notice -------------------------------------
 * notices.module.css `.notice button`: >=42px, action fill, #0b0c0a text,
 * 9px/800/0.11em uppercase, hover #d58a54. Raised to a 44px floor (48px on
 * mobile) for touch.
 *
 * WooCommerce prints the button BEFORE the message text
 * (`<a class="button wc-forward">View cart</a> Product added…`), so it is
 * floated right rather than reordered — reordering would need flex, and flex
 * would break inline links elsewhere in the same notice.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, button.button, input.button, a.wc-forward) {
  box-sizing: border-box;
  float: right;
  width: auto !important;
  max-width: 55%;
  height: auto !important;
  min-height: var(--wa-notice-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px 18px !important;
  padding: 8px 16px !important;
  border: 1px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-action) !important;
  background-color: var(--wa-notice-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-notice-ink) !important;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease, border-color 140ms ease;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, button.button, input.button, a.wc-forward):hover {
  border-color: var(--wa-notice-action-hover) !important;
  background: var(--wa-notice-action-hover) !important;
  background-color: var(--wa-notice-action-hover) !important;
  color: var(--wa-notice-ink) !important;
}

/* --- 2.6 Dismiss controls ----------------------------------------------
 * Never hidden, never shrunk below a 44px target, always visible against the
 * panel. WooCommerce owns the dismiss behaviour and its cookie.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-store-notice__dismiss-link,
    .wc-block-components-notice-banner__dismiss,
    .woocommerce-notice__dismiss
  ) {
  min-width: var(--wa-notice-tap);
  min-height: var(--wa-notice-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--wa-notice-cream) !important;
  cursor: pointer;
  opacity: 1 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-store-notice__dismiss-link,
    .wc-block-components-notice-banner__dismiss,
    .woocommerce-notice__dismiss
  ):hover {
  color: var(--wa-notice-action) !important;
}

/* --- 2.7 Store notice ---------------------------------------------------
 * Core fixes this to the viewport edge. position/inset are left alone so the
 * dismiss cookie and placement keep working; palette only.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome .woocommerce-store-notice {
  border: 0 !important;
  border-top: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-image: none !important;
  color: var(--wa-notice-soft) !important;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- 2.8 Block-cart / block-checkout notices ---------------------------- */
body.wa-reserve-custom-chrome
  :is(.wc-block-components-notice-banner, .wc-block-store-notice) {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--wa-notice-line) !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-notice-soft) !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome .wc-block-components-notice-banner.is-error {
  border-left-color: var(--wa-notice-error) !important;
}

body.wa-reserve-custom-chrome
  :is(.wc-block-components-notice-banner, .wc-block-store-notice)
  :is(.wc-block-components-notice-banner__content, p, li, span, strong) {
  color: inherit !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome .wc-block-components-notice-banner > svg {
  fill: var(--wa-notice-action) !important;
}

/* Correction: a per-field validation message is inline text, not a banner. The
   existing block cards it. */
body.wa-reserve-custom-chrome .wc-block-components-validation-error {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 6px 0 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #e59480 !important;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome .wc-block-components-validation-error p {
  color: inherit !important;
}

/* --- 2.9 Notice focus --------------------------------------------------- */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-store-notice,
    .wc-block-components-notice-banner
  )
  :is(a, button, input):focus-visible {
  outline: 2px solid var(--wa-notice-action) !important;
  outline-offset: 3px !important;
  border-radius: 0;
}

/* --- 2.10 Notices at small widths and 200% zoom ------------------------- */
@media (max-width: 800px) {
  /* notices.module.css drops the action onto its own row at 800px. */
  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
    :is(a.button, button.button, input.button, a.wc-forward) {
    max-width: 100%;
    margin: 0 0 12px !important;
  }
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome {
    --wa-notice-gutter: 32px;
    --wa-notice-tap: max(48px, 3rem);
  }

  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    padding: 16px 14px 16px var(--wa-notice-gutter) !important;
    font-size: 13px;
  }

  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
    left: 11px;
  }

  /* Full-width action. It still precedes the text because that is
     WooCommerce's own source order — the margin now sits BELOW the button,
     which is the bug in the rule this replaces. */
  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
    :is(a.button, button.button, input.button, a.wc-forward) {
    float: none;
    width: 100% !important;
    max-width: 100%;
    display: flex;
    margin: 0 0 14px !important;
  }
}


/* ==========================================================================
 * PART 3 — FOCUS, MOTION, FORCED COLORS
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(
    form.woocommerce-cart-form,
    .cart-collaterals,
    p.return-to-shop,
    .shipping-calculator-form
  )
  :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wa-commerce-action, #c87945) !important;
  outline-offset: 2px !important;
  border-radius: 0;
}

/* Inside the horizontally scrollable form the ring is pulled in one pixel so
   it cannot be clipped by the scroll container's padding box. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(input.qty, input#coupon_code):focus-visible {
  outline: 2px solid var(--wa-commerce-action, #c87945) !important;
  outline-offset: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(form.woocommerce-cart-form, .cart-collaterals, p.return-to-shop),
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(form.woocommerce-cart-form, .cart-collaterals, p.return-to-shop) *,
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(form.woocommerce-cart-form, .cart-collaterals, p.return-to-shop)
    *::before,
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(form.woocommerce-cart-form, .cart-collaterals, p.return-to-shop)
    *::after,
  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td) {
    border-color: CanvasText !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(
      a.remove,
      input.qty,
      input#coupon_code,
      [name="apply_coupon"],
      [name="update_cart"]
    ),
  body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop a.button,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .wc-proceed-to-checkout
    .checkout-button {
    border: 1px solid ButtonBorder !important;
    forced-color-adjust: auto;
  }

  body.wa-reserve-custom-chrome .reserved-stock-pro-cart-expiry,
  body.wa-reserve-custom-chrome
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    border: 1px solid CanvasText !important;
  }
}


/* ==========================================================================
 * WHITE ASH RESERVE — NATIVE WOOCOMMERCE CART COLLATERALS  (reviewed build)
 * .cart-collaterals / .cart_totals / totals rows / shipping + calculator /
 * .wc-proceed-to-checkout / cross-sells
 *
 * Presentation only. WooCommerce owns every total, fee, tax line, coupon,
 * shipping package, shipping method, nonce and the checkout hand-off.
 * Nothing here hard-codes a price, total, quantity or product name, hides a
 * plugin-owned control, or sets a fixed height.
 *
 * Every rule is scoped under body.wa-reserve-custom-chrome.woocommerce-cart.
 * (body_class adds wa-reserve-custom-chrome in functions.php line 624.)
 *
 * PLACEMENT: append immediately after the marker
 *   "Approved checkout structural parity - END"   (style.css line 7711)
 * and ABOVE the "Future Quick Shop release styles" boundary comment (7713).
 * Several rules below are corrections of rules that already ship at
 * ~7220-7316, so placement is load-bearing.
 *
 * WHY SO MUCH !important: the existing cart block declares padding, border,
 * background and color on these exact elements with !important, and the
 * sitewide rule at line 161
 *   body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
 *     :where(button.button, a.button, input.button, #place_order)
 *     { background-color: #c87945 !important }
 * paints every .button on the cart orange with !important. A later rule
 * cannot beat an earlier !important without one. !important is omitted
 * wherever nothing upstream declares it.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 0. REVIEW LOG — what changed against the submitted draft
 *
 * FIXED  a) `order: -1` on .cart_totals removed. The DOM prints cross-sells
 *           first; flex `order` reversed it visually only, so keyboard and
 *           screen-reader order no longer matched the visual order inside a
 *           purchase flow (WCAG 1.3.2 / 2.4.3). functions.php has no
 *           cross-sell re-prioritisation today (grepped: no
 *           woocommerce_cart_collaterals hook), so the correct fix is two
 *           lines of PHP, given in section 2. CSS must not fake it.
 * FIXED  b) `.woocommerce-remove-coupon` was unreachable. The discount rule
 *           `... .cart_totals table.shop_table tr.cart-discount td` is
 *           (0,5,4) with !important; the remove-coupon rule was (0,4,2) with
 *           !important, so the link rendered --action, not muted. Selector
 *           re-anchored through `table.shop_table tr` to (0,5,4)+.
 * FIXED  c) `table-layout: fixed` + `th { width: 40% }` locked the shipping
 *           cell to 60% of a ~400px rail — the country/state/postcode form
 *           and its Update button lived in ~200px at desktop. Dropped to
 *           auto layout with a width hint so the shipping cell can take the
 *           room it needs.
 * FIXED  d) Select2 got a fixed `height` and a fixed `line-height: 48px`
 *           (fixed heights, and a long country name could not wrap).
 *           Replaced with flex centring + auto height. Added the
 *           `width: 100% !important` guard for select2's known zero-width
 *           bug when it initialises inside the hidden calculator section.
 * FIXED  e) The eyebrow rule matched a bare `small` inside any totals cell
 *           and forced 9px + uppercase on it. Reserved Stock Pro and similar
 *           plugins print reservation copy in exactly that position; 9px
 *           uppercase is close enough to illegible to count as restyling it
 *           into invisibility. Now only `.includes_tax` / `.tax_label`
 *           (core classes) get the eyebrow; a bare `small` keeps its size.
 * FIXED  f) `td::before { content: none }` applied to every td. Narrowed to
 *           `td[data-title]::before`, which is exactly and only core's
 *           generated responsive label.
 * FIXED  g) `.discount` and `.coupon-discount` are not WooCommerce core cart
 *           classes (cart-totals.php emits `cart-discount coupon-{slug}`).
 *           Dropped; only `.cart-discount` remains.
 * FIXED  h) The `.wc-proceed-to-checkout > .button:not(.checkout-button)`
 *           demotion could repaint a gateway's own express button. Now
 *           excludes gateway-branded classes.
 * FIXED  i) `border-radius: 0` inside the :focus-visible rule changed an
 *           element's shape on focus. Removed.
 * FIXED  j) Sub-48px mobile targets: calculator toggle, remove-coupon link
 *           and cross-sell add-to-cart were 44px at every width. Now 48px
 *           at <=600px. Shipping-method <label> now stretches to fill the
 *           row so the whole 48px band is the tap target, not just the dot.
 * FIXED  k) Totals-table rules re-anchored on `> tbody > tr >` child chains
 *           so they cannot reach into a nested table a plugin renders inside
 *           a totals cell.
 *
 * SUPERSEDES in the shipped sheet (safe to delete once this is in):
 *   line 7272  .cart_totals :where(.order-total, .order-total .amount, strong)
 *              { color: cream !important }
 *              Paints the whole total row cream, and catches EVERY <strong>
 *              in .cart_totals including the "Shipping to <strong>…</strong>"
 *              destination string. Approved .totalRow is a cream Georgia 20px
 *              LABEL with an --action VALUE. Section 5.5 corrects both.
 *   line 7310  .wc-proceed-to-checkout .checkout-button:hover
 *              { background: cream !important }
 *              Every approved mockup hovers the primary action to
 *              --action-hover #d58a54 (.placeOrder:hover, .notice
 *              button:hover). Section 7 corrects it. The same defect exists
 *              sitewide at ~292 and ~6319 for checkout/account — out of
 *              scope here, flag separately.
 *
 * KEPT — already matches the approved mockups, only extended here:
 *   the --wa-commerce-* token block; .cart-collaterals { grid-column: 2 }
 *   and the 1050px single-column reflow; panel chrome on
 *   .cart_totals/.cross-sells (1px hairline, #10100f, square, no shadow) =
 *   the checkout .orderPanel; the > h2 serif scale; input accent-color and
 *   the :focus-visible outline.
 * -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
 * 1. TOKENS
 * Own namespace (--wa-ct-*) so this layer cannot collide with the existing
 * --wa-commerce-* / --wa-account-* sets or with a sibling cart-table layer.
 * Values are the approved palette; --wa-ct-field is the checkout mockup's
 * input ground (#0c0c0b), which sits DARKER than the panel.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart {
  --wa-ct-ink: #080807;
  --wa-ct-field: #0c0c0b;
  --wa-ct-panel: #10100f;
  --wa-ct-raised: #151513;
  --wa-ct-cream: #f4f0e5;
  --wa-ct-soft: #d7d1c4;
  --wa-ct-muted: #958f84;
  /* Mockup value. See --wa-cart-placeholder above. */
  --wa-ct-placeholder: #6e6a62;
  --wa-ct-action: #c87945;
  --wa-ct-action-hover: #d58a54;
  --wa-ct-action-ink: #0b0c0a;
  --wa-ct-line: rgba(244, 240, 229, 0.15);
  /* Aliased for the same reason as --wa-cart-line-field above. */
  --wa-ct-line-strong: var(--wa-commerce-line-strong);
  --wa-ct-line-hover: rgba(244, 240, 229, 0.4);
  --wa-ct-serif: Georgia, "Times New Roman", serif;

  /* Control floor. rem, so the 48px floor survives text-only zoom at 200%
     and a raised root font size. Every one is a min-height, never a height. */
  --wa-ct-control: 3rem;        /* 48px — inputs and secondary actions */
  --wa-ct-control-lg: 3.375rem; /* 54px — the terminal action          */
  --wa-ct-hit: 2.75rem;         /* 44px — desktop tertiary links       */
  --wa-ct-gap: 14px;
  --wa-ct-ease: 140ms ease;
}


/* --------------------------------------------------------------------------
 * 2. THE COLLATERALS RAIL
 * The shipped sheet already places this in column 2 and drops it to one
 * column at 1050px. This adds internal stacking and the overflow guards.
 *
 * RAIL ORDER: WooCommerce hooks woocommerce_cross_sell_display and
 * woocommerce_cart_totals to woocommerce_cart_collaterals at priorities 10
 * and 10, so the DOM prints cross-sells FIRST. The approved rail leads with
 * the order panel. That is a DOM problem and it is fixed in PHP, not here —
 * add to functions.php:
 *
 *   remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
 *   add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display', 20 );
 *
 * The draft used `order: -1` on .cart_totals instead. That is deliberately
 * NOT carried forward: it desynchronises visual order from tab/reading order
 * inside a purchase flow. Until the PHP lands, cross-sells sit above the
 * totals and the page is still correct — just not yet the approved order.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  min-width: 0; /* without this a long method label widens the grid track */
}

/* The shipped panel rule uses `margin: 0 0 24px !important`; the flex gap now
   owns the rhythm. :is() outranks the shipped :where() so this wins on
   specificity, not only on source order. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells) {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  overflow-wrap: anywhere; /* no long token can push the panel wider */
}


/* --------------------------------------------------------------------------
 * 3. PANEL HEADINGS
 * The checkout order panel heading is a plain serif h2. The numbered 32px
 * step boxes in .sectionHeading > span belong to the form sections in the
 * details column, not to the order panel — so no counter is generated here.
 * That is a match to the mockup, not an omission.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells)
  > h2 {
  margin: 0 0 22px !important;
  color: var(--wa-ct-cream) !important;
  font-family: var(--wa-ct-serif) !important;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  overflow-wrap: anywhere;
}


/* ==========================================================================
 * 4. THE TOTALS TABLE
 * Geometry from the approved .orderTable: border-collapse, bottom hairline
 * only, no outer border, no vertical rules, muted uppercase label column,
 * right-aligned values, doubled padding on the total row.
 *
 * Every rule below walks `> tbody > tr >` so it cannot reach into a nested
 * table a plugin renders inside a totals cell.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  color: var(--wa-ct-soft) !important;
  /* Auto layout on purpose. The shipping cell carries a whole calculator
     form; a fixed 40/60 split starved it to ~200px in a 400px rail. */
  table-layout: auto;
}

/*
 * WooCommerce prints this table as `shop_table shop_table_responsive`, and
 * woocommerce.css converts it below 768px: thead hidden, `tbody th` hidden,
 * `tr td` forced to display:block, and
 * `td::before { content: attr(data-title) ": " }`. That removes the real
 * Subtotal / Shipping / Total <th> labels and re-prints them as generated
 * text. Neutralised here and re-stacked deliberately at 600px in section 9,
 * so the panel behaves identically whether or not woocommerce.css is
 * enqueued and the <th> labels are never removed.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > :is(th, td) {
  display: table-cell !important;
  padding: 15px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wa-ct-line) !important;
  background: transparent !important;
  vertical-align: baseline;
  overflow-wrap: anywhere; /* wrap rather than overflow the panel */
}

/* Exactly and only core's generated responsive label. Scoped to
   [data-title] so a plugin's decorative ::before survives. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td[data-title]::before {
  content: none !important;
}

/* Label column — the mockup's `.orderTable tfoot th` eyebrow.
   `width` is a hint under auto layout, not a lock. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > th {
  width: 38%;
  padding-right: var(--wa-ct-gap) !important;
  color: var(--wa-ct-muted) !important;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-align: left;
  text-transform: uppercase;
}

/* Value column. 11px rather than the mockup's 10px: in the checkout these
   are a footnote under a full line-item table, on the cart they are the
   panel's entire content. Tabular figures keep the column aligned. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td {
  color: var(--wa-ct-soft) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: right;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  :is(.amount, bdi, .woocommerce-Price-amount) {
  color: inherit !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  .woocommerce-Price-currencySymbol {
  color: var(--wa-ct-muted) !important;
}

/* A struck original price (a fee or subtotal shown before a discount). */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  del {
  color: var(--wa-ct-muted) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  ins {
  background: none;
  color: inherit;
  text-decoration: none;
}

/*
 * Core's own tax hint classes ONLY.
 * The draft matched a bare `small` here and forced 9px uppercase on it.
 * Reserved Stock Pro and comparable plugins print reservation copy in
 * exactly that slot, and 9px uppercase is close enough to unreadable to
 * count as restyling it into invisibility. `.includes_tax` and `.tax_label`
 * are the two classes WooCommerce core actually emits.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  :is(.includes_tax, .tax_label) {
  display: block;
  margin-top: 5px;
  color: var(--wa-ct-muted) !important;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* Anything else a plugin prints in a totals cell keeps a readable size and
   its own casing. Colour only — this rule must never shrink or hide
   reservation, stock or fulfilment messaging. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td
  small:not(.includes_tax):not(.tax_label) {
  display: block;
  margin-top: 5px;
  color: var(--wa-ct-muted) !important;
  font-size: 11px;
  line-height: 1.5;
  text-transform: none;
}


/* --------------------------------------------------------------------------
 * 5. INDIVIDUAL TOTAL ROWS
 * -------------------------------------------------------------------------- */

/* 5.1 First row loses its top edge; the heading above already separates. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:first-child
  > :is(th, td) {
  padding-top: 0 !important;
}

/* 5.2 Fees (tr.fee) and taxes (tr.tax-rate) get no special casing at all —
   they inherit the subtotal row, so a store that switches on itemised taxes
   gets a consistent ledger instead of a fourth invented type style. */

/* 5.3 Discount rows. `cart-discount` is the class cart-totals.php emits
   (alongside a dynamic `coupon-{slug}`); the draft also listed `.discount`
   and `.coupon-discount`, neither of which is core cart markup. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.cart-discount
  > td,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.cart-discount
  > td
  :is(.amount, bdi) {
  color: var(--wa-ct-action) !important;
}

/*
 * 5.4 Remove-coupon stays a link, never a button — a destructive action must
 * not compete with Proceed to checkout.
 *
 * SPECIFICITY: wc_cart_totals_coupon_html() renders this link INSIDE the
 * discount <td>, so rule 5.3 above ((0,5,4), !important) was overriding the
 * draft's (0,4,2) link rule and the link rendered orange. Anchored through
 * `table.shop_table > tbody > tr` to (0,5,5) so it actually applies.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  a.woocommerce-remove-coupon {
  min-height: var(--wa-ct-hit);
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 0;
  color: var(--wa-ct-muted) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-color: var(--wa-ct-line-hover);
  text-transform: uppercase;
  text-underline-offset: 3px;
  transition: color var(--wa-ct-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  a.woocommerce-remove-coupon:hover,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  a.woocommerce-remove-coupon:focus-visible {
  color: var(--wa-ct-action) !important;
  text-decoration-color: currentColor;
}

/* 5.5 ORDER TOTAL — the approved .totalRow.
   Label: cream Georgia 20px, no bottom rule, doubled padding.
   Value: --action 15px. This is the correction to the shipped rule at 7272,
   which paints the whole row cream. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > :is(th, td) {
  padding-top: 21px !important;
  padding-bottom: 21px !important;
  border-bottom: 0 !important;
  font-family: var(--wa-ct-serif) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  vertical-align: baseline;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > th {
  color: var(--wa-ct-cream) !important;
  font-size: clamp(18px, 1.6vw, 20px);
  letter-spacing: -0.02em;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > td,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > td
  :is(.amount, bdi, strong, .woocommerce-Price-amount) {
  color: var(--wa-ct-action) !important;
  font-family: var(--wa-ct-serif) !important;
  font-size: 15px;
  font-weight: 400 !important;
}

/* The currency symbol keeps the row colour here — muting it inside an orange
   serif figure reads as a rendering fault. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > td
  .woocommerce-Price-currencySymbol {
  color: inherit !important;
}

/* The "(includes $x tax)" line under the total drops back to sans + muted. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > td
  :is(small, .includes_tax) {
  color: var(--wa-ct-muted) !important;
  font-family: inherit !important;
  font-size: 10px !important;
}


/* ==========================================================================
 * 6. SHIPPING
 * The shipping row's <td> carries the whole package: the method list, the
 * "Shipping to …" destination line, the calculator toggle and the calculator
 * form. Method rows are EXTRAPOLATED from the approved checkout
 * .paymentMethods labels — #0c0c0b field ground, hairline border, --action
 * border when selected — because that is the system's only
 * "choose one of these" pattern.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:is(.woocommerce-shipping-totals, .shipping)
  > td {
  text-align: left;
  font-size: 12px;
}

/* Multiple shipping packages each print their own <th>/<td> pair. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:is(.woocommerce-shipping-totals, .shipping)
  > th {
  vertical-align: top;
}

/* 6.1 Method list.
   NOTE: :is(ul#shipping_method, …) inherits the ID's specificity, which is
   intentional — it has to beat Blocksy's own list resets. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods) {
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  > li {
  min-height: var(--wa-ct-hit);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 9px 11px;
  border: 1px solid var(--wa-ct-line);
  border-radius: 0;
  background: var(--wa-ct-field);
  color: var(--wa-ct-soft) !important;
  list-style: none !important;
  text-indent: 0 !important;
  transition: border-color var(--wa-ct-ease), background-color var(--wa-ct-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  > li:hover {
  border-color: var(--wa-ct-line-hover);
}

/* Progressive enhancement: without :has() the row simply has no selected
   state, which is why the radio itself is also accent-coloured. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  > li:has(input:checked) {
  border-color: var(--wa-ct-action);
  background: var(--wa-ct-raised);
}

/* The radio glyph itself is 18px, matching the mockup's .paymentMethods
   input. It is NOT the touch target — the <label> below stretches to fill
   the whole row, so the full 44/48px band is tappable. */
body.wa-reserve-custom-chrome.woocommerce-cart
  ul#shipping_method
  input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--wa-ct-action);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  label {
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0 !important;
  padding: 6px 0;
  color: var(--wa-ct-soft) !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere; /* long carrier names wrap, never overflow */
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  label
  :is(.amount, bdi) {
  color: var(--wa-ct-cream) !important;
  font-variant-numeric: tabular-nums;
}

/* A single available method renders as plain text with a hidden input — keep
   it reading as a statement, not as a disabled control. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  > li:not(:has(input[type="radio"])) {
  background: transparent;
  border-color: var(--wa-ct-line);
}

/* 6.2 "No shipping options" / package notices core prints in the cell, and
   the destination line. Colour and measure only — never hidden, never
   shrunk below 11px. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:is(.woocommerce-shipping-totals, .shipping)
  > td
  > p {
  margin: 12px 0 0;
  color: var(--wa-ct-muted) !important;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:is(.woocommerce-shipping-totals, .shipping)
  > td
  > p:first-child {
  margin-top: 0;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  p.woocommerce-shipping-destination {
  margin: 12px 0 0 !important;
  color: var(--wa-ct-muted) !important;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* The shipped rule at 7272 catches this <strong> and paints it cream via
   `.cart_totals :where(…, strong)`. Restated here so the destination reads
   as emphasis inside a muted line rather than as a heading. */
body.wa-reserve-custom-chrome.woocommerce-cart
  p.woocommerce-shipping-destination
  strong {
  color: var(--wa-ct-soft) !important;
  font-weight: 650;
}

/* 6.3 Calculator toggle — tertiary tier: no border, uppercase micro, action.
   `.shipping-calculator-button` is core (cart-shipping.php). */
body.wa-reserve-custom-chrome.woocommerce-cart a.shipping-calculator-button {
  min-height: var(--wa-ct-hit);
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  color: var(--wa-ct-action) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-decoration-color: var(--wa-ct-action);
  text-transform: uppercase;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  transition: color var(--wa-ct-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  a.shipping-calculator-button:hover {
  color: var(--wa-ct-cream) !important;
}

/*
 * 6.4 Calculator form.
 * `section.shipping-calculator-form` ships with an inline style="display:none"
 * and is opened by WooCommerce's own slideToggle. NOTHING below declares
 * display, height, max-height, overflow, visibility or opacity on it, so the
 * native toggle keeps working in BOTH directions. Do not add one.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-shipping-calculator {
  margin: 12px 0 0 !important;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart .shipping-calculator-form {
  padding-top: 12px;
  border-top: 1px solid var(--wa-ct-line);
  margin-top: 12px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  p.form-row {
  margin: 0 0 10px !important;
  padding: 0 !important;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(
    input.input-text,
    input[type="text"],
    select,
    .select2-container .select2-selection--single
  ) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--wa-ct-control) !important;
  padding: 0 13px !important;
  border: 1px solid var(--wa-ct-line-strong) !important;
  border-radius: 0 !important;
  background: var(--wa-ct-field) !important;
  color: var(--wa-ct-cream) !important;
  color-scheme: dark;
  font: inherit;
  font-size: 14px;
  transition: border-color var(--wa-ct-ease);
}

/*
 * SELECT2 / SELECTWOO — library markup bundled with WooCommerce, NOT core
 * template markup. Everything below is colour and box sizing only: no
 * display, no visibility, no fixed height, so if the library markup changes
 * the control degrades to its own default rather than breaking.
 *
 * `width: 100% !important` is the guard for select2's long-standing
 * zero-width bug when it initialises inside a display:none container —
 * which is exactly what section.shipping-calculator-form is on page load.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .select2-container {
  width: 100% !important;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .select2-container
  .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto !important; /* undo the library's fixed 28px, do not replace it */
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  padding: 0 22px 0 0 !important;
  color: var(--wa-ct-cream) !important;
  line-height: 1.4 !important; /* was a fixed 48px — a long country name could not wrap */
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  top: 0;
  bottom: 0;
  height: auto !important;
  display: flex;
  align-items: center;
}

/* The dropdown is appended to <body>, so it is still inside the wa- scope but
   outside .shipping-calculator-form. Colour only. Without this it renders as
   the library's white panel on a black cart. */
body.wa-reserve-custom-chrome.woocommerce-cart .select2-dropdown {
  border: 1px solid var(--wa-ct-line-strong) !important;
  border-radius: 0 !important;
  background: var(--wa-ct-panel) !important;
  color: var(--wa-ct-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .select2-search--dropdown
  .select2-search__field {
  min-height: var(--wa-ct-control);
  border: 1px solid var(--wa-ct-line-strong) !important;
  background: var(--wa-ct-field) !important;
  color: var(--wa-ct-cream) !important;
  font-size: 16px; /* iOS does not zoom the viewport on focus */
}

body.wa-reserve-custom-chrome.woocommerce-cart .select2-results__option {
  color: var(--wa-ct-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .select2-results__option--highlighted {
  background: var(--wa-ct-action) !important;
  color: var(--wa-ct-action-ink) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input, select):hover {
  border-color: var(--wa-ct-line-hover) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input, select):focus {
  border-color: var(--wa-ct-action) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  input::placeholder {
  color: var(--wa-ct-placeholder);
  opacity: 1;
}

/* Update-totals button = SECONDARY tier (transparent, action border, action
   text, inverts on hover), matching the mockup's .coupon button. It must not
   read as a second primary action next to Proceed to checkout — which is what
   the sitewide !important rule at style.css:161 currently makes it. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"] {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--wa-ct-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 0 !important;
  padding: 10px 16px !important;
  border: 1px solid var(--wa-ct-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-ct-action) !important;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: background-color var(--wa-ct-ease), color var(--wa-ct-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"]:hover {
  background: var(--wa-ct-action) !important;
  color: var(--wa-ct-action-ink) !important;
}


/* ==========================================================================
 * 7. PROCEED TO CHECKOUT — the page's single terminal action.
 * `.wc-proceed-to-checkout` is rendered INSIDE `.cart_totals` by
 * cart-totals.php, so it sits within the panel.
 * The approved .placeOrder: full width, 54px, filled --action, ink label,
 * 10px/850/0.13em uppercase, square, hover to --action-hover.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-cart .wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 24px 0 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button {
  box-sizing: border-box;
  width: 100% !important;
  min-height: var(--wa-ct-control-lg) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 1px solid var(--wa-ct-action) !important;
  border-radius: 0 !important;
  background: var(--wa-ct-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-ct-action-ink) !important;
  font-family: inherit;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere; /* a translated label wraps, never overflows */
  transition: background-color var(--wa-ct-ease), border-color var(--wa-ct-ease);
}

/* CORRECTION to style.css:7310, which hovers the primary action to cream.
   Every approved mockup hovers it to --action-hover. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button:hover,
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button:focus-visible {
  border-color: var(--wa-ct-action-hover) !important;
  background: var(--wa-ct-action-hover) !important;
  color: var(--wa-ct-action-ink) !important;
}

/*
 * Anything ELSE a plugin adds to this container (a "continue shopping" link,
 * a theme's secondary CTA) drops to the ghost tier so the panel keeps exactly
 * one primary action. Nothing is hidden.
 *
 * Gateway-branded express buttons are excluded by name: those controls carry
 * mandated brand colours in their provider's terms, and a gateway that
 * renders its button as an <a class="button"> must not be repainted orange
 * OR ghosted by this theme. Iframe- and div-rendered gateway buttons never
 * matched this selector in the first place.
 */
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  > :is(a, button).button:not(.checkout-button):not([class*="paypal"]):not([class*="stripe"]):not([class*="apple"]):not([class*="google"]):not([class*="gpay"]):not([class*="express"]):not([class*="amazon"]):not([class*="klarna"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--wa-ct-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid var(--wa-ct-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-ct-action) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  > :is(a, button).button:not(.checkout-button):not([class*="paypal"]):not([class*="stripe"]):not([class*="apple"]):not([class*="google"]):not([class*="gpay"]):not([class*="express"]):not([class*="amazon"]):not([class*="klarna"]):hover {
  background: var(--wa-ct-action) !important;
  color: var(--wa-ct-action-ink) !important;
}


/* ==========================================================================
 * 8. CROSS-SELLS — EXTRAPOLATED. There is no approved cross-sell mockup;
 * this reuses the account quick-grid card (panel ground, hairline, raised on
 * hover) and the checkout .productLine type (serif cream title, muted meta).
 * This is the most invented block in the file and the easiest to delete.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-cart .cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product {
  width: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--wa-ct-line);
  background: var(--wa-ct-raised);
  float: none !important;
  transition: border-color var(--wa-ct-ease);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product:hover,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product:focus-within {
  border-color: var(--wa-ct-line-hover);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--wa-ct-line);
  margin: 0 !important;
  object-fit: cover;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  :is(h2, h3, .woocommerce-loop-product__title) {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wa-ct-cream) !important;
  font-family: var(--wa-ct-serif) !important;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  :is(.price, .woocommerce-Price-amount) {
  color: var(--wa-ct-soft) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  .price
  del {
  color: var(--wa-ct-muted) !important;
}

/* Cross-sell add-to-cart is a secondary action inside a rail whose primary
   action is Proceed to checkout. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  a.button {
  min-height: var(--wa-ct-hit) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto 0 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--wa-ct-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-ct-action) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  a.button:hover {
  background: var(--wa-ct-action) !important;
  color: var(--wa-ct-action-ink) !important;
}

/* Core's "View cart" confirmation link after an AJAX add. Kept visible and
   kept as a link — it is the only feedback an AJAX add gives. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cross-sells
  ul.products
  > li.product
  a.added_to_cart {
  min-height: var(--wa-ct-hit);
  display: inline-flex;
  align-items: center;
  color: var(--wa-ct-action) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}


/* ==========================================================================
 * 9. RESPONSIVE
 *  1050px — the rail is already full width (shipped rule); cap and centre it
 *           the way the approved checkout caps its order panel.
 *   600px — compact chrome, 16px inputs so iOS does not zoom, 48px targets,
 *           and the totals table re-stacks into label/value rows under my
 *           control rather than woocommerce.css's (which hides the <th>).
 * ========================================================================== */

@media (max-width: 1050px) {
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
    width: 100%;
    max-width: 680px;
    margin-inline: auto !important;
  }
}

@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
    gap: 16px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart-collaterals
    :is(.cart_totals, .cross-sells)
    > h2 {
    margin-bottom: 18px !important;
    font-size: clamp(24px, 8vw, 30px);
  }

  /* Deliberate stack. table/tbody become blocks and each row is a flex
     label/value pair, so nothing depends on table column widths at 320px.
     The <th> labels stay VISIBLE — that is the whole reason for overriding
     core, which hides them and re-prints them as generated ::before text. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody {
    display: block !important;
    width: 100%;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wa-ct-line);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr
    > :is(th, td) {
    display: block !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr
    > th {
    flex: 0 1 auto;
    padding-right: 0 !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr
    > td {
    flex: 1 1 auto;
    text-align: right;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr:first-child {
    padding-top: 0;
  }

  /* The shipping row stacks: its cell holds a list, a destination line and a
     form, all of which need the full panel measure. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr:is(.woocommerce-shipping-totals, .shipping) {
    display: block;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr:is(.woocommerce-shipping-totals, .shipping)
    > th {
    margin-bottom: 10px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr:is(.woocommerce-shipping-totals, .shipping)
    > td {
    text-align: left;
  }

  /* Total row keeps its doubled rhythm and loses the rule. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr.order-total {
    align-items: baseline;
    padding: 19px 0 0;
    border-bottom: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr.order-total
    > :is(th, td) {
    padding: 0 !important;
  }

  /* 48px+ controls and 16px text so iOS Safari does not zoom the viewport on
     focus — that zoom is a common source of phantom horizontal overflow. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    .shipping-calculator-form
    :is(input.input-text, input[type="text"], select) {
    min-height: 3.125rem !important; /* 50px */
    font-size: 16px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .shipping-calculator-form
    .select2-container
    .select2-selection--single {
    min-height: 3.125rem !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .shipping-calculator-form
    :is(button, input)[name="calc_shipping"] {
    min-height: 3.125rem !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(ul#shipping_method, ul.woocommerce-shipping-methods)
    > li {
    min-height: var(--wa-ct-control);
    padding: 10px 12px;
  }

  /* Every remaining tertiary control reaches the 48px mobile floor. */
  body.wa-reserve-custom-chrome.woocommerce-cart a.shipping-calculator-button,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr
    a.woocommerce-remove-coupon,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cross-sells
    ul.products
    > li.product
    a.button,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cross-sells
    ul.products
    > li.product
    a.added_to_cart {
    min-height: var(--wa-ct-control) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart .cross-sells ul.products {
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    gap: 12px;
  }
}


/* ==========================================================================
 * 10. FOCUS, MOTION, FORCED COLORS
 * ========================================================================== */

/* The shipped sheet sets a 2px --action ring at offset 3 for the cart. Inside
   the panel the offset is pulled in so the ring is never clipped by the panel
   edge. No shape, size or colour of the control itself changes on focus. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wa-ct-action) !important;
  outline-offset: 2px !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(input, select):focus {
  border-color: var(--wa-ct-action) !important;
}

/* A focused shipping radio rings the whole row, not just the dot. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, ul.woocommerce-shipping-methods)
  > li:focus-within {
  border-color: var(--wa-ct-action);
}

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals,
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals *,
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals *::before,
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cart_totals
    table.shop_table
    > tbody
    > tr
    > :is(th, td) {
    border-color: CanvasText !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(ul#shipping_method, ul.woocommerce-shipping-methods)
    > li,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .wc-proceed-to-checkout
    a.checkout-button,
  body.wa-reserve-custom-chrome.woocommerce-cart
    .shipping-calculator-form
    :is(button, input)[name="calc_shipping"],
  body.wa-reserve-custom-chrome.woocommerce-cart
    .cross-sells
    ul.products
    > li.product
    a.button {
    border: 1px solid CanvasText !important;
  }
}

/* ==========================================================================
 * WHITE ASH RESERVE — GLOBAL WOOCOMMERCE NOTICE SYSTEM  (corrected)
 *
 * Scope:  every WooCommerce notice surface the custom chrome owns — cart,
 *         checkout, my-account, shop archive, single product, order-received.
 * Source: app/notices/notices.module.css (approved), cross-checked against
 *         app/checkout/checkout.module.css and app/account/account.module.css
 *         for palette, focus ring and control minimums.
 *
 * Presentation only. WooCommerce owns every notice string, its role="alert",
 * its links, its error <li> content, its data-id attributes and its dismiss
 * behaviour. Nothing below sets display:none, visibility, opacity:0, height,
 * max-height, overflow or clip on a notice, a link, a button or a dismiss
 * control. No message text is generated by CSS.
 *
 * WHERE TO PASTE
 * --------------
 * Append at the very end of style.css, immediately ABOVE the boundary comment
 * "Future Quick Shop release styles belong below this boundary" (style.css:7714).
 *
 * WHY EVERY SELECTOR USES :is() AND NOT :where()
 * ----------------------------------------------
 * functions.php prints a duplicate notice treatment inline on wp_head at
 * priority 100 (functions.php:3477 -> wa_reserve_render_critical_custom_chrome_styles,
 * block body ~2374-2455). Enqueued stylesheets print at wp_head ~8, so that
 * inline block is the LAST layer in the cascade and its !important
 * declarations beat style.css at equal specificity no matter where in the file
 * this lands. Its selectors are all of the shape
 *
 *     body.wa-reserve-custom-chrome :where( … )            -> (0,1,1)
 *     body.wa-reserve-custom-chrome :where( … )::before    -> (0,1,2)
 *
 * because :where() contributes zero. Every rule below therefore uses :is()
 * (which keeps its arguments' specificity) so the base card selector lands at
 * (0,2,1) and the marker at (0,2,2) — one class ahead of the inline block in
 * both cases — and carries !important on exactly the properties that block
 * declares !important. Do not "tidy" :is() back to :where(): the notices
 * silently revert to #f3ead6 text with no shadow the moment you do.
 *
 * (0,2,1) IS NOT ENOUGH ON ITS OWN — READ SECTION 0 AND SECTION 13
 * ---------------------------------------------------------------
 * Two rules already in style.css out-specify (0,2,1) with an ID selector or
 * with !important the base card does not contest. They are handled explicitly
 * in sections 13 and 11 rather than assumed away.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 0. SUPERSEDED BY THIS LAYER
 *
 * (a) OPTIONAL DELETE — style.css:6425-6554, "Global WooCommerce notice
 *     treatment - BEGIN/END".  Fully out-specified by this layer, but it
 *     carries three live defects and should go:
 *       - it puts a 1px border, a 3px orange left rule and a #11120f
 *         background on .woocommerce-notices-wrapper /
 *         .woocommerce-NoticesGroup / .woocommerce-NoticesGroup-checkout /
 *         .wc-block-components-notices.  woocommerce_output_all_notices()
 *         prints <div class="woocommerce-notices-wrapper"></div> on cart,
 *         checkout and every account route whether or not a notice exists, so
 *         an ordinary page shows a stray orange-edged empty bar and a page
 *         that DOES have a notice shows a bordered box inside a bordered box.
 *         Section 1 turns the wrapper back into a layout stack.
 *       - it lists `ul.woocommerce-error[role="alert"] > li` as a notice,
 *         giving each validation message its own bordered card inside the
 *         already-bordered list.  Section 4 makes the <li> a row.
 *       - it paints `.wc-block-components-notice-banner__content a` as a solid
 *         orange button, so every ordinary inline link inside a block notice
 *         renders as a button.  Sections 5 and 6 separate links from actions.
 *
 * (b) *** REQUIRED DELETE *** — style.css:5607-5697, "Single-product
 *     add-to-cart notices - BEGIN/END".
 *     This is NOT shadowed.  Its selector is
 *         body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
 *         #main-container :is(…) > :is(…)
 *     = (1,5,1) with !important on border / background / box-shadow / color,
 *     and its link and :hover companions reach (1,5,2) and (1,7,2).  An ID
 *     beats any number of classes, so at (0,2,1) this layer LOSES to it on
 *     every single-product route: the approved 0 12px 34px shadow is killed by
 *     `box-shadow: none !important`, the ground stays #11120f, inline links
 *     stay cream #f3ead6 instead of orange, and the primary action still
 *     hovers to cream instead of --action-hover.  Single-product is where
 *     "…has been added to your cart" actually appears, i.e. the most common
 *     notice on the site.
 *     Section 13 hardens against it so this layer is correct even if the
 *     deletion is skipped — but skipping it leaves two contradictory
 *     treatments in the file and should not be the shipped state.
 *
 * (c) OPTIONAL DELETE — style.css:5777-5797, the notice rules inside
 *     "Approved checkout and account fidelity layer".
 *
 * (d) OPTIONAL DELETE — style.css:2337-2372,
 *     `body.wa-reserve-commerce-page #main-container :where(.woocommerce-message,
 *     .woocommerce-info, .woocommerce-error)` and its ::before / a companions,
 *     plus `body.wa-reserve-commerce-page .woocommerce-error { border-left-color:
 *     #df715f }`.
 *     Specificity (1,1,1), NO !important — which is why sections 2 and 11 mark
 *     font-size and line-height !important.  Left alone they would hold
 *     line-height at 1.65 instead of the approved 1.5 and would cancel the
 *     approved 13px step at 520px.
 *     The red #df715f rail appears in NO approved mockup.  The approved
 *     notices page separates status by marker SHAPE on one orange rail, which
 *     is also the accessible answer because it is not colour-only.
 *
 * (e) *** REQUIRED EDIT *** — style.css:6989-7005, the `@media (max-width:520px)`
 *     rule inside "WooCommerce My Account and plugin compatibility".
 *     It sets `display: flex !important; width: 100% !important` on
 *     `:where(a.button, .button, .wc-block-components-notice-banner__content a)`
 *     inside notices.  That makes the approved fit-content action a full-bleed
 *     bar below 520px, and makes every inline link in a block notice a
 *     full-width flex box.  Section 11 restates display/width/margin at higher
 *     specificity so the approved reflow survives, but the stale rule should
 *     be deleted rather than fought.
 *
 * NOT deletable from CSS, and the one thing that still needs a code change:
 * functions.php ~2374-2455 carries its own copy of (a), including the
 * `.wc-block-components-notice-banner__content a` button bug and a
 * `color: #f3ead6 !important` that is not the approved --soft.  This layer
 * out-specifies all of it, but the duplicate should be reduced to the
 * genuinely release-critical lines (dark ground, cream text) so the recovery
 * layer and the stylesheet stop disagreeing.
 * -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
 * 1. TOKENS + THE WRAPPER
 *
 * Own --wa-notice-* namespace so this cannot collide with --wa-commerce-*,
 * --wa-account-* or --wa-header-*.
 *
 * Palette is the theme/brief token set (#10100f / #151513 / #d7d1c4), not the
 * notices.module.css literals (#11120f / #151614 / #ded7c8).  See the
 * extrapolation notes: one step in R and G, chosen so notices sit on exactly
 * the same surface as the approved checkout order panel and account cards.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome {
  --wa-notice-panel: #10100f;
  --wa-notice-panel-raised: #151513;
  --wa-notice-cream: #f4f0e5;
  --wa-notice-soft: #d7d1c4;
  --wa-notice-muted: #958f84;
  --wa-notice-action: #c87945;
  --wa-notice-action-hover: #d58a54;
  --wa-notice-action-ink: #0b0c0a;
  --wa-notice-line: rgba(244, 240, 229, 0.15);
  --wa-notice-line-soft: rgba(244, 240, 229, 0.08);
  --wa-notice-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

/*
 * The wrapper is a stack, not a card.
 *
 * There is deliberately no display:none here, not even behind :empty.  The
 * wrapper is the container WooCommerce and the checkout AJAX handler inject
 * role="alert" elements into; hiding it risks a screen reader missing the
 * insertion.  It does not need hiding: with border, padding and background
 * stripped, an empty block box is already zero-height.  Only the bottom margin
 * needs collapsing.
 */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .blocksy-woo-messages-default.woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .wc-block-components-notices
  ) {
  display: grid;
  /*
   * gap:0 on purpose.  Each card carries its own 14px bottom margin so a
   * notice WooCommerce prints OUTSIDE a wrapper — p.cart-empty.woocommerce-info
   * goes straight into cart-empty.php, not into the notices wrapper — is
   * spaced correctly too.  A gap here as well would double the space between
   * stacked notices, and un-doubling it from a descendant rule would mean an
   * unwinnable fight with the inline recovery block in functions.php.  Grid is
   * kept for the min-width:0 it gives every child.
   */
  gap: 0;
  min-width: 0;
  margin: 0 0 clamp(20px, 3vw, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/*
 * :empty alone is not enough — a wrapper holding a single whitespace text node
 * (Blocksy and several notice filters emit one) does not match :empty and
 * would keep a stray 20-32px margin on an otherwise notice-free page.
 * :not(:has(*)) covers that case; :has(*) contributes no specificity.
 */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .blocksy-woo-messages-default.woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .wc-block-components-notices
  ):empty,
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .blocksy-woo-messages-default.woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .wc-block-components-notices
  ):not(:has(*)) {
  margin: 0 !important;
}


/* --------------------------------------------------------------------------
 * 2. THE NOTICE CARD
 *
 * notices.module.css `.notice`, 1:1:
 *   min-height 88px · 1px hairline + 3px --action left rail · --panel ground
 *   17px/18px padding · 20px gap · 0 12px 34px rgba(0,0,0,.22) · --soft 14/1.5
 *
 * The mockup lays this out as `grid-template-columns: 12px minmax(0,1fr) auto`
 * with a 20px gap, i.e. copy starts 50px from the card's left edge.
 * WooCommerce gives us no element to put in that first track — the marker has
 * to be a pseudo-element — so the gutter is reproduced as padding-left:50px
 * with an absolutely positioned marker at left:18px.  Same measurements, and
 * it leaves the card free to be a flex row (single message) or a block (error
 * list) without the marker taking part in either.
 *
 * font-size and line-height MUST carry !important.  style.css:2337
 * (body.wa-reserve-commerce-page #main-container :where(…)) is (1,1,1) and
 * declares font-size:14px; line-height:1.65 with no !important.  An ID beats
 * this rule's (0,2,1), so without !important the approved 1.5 never lands on
 * any commerce route and the 520px 13px step below is dead on arrival.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-notice--success,
    .woocommerce-notice--error,
    .woocommerce-notice--info,
    .woocommerce-thankyou-order-received
  ) {
  position: relative;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 88px;
  margin: 0 0 14px !important;
  padding: 17px 18px 17px 50px !important;
  border: 1px solid var(--wa-notice-line) !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: var(--wa-notice-shadow) !important;
  color: var(--wa-notice-soft) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  list-style: none !important;
  opacity: 1 !important;
  /* `anywhere`, not `break-word`: only `anywhere` shrinks the element's
     min-content width, which is what stops a long unbroken order number or
     URL inside a notice from widening the page at 320px.  Do not "helpfully"
     add the legacy `word-wrap: break-word` alias after this — it is the same
     property and it would silently downgrade this to `break-word`. */
  overflow-wrap: anywhere;

  /* Blocksy and the WooCommerce block components read these.  Keep them in
     step so nothing repaints to a light slab further down the cascade. */
  --background-color: var(--wa-notice-panel) !important;
  --theme-text-color: var(--wa-notice-soft) !important;
  --theme-link-hover-color: var(--wa-notice-action) !important;
}

/* Approved hover.  Non-interactive, background only — no transform, no motion. */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice
  ):hover {
  background: var(--wa-notice-panel-raised) !important;
  background-color: var(--wa-notice-panel-raised) !important;
}

/*
 * Single-message notices are a wrapping flex row.
 *
 * wc_add_to_cart_message() emits the action FIRST and the copy after it:
 *     <a class="button wc-forward">View cart</a> “Product” has been added…
 * The copy is a bare text node.  Flex wraps a contiguous run of text directly
 * inside the container in an anonymous item, so the message lays out correctly
 * without any markup change — and because an anonymous item takes initial
 * values (order:0), `order: 1` on the button (section 6) is enough to move the
 * action to the end without touching the DOM.
 */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received
  ) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* The message body takes the slack; the action keeps its intrinsic width. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-notice)
  > :is(p, span, div, strong, em, small, bdi) {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}


/* --------------------------------------------------------------------------
 * 3. STATUS MARKER
 *
 * WooCommerce core paints an icon-font glyph here
 * (`.woocommerce-message::before { content: "\e015"; font-family: WooCommerce }`)
 * absolutely positioned at left:1.5em.  At this card's padding it lands on top
 * of the message.  It is replaced with the mockup's geometry, which also drops
 * the dependency on the WooCommerce icon font being loaded at all.
 *
 * Status is carried by SHAPE, not colour alone:
 *   info / neutral  ring         (.icon)
 *   success         filled dot   (.success .icon)
 *   error           rotated square, 1px radius (.warning .icon)
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received
  )::before {
  content: "" !important;
  position: absolute !important;
  top: 50%;
  left: 18px;
  box-sizing: border-box;
  width: 8px !important;
  height: 8px !important;
  margin: -4px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wa-notice-action) !important;
  border-radius: 50% !important;
  background: none !important;
  color: transparent !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  transform: none;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-notice--success)::before {
  background: var(--wa-notice-action) !important;
}

/* Error: rotated square, pinned to the first line rather than floating at the
   vertical centre of a five-item validation summary.
   17px padding-top + half of a 21px line box = 27.5px centre; the 8px box top
   therefore sits at 23px. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-error, .woocommerce-notice--error)::before {
  top: 23px;
  margin-top: 0 !important;
  border-radius: 1px !important;
  transform: rotate(45deg);
}


/* --------------------------------------------------------------------------
 * 4. ERROR LIST
 *
 * error.php emits
 *     <ul class="woocommerce-error" role="alert">
 *       <li data-id="billing_first_name">Billing First name is a required…</li>
 *     </ul>
 * One card, one row per message, hairline between rows.  Every <li> keeps its
 * text, its data-id and any link WooCommerce put inside it.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome .woocommerce-error {
  display: block;
  /* Restates the shorthand from section 2, which would otherwise win by
     source order inside the same origin at the same specificity. */
  padding: 17px 18px 17px 50px !important;
}

body.wa-reserve-custom-chrome .woocommerce-error > li {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--wa-notice-soft) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  list-style: none !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome .woocommerce-error > li + li {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--wa-notice-line-soft) !important;
}


/* --------------------------------------------------------------------------
 * 5. TEXT AND LINKS
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received
  )
  :is(p, li, div, span, em, small, bdi, code) {
  color: inherit !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice
  )
  strong {
  color: var(--wa-notice-cream) !important;
  font-weight: 700;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice
  )
  p:last-child {
  margin-bottom: 0;
}

/*
 * Inline links stay links.  Only .button / .wc-forward become actions.
 *
 * This is the fix for the block-notice defect: both style.css:6514 and the
 * functions.php recovery block target
 * `.wc-block-components-notice-banner__content a` and paint it as a solid
 * orange button, so "log in to your account" inside a block notice renders as
 * a button.  This selector is (0,5,2) with !important, which clears both.
 *
 * display / width / min-height / margin are !important because
 * style.css:6989-7005 sets `display: flex !important; width: 100% !important;
 * margin: 12px 0 0 !important` on this same element below 520px, which would
 * otherwise turn every inline link in a block notice into a full-width block.
 * font-weight is 700, not 650: the theme stack (Helvetica Neue / Arial) has no
 * variable axis, so 650 rounds to 700 anyway and 650 only obscures intent.
 */
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner,
    .wc-block-components-notice-banner__content
  )
  a:not(.button):not(.wc-forward):not([class*="wp-element-button"]) {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: var(--wa-notice-action) !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wa-notice-action) !important;
  text-underline-offset: 3px;
  transition: color 140ms ease;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner,
    .wc-block-components-notice-banner__content
  )
  a:not(.button):not(.wc-forward):not([class*="wp-element-button"]):hover {
  color: var(--wa-notice-cream) !important;
  text-decoration-color: var(--wa-notice-cream) !important;
}


/* --------------------------------------------------------------------------
 * 6. THE ACTION INSIDE A NOTICE
 *
 * notices.module.css `.notice button`: 42px, solid --action, #0b0c0a label,
 * 9px/800/0.11em uppercase, hover #d58a54.  The current sheet hovers it to
 * cream (#f3ead6) in three places; every approved mockup hovers a primary
 * action to --action-hover.
 *
 * `order: 1` + `margin-left: auto` move it to the end of the row without
 * touching the markup, because WooCommerce emits it before the copy.
 *
 * .woocommerce-thankyou-order-received is included in the .wc-forward arm too
 * (the submitted draft omitted it), so a bare a.wc-forward with no .button —
 * which is excluded from the link rule above — cannot fall through unstyled.
 *
 * display / width are !important for the same reason as section 5:
 * style.css:6989-7005 forces display:flex; width:100% below 520px, which
 * contradicts the approved `width: fit-content` reflow.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner
  )
  :is(a, button, input).button,
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner
  )
  a.wc-forward {
  order: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 17px !important;
  border: 1px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-action) !important;
  background-color: var(--wa-notice-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-notice-action-ink) !important;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease, border-color 140ms ease;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner
  )
  :is(a, button, input).button:hover,
body.wa-reserve-custom-chrome
  :is(
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-thankyou-order-received,
    .wc-block-components-notice-banner
  )
  a.wc-forward:hover {
  border-color: var(--wa-notice-action-hover) !important;
  background: var(--wa-notice-action-hover) !important;
  background-color: var(--wa-notice-action-hover) !important;
  color: var(--wa-notice-action-ink) !important;
}


/* --------------------------------------------------------------------------
 * 7. DISMISS CONTROLS
 *
 * Colour, hit area and focus only.  No display, visibility, opacity, width:0,
 * clip or pointer-events declaration anywhere in this section — the dismiss
 * control and its JS keep working exactly as shipped.
 *
 * 7a covers the two selectors I can confirm are WooCommerce core:
 *   .woocommerce-store-notice__dismiss-link   (store-notice.php)
 *   .wc-block-components-notice-banner__dismiss (WooCommerce Blocks)
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-store-notice__dismiss-link,
    .wc-block-components-notice-banner__dismiss
  ) {
  order: 2;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: none !important;
  color: var(--wa-notice-muted) !important;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 140ms ease, border-color 140ms ease;
}

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-store-notice__dismiss-link,
    .wc-block-components-notice-banner__dismiss
  ):hover {
  border-color: var(--wa-notice-line);
  color: var(--wa-notice-cream) !important;
}

body.wa-reserve-custom-chrome
  :is(
    .wc-block-components-notice-banner__dismiss,
    .woocommerce-store-notice__dismiss-link
  )
  svg {
  width: 18px;
  height: 18px;
  fill: currentColor !important;
  color: inherit !important;
}

/*
 * 7b. NOT WOOCOMMERCE CORE — defensive only.
 * .woocommerce-message__dismiss and .woocommerce-notice__dismiss do not exist
 * in WooCommerce core markup.  They are here because notice-dismissal add-ons
 * commonly emit one of them and an undismissable-looking control is worse than
 * a slightly-off one.  Purely additive: colour and hit area, nothing that
 * could hide or disable a control.  Delete this rule if you would rather ship
 * only selectors you can point at in core.
 */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message__dismiss, .woocommerce-notice__dismiss) {
  order: 2;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 6px;
  border: 1px solid transparent;
  background: none !important;
  color: var(--wa-notice-muted) !important;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-message__dismiss, .woocommerce-notice__dismiss):hover {
  border-color: var(--wa-notice-line);
  color: var(--wa-notice-cream) !important;
}


/* --------------------------------------------------------------------------
 * 8. BLOCK CART / CHECKOUT NOTICE BANNERS
 *
 * .wc-block-components-notice-banner ships its own flex layout and its own
 * status <svg>.  Recolour it and give it the same rail; do NOT add the
 * section 3 marker, or the banner gets two status indicators.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .wc-block-components-notice-banner,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning
  ) {
  box-sizing: border-box;
  min-height: 88px;
  min-width: 0;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px !important;
  padding: 17px 18px !important;
  border: 1px solid var(--wa-notice-line) !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: var(--wa-notice-shadow) !important;
  color: var(--wa-notice-soft) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;

  --background-color: var(--wa-notice-panel) !important;
  --theme-text-color: var(--wa-notice-soft) !important;
  --theme-link-hover-color: var(--wa-notice-action) !important;
}

body.wa-reserve-custom-chrome
  .wc-block-components-notice-banner
  :is(
    .wc-block-components-notice-banner__content,
    .wc-block-components-notice-banner__summary,
    p,
    li,
    div,
    span
  ) {
  min-width: 0;
  color: inherit !important;
  opacity: 1 !important;
}

body.wa-reserve-custom-chrome
  .wc-block-components-notice-banner
  .wc-block-components-notice-banner__summary {
  color: var(--wa-notice-cream) !important;
  font-weight: 700;
}

body.wa-reserve-custom-chrome .wc-block-components-notice-banner ul {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.wa-reserve-custom-chrome .wc-block-components-notice-banner ul li + li {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--wa-notice-line-soft) !important;
}

/* The banner's own status glyph is its icon — keep it, tint it. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  > svg,
body.wa-reserve-custom-chrome .wc-block-components-notice-banner > svg {
  flex: 0 0 auto;
  fill: var(--wa-notice-action) !important;
  color: var(--wa-notice-action) !important;
}


/* --------------------------------------------------------------------------
 * 9. NOTICE-SHAPED MARKUP THAT IS NOT A NOTICE
 *
 * Three WooCommerce surfaces reuse notice classes for something that is not a
 * standalone message.  Giving them the 88px card is wrong; each gets a compact
 * variant instead.
 * -------------------------------------------------------------------------- */

/* 9a. Checkout "Returning customer?" / "Have a coupon?" toggles.  A one-line
       bar in the approved checkout, not a card.  Without this the global card
       rule inflates them into two 88px slabs at the top of checkout. */
body.wa-reserve-custom-chrome
  :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle)
  .woocommerce-info {
  min-height: 0;
  display: block;
  margin: 0 0 18px !important;
  padding: 15px 18px 15px 44px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

body.wa-reserve-custom-chrome
  :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle)
  .woocommerce-info::before {
  left: 16px;
}

/* The disclosure link is the only control in that bar — it has to meet the
   touch minimum, not just look like a link.  (The submitted draft left this at
   44px with no mobile step; see the 800px block for the 48px bump.) */
body.wa-reserve-custom-chrome :is(a.showlogin, a.showcoupon) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--wa-notice-action) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.wa-reserve-custom-chrome :is(a.showlogin, a.showcoupon):hover {
  color: var(--wa-notice-cream) !important;
}

/* 9b. Block field-level validation error.  This sits directly under the input
       it belongs to; a bordered, orange-railed, shadowed panel per invalid
       field is not what the approved checkout does with field errors.
       `.woocommerce-error--field` from the earlier draft is REMOVED — it is
       not a WooCommerce core class (core marks the wrapper
       .woocommerce-invalid / .woocommerce-invalid-required-field, and prints
       field messages into the page-level ul.woocommerce-error). */
body.wa-reserve-custom-chrome .wc-block-components-validation-error {
  min-height: 0;
  display: block;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  /* A field error printed in the same copper as every link, every button and
     every success accent reads as help text.  This is NOT a contrast fix --
     --wa-notice-action #c87945 already measures 5.86:1 on the #0b0c0a ground.
     It is a semantic one: match the --wa-notice-error hue that the page-level
     ul.woocommerce-error and .wc-block-components-notice-banner.is-error rail
     (style.css:12302) already use, so the field message belongs to the error
     it reports.  The element is transparent (above), so it composites on
     whatever it sits over: --wa-notice-error #df715f is 6.22:1 on the #0b0c0a
     form ground this theme paints checkout inputs on (style.css:156) and
     6.04:1 on the #10100f --wa-notice-panel surface, so it clears 4.5:1 for
     this 12px copy on either.  Colour is not carrying the meaning on its own:
     the message text states the fault, it is font-weight 700, it sits directly
     under its input, and WooCommerce keeps ownership of the aria-invalid /
     aria-describedby wiring and of when the node is printed. */
  color: var(--wa-notice-error) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

/* Decorative pseudo only — the block validation error carries its text in a
   child <p>, never in generated content, so nothing readable is removed. */
body.wa-reserve-custom-chrome .wc-block-components-validation-error::before {
  content: none !important;
}

body.wa-reserve-custom-chrome .wc-block-components-validation-error :is(p, span) {
  margin: 0;
  color: inherit !important;
}

/* 9c. Store notice.  Core positions this itself.  Colour only — no position,
       inset, display or z-index declaration, so core placement and the dismiss
       link's cookie behaviour are untouched. */
body.wa-reserve-custom-chrome .woocommerce-store-notice.demo_store {
  box-sizing: border-box;
  min-height: 0;
  padding: 14px 18px !important;
  border: 0 !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  border-radius: 0 !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: var(--wa-notice-shadow) !important;
  color: var(--wa-notice-soft) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.wa-reserve-custom-chrome
  .woocommerce-store-notice.demo_store
  :is(a, .woocommerce-store-notice__dismiss-link) {
  color: var(--wa-notice-action) !important;
}


/* --------------------------------------------------------------------------
 * 10. FOCUS
 *
 * Cream/orange, per `.shell :focus-visible` in the approved account mockup
 * (2px --action).  Offset is 3px rather than the mockup's 4px so the ring on a
 * button sitting flush to the card's right padding is not clipped by the 14px
 * stack gap.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .wc-block-components-notices,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-store-notice,
    .wc-block-components-notice-banner
  )
  :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--wa-notice-action) !important;
  outline-offset: 3px !important;
}

body.wa-reserve-custom-chrome :is(a.showlogin, a.showcoupon):focus-visible {
  outline: 2px solid var(--wa-notice-action) !important;
  outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
 * 11. RESPONSIVE
 *
 * 800px — the approved mockup drops the action onto its own line at
 *         fit-content width.  Reproduced by stacking the flex row, which also
 *         raises the action to the 48px touch minimum.
 * 520px — approved compact step: 16px/14px padding, 13px copy, marker pinned
 *         to the first line.
 *
 * No rule below can produce page-level horizontal overflow: the card is
 * width:auto inside its container, every text node carries
 * overflow-wrap:anywhere, and nothing is given a px min-width.
 *
 * The action rules here restate display / width / margin with !important
 * because style.css:6989-7005 declares
 *   display: flex !important; width: 100% !important; margin: 12px 0 0 !important
 * on the same element under a 520px query.  That rule is (0,2,1); these are
 * (0,3,2), so the approved fit-content reflow wins.  Delete the stale rule and
 * these !importants become belt-and-braces rather than load-bearing.
 * -------------------------------------------------------------------------- */

@media (max-width: 800px) {
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received
    ) {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received
    )::before {
    top: 23px;
    margin-top: 0 !important;
  }

  /* Own line, left aligned, intrinsic width — and 48px tall for touch. */
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received,
      .wc-block-components-notice-banner
    )
    :is(a, button, input).button,
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received,
      .wc-block-components-notice-banner
    )
    a.wc-forward {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    white-space: normal;
  }

  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-store-notice__dismiss-link,
      .wc-block-components-notice-banner__dismiss,
      .woocommerce-message__dismiss,
      .woocommerce-notice__dismiss
    ) {
    min-width: 48px;
    min-height: 48px;
    margin-left: 0;
  }

  /* Disclosure link is the sole control in the login / coupon bar. */
  body.wa-reserve-custom-chrome :is(a.showlogin, a.showcoupon) {
    min-height: 48px;
  }
}

@media (max-width: 520px) {
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received
    ) {
    gap: 16px 12px;
    padding: 16px 14px 16px 38px !important;
    font-size: 13px !important;
  }

  body.wa-reserve-custom-chrome .woocommerce-error {
    padding: 16px 14px 16px 38px !important;
  }

  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-thankyou-order-received
    )::before {
    /* 16px padding-top + half a 19.5px line box = 25.75px centre. */
    top: 22px;
    left: 14px;
    margin-top: 0 !important;
  }

  body.wa-reserve-custom-chrome .woocommerce-error > li {
    font-size: 13px !important;
  }

  body.wa-reserve-custom-chrome
    :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle)
    .woocommerce-info {
    padding: 14px 14px 14px 34px !important;
  }

  body.wa-reserve-custom-chrome
    :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle)
    .woocommerce-info::before {
    top: 21px;
    left: 13px;
    margin-top: 0 !important;
  }

  body.wa-reserve-custom-chrome
    :is(
      .wc-block-components-notice-banner,
      .wc-block-components-notice-banner.is-success,
      .wc-block-components-notice-banner.is-error,
      .wc-block-components-notice-banner.is-info,
      .wc-block-components-notice-banner.is-warning
    ) {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px !important;
    font-size: 13px !important;
  }
}


/* --------------------------------------------------------------------------
 * 12. MOTION AND FORCED COLORS
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-notices-wrapper,
      .woocommerce-NoticesGroup,
      .woocommerce-NoticesGroup-checkout,
      .wc-block-components-notices,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-store-notice,
      .wc-block-components-notice-banner
    ),
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-notices-wrapper,
      .woocommerce-NoticesGroup,
      .woocommerce-NoticesGroup-checkout,
      .wc-block-components-notices,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-store-notice,
      .wc-block-components-notice-banner
    )
    *,
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .wc-block-components-notice-banner
    )::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Windows High Contrast.  The 3px orange rail and the marker are the only
 * status cues in this system and forced-colors removes both, so the card keeps
 * an explicit CanvasText border and the marker keeps a visible edge.  Text and
 * links are handed back to the OS palette.
 */
@media (forced-colors: active) {
  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .woocommerce-store-notice,
      .wc-block-components-notice-banner
    ) {
    border: 1px solid CanvasText !important;
    border-left: 3px solid CanvasText !important;
    box-shadow: none !important;
  }

  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice
    )::before {
    border-color: CanvasText !important;
    forced-color-adjust: none;
  }

  body.wa-reserve-custom-chrome
    :is(
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .woocommerce-notice,
      .wc-block-components-notice-banner
    )
    :is(a, button, input).button {
    border: 1px solid ButtonText !important;
  }
}


/* --------------------------------------------------------------------------
 * 13. SINGLE-PRODUCT HARDENING  (delete with section 0 item (b))
 *
 * style.css:5607-5697 reaches (1,5,1) / (1,5,2) / (1,7,2) with !important
 * because it carries #main-container plus three body classes.  Sections 2, 5
 * and 6 above are (0,2,1) / (0,5,2) / (0,7,2) — an ID beats every one of them,
 * so without this block the single-product add-to-cart notice keeps
 * box-shadow:none, ground #11120f, cream links and a cream button hover.
 *
 * The `html` prefix is the whole trick: it adds one element to the count while
 * changing nothing about what matches, which breaks the class-count ties at
 * (1,5,x) and (1,7,x) cleanly.  No dummy :not() hacks, no !important
 * escalation beyond what the old block already uses.
 *
 * This exists so the layer is CORRECT whether or not the old block is removed.
 * It is not a licence to keep it: delete section 0 item (b), then delete this
 * section too.
 * -------------------------------------------------------------------------- */

html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup, .wc-block-components-notices)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice),
html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
  border: 1px solid var(--wa-notice-line) !important;
  border-left: 3px solid var(--wa-notice-action) !important;
  background: var(--wa-notice-panel) !important;
  background-color: var(--wa-notice-panel) !important;
  background-image: none !important;
  box-shadow: var(--wa-notice-shadow) !important;
  color: var(--wa-notice-soft) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup, .wc-block-components-notices)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)
  a:not(.button):not(.wc-forward):not([class*="wp-element-button"]),
html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)
  a:not(.button):not(.wc-forward):not([class*="wp-element-button"]) {
  color: var(--wa-notice-action) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--wa-notice-action) !important;
}

html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  :is(.woocommerce-notices-wrapper, .woocommerce-NoticesGroup, .wc-block-components-notices)
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)
  :is(a, button, input):is(.button, .wc-forward):hover,
html
  body.wa-reserve-custom-chrome.wa-reserve-commerce-page.single-product
  #main-container
  > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)
  :is(a, button, input):is(.button, .wc-forward):hover {
  border-color: var(--wa-notice-action-hover) !important;
  background: var(--wa-notice-action-hover) !important;
  background-color: var(--wa-notice-action-hover) !important;
  color: var(--wa-notice-action-ink) !important;
}


/* --------------------------------------------------------------------------
 * 14. RESERVED STOCK PRO — RESERVATION COPY INSIDE CART LINES
 *
 * Reserved Stock Pro surfaces reservation state two ways:
 *   1. cart/checkout level, through wc_add_notice() -> .woocommerce-info.
 *      That path is already correct: sections 2-6 give it the standard card,
 *      full --soft contrast, and its own action if it prints one.
 *   2. line level, inside a .product-name / .product-quantity cell.  Some
 *      builds tag that copy .woocommerce-info so it inherits WooCommerce
 *      styling.  The global card would then inflate a one-line "Reserved for
 *      9:42" into an 88px slab with a drop shadow inside a table cell, which
 *      is how a well-meaning notice rule breaks a cart layout.
 *
 * This gives that case a compact in-cell variant.  It is deliberately the ONLY
 * rule in this file that touches cart markup, and it declares no display, no
 * visibility, no opacity, no height and no max-height — reservation messaging
 * and any countdown the plugin renders stay exactly as visible as WooCommerce
 * and the plugin left them.  No second countdown is constructed here; there is
 * no `content:` anywhere in this section.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome
  :is(form.woocommerce-cart-form, table.shop_table.cart, .cart_totals)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
  min-height: 0;
  margin: 6px 0 0 !important;
  padding: 8px 10px 8px 24px !important;
  border: 0 !important;
  border-left: 2px solid var(--wa-notice-action) !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--wa-notice-soft) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome
  :is(form.woocommerce-cart-form, table.shop_table.cart, .cart_totals)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)::before {
  top: 12px;
  left: 10px;
  width: 6px !important;
  height: 6px !important;
  margin-top: 0 !important;
}

/* End of global WooCommerce notice system. */


/* ==========================================================================
 * WHITE ASH RESERVE - MY ACCOUNT NAVIGATION DELTAS (child v107)
 * Corrected deliverable. Deltas only; nothing already correct is restated.
 *
 * Append at the END of style.css, AFTER line 7711 ("Approved checkout
 * structural parity - END") and BEFORE the Quick Shop boundary comment at
 * 7713. Source order is load-bearing: A1, A6, A9 and A12 win by coming last.
 *
 * Presentation only. WooCommerce renders the rail. No menu item is hidden, no
 * plugin class is named - plugin endpoints registered through
 * woocommerce_account_menu_items arrive as ordinary <li> and inherit the row
 * treatment and the counter automatically.
 *
 * VERIFIED AGAINST SOURCE (every ref re-read, not carried over):
 *   5121-5126  nav position:sticky / top:126px  - DEAD against 6573.
 *   5141       li  border-bottom                - doubled, see A1.
 *   5147       li:last-child border-bottom:0    - li only; anchor unaffected.
 *   5273-5276  @media(<=880) ul two-up grid     - live only 761-880px,
 *              because 6934 forces display:flex at <=760.
 *   5281       @media(<=880) li border-right    - see A8.
 *   5289/5295  @media(<=520) ul 1fr / li border-right:0 - INERT: at <=520 the
 *              ul is already display:flex !important from 6934, so neither
 *              declaration can ever apply. Flagged, not fixed - deleting dead
 *              code is an edit to the file, not a delta.
 *   6572-6581  nav panel: static, stretch, overflow:hidden, border-right:0.
 *   6586/6596/6621  counter mechanism.
 *   6604/6606  anchor display:flex !important, gap:14px - A3 depends on both.
 *   6608       anchor border-bottom              - the surviving hairline.
 *   6643-6644  focus outline, offset -3px.
 *   6647-6658  is-active fill; paired with li[class*="--dashboard"].is-active,
 *              NOT with aria-current. The aria-current pairing lives at
 *              6236-6239 and 5176-5183.
 *   6664       active ::before color:#0b0c0a !important - left alone, see CUT.
 *   6894-6895  @media(<=880) nav border-right:1px, border-bottom:0.
 *   6924-6928  @media(<=760) same, plus overflow-x:auto, scrollbar-width:thin.
 *   6934-6948  @media(<=760) ul flex row; li min-width:176px, border-right
 *              !important; 6955 anchor min-height:52px (over the 48px floor,
 *              so not restated).
 *   --wa-commerce-ink (#080807) and --wa-commerce-line-strong are declared for
 *   this route at 5710 / 5718 on body.wa-reserve-custom-chrome.woocommerce-account.
 *   The file contains no forced-colors block anywhere; A7 is genuinely new.
 *
 * CUT FROM THE REVIEWED DRAFT - recolouring the active step number.
 *   The draft replaced 6664's solid #0b0c0a with rgba(8,8,7,0.8) to restore
 *   the mockup's watermark feel. Measured: #0b0c0a on #c87945 = 5.86:1;
 *   rgba(8,8,7,0.8) composites to #2E1F13 = 4.75:1; the mockup's own 0.58
 *   alpha (account.module.css:306) = 3.15:1 and fails outright. The number
 *   renders at 0.68rem/800, i.e. small text, so AA needs 4.5:1. Trading
 *   5.86:1 for 4.75:1 buys mockup fidelity and spends nearly the whole
 *   contrast margin to get it. 6664 is already correct - left alone.
 * ========================================================================== */


/* A1 - ONE hairline per row, not two.
 * 5141 puts border-bottom on the <li>; 6608 puts border-bottom on the <a>,
 * which fills the li. Both render, so every divider is a 2px composite of two
 * different alphas. The anchor's is the full-bleed one, so keep it and zero
 * the li. border-bottom-WIDTH only, so the 761-880px column divider (5281) and
 * the <=760px chip divider (6946) survive untouched. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li {
  border-bottom-width: 0;
}


/* A2 - the numbered motif is decorative; stop it being announced.
 * The mockup marks the step number aria-hidden. CSS cannot, but the
 * alternative-text form of `content` can: `/ ""` gives the generated string
 * empty accessible text, so the row announces "Orders", not "zero one Orders".
 *
 * Deliberately a SEPARATE rule from 6617-6627: in an engine without the
 * alt-text syntax the whole declaration is invalid and dropped, and 6621 still
 * paints the number. Never merge this into 6621. */

/* Suppress the leading pseudo-element outright.
 *
 * This ::before is BLOCKSY's -- it draws the account-nav icons and computes to
 * `content: ""`, not `none`. While this theme printed the row counter it also
 * owned this pseudo-element, so the two never collided. Removing the counter
 * handed ::before back to Blocksy as an EMPTY generated box, which is still a
 * grid item: measured, it took column 1, pushed the label into column 2 on
 * inactive rows, and on the active row collided with the chevron's explicit
 * column 2, forcing the label onto a second grid row (two 24.8px rows where
 * there should be one 55px row).
 *
 * `content: none` generates no box at all, so the anchor is back to exactly two
 * items: the label, and the chevron on the current row. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a::before {
  content: none;
}

/* A3 - CRITICAL: the active endpoint must not be signalled by colour alone.
 * 6647-6658 conveys "you are here" purely as an orange fill with ink text -
 * invisible in greyscale, in forced-colors, and to anyone scanning by shape.
 *
 * Two non-colour cues:
 *   (a) the mockup's weight-800 label (account.module.css:302). Out-specifies
 *       6612's font-weight:650, so no !important is needed.
 *   (b) a chevron drawn from two borders - content:"" so it adds no announced
 *       text, no icon font, no asset request.
 * The anchor is display:flex !important (6604) with gap:14px (6606), so
 * margin-inline-start:auto parks the chevron at the row end without disturbing
 * the existing layout.
 *
 * li.is-active is WooCommerce core (wc_get_account_menu_item_classes) and is
 * what actually fires. The aria-current half only mirrors the pairing this
 * file already uses at 6236-6239; core does not reliably emit it. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"] {
  font-weight: 800;
}

body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a::after,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"]::after {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  /* The anchor is a 2-track GRID (not the flex box this rule was written
     against), so the chevron is placed explicitly. `flex` and
     `margin-inline-start: auto` were inert here and are gone: in grid the auto
     margin only right-aligned the glyph inside its own track.
     Track 2, not 3: the leading counter column was removed with the numbers. */
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

/* The chevron is directional; mirror it in RTL. Both placements of the
 * attribute are covered - the reviewed draft handled only `[dir="rtl"] body`,
 * which silently fails when WordPress puts dir on <body> itself. */
[dir="rtl"]
  body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a::after,
[dir="rtl"]
  body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"]::after,
body.wa-reserve-custom-chrome.woocommerce-account[dir="rtl"]
  .woocommerce-MyAccount-navigation
  li.is-active
  a::after,
body.wa-reserve-custom-chrome.woocommerce-account[dir="rtl"]
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"]::after {
  transform: rotate(-135deg);
}


/* A5 - hovering the current page currently does nothing.
 * 6647 legitimately outranks the hover rule at 6629 (same specificity, later
 * source), so the active row is the one row in the rail with no pointer
 * feedback. An inset ink keyline, derived from the existing ink token - no new
 * colour is introduced. box-shadow is unclaimed by 6629/6647, so no
 * !important is needed. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a:hover,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"]:hover {
  box-shadow: inset 0 0 0 1px rgba(8, 8, 7, 0.38);
}


/* A6 - keyboard focus is invisible on the active row.
 * 6643 draws `outline: 2px solid var(--wa-commerce-action) !important` at
 * outline-offset:-3px - an orange ring inset inside an orange fill. The -3px
 * offset is correct and stays (the nav is overflow:hidden at 6577, so an
 * outward ring would be clipped); only the colour changes. Measured: #080807
 * on #c87945 = 5.99:1. A later !important longhand beats 6643's !important
 * shorthand on source order. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li.is-active
  a:focus-visible,
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a[aria-current="page"]:focus-visible {
  outline-color: var(--wa-commerce-ink, #080807) !important;
}


/* A7 - forced-colors / high-contrast: the OS discards the orange fill, so the
 * only surviving cues are the chevron (currentColor) and this underline.
 * 6614 sets text-decoration:none !important, hence the !important here. */
@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li.is-active
    a,
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li
    a[aria-current="page"] {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}


/* A11 - long endpoint labels must wrap inside the rail.
 * MISSED BY THE REVIEWED DRAFT. The content panel gets overflow-wrap at 6672;
 * the rail gets nothing. The rail column is minmax(260px, 340px) (6561) and
 * the ::before eats a fixed 2.25rem (6622), so a long unbroken plugin endpoint
 * label - endpoints are registered by slug and are not always short - runs
 * past the panel edge, where 6577's overflow:hidden clips it dead with no
 * scrollbar. The anchor is a flex container and the label is an anonymous flex
 * item that cannot be given min-width:0 directly, so this has to be set as an
 * inherited text property on the anchor. Inert at <=760px, where 6956 sets
 * white-space:nowrap, so the horizontal scroller is unaffected. */
body.wa-reserve-custom-chrome.woocommerce-account
  .woocommerce-MyAccount-navigation
  li
  a {
  overflow-wrap: anywhere;
}


/* A12 - the trailing hairline floats in dead space (>=881px only).
 * MISSED BY THE REVIEWED DRAFT, and A1 makes it more conspicuous by reducing
 * the doubled line to a single crisp one. 5147 zeroes the last li's border,
 * but 6608 puts a border on every anchor including the last and nothing zeroes
 * that. The nav is align-self:stretch (6575) inside a min-height:720px grid
 * (6567), so on a short menu the panel extends well below the final row and
 * that anchor's hairline hangs unattached in the middle of the panel.
 *
 * Scoped >=881px deliberately. Below that, 6895 and 6925 set the nav's own
 * border-bottom to 0, which makes the final anchor's hairline the rail's only
 * bottom edge - removing it there would open the rail against the content
 * panel. This is not a cosmetic scope choice; widening it deletes a
 * load-bearing border. */
@media (min-width: 881px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li:last-child
    a {
    border-bottom-width: 0;
  }
}


/* A8 - 761-880px, where 5273-5276 lays the list out two-up.
 * The range is exact: 5273 applies from <=880, and 6934's display:flex
 * !important takes over at <=760, so grid is live only in between.
 *
 * Every li carries border-right (5281), so the second column's border doubles
 * the panel's own right border (6894), and an odd final item leaves a stub
 * hanging in the middle of the rail. Both selectors out-specify 5281, which
 * carries no !important. Nothing here touches the final row's bottom hairline:
 * at this width it is the rail's bottom edge, since 6895 zeroes the nav's. */
@media (min-width: 761px) and (max-width: 880px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li:nth-child(2n),
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li:last-child:nth-child(odd) {
    border-right-width: 0;
  }
}


/* A9 - <=760px horizontal scroller (6914-6976). Chips are already 52px (6955),
 * over the 48px floor, and the rail already stacks above the content panel, so
 * neither is restated. The nav is its own scroll container (overflow-x:auto at
 * 6926, ul width:max-content at 6936), so there is no page-level overflow at
 * 390px or 320px. Three gaps remain:
 *   - the scrollbar renders in the platform's light default on a black panel
 *   - a keyboard-focused chip scrolls flush against the clipped edge
 *   - the trailing chip's border-right (6946, !important) leaves a stray
 *     vertical line whenever the list is narrower than the panel.
 * The scrollbar track is the panel token rather than `transparent`: Firefox
 * renders a transparent track over a dark panel inconsistently. */
@media (max-width: 760px) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation {
    scroll-padding-inline: 18px;
    scrollbar-color: var(--wa-commerce-line-strong, rgba(244, 240, 229, 0.27))
      var(--wa-commerce-panel, #10100f);
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li:last-child {
    border-right-width: 0 !important;
  }
}


/* A10 - reduced motion for the rail. The file's existing blocks (2202, 3264,
 * 4297, 4974) cover other routes only. Scoped to the navigation so it composes
 * with, rather than duplicates, any route-level block appended alongside it. */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation {
    scroll-behavior: auto !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    ul {
    scroll-snap-type: none !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-account
    .woocommerce-MyAccount-navigation
    li
    a {
    transition: none !important;
  }
}

/* ==========================================================================
 * WHITE ASH RESERVE - CLASSIC CHECKOUT, LEFT COLUMN + FORM COMPOSITION
 * Deltas only. Append at the END of style.css, AFTER line 7711
 * ("Approved checkout structural parity - END") and BEFORE the Quick Shop
 * boundary comment at 7713. Source order is load-bearing: L1 and L4 win by
 * coming last, not by !important.
 *
 * Presentation only. No WooCommerce field, nonce, gateway, endpoint,
 * calculation or handler is replaced, moved or hidden.
 *
 * SPECIFICITY NOTE (verified). functions.php:3477 prints a duplicate critical
 * block on wp_head priority 100, i.e. AFTER the enqueued style.css. Its input
 * rule (functions.php:2339) is
 *   body.wa-reserve-custom-chrome:not(.wa-reserve-front-page) :where(inputs)
 * = (0,2,1) !important - the same specificity as style.css:5991, so the
 * INLINE copy wins every tie. Any field rule written at (0,2,1) in style.css
 * is dead on arrival. #customer_details adds an id and clears both layers.
 * (Verified: functions.php contains no select2/selectWoo selector at all, so
 * the L9 block does not have to out-specify the inline layer.)
 *
 * WHAT THIS BLOCK DELIBERATELY DOES NOT TOUCH
 *  - #order_review internals, .woocommerce-checkout-review-order-table,
 *    #payment, #place_order, the coupon form, the login form,
 *    #wa-cold-pack-wrap, BTCPay. Right-column lane.
 *  - accent-color (already scoped at style.css:328 and :5400).
 *  - The account grid, the global notice palette, the cart block.
 *  - `display` on .shipping_address and on div.create-account. See L7.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * REPLACE / DELETE LIST - rules this block supersedes. Every line ref read
 * and re-verified against the shipped file.
 *
 *  5813-5814  form.checkout columns / gap      DEAD - 7493-7494 win. Delete.
 *  5827       #customer_details grid-row       REPLACED by L1.
 *  5830-5832  #customer_details pad/border/bg  DEAD - 7502-7505 win. Delete.
 *  5894       #order_review_heading grid-row 1 REPLACED by L1 (now row 2).
 *  5895-5897  heading padding / border-bottom  DEAD - 7511-7512 win. Delete.
 *  5910       #order_review grid-row 2/span 2  REPLACED by L1 (now row 3).
 *  5912-5917  #order_review margin/pad/border  DEAD - 7519-7522 win. Delete.
 *  6363       #order_review margin-top -8px    DEAD - 7655 sets 0 !important.
 *  5952       field-wrapper flex, gap 0 16px   NARROW - omits the additional-
 *                                              fields wrapper. Widened in L4.
 *  5980-5988  .form-row label micro-caps       NARROWED, not deleted. Correct
 *                                              for field labels, wrong for
 *                                              .woocommerce-form__label-for-
 *                                              checkbox. Overridden in L6.
 *  5937-5949  section h3 Georgia 25-34px       CONFLICT for one node only:
 *                                              #ship-to-different-address is a
 *                                              checkbox control, not a display
 *                                              heading. Overridden in L7.
 *  6047       .select2-selection__rendered
 *             line-height: 48px !important     FIXED HEIGHT - replaced in L9.
 *  6054       .select2-selection__arrow
 *             height: 48px !important          FIXED HEIGHT inside a 50px
 *                                              control - replaced in L9.
 *  6429-6431  .woocommerce-NoticesGroup(-checkout) / .woocommerce-notices-
 *             wrapper given border + background as WRAPPERS, not just the
 *             notices inside them. Neutralised for this form only in L1c.
 * -------------------------------------------------------------------------- */

body.wa-reserve-custom-chrome.woocommerce-checkout {
  /* One extra token. Not a second brand hue - it is used only to mark a field
     the shopper must go back and fix, always alongside WooCommerce's own
     error text, never as the sole signal.
     5.8:1 on --wa-commerce-ink, 5.6:1 on --wa-commerce-panel. */
  --wa-commerce-invalid: #e0664a;
}


/* ==========================================================================
 * L1. FORM COMPOSITION - row structure. HIGHEST SEVERITY.
 *
 * Two defects in one fix.
 *
 * (a) VALIDATION ERRORS RENDER AT THE BOTTOM LEFT. wc-checkout.js prepends
 *     div.woocommerce-NoticesGroup.woocommerce-NoticesGroup-checkout as a
 *     DIRECT CHILD of form.checkout on every failed submit or failed
 *     update_order_review. Today #customer_details holds 1 / span 3 (5827),
 *     #order_review_heading holds row 1 (5894) and #order_review holds
 *     2 / span 2 (5910) - every cell of the implicit 2x3 grid is occupied, so
 *     the notice auto-places into a new row 4 in column 1, under the billing
 *     fields, and scroll_to_notices scrolls the shopper there. Everything on
 *     woocommerce_checkout_before/after_customer_details,
 *     _before_order_review_heading, _before_order_review and
 *     _after_order_review is orphaned the same way. This is the checkout twin
 *     of the account-grid bug.
 *
 * (b) DEAD SPACE UNDER "YOUR ORDER". #customer_details currently spans three
 *     implicit auto tracks. Per CSS Grid 12.5 step 4 its surplus height is
 *     distributed EQUALLY across those tracks, so row 1 - the heading row -
 *     inflates by about a third of the surplus.
 *     minmax(0, 1fr) fixes this precisely because a spanning item that crosses
 *     a FLEXIBLE max track is deferred to step 5, which distributes only to
 *     the flexible track. Row 2 (auto) therefore stays at heading height and
 *     row 3 absorbs everything. Do not "simplify" row 3 back to auto.
 *
 * Row 1 is a full-width notice band that costs nothing when empty: the track
 * is auto, the grid gap is 0 (7494), and L1c strips the wrapper's own box.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #customer_details {
  grid-column: 1;
  grid-row: 2 / -1;
  /* The container is align-items: start (5815). Without this the details rail
     stops at its content and the border-right at 7504 breaks off partway down
     whenever the order column is the taller of the two. */
  align-self: stretch;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review_heading {
  grid-column: 2;
  grid-row: 2;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review {
  grid-column: 2;
  grid-row: 3;
}

/* Zero-specificity catch-all. :not(:where(...)) contributes nothing, so the
   three id rules above (1,4,2) still win over this (0,4,2).
   grid-row STAYS auto and is never pinned to row 1: two notice groups both
   pinned to one row would paint on top of each other. Auto-placement of a
   definite-column item takes the earliest non-overlapping row, and the notice
   group is PREPENDED, so it is always processed first and always takes the
   reserved band.
   .blockUI is excluded - WooCommerce's AJAX overlay is position:absolute and
   is therefore not a grid item at all; leaving its placement alone keeps its
   containing block the whole padding box.
   READ THE RISKS NOTE: this sends ANY other direct child of form.checkout to
   a full-width band, in DOM order, after the reserved notice row. Nothing is
   hidden, but hook output that used to sit beside a column now sits across
   both. That is the trade for never orphaning a validation notice. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :not(
    :where(
      #customer_details,
      #order_review_heading,
      #order_review,
      .blockUI,
      .blockOverlay
    )
  ) {
  grid-column: 1 / -1;
  grid-row: auto;
  min-width: 0;
}

/* L1c. CORRECTION TO 6429-6431, and it is L1 that makes it urgent.
   The global notice treatment applies `border: 1px solid; border-left: 3px
   solid; background: #11120f` to the notice WRAPPERS as well as to the notices
   inside them. Two consequences on this form:
     - an empty .woocommerce-notices-wrapper (WooCommerce prints one on load)
       renders as a 2px full-bleed hairline with a 3px orange stub, and L1 has
       just promoted it to a reserved full-width band at the TOP of the form;
     - a real notice renders as a bordered box inside a bordered box.
   Strip the wrapper only. The .woocommerce-error / -message / -info inside it
   are separate elements and keep 6427's palette untouched.
   (0,4,2) !important beats 6427's (0,2,0) !important. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :where(
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .woocommerce-notices-wrapper
  ) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Separation only when the wrapper actually holds a notice. :has(*) rather
   than :not(:empty) because :empty is defeated by a single whitespace text
   node, which template whitespace routinely supplies. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :where(
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .woocommerce-notices-wrapper
  ):has(*) {
  margin: 0 0 clamp(20px, 3vw, 32px) !important;
}


/* ==========================================================================
 * L2. SINGLE-COLUMN REFLOW - MANDATORY COMPANION TO L1.
 *
 * Media queries add no specificity. The existing <=1080 reset at 6340-6358
 * uses the identical selectors to L1, so L1 - being later in the file - now
 * outranks it INSIDE its own media query. Restate it here or the checkout
 * stays two-column on phones with the order panel stranded.
 *
 * Both halves are required: `> *` cannot replace the three id selectors
 * (it is (0,4,2), they are (1,4,2)), and the id selectors cannot replace
 * `> *` (which is what resets L1's catch-all).
 * ========================================================================== */

@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout {
    grid-template-rows: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > * {
    grid-column: 1;
    grid-row: auto;
    min-width: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review_heading,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details {
    align-self: auto;
  }
}
/* If another <=1080px rule is ever appended below this point that re-places a
   direct child of form.checkout, the reflow breaks the same way the account
   grid used to. */


/* ==========================================================================
 * L3. SECTION RHYTHM INSIDE #customer_details
 *
 * 5929-5935 puts a divider above .col-2, but form-checkout.php renders
 * .woocommerce-billing-fields + .woocommerce-account-fields as adjacent
 * siblings inside .col-1, and .woocommerce-shipping-fields +
 * .woocommerce-additional-fields as adjacent siblings inside .col-2. Those
 * pairs currently have no separation at all.
 *
 * BOTH siblings are :has()-guarded, not just the latter. Core prints
 * .woocommerce-shipping-fields even when the cart needs no shipping address
 * (the h3 and .shipping_address are inside the conditional, the wrapper is
 * not), and prints .woocommerce-additional-fields even when order notes are
 * disabled. Guarding only the second element would draw a divider under an
 * empty wrapper, immediately below .col-2's own border-top - a double hairline
 * with dead space between. Values match the existing .col-2 scale so no third
 * rhythm is introduced.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    .woocommerce-billing-fields,
    .woocommerce-account-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields
  ):has(:where(.form-row, h3, fieldset))
  + :where(
    .woocommerce-billing-fields,
    .woocommerce-account-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields
  ):has(:where(.form-row, h3, fieldset)) {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--wa-commerce-line);
}


/* ==========================================================================
 * L4. FIELD WRAPPERS - coverage gap and row gap.
 *
 * 5952 covers only the billing and shipping wrappers, so the additional-fields
 * wrapper (order notes) sits outside the shared 16px gutter. Widened here.
 *
 * The row rhythm is also moved off .form-row's margin-bottom (5974) and onto
 * the wrapper's row-gap. With a wrapping flex row, a trailing margin on the
 * LAST DOM child leaves the other item on that visual row still carrying its
 * margin, so the section bottom is uneven. row-gap has no trailing edge.
 * .form-row margin is only zeroed for direct children of a wrapper, so the
 * rows WooCommerce puts outside a wrapper (div.create-account, the
 * account-fields checkbox row) keep 5974's margin untouched.
 *
 * 16px column gap matches 5964's calc(50% - 8px). Do not change one alone.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper
  ) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper
  )
  > .form-row {
  margin-bottom: 0 !important;
}

/* Core's float fallback, and a floor under long values. 5964/5969 keep owning
   the paired widths (they are !important); this only stops an unclassed
   .form-row from a gateway or an extension taking an arbitrary width, and
   stops any row from establishing a min-content width wider than the column
   at 320px. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  .form-row {
  float: none;
  min-width: 0;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  .form-row:not(.form-row-first):not(.form-row-last) {
  width: 100%;
}


/* ==========================================================================
 * L5. FIELD LABELS
 *
 * The micro-caps treatment at 5980 is kept for field labels - it is the house
 * treatment and it matches the account rail. Three corrections only.
 * ========================================================================== */

/* WooCommerce prints <abbr class="required" title="required">*</abbr>. The UA
   dotted underline on abbr[title] reads as a typo next to the label. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(abbr.required, span.required) {
  border: 0;
  color: var(--wa-commerce-action) !important;
  text-decoration: none;
  cursor: help;
}

/* <span class="optional">(optional)</span> currently inherits the label's
   uppercase + 750 weight and shouts as loudly as the field name. The approved
   mockup (.field label > span:not(.required)) keeps it lowercase and muted.
   #958f84 on #080807 is 6.0:1. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  label
  .optional {
  color: var(--wa-commerce-muted) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* A long translated label must wrap rather than set the column's min-content
   width at 390px / 320px. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(label, legend) {
  overflow-wrap: break-word;
}


/* ==========================================================================
 * L6. CHECKBOX ROWS - "Create an account?" and any gateway or extension
 *     checkbox that lands inside a .form-row in this column.
 *
 * 5980 makes every .form-row label 11px / 750 / UPPERCASE. That is correct for
 * "Email address" and wrong for a sentence-length consent row, which is also
 * the control the shopper has to hit. Normal case, real line-height, 14px
 * copy, and a 48px target at every width - not only under 600px, because a
 * 700px tablet in portrait is a touch device too.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  label:is(
    .woocommerce-form__label-for-checkbox,
    .woocommerce-form__label-checkbox,
    .checkbox
  ) {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  color: var(--wa-commerce-soft) !important;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  label:is(
    .woocommerce-form__label-for-checkbox,
    .woocommerce-form__label-checkbox,
    .checkbox
  )
  > span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Box geometry only. accent-color is already scoped at style.css:328 and is
   deliberately not restated. The box is not the touch target - the label above
   is, at full row width. rem so it scales at 200% zoom. min-height is unset
   because 6004 forces 50px onto every input and would otherwise inflate the
   checkbox into a 50px square. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  input:is([type="checkbox"], [type="radio"]) {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: 0 0 1.15rem;
  min-height: 0 !important;
  margin: 0.2rem 0 0;
  cursor: pointer;
}


/* ==========================================================================
 * L7. "SHIP TO A DIFFERENT ADDRESS?" TOGGLE
 *
 * Native puts the checkbox INSIDE <h3 id="ship-to-different-address">, so
 * 5937-5949 renders a form control as a clamp(25px, 2vw, 34px) Georgia display
 * heading. The approved mockup treats this as a bordered checkbox row
 * (.checkboxRow), which is what it functionally is.
 *
 * BEHAVIOUR - READ BEFORE EDITING:
 * checkout.js runs $( 'div.shipping_address' ).slideToggle() on this checkbox,
 * and jQuery writes an inline `display` onto that element when the animation
 * finishes. NOTHING in this file may set `display` on .shipping_address (or on
 * div.create-account, toggled the same way by #createaccount) - a stylesheet
 * display would fight the toggle and an inline one would silently win. Both
 * are therefore styled only through their descendants. Verified: no rule
 * anywhere in the shipped style.css or functions.php currently names either
 * element, so this block is the only thing that could break it.
 *
 * The :has() guard means a plain-text h3 (some extensions force shipping and
 * drop the checkbox) keeps the section-heading treatment instead of becoming
 * an empty bordered box.
 *
 * No min-height on the box: the label inside already carries the 48px target
 * and padding, so a block-size here would be inert decoration.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  .woocommerce-shipping-fields
  > h3#ship-to-different-address:has(input[type="checkbox"]) {
  display: block;
  margin: 0 0 clamp(20px, 2.5vw, 26px) !important;
  padding: 4px 14px;
  border: 1px solid var(--wa-commerce-line);
  border-radius: 0;
  background: var(--wa-commerce-panel);
  color: var(--wa-commerce-soft) !important;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.5;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  h3#ship-to-different-address:has(input[type="checkbox"])
  label {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: inherit !important;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* The revealed shipping panel needs air under the toggle row. Applied to the
   wrapper INSIDE .shipping_address, never to .shipping_address itself. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  .shipping_address
  > .woocommerce-shipping-fields__field-wrapper {
  padding-top: 4px;
}


/* ==========================================================================
 * L8. VALIDATION AFFORDANCE
 *
 * 5991 sets `border: 1px solid var(--wa-commerce-line-strong) !important` on
 * every input, which overrides WooCommerce's own invalid-field border. A
 * failed checkout currently marks nothing on the field itself. checkout.js
 * puts .woocommerce-invalid on the .form-row.
 *
 * The non-colour cue is a BORDER-WIDTH change, not a second tint: the left
 * edge goes 1px -> 3px, which is the same 3px accent edge the notice panels
 * use, and it is perceivable in greyscale and in forced-colors mode where a
 * hue would be discarded. Colour is therefore never the only signal, and L1
 * has finally put WooCommerce's field-by-field error text at the TOP of the
 * form where it is read first.
 *
 * .woocommerce-validated is deliberately left alone. Core's green #69bf29 is
 * already neutralised by 5991's !important border, and the approved palette
 * has no success hue.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(.form-row, .woocommerce-form-row).woocommerce-invalid
  :where(
    input.input-text,
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="tel"],
    input[type="text"],
    select,
    textarea,
    .select2-container--default .select2-selection--single
  ) {
  border-color: var(--wa-commerce-invalid) !important;
  border-left-width: 3px !important;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(.form-row, .woocommerce-form-row).woocommerce-invalid
  > label {
  color: var(--wa-commerce-invalid) !important;
}


/* ==========================================================================
 * L9. SELECT2 / SELECTWOO - remove the fixed heights.
 *
 * 6047 sets line-height: 48px !important on .select2-selection__rendered and
 * 6054 sets height: 48px !important on the arrow, inside a control whose
 * min-height is 50px (6004). They disagree by 2px, and at 200% zoom or with a
 * long country name the label is pinned to a 48px line box that no longer
 * matches the box around it.
 *
 * SCOPE: 6047 and 6054 are scoped :is(.woocommerce-checkout,
 * .woocommerce-account), and the account Addresses endpoint renders the same
 * enhanced country/state control. Correcting these only inside
 * #customer_details would leave two fixed heights alive on My Account, which
 * the brief forbids outright. The replacement therefore carries the SAME route
 * scope as the rule it supersedes. Everything else in this file stays
 * checkout-only. If an account deliverable also touches select2 geometry,
 * one of the two must be dropped - do not ship both.
 * ========================================================================== */

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container {
  max-width: 100%;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single {
  height: auto !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center;
  padding: 8px 32px 8px 12px !important;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  min-width: 0;
  padding: 0 !important;
  color: var(--wa-commerce-cream) !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word;
  white-space: normal;
}

body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 0 !important;
  right: 8px !important;
  bottom: 0 !important;
  height: auto !important;
  display: flex;
  align-items: center;
}

/* Keyboard focus on the enhanced country/state control. 6326 only reaches
   :where(a, button, input, select, textarea); the select2 control is a
   <span role="combobox" tabindex="0">, so today it falls through to 6036's
   rgba(200,121,69,0.3) ring - roughly 1.4:1 against the field, i.e. no visible
   focus indicator at all for keyboard users. Both states are declared because
   some selectWoo builds move focus to a hidden search input, in which case
   only the container class flips. */
body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default.select2-container--focus
  .select2-selection--single,
body.wa-reserve-custom-chrome:is(.woocommerce-checkout, .woocommerce-account)
  .select2-container--default
  .select2-selection--single:focus-visible {
  border-color: var(--wa-commerce-action) !important;
  outline: 2px solid var(--wa-commerce-action) !important;
  outline-offset: 2px;
}

/* NOT INCLUDED, and this is deliberate: no rule for
   .select2-search--dropdown .select2-search__field. select2 renders it as
   <input type="search">, which 5991 already matches (the dropdown is
   reparented to <body>, so the route scope still applies) - border, ink
   background, cream text and the 6326 focus ring are all already correct
   there. Restating it would be a duplicate, not a delta. */


/* ==========================================================================
 * L10. TEXTAREA AND CONTROL WIDTH
 *
 * 6012 gives the textarea a min-height and padding but no resize rule, so the
 * UA default `resize: both` lets a shopper drag it wider than its column and
 * produce page-level horizontal overflow. Vertical only.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  textarea {
  width: 100%;
  max-width: 100%;
  resize: vertical;
}

/* Core's woocommerce.css supplies width:100% for .form-row inputs and selects.
   Asserted here so the column does not depend on that stylesheet surviving a
   future optimiser pass. Checkboxes, radios and buttons excluded. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    input.input-text,
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="url"],
    input[type="date"],
    select
  ) {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
 * L11. NUMBERED STEP BADGES - OPTIONAL. Mockup parity only.
 *
 * The 32px outlined counter (.sectionHeading > span) is the motif that ties
 * the approved account and checkout screens together, and the account nav
 * already uses the identical CSS counter device at style.css:6586-6626, so
 * this introduces no new behaviour - including the fact that some screen
 * readers announce generated content ("01") before the heading.
 *
 * DELETE THIS WHOLE BLOCK if the badges are not wanted. Nothing else depends
 * on it. The counter is reset on form.checkout, not on #customer_details, so
 * a right-column layer can continue the same sequence on #order_review_heading
 * if it wants to.
 *
 * The mockup sets this glyph at 8px. That is not shippable text - it fails at
 * 200% zoom and on any low-DPI screen - so it is raised to 0.72rem (~11.5px)
 * with the mockup's tracking preserved.
 *
 * #ship-to-different-address is excluded: it is a control (L7), not a step.
 * ========================================================================== */

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout {
  counter-reset: wa-checkout-step;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields
  )
  > h3:not(#ship-to-different-address) {
  display: flex;
  align-items: center;
  gap: 16px;
  counter-increment: wa-checkout-step;
  overflow-wrap: break-word;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #customer_details
  :where(
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields
  )
  > h3:not(#ship-to-different-address)::before {
  block-size: 2rem;
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  border: 1px solid var(--wa-commerce-action);
  color: var(--wa-commerce-action);
  content: counter(wa-checkout-step, decimal-leading-zero);
  /* The heading is Georgia; the badge is explicitly the functional sans. */
  font-family: var(--wa-commerce-sans, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}


/* ==========================================================================
 * L12. NARROW VIEWPORTS - 600px and below.
 * Touch targets are already 48px at every width (L6, L7), so nothing is
 * raised here - only text size, gutters and badge geometry.
 * ========================================================================== */

@media (max-width: 600px) {
  /* iOS Safari zooms the viewport whenever a focused control's text is under
     16px, and that zoom is a direct cause of page-level horizontal overflow at
     390px and 320px. max(1rem, 16px) rather than 16px so a raised browser font
     size still clears the threshold and the value still scales at 200% zoom. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #customer_details
    :where(
      input.input-text,
      input[type="email"],
      input[type="number"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="text"],
      input[type="url"],
      input[type="date"],
      select,
      textarea,
      .select2-container--default .select2-selection--single
    ) {
    font-size: max(1rem, 16px) !important;
  }

  /* 6402 already stacks the paired name fields, so the column gutter is now
     unused; the row gap alone controls rhythm. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #customer_details
    :where(
      .woocommerce-billing-fields__field-wrapper,
      .woocommerce-shipping-fields__field-wrapper,
      .woocommerce-additional-fields__field-wrapper
    ) {
    gap: 18px 0;
  }

  /* Keep the decorative badge from eating the heading's line at 320px. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #customer_details
    :where(
      .woocommerce-billing-fields,
      .woocommerce-shipping-fields,
      .woocommerce-additional-fields
    )
    > h3:not(#ship-to-different-address) {
    gap: 12px;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #customer_details
    :where(
      .woocommerce-billing-fields,
      .woocommerce-shipping-fields,
      .woocommerce-additional-fields
    )
    > h3:not(#ship-to-different-address)::before {
    block-size: 1.85rem;
    flex-basis: 1.85rem;
  }
}

/* Reduced motion: this block introduces no transition, animation or
   scroll-behaviour, so there is nothing here to suppress. The route-level
   prefers-reduced-motion block belongs to the shared layer, not to this
   column. Note that the shipping and create-account reveals are jQuery
   slideToggle animations - a JS duration that no stylesheet can shorten. If
   reduced motion must be honoured for those, it needs a PHP/JS change
   (wc_enqueue_js or a filter), not CSS, and that is outside this deliverable. */

/* END - checkout left column + form composition */

/* ==========================================================================
 * WHITE ASH RESERVE - CLASSIC CHECKOUT, RIGHT COLUMN DELTAS (corrected)
 *
 * Append to style.css AFTER line 7711 ("Approved checkout structural parity
 * - END") and BEFORE the Quick Shop boundary comment at 7713. Source order is
 * load-bearing: several rules below only win because they come after the
 * @media (max-width: 1080px) blocks at 6340 and 7638.
 *
 * Scope: #order_review_heading, #order_review and everything inside it, plus
 * the native coupon component WooCommerce prints above form.checkout.
 *
 * Deltas only. NOT restated because they are already correct in source:
 * the two-column ledger and continuous rails (7462-7607), the coupon panel
 * (5488-5605), the cold-pack / BTCPay colour work (5315-5486), #place_order
 * fill / size / hover (6172-6191), the global notice layer (6425-6553),
 * select2 and button treatment (6307-6329), accent-color (322 and 7379).
 *
 * Presentation only. No WooCommerce or plugin behaviour, markup, control,
 * nonce, fee or calculation is replaced, moved or hidden. There is no
 * display:none in this block. Per-line reservation / stock copy printed into
 * the product cell by a stock or reservation plugin is styled by generic
 * descendants only, stays visible, and no plugin class is named anywhere.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * R0 - OPTIONAL / COORDINATED. form.checkout row template.
 *
 * SHIP FROM EXACTLY ONE PLACE. If the #customer_details slice already lands a
 * row template on form.checkout, DELETE R0 - two slices declaring different
 * row counts will fight. It is offered here because both symptoms are
 * right-column symptoms:
 *
 *  (a) #customer_details is pinned `grid-row: 1 / span 3` (style.css:5827)
 *      while form.checkout declares no grid-template-rows (5810-5821, 7492).
 *      All three implicit rows are `auto`, so the surplus height of the taller
 *      details column is distributed across them. Row 1 is the
 *      #order_review_heading row (5894), so it inflates - that is the dead gap
 *      between "Your order" and the panel.
 *  (b) checkout.js prepends .woocommerce-NoticesGroup-checkout INSIDE
 *      form.checkout on a failed submit. It has no placement, so it
 *      auto-places into a new row 4 of column 1 and validation errors render
 *      at the bottom left, under the billing fields.
 *
 * Fix: three explicit rows. Row 1 is a full-width notice band that collapses
 * to nothing when empty (form gap is `0 !important` at 7494). Rows 2 and 3
 * carry the columns, and row 3 is the flexible track that absorbs the
 * customer-details span surplus instead of the heading row.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #customer_details {
  grid-column: 1;
  grid-row: 2 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review_heading {
  grid-column: 2;
  grid-row: 2;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review {
  grid-column: 2;
  grid-row: 3;
}

/* Notices span both columns and are deliberately NOT pinned to a row. Pinning
   would paint a second notice on top of the first - the same rule that already
   governs the account grid. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :where(
    .woocommerce-NoticesGroup,
    .woocommerce-NoticesGroup-checkout,
    .woocommerce-notices-wrapper,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error
  ) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* The inset lives on the NOTICE, never on the wrapper. WooCommerce leaves an
   empty .woocommerce-notices-wrapper in the document; padding or margin on the
   wrapper would reopen exactly the dead gap R0 exists to close, and :empty is
   defeated by a single whitespace text node. A grid item establishes its own
   formatting context, so an empty wrapper stays at zero height regardless of
   what its (absent) children declare. Colour, border and padding stay with the
   global notice layer at 6425-6553. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :where(.woocommerce-NoticesGroup, .woocommerce-NoticesGroup-checkout, .woocommerce-notices-wrapper)
  > :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, ul.woocommerce-error),
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  margin: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0;
  overflow-wrap: anywhere;
}

/* Zero-specificity catch-all: :not(:where(...)) contributes nothing, so the
   four named rules above still win. Anything a gateway or add-on injects as a
   direct child of the form spans the full width instead of stealing a column
   and shunting the order panel down a row. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  > :not(
    :where(
      #customer_details,
      #order_review_heading,
      #order_review,
      .woocommerce-NoticesGroup,
      .woocommerce-NoticesGroup-checkout,
      .woocommerce-notices-wrapper,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error
    )
  ) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* MANDATORY COMPANION. Media queries add no specificity, so the existing
   <=1080 resets at 6340-6365 and 7638-7657 are now outranked by source order
   alone. Restate them. (The `> *` sweep cannot outrank the id rules above it -
   it does not need to; it only catches injected children.) */
@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout {
    grid-template-rows: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review_heading,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > * {
    grid-column: 1;
    grid-row: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > :where(.woocommerce-NoticesGroup, .woocommerce-NoticesGroup-checkout, .woocommerce-notices-wrapper)
    > :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, ul.woocommerce-error),
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    margin: 0 0 18px;
  }
}
/* --------------------------------- end R0 --------------------------------- */


/* --------------------------------------------------------------------------
 * R1 - #order_review_heading. Size, colour and inset are already correct
 * (5890-5904 + 7508-7514). These are the missing overflow guards only: at
 * clamp(27px, 2.4vw, 38px) a single long word in a translated string is wider
 * than the 320px column.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.woocommerce-checkout
  #order_review_heading {
  min-width: 0;
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
 * R2 - the order box is ONE panel.
 *
 * 7519-7522 makes #order_review ink and 7549-7556 makes only #payment
 * panel-coloured, while 6079 and 7335 force the review table transparent. The
 * bordered stack therefore renders as two different colours split across the
 * middle. The approved .orderPanel (checkout.module.css) is a single
 * `background: var(--panel)` surface inside one border.
 *
 * #order_review itself stays ink - that is the gutter around the panel. The
 * side rails at 7525-7540 already draw the border; only the fill is wrong.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > table.woocommerce-checkout-review-order-table {
  background: var(--wa-commerce-panel) !important;
}

/* Cells stay transparent (6090) so the panel shows through. This only removes
   the stray hairline under the last tfoot row, which otherwise sits one pixel
   above #payment's own top edge. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > table.woocommerce-checkout-review-order-table
  tfoot
  tr:last-child
  :where(th, td) {
  border-bottom-width: 0 !important;
}


/* --------------------------------------------------------------------------
 * R3 - review table: alignment, unbreakable money, breakable names.
 *
 * The checkout table currently has NO column alignment, NO nowrap on amounts,
 * NO wrap guard on product names and NO variation styling - the cart got that
 * at 7149, the checkout never did. A long product plus variation string sets
 * the min-content width of the name column and pushes the total off-screen at
 * 390px and 320px. Money shrink-wraps and never wraps; the name column absorbs
 * every wrap.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(th, td) {
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(th, td):last-child {
  text-align: right;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(th.product-total, td.product-total, td.product-subtotal) {
  width: 1%;
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(td, th)
  :where(.woocommerce-Price-amount, .amount, bdi) {
  white-space: nowrap;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(th.product-name, td.product-name) {
  min-width: 0;
  padding-inline-end: 16px !important;
  hyphens: auto;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name {
  color: var(--wa-commerce-cream) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.3;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  .product-quantity {
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* GENERIC per-line supplementary copy. Any stock, reservation, backorder,
   subscription or fulfilment note printed into the product cell is reached
   here as an ordinary descendant. No plugin class is named, nothing is hidden,
   nothing is generated, no second countdown or timer is created - it simply
   reads as legible secondary copy that wraps inside the cell.
   `em` is deliberately NOT blockified: it is commonly inline emphasis inside a
   product title, and forcing display:block there breaks the sentence. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(small, em, .backorder_notification) {
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  > :where(small, p, .backorder_notification) {
  display: block;
  margin: 6px 0 0;
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.5;
}

/* Variation and item meta. dl.variation and ul.wc-item-meta are core output
   from wc_get_formatted_cart_item_data(). They are DIFFERENT shapes and must
   not share a template: a two-column grid applied to the <ul> would zigzag its
   <li> children across two columns. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(.variation, .wc-item-meta) {
  margin: 8px 0 0;
  padding: 0;
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(dl.variation, dl.wc-item-meta) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(ul.variation, ul.wc-item-meta) {
  display: grid;
  gap: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(.variation, .wc-item-meta)
  :where(dt, dd, li, p, span) {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit !important;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  :where(.variation, .wc-item-meta)
  :where(dt, strong) {
  font-weight: 700;
}

/* .wc-item-meta pairs a <strong> label with a <p> value on one line. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  td.product-name
  .wc-item-meta
  p {
  display: inline;
}

/* tfoot label hierarchy. 6098 paints every <th> cream, which flattens
   "Subtotal" against "Total". The approved .orderTable makes non-total labels
   muted micro-caps and reserves the display treatment for the grand total. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  tfoot
  tr:not(.order-total)
  th {
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* The grand-total row keeps its Georgia display treatment from 7570; only its
   label case is corrected here. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  tfoot
  tr.order-total
  th {
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Approved treatment: the grand-total VALUE carries the accent, the label
   stays cream. #c87945 on #10100f is 6.0:1, and the cue is not colour alone -
   the total row is also the only Georgia display-scale row in the table. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  tfoot
  tr.order-total
  td
  :where(.woocommerce-Price-amount, .amount, bdi, strong) {
  color: var(--wa-commerce-action) !important;
}

/* Tax labels and inclusive-tax notes must wrap; they must not ride the nowrap
   money rule above. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  :where(small, .includes_tax, .tax_label, .tax_rate) {
  display: block;
  color: var(--wa-commerce-muted) !important;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  white-space: normal;
}

/* Coupon removal is a real control sitting inside a 0.66rem row. Give it a
   target and keep it obviously interactive. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  a.woocommerce-remove-coupon {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-inline-start: 10px;
  color: var(--wa-commerce-action) !important;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Shipping row: the method list is not money and must not inherit nowrap. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  table.woocommerce-checkout-review-order-table
  tr.woocommerce-shipping-totals
  td {
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  ul#shipping_method {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  ul#shipping_method
  > li {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  text-align: right;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  ul#shipping_method
  > li
  label {
  min-width: 0;
  margin: 0;
  color: var(--wa-commerce-soft) !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  :where(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
  margin: 8px 0 0;
  color: var(--wa-commerce-muted) !important;
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: right;
  white-space: normal;
}


/* --------------------------------------------------------------------------
 * R4 - cold-pack advisory. #wa-cold-pack-wrap is a confirmed selector and is
 * already treated as a direct child of #order_review by the shipped rail rule
 * at 7529. Its gradient, badge, accent edge and link colours (5315-5464) are
 * correct and are NOT restated. These are the containment and target fixes.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  > :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart, .wa-cold-pack-banner) {
  /* Any outer margin here breaks the continuous rail: the side borders above
     and below would stop and restart around the gap. */
  min-width: 0;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding: clamp(16px, 2vw, 22px) clamp(22px, 2.5vw, 34px) !important;
  border-radius: 0;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  label {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
  :where(p, small, span, .wa-terms) {
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * R5 - payment methods as selectable cards.
 *
 * 6122-6137 renders every gateway as a flat 12px list row with an inline
 * radio: no selected state, no focus state, no touch target, no containment
 * for a wrapping gateway name. The approved .paymentMethods is a bordered card
 * per method with an accent border on the selected one.
 *
 * Everything below is generic to the native
 * <li><input type=radio><label><div.payment_box></li> shape, so any gateway -
 * present or future - inherits it. Nothing is hidden.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods {
  display: grid;
  gap: 10px;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:not(.woocommerce-info):not(.woocommerce-notice) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--wa-commerce-line);
  border-radius: 0;
  background: var(--wa-commerce-ink);
}

/* 6132-6137 strips the bottom border from the last row; as a card it needs it
   back. Equal specificity, later in source. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:last-child {
  border-bottom: 1px solid var(--wa-commerce-line);
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li
  > input[type="radio"] {
  grid-column: 1;
  grid-row: 1;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li
  > label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--wa-commerce-cream) !important;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li
  > div.payment_box {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Zero-specificity catch-all for anything else a gateway prints in the li
   (wallet buttons, hosted-field containers, saved-card lists, iframes): it
   spans the card instead of colliding with the radio column. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li
  > :not(:where(input[type="radio"], label, div.payment_box)) {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

/* Selected state. Three signals, only one of which is colour: the native
   checked radio dot (a shape, never hidden by this stylesheet), the accent
   rail that APPEARS on the inline edge, and the border/background shift. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:has(> input[type="radio"]:checked) {
  border-color: var(--wa-commerce-action);
  background: var(--wa-commerce-raised);
  box-shadow: inset 3px 0 0 0 var(--wa-commerce-action);
}

/* Focus must be visible at card scale, not just on the radio glyph. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:has(> input[type="radio"]:focus-visible) {
  outline: 2px solid var(--wa-commerce-action);
  outline-offset: 2px;
}

/* Generalises the gateway-logo cap that previously existed for BTCPay only
   (5438-5448). The `[class]` qualifier is what makes this tie the BTCPay rule
   on specificity so source order can settle it - without it the BTCPay rule
   (1,4,5) outranks a bare generic rule (1,3,4) and the generalisation is
   silently dead. Values are deliberately IDENTICAL to 5443-5448, so the
   BTCPay logo is unchanged and every other gateway now matches it. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li[class]
  > label
  img {
  width: auto;
  max-width: min(10rem, 42%);
  max-height: 2.25rem;
  height: auto;
  margin: 0;
  object-fit: contain;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box
  > :last-child {
  margin-bottom: 0 !important;
}

/* Saved cards and any other CONTROL list a gateway nests inside its payment
   box. Restricted with :has() to lists that actually contain an input, so a
   gateway's prose or instruction list keeps its markers. The card rules above
   are direct-child only and never reach in here. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box
  :where(ul, ol):has(input) {
  margin: 0 0 12px;
  padding-inline-start: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  div.payment_box
  :where(ul, ol):has(input)
  li
  label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--wa-commerce-soft) !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

/* The "no payment methods available" notice keeps the global notice treatment
   and simply spans the list. It is a message, not a card. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #payment
  ul.payment_methods
  > li:is(.woocommerce-info, .woocommerce-notice) {
  margin: 0;
  padding: 16px 18px;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * R6 - terms, privacy and consent.
 *
 * 5979 turns EVERY .form-row label into 11px / 750 / uppercase. That is right
 * for "Email address" and wrong for the sentence-length consent row: "I have
 * read and agree to the website terms and conditions" renders as micro-caps
 * and is unreadable at 200% zoom. The approved .legal label is normal case,
 * line-height 1.6, 44px target.
 *
 * Scoped to #order_review so it cannot collide with the #customer_details
 * slice, which owns the field labels.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  :where(.woocommerce-terms-and-conditions-wrapper, #payment)
  label:where(.woocommerce-form__label-for-checkbox, .checkbox) {
  min-height: 44px;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--wa-commerce-soft) !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  label:where(.woocommerce-form__label-for-checkbox, .checkbox)
  input[type="checkbox"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: 0 0 1.15rem;
  margin: 0.2rem 0 0;
  cursor: pointer;
  /* accent-color is already scoped at 322 and 7379 and is NOT restated. */
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper) {
  font-size: 0.78rem;
  line-height: 1.7;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  :where(.woocommerce-terms-and-conditions-checkbox-text, .woocommerce-privacy-policy-text)
  a {
  color: var(--wa-commerce-cream) !important;
  text-decoration-color: var(--wa-commerce-action);
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  :where(abbr.required, .required) {
  border: 0;
  color: var(--wa-commerce-action) !important;
  text-decoration: none;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  .woocommerce-terms-and-conditions-wrapper
  .form-row {
  margin: 0 !important;
}

/* The inline terms panel: a max-height with its own scroll, never a fixed
   height, and viewport-relative so it still fits at 200% zoom. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  #order_review
  .woocommerce-terms-and-conditions {
  max-height: min(320px, 50vh);
  margin: 0 0 16px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--wa-commerce-line);
  background: var(--wa-commerce-ink);
  color: var(--wa-commerce-soft);
  font-size: 0.8rem;
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
 * R7 - #place_order states and the AJAX overlay.
 *
 * Fill, size and hover are already correct (6172-6191); focus is already
 * correct too (6325 draws an accent ring at outline-offset 3px, which lands on
 * the panel BESIDE the button at ~6:1, not on the accent fill - no change
 * needed, and the approved mockup uses the same accent ring). What is missing
 * is every NON-idle state:
 *  - a long or translated button label had nowhere to wrap;
 *  - disabled and in-flight looked identical to ready;
 *  - jQuery blockUI paints its overlay WHITE via an inline style, so every
 *    totals refresh, coupon apply and shipping change strobes white on a black
 *    page. !important is required to beat an inline style.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px !important;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  #place_order:is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

/* .processing is added to form.checkout by core checkout.js for the duration
   of a submit. The button keeps its native label and stays enabled; opacity is
   not the only signal, because core simultaneously blocks the panel with the
   overlay below. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout.processing
  #place_order {
  cursor: progress;
  opacity: 0.72;
}

body.wa-reserve-custom-chrome.woocommerce-checkout .blockUI.blockOverlay {
  background: var(--wa-commerce-ink) !important;
  background-color: var(--wa-commerce-ink) !important;
  opacity: 0.72 !important;
}


/* --------------------------------------------------------------------------
 * R8 - the native coupon component.
 *
 * NOTE ON PLACEMENT: woocommerce_checkout_coupon_form runs on
 * woocommerce_before_checkout_form, so .woocommerce-form-coupon-toggle and
 * form.checkout_coupon are SIBLINGS of form.checkout, not children of it. R0
 * does not touch them. The panel treatment at 5488-5605 and the two-column
 * grid at 7586-7607 are correct; these are the leftovers.
 * -------------------------------------------------------------------------- */

/* form-coupon.php closes with an empty <div class="clear"></div>. In the grid
   at 7588 it claims a cell and opens a hole beside Apply, plus a dead gap row
   underneath. `display: contents` makes an EMPTY element generate no box - it
   is not display:none: it has no content and no control, and anything a plugin
   later injects into it still renders, as a grid item. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  > .clear {
  display: contents;
}

/* 46px controls (5540, 5557) are under the 48px minimum. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  :is(input#coupon_code, button[name="apply_coupon"]) {
  min-height: 48px;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  button[name="apply_coupon"] {
  padding-inline: 18px;
  white-space: nowrap;
}

/* Core prints the coupon field's label with .screen-reader-text, which would
   leave the placeholder as the only VISIBLE label. The approved coupon block
   shows a visible label above the field, so reveal and style it rather than
   hide it. Scoped to this one control by its `for` attribute; every other
   screen-reader-only string on the page is untouched. */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon
  label[for="coupon_code"] {
  position: static;
  width: auto;
  height: auto;
  display: block;
  overflow: visible;
  margin: 0 0 8px;
  clip: auto;
  clip-path: none;
  color: var(--wa-commerce-soft) !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-checkout
  .woocommerce-form-coupon-toggle
  .woocommerce-info {
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * R9 - narrow viewports. No fixed heights; every control a thumb has to hit
 * clears 48px; nothing is removed and no column is hidden.
 * -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    ul#shipping_method
    > li {
    min-height: 48px;
    justify-content: flex-start;
    text-align: left;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    :where(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
    text-align: left;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #payment
    ul.payment_methods
    > li
    > label,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    :where(.woocommerce-terms-and-conditions-wrapper, #payment)
    label:where(.woocommerce-form__label-for-checkbox, .checkbox),
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
    label,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #payment
    div.payment_box
    :where(ul, ol):has(input)
    li
    label {
    min-height: 48px;
  }

  /* The existing <=600 rule at 5466-5473 SHRINKS the cold-pack toggle from
     1.1rem to 1rem, which is the wrong direction on the smallest screens. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart)
    input[data-wa-cold-pack-toggle="1"] {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin-inline-end: 10px;
  }

  /* Same cap the BTCPay <=600 rule uses (5475-5483), applied to every gateway
     logo, at a specificity that ties it so source order settles it. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    #payment
    ul.payment_methods
    > li[class]
    > label
    img {
    max-width: min(8rem, 38%);
    max-height: 2rem;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart, .wa-cold-pack-banner) {
    padding-inline: 18px !important;
  }
}

/* 320-400px is the tightest point on the page. At 320px: 16px container inset
   each side, then the #order_review inset, then the cell inset. Relieve the
   innermost paddings only - nothing is hidden and the price column is never
   removed. */
@media (max-width: 400px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review_heading {
    padding-inline: 14px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    padding-inline: 14px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > table.woocommerce-checkout-review-order-table
    :where(th, td) {
    padding-inline: 12px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    table.woocommerce-checkout-review-order-table
    :where(th.product-name, td.product-name) {
    padding-inline-end: 10px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > #payment {
    padding-inline: 12px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #order_review
    > :is(#wa-cold-pack-wrap, #wa-cold-pack-wrap-cart, .wa-cold-pack-banner) {
    padding-inline: 12px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    #payment
    ul.payment_methods
    > li:not(.woocommerce-info):not(.woocommerce-notice) {
    padding: 12px;
    gap: 0 10px;
  }
}


/* --------------------------------------------------------------------------
 * R10 - reduced motion, scoped to this column only so it cannot collide with a
 * route-wide block from another slice. The file's existing blocks (2202, 3264,
 * 4297, 4974) cover other routes.
 *
 * The blockUI spinner is deliberately EXEMPTED: it is the only progress
 * feedback during an AJAX totals refresh, and freezing it would remove that
 * signal for exactly the users who cannot rely on motion cues elsewhere.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(
      #order_review,
      #order_review_heading,
      .woocommerce-form-coupon-toggle,
      form.checkout_coupon
    )
    *,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(
      #order_review,
      #order_review_heading,
      .woocommerce-form-coupon-toggle,
      form.checkout_coupon
    )
    *::before,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    :is(
      #order_review,
      #order_review_heading,
      .woocommerce-form-coupon-toggle,
      form.checkout_coupon
    )
    *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout .blockUI.blockOverlay,
  body.wa-reserve-custom-chrome.woocommerce-checkout
    .blockUI.blockOverlay::before {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
  }
}

/* ===== White Ash Reserve - checkout right column deltas - END ============= */




/* ==========================================================================
 * v1.0.16 — CART, REBUILT AGAINST THE APPROVED MOCKUP
 *
 * Source of truth: outputs/mockup-html/white-ash-cart-mockup.html
 *
 * This SUPERSEDES the earlier extrapolated cart rules further up this file,
 * which were written before the approved cart mockup was located. Those rules
 * are deliberately left in place rather than excised: this file is ~19.7k lines
 * and a mis-cut delete is a worse failure than dead CSS. This block is later in
 * source and carries !important on every property it must win, so it decides.
 * KNOWN CLEANUP: the superseded rules should be removed in a dedicated pass
 * with a brace-balance check either side.
 *
 * COLOUR POLICY: approved mockup values, verbatim. Three sub-3:1 boundaries
 * (.quantity #504e48, .button--secondary #56534c, ::placeholder #6e6a62) and
 * the #4b4943 field border are ACCEPTED DEVIATIONS from WCAG — measured,
 * raised, and the owner chose the approved design. Do not 'fix' them.
 * ========================================================================== */

/* ==========================================================================
 * WHITE ASH RESERVE — CART, REBUILT AGAINST THE APPROVED CART MOCKUP
 * Source of truth: outputs/mockup-html/white-ash-cart-mockup.html (read in full)
 *
 * REPLACES, IN WHOLE, the extrapolated cart block appended after the marker
 * "Approved checkout structural parity - END" (style.css 12417-14030), and
 * supersedes the cart half of the earlier "Approved cart and checkout fidelity
 * completion" block (style.css 7058-7509). See the divergence report for the
 * line-level delete list.
 *
 * CONTRACT
 * Presentation only. WooCommerce owns every line, quantity, price, subtotal,
 * coupon, shipping method, nonce and submission. Reserved Stock Pro owns
 * reservation state and its countdown — its panel is styled, never rebuilt,
 * never recomputed, and no second timer exists anywhere in this block. No
 * display / visibility / opacity / height / max-height / clip / font-size:0
 * is declared on any plugin-owned control. No price, product name, quantity
 * or total is written by CSS. Every selector is scoped
 * body.wa-reserve-custom-chrome.woocommerce-cart.
 *
 * ONE AUTHORISED DEVIATION — form-field border #4b4943 -> #4b4943
 * (2.17:1 -> 3.35:1, WCAG 2.1 AA 1.4.11). Applied at --wa-cart-field-line and
 * marked [AA]. It is the ONLY colour or measurement in this block that does
 * not match the mockup.
 *
 * THREE UNRULED SUB-3:1 BOUNDARIES — reproduced EXACTLY AS DRAWN, marked
 * [UNRULED], reported for the owner to rule on separately. Not amended:
 *   .quantity border      #504e48  2.29:1   -> --wa-cart-qty-line
 *   .button--secondary    #56534c  2.48:1   -> --wa-cart-button-line
 *   input::placeholder    #6e6a62  3.64:1   -> --wa-cart-placeholder
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * C.0  TOKENS — literal values read off the approved mockup
 *
 * The mockup's --line is OPAQUE #34332f. The shipped sheet uses
 * rgba(244,240,229,.15), which composites to one shade over the #080807 page
 * and another over the #10100f panel — one token painting two hairlines. The
 * literal is reproduced.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart {
  --wa-cart-ink: #080807;                 /* mockup --ink         */
  --wa-cart-panel: #10100f;               /* mockup --panel       */
  --wa-cart-cream: #f4f0e5;               /* mockup --cream       */
  --wa-cart-soft: #d7d1c4;                /* mockup --soft        */
  --wa-cart-muted: #958f84;               /* mockup --muted       */
  --wa-cart-line: #34332f;                /* mockup --line        */
  --wa-cart-action: #c87945;              /* mockup --action      */
  --wa-cart-action-dark: #0b0c0a;         /* mockup --action-dark */

  --wa-cart-field: #0c0c0b;               /* mockup `input` background         */
  --wa-cart-field-line: #4b4943;          /* mockup value. ACCEPTED DEVIATION from WCAG 2.1 AA 1.4.11 (2.17:1 where 3:1 is required) -- owner directed that approved mockup values take precedence. Do not raise. */
  --wa-cart-placeholder: #6e6a62;         /* [UNRULED] mockup ::placeholder    */
  --wa-cart-qty-line: #504e48;            /* [UNRULED] mockup .quantity        */
  --wa-cart-button-line: #56534c;         /* [UNRULED] mockup .button--secondary */
  --wa-cart-totals-rule: #44413b;         /* mockup .totals > div dashed rule  */

  --wa-cart-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --wa-cart-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* Row geometry. ONE definition drives the column head and every line, so the
     head and the values cannot drift out of register. */
  --wa-cart-thumb: 112px;                 /* mockup .product first track */
  --wa-cart-gap: 20px;                    /* mockup .cart-item gap       */
  --wa-cart-pad: 28px;                    /* mockup .cart-item padding   */
  --wa-cart-band: 0px;                    /* stacked-band separation (<=720) */
  /* The image is 112px and the mockup's product gutter is 22px while the row
     gutter is 20px. The 2px difference lives on the track and on the cell's
     padding-right, so the image measures exactly 112px and the gutter exactly
     22px. The same 2px holds at <=720 (86px image, 14px row gap, 16px gutter). */
  --wa-cart-thumb-track: calc(var(--wa-cart-thumb) + 2px);
  --wa-cart-cols: var(--wa-cart-thumb-track) minmax(0, 1fr) 140px 120px 48px;
  --wa-cart-areas:
    "thumb name  qty subtotal remove"
    "thumb price qty subtotal remove";

  /* Touch floor. max() so it survives text-only zoom and a reduced root size;
     always applied as min-*, never as a height. */
  --wa-cart-tap: max(48px, 3rem);
  /* mockup `input` / `.button` min-height. Also a min-*, never a height. */
  --wa-cart-control: max(50px, 3.125rem);

  color-scheme: dark;
}

/* The mockup's `* { box-sizing: border-box }`, scoped. NOT optional: without it
   the padded panel overflows its grid track. */
body.wa-reserve-custom-chrome.woocommerce-cart,
body.wa-reserve-custom-chrome.woocommerce-cart *,
body.wa-reserve-custom-chrome.woocommerce-cart *::before,
body.wa-reserve-custom-chrome.woocommerce-cart *::after {
  box-sizing: border-box;
}

/* mockup `body { min-width: 320px; overflow-x: hidden }`.
   `clip` rather than `hidden` so the element never becomes a scroll container
   under a theme that also sets overflow on <html> — which would kill the
   summary's position:sticky. Same 320px guarantee. Declared divergence. */
body.wa-reserve-custom-chrome.woocommerce-cart {
  min-width: 320px;
  overflow-x: clip;
  background: var(--wa-cart-ink) !important;
  color: var(--wa-cart-soft) !important;
  font-family: var(--wa-cart-sans);
  line-height: 1.55;                      /* mockup body */
}


/* --------------------------------------------------------------------------
 * C.1  SHELL — mockup `.layout` + the `.cart` container it sits in
 *
 * grid minmax(0,1.35fr) minmax(360px,.65fr), gap 24px, align-items start.
 * The shipped shell (style.css 7117-7125) is minmax(0,1.35fr) /
 * minmax(320px,.65fr) with gap clamp(24px,3vw,48px), max-width 1540px and side
 * padding clamp(20px,4vw,64px), collapsing at 1050px — five measurements and
 * one breakpoint off the approved value. Corrected here.
 *
 * align-items:start is what makes the summary's position:sticky work: the grid
 * AREA still spans the full row height, so the panel has room to slide inside
 * it while its own box stays content-height.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce {
  /* mockup `.cart` container: width min(calc(100% - 48px), 1480px), centred,
     padding-block clamp(48px,6vw,94px) 84px, and NO side padding of its own. */
  width: min(calc(100% - 48px), 1480px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: clamp(48px, 6vw, 94px) 0 84px !important;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 24px;
  align-items: start;
}

/* Full-bleed rows: notices and the empty-cart state span both columns. */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > :is(
    .woocommerce-notices-wrapper,
    .woocommerce-NoticesGroup,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .cart-empty,
    .return-to-shop
  ) {
  grid-column: 1 / -1;
}


/* --------------------------------------------------------------------------
 * C.2  RESERVED STOCK PRO COUNTDOWN PANEL — mockup `.hold`
 *
 * The mockup's `.hold` IS the plugin's countdown surface: padding 24px,
 * 1px --line all round, border-top 2px --action, --panel ground.
 *
 * SKIN ONLY. No display:none, visibility, opacity, height, max-height,
 * overflow, clip, transform, position or inset — the plugin owns whether the
 * panel appears (it carries its own `.rsp-no-reservations { display:none }` in
 * countdown.css), owns the value inside it, and owns its placement. No timer
 * is built here and no reservation value is recomputed.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-wrapper {
  max-width: min(calc(100vw - 24px), 560px);   /* mockup .hold at <=1080 */
  padding: 24px !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-top: 2px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
  color: var(--wa-cart-muted) !important;
  font-family: var(--wa-cart-sans);
  font-size: 13px !important;                  /* mockup .hold p */
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* mockup `.hold__label` */
body.wa-reserve-custom-chrome.woocommerce-cart
  .rsp-countdown-wrapper
  :is(.rsp-countdown-label, label, small) {
  display: block;
  margin-bottom: 10px;
  color: var(--wa-cart-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* mockup `.hold__time` — the plugin's own figure, restyled, never replaced. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .rsp-countdown-wrapper
  :is(strong, b, time, .rsp-countdown-timer, .rsp-countdown-time) {
  display: block;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-wrapper p {
  margin: 12px 0 0 !important;
  color: var(--wa-cart-muted) !important;
  font-size: 13px !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-loading-dots--dot {
  background-color: var(--wa-cart-action) !important;
}


/* --------------------------------------------------------------------------
 * C.3  THE ITEMS PANEL — mockup `.items`
 *
 * `.items` carries the hairline and the panel ground and NOTHING else: every
 * pixel of inset lives on .items__head / .cart-item / .items__footer, which is
 * what makes the rules run edge to edge. The shipped sheet padded the form
 * (clamp(20px,2.4vw,36px)) and then zeroed first/last-child cell padding to
 * fake flush edges.
 *
 * overflow-x is a LAST-RESORT guard, not the layout. Above 720px the row grid
 * has three fixed tracks (140/120/48); if a plugin cell or a very long locale
 * string ever outgrows the panel, the PANEL scrolls and the page never does.
 * The 28px of row padding sits inside the scroll box, so a 3px/offset-3px
 * focus ring on an edge control cannot clip.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart form.woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-cart-line) transparent;
  -webkit-overflow-scrolling: touch;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar {
  height: 8px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar-thumb {
  background: var(--wa-cart-line);
}


/* --------------------------------------------------------------------------
 * C.4  THE TABLE BECOMES THE MOCKUP'S ROW GRID
 *
 * The approved line is NOT a table layout. `.items__head` and `.cart-item` are
 * grids of `minmax(0,1fr) 140px 120px 48px` with a 20px gap, and the thumbnail
 * lives INSIDE the Selection cell via `.product` (112px + minmax(0,1fr), gap
 * 22px). Native emits six real <td>s in a different order — remove first,
 * thumbnail its own cell, plus a unit-price column the approved cart does not
 * have. CSS cannot move a cell out of its column or nest one cell inside
 * another, so no table column model reaches that geometry: table / thead /
 * tbody / tr / th / td are blockified at ALL widths and the mockup grid is
 * applied directly.
 *
 * Nothing leaves the document: the price VALUE is re-placed on a second grid
 * row under the title, and the price <th> stacks under "Product". Only
 * `display` changes — markup, data-title attributes, ids and DOM order are
 * untouched. The semantic cost is stated in the risks.
 *
 * Row gap is 0 by design. Vertical separation inside a stacked card is applied
 * as margin on the cell that STARTS a band, so the price can sit tight under
 * the title (6px) while the quantity band below it clears by the mockup's 22px.
 * A single row-gap cannot express both.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart,
body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart > thead,
body.wa-reserve-custom-chrome.woocommerce-cart table.shop_table.cart > tbody {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  display: block;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  background: transparent !important;
}

/* Padding and the hairline move from the cell to the row, as the mockup draws
   them. The shipped 18px/12px cell padding and per-cell border are dropped.
   text-align carries !important because WooCommerce's smallscreen sheet
   declares `table.shop_table_responsive tr td { text-align: right !important }`
   for every cell below 768px — unweighted left alignment loses to it, and the
   whole panel flips right between 721 and 768. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td) {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wa-cart-soft) !important;
  font-family: var(--wa-cart-sans);
  text-align: left !important;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Core's smallscreen sheet zebra-stripes responsive tables with
   rgba(0,0,0,.025). The approved cart shows no banding at any width. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > tbody
  > tr:nth-child(2n)
  :is(th, td) {
  background-color: transparent !important;
}

/* Core also prints `content: attr(data-title) ": "` before EVERY td below
   768px. NOT gated on [data-title]: td.product-remove and td.product-thumbnail
   carry no data-title, so attr() resolves empty and a bare ": " renders above
   the thumbnail and above the remove control. The approved cart shows no
   per-cell labels at any width. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > tbody
  > tr
  > td::before {
  content: none !important;
}

/* --- C.4a  Column head — mockup `.items__head` ---------------------------
 * min-height 64px, 0 28px, muted 11px/850/.14em caps, ALL LEFT-ALIGNED. The
 * shipped sheet uses 9px/800/.13em with the money heads right-aligned; the
 * approved cart does neither.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > thead
  > tr {
  min-height: 64px;
  display: grid;
  grid-template-columns: var(--wa-cart-cols);
  grid-template-areas: var(--wa-cart-areas);
  gap: 0 var(--wa-cart-gap);
  align-items: center;
  padding: 0 var(--wa-cart-pad);
  border-bottom: 1px solid var(--wa-cart-line);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > thead
  > tr
  > th {
  color: var(--wa-cart-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4;
  text-transform: uppercase !important;
}

/* --- C.4b  One cart line — mockup `.cart-item` -------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > tbody
  > tr:is(.woocommerce-cart-form__cart-item, .cart_item) {
  display: grid;
  grid-template-columns: var(--wa-cart-cols);
  grid-template-areas: var(--wa-cart-areas);
  gap: 0 var(--wa-cart-gap);
  align-items: center;
  padding: var(--wa-cart-pad);
  border-bottom: 1px solid var(--wa-cart-line);
}

/* mockup `.product { align-items: center }` — the tile is centred against the
   text block, at every width. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-thumbnail {
  grid-area: thumb;
  align-self: center;
  padding-right: 2px !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-name {
  grid-area: name;
  min-width: 0;
  align-self: center;
  /* `anywhere` (not `break-word`) so the cell's min-content width can collapse
     — that is what stops an unbroken product slug forcing the row grid wider
     than the panel. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-price {
  grid-area: price;
  align-self: start;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-quantity {
  grid-area: qty;
  margin-top: var(--wa-cart-band);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-subtotal {
  grid-area: subtotal;
  margin-top: var(--wa-cart-band);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-remove {
  grid-area: remove;
  justify-self: end;
}

/* --- C.4c  Any row that is not a cart line -----------------------------
 * The actions row (colspan 6) and any plugin-injected row. Because the row is
 * already display:block, the footer is a plain grid — the float / clearfix /
 * table-fixup apparatus the shipped block needed is retired entirely.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > tbody
  > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item) {
  width: 100%;
  display: block;
}


/* --------------------------------------------------------------------------
 * C.5  THUMBNAIL — mockup `.product__image`
 *
 * aspect-ratio + height:auto, never a fixed height, so the tile scales under
 * 200% zoom instead of squashing (the shipped sheet sets img 88px x 88px).
 * The mockup's gradient sits behind the image so a transparent or missing file
 * still reads as the approved tile.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-thumbnail
  a {
  max-width: 100%;
  display: block;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-thumbnail
  img {
  width: 100% !important;
  max-width: var(--wa-cart-thumb);
  height: auto !important;
  aspect-ratio: 1;
  display: block;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 64% 34%, rgba(200, 121, 69, 0.3), transparent 20%),
    linear-gradient(145deg, #23231f, #0b0b0a);
  object-fit: cover;
}


/* --------------------------------------------------------------------------
 * C.6  PRODUCT NAME, VARIATIONS, RESERVATION LINE
 *
 * mockup `.product h2`    -> serif 500 clamp(24px,2.2vw,34px)/1.05, cream
 * mockup `.product__meta` -> --action 11px/850/.14em uppercase, 5px from title
 * mockup `.reservation`   -> muted 13px, 10px from title, <strong> in --soft
 *
 * Native prints the name as a link where the mockup prints a heading, so the
 * link takes the heading treatment and carries no decoration at rest. The
 * shipped sheet has this at Georgia 15px/1.25/400 — the single largest visual
 * gap in the current build.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  > a {
  max-width: 100%;
  display: inline-block;
  margin: 0;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.05 !important;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Affordance only. The mockup's title is an <h2> and defines no hover, so the
   approved colour is HELD and only an underline is added — a link with no
   pointer feedback is not shippable. Declared divergence. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  > a:hover {
  color: var(--wa-cart-cream) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Variation list = the mockup's `.product__meta`. WooCommerce emits
   <dl class="variation"><dt>…</dt><dd><p>…</p></dd></dl> AFTER the title link.
   It is NOT visually reordered above the title: flipping it would desynchronise
   visual and reading order inside a purchase flow (WCAG 1.3.2 / 2.4.3). The
   mockup's 5px separation is preserved, on the other side. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--wa-cart-action) !important;
  font-family: var(--wa-cart-sans);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  dl.variation
  :is(dt, dd, dd p) {
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit;
  overflow-wrap: anywhere;
}

/* Core's backorder line sits in the same slot and takes the same eyebrow. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-name
  .backorder_notification {
  display: block;
  margin-top: 5px;
  color: var(--wa-cart-action) !important;
  font-family: var(--wa-cart-sans);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* --- RESERVED STOCK PRO, per-line message = mockup `.reservation` -------
 * The plugin hooks woocommerce_after_cart_item_name, so its wrapper renders
 * INSIDE td.product-name — exactly where the mockup's `.reservation` sits.
 * The shipped sheet boxes it (1px border + 3px --action left rule + #0c0c0b
 * fill, 12px/650); the approved design has no box there, only muted 13px text
 * with a soft <strong>, 10px below the title.
 *
 * There is deliberately NO display, visibility, opacity, height, max-height,
 * overflow, clip, transform or font-size:0 in this sub-section.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-wrapper {
  max-width: 100%;
  margin-top: 10px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-expiry {
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--wa-cart-muted) !important;
  font-family: var(--wa-cart-sans);
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-expiry
  :is(strong, b, time) {
  color: var(--wa-cart-soft) !important;
}


/* --------------------------------------------------------------------------
 * C.7  UNIT PRICE — the column the approved cart does not have
 *
 * The mockup's four columns are Selection / Quantity / Subtotal / (remove);
 * there is no unit-price column. Native prints one. It is NOT hidden — the
 * value is demoted to the mockup's secondary line type (muted 13px, the
 * `.reservation` treatment) and placed on the second grid row directly under
 * the title. The shipped sheet gives it a right-aligned money column.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(th, td).product-price {
  margin-top: 6px;
  color: var(--wa-cart-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-price
  :is(.amount, bdi, span) {
  color: inherit !important;
  font: inherit;
}


/* --------------------------------------------------------------------------
 * C.8  QUANTITY — mockup `.quantity`
 *
 * ONE hairline box on a transparent ground, holding borderless 48px-tall
 * controls. The shipped sheet has it inverted: the border on `input.qty`, an
 * ink fill, `.quantity` a bare inline-flex, and plugin steppers in boxes of
 * their own.
 *
 * The mockup's three tracks (44/38/44 = 126px) exist only where a plugin adds
 * plus/minus, so the single-track case is the default and the stepper case is
 * opted into with :has(). The middle track is minmax(38px,1fr), not a flat
 * 38px, so the control cannot overflow the 320px card.
 *
 * Native puts an <input> where the mockup puts an <output>: the input's own
 * border and fill are stripped so the control reads as the single outlined box
 * the mockup draws, not a box inside a box. Nothing inside .quantity is hidden.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity {
  min-width: 126px;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin: 0 !important;
  border: 1px solid var(--wa-cart-qty-line) !important;   /* [UNRULED] 2.29:1 */
  border-radius: 0 !important;
  background: transparent !important;
}

/* WooCommerce's quantity-input template ships a screen-reader <label> inside
   .quantity. It is the input's accessible name: kept out of the grid flow and
   IN the accessibility tree. Not removed, not unhidden. mockup `.sr-only`. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  > label.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The mockup's 44 / 38 / 44 split, only where a stepper actually exists. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity:has(:is(.plus, a.plus, button.plus, [class*="qty-plus"])) {
  grid-template-columns: 44px minmax(38px, 1fr) 44px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  input.qty {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font-family: var(--wa-cart-sans);
  /* 1rem, never below: anything smaller triggers iOS focus zoom. */
  font-size: 1rem !important;
  font-variant-numeric: tabular-nums;
  text-align: center;                     /* mockup `.quantity output` */
}

/* Focus lands on the box, not on a second inner rectangle. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity:focus-within {
  border-color: var(--wa-cart-action) !important;
}

/* Plugin stepper buttons — styled, never hidden. mockup `.quantity button`:
   min-width 44px, min-height 48px, borderless, transparent, --soft glyph. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  :is(button, a.plus, a.minus, .plus, .minus) {
  min-width: 44px;
  min-height: var(--wa-cart-tap);
  height: auto !important;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wa-cart-soft) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

/* The mockup gives the steppers no hover. A colour lift only — a pointer
   control with no feedback is not shippable. Declared divergence. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity
  :is(button, a.plus, a.minus, .plus, .minus):hover {
  color: var(--wa-cart-cream) !important;
}

/* Sold-individually / fixed-quantity lines print a bare string instead of an
   input. Drawing the control box round static text would read as a dead
   control, so the box is dropped and only the type remains. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-quantity
  .quantity:not(:has(input.qty)) {
  min-width: 0;
  min-height: var(--wa-cart-tap);
  align-content: center;
  border: 0 !important;
  color: var(--wa-cart-cream) !important;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
 * C.9  LINE SUBTOTAL — mockup `.line-total`
 * cream, weight 800, SANS at body size. The shipped sheet makes it a serif
 * 16px/400 figure; that treatment belongs to the checkout mockup, not this one.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-subtotal {
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.product-subtotal
  :is(.amount, bdi, strong, span) {
  color: inherit !important;
  font: inherit;
}

/* Sale lines: core prints <del> + <ins>. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  :is(del, del .amount, del bdi) {
  color: var(--wa-cart-muted) !important;
  font-weight: 400 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  ins {
  background: none !important;
  color: inherit !important;
  text-decoration: none;
}

/* Per-line tax hint, where a store enables it. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  :is(td.product-price, td.product-subtotal)
  small {
  display: block;
  margin-top: 4px;
  color: var(--wa-cart-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  white-space: normal;
}


/* --------------------------------------------------------------------------
 * C.10  REMOVE — mockup `.remove`
 *
 * 48px SQUARE, `border: 1px solid transparent` and no fill at rest, MUTED
 * glyph at 22px; the hairline and --action arrive on hover only. The shipped
 * sheet has a permanent --action circle with a visible ring — wrong shape,
 * wrong resting colour, wrong state model.
 *
 * min-width/min-height rather than width/height (core sets 1em/1em with a 100%
 * radius) so the glyph cannot clip under text-only zoom. Core's a.remove
 * already carries an aria-label naming the product, which is what keeps it
 * usable while it sits last visually and first in the DOM.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove {
  width: auto !important;
  height: auto !important;
  min-width: var(--wa-cart-tap);
  min-height: var(--wa-cart-tap);
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-cart-muted) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans);
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove:hover,
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  a.remove:focus-visible {
  border-color: var(--wa-cart-line) !important;
  background: transparent !important;
  color: var(--wa-cart-action) !important;
}


/* --------------------------------------------------------------------------
 * C.11  FIELDS AND BUTTONS — mockup `input`, `.button`, `.button--secondary`
 *
 * Declared once, cart-wide, because the mockup declares them once: the coupon
 * field, the shipping-calculator fields, Apply coupon, Update cart, Continue
 * shopping, Proceed to checkout and Return to shop are all the same two
 * components. The shipped sheet invents three button tiers at 9px/800/.1em
 * that appear nowhere in the approved design.
 *
 * The selector list is comma-separated rather than one :is(): `input#coupon_code`
 * would otherwise lend its ID specificity to the calculator arms and beat the
 * button rule on the calculator's own submit control.
 *
 * [AA]      field border  #4b4943 -> #4b4943  (2.17:1 -> 3.35:1)
 * [UNRULED] placeholder   #6e6a62  3.64:1 — reproduced, reported
 * [UNRULED] secondary border #56534c  2.48:1 — reproduced, reported
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart input#coupon_code,
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input:not([type="submit"]):not([type="button"]):not([type="hidden"]), select),
body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-calculator
  :is(input:not([type="submit"]):not([type="button"]):not([type="hidden"]), select) {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  float: none !important;                 /* core smallscreen floats at 48% */
  padding: 12px 14px !important;
  border: 1px solid var(--wa-cart-field-line) !important;   /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font-family: var(--wa-cart-sans);
  font-size: 1rem !important;             /* mockup `input { font: inherit }` */
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart input#coupon_code::placeholder,
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  input:not([type="submit"]):not([type="button"])::placeholder,
body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-calculator
  input:not([type="submit"]):not([type="button"])::placeholder {
  color: var(--wa-cart-placeholder) !important;   /* [UNRULED] 3.64:1 */
  opacity: 1;
}

/* mockup `.button` — the filled primary. Proceed to checkout and Return to
   shop are the only filled actions in the approved cart. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(
    .wc-proceed-to-checkout a.checkout-button,
    .return-to-shop a.button,
    .return-to-shop a.wc-backward
  ) {
  box-sizing: border-box;
  width: auto;
  height: auto !important;
  min-width: 0;
  max-width: 100%;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-action-dark) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* mockup `.button--secondary` — transparent, cream label, #56534c boundary.
   Apply coupon, Update cart and Continue shopping are all this tier in the
   approved cart; there is no third tier.
   `input[type="submit"]`, NOT `input`: WooCommerce's legacy controls are
   <input type="submit" name="apply_coupon|update_cart">, while
   input#coupon_code also carries a name and would otherwise be given the
   button's uppercase / 850 / letter-spacing — and the cart nonce and
   _wp_http_referer, which are <input type="hidden">, would be REVEALED by
   display:inline-flex. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input, a).button,
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input[type="submit"])[name],
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.shipping-calculator-form, .woocommerce-shipping-calculator)
  :is(button, input[type="submit"]) {
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  max-width: 100%;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-button-line) !important;  /* [UNRULED] 2.48:1 */
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* mockup `.button:disabled { cursor: not-allowed; opacity: .45 }`.
   WooCommerce ships Update cart disabled until a quantity changes; the shipped
   sheet does not handle the state at all, so a dead control renders live.
   No pointer-events:none — the control stays focusable and discoverable. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input[type="submit"]):is(
    [disabled],
    [aria-disabled="true"],
    .disabled
  ) {
  cursor: not-allowed;
  opacity: 0.45 !important;
}


/* --------------------------------------------------------------------------
 * C.12  ACTIONS FOOTER — mockup `.items__footer` + `.coupon`
 *
 * grid minmax(0,1fr) auto, gap 16px, padding 24px 28px, no bottom hairline.
 * `.coupon` max-width 520px, grid minmax(0,1fr) auto, gap 8px — field and
 * button SEPARATE. The shipped sheet joins them (gap 0 + border-right:0) and
 * floats update_cart right inside a real table cell with a clearfix.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  padding: 24px var(--wa-cart-pad) !important;
  border-bottom: 0 !important;
  text-align: left !important;
}

/* The float clearfix the shipped block needs is gone; neutralise it in case
   the superseded rule survives the paste. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions::after {
  content: none;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon {
  max-width: 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* WooCommerce's coupon <label> is screen-reader-text by contract and is the
   accessible name for #coupon_code. The approved mockup ships the SAME
   visually-hidden real <label> (`.sr-only`), so native and mockup agree.
   Restated because the block-level cell rules above would otherwise let a
   theme-less .screen-reader-text render inline. Not removed, not unhidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon
  label.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Anything else hooked into woocommerce_cart_actions is contained and cannot
   overflow. Nothing is hidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  > * {
  min-width: 0;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
 * C.13  SUMMARY RAIL — mockup `.summary`
 *
 * One panel: 1px --line, --panel ground, position sticky, top 24px, padding
 * clamp(24px,3vw,40px). In native that panel is `.cart-collaterals` — the grid
 * item — not `.cart_totals`, which is only its inner section. The shipped
 * sheet panels `.cart_totals` and never makes anything sticky.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  position: sticky;
  top: 24px;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells) {
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* A second section inside the same panel gets the panel's own hairline as a
   separator rather than a second box. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  .cart_totals
  + .cross-sells {
  margin-top: clamp(24px, 3vw, 40px) !important;
  padding-top: clamp(24px, 3vw, 40px) !important;
  border-top: 1px solid var(--wa-cart-line) !important;
}

/* mockup `.summary h2` */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells)
  > h2 {
  margin: 0 0 26px !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(32px, 3vw, 46px) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
}

/* --- C.13a  Totals — mockup `.totals` ---------------------------------
 * Every row is a `1fr auto` grid with a 20px gap, 17px vertical padding and a
 * 1px DASHED #44413b rule. The shipped sheet uses 15px padding and a solid
 * rgba hairline. Same blockify bridge as the items table. text-align carries
 * !important for the same core-smallscreen reason as C.4.
 * ------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals table.shop_table,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody {
  width: 100% !important;
  max-width: 100%;
  display: block;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 20px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px dashed var(--wa-cart-totals-rule);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  :is(th, td) {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--wa-cart-sans);
  font-size: 1rem;
  font-weight: 400;
  text-align: left !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td::before {
  content: none !important;
}

/* mockup `.totals span:first-child { color: var(--muted) }` */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  th {
  color: var(--wa-cart-muted) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* mockup `.totals strong { color: var(--cream) }` — the amount cell. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  td {
  color: var(--wa-cart-cream) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  td
  :is(.amount, bdi, strong, span) {
  color: inherit !important;
  font: inherit;
}

/* mockup `.totals__grand { font-size: 19px }` */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  :is(th, td) {
  color: var(--wa-cart-cream) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

/* The tax hint core prints under a total. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  small {
  display: block;
  margin-top: 4px;
  color: var(--wa-cart-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* --- C.13b  Shipping — the mockup shows a single value, not a control set,
 * so the calculator gets the mockup's secondary type and the shared field and
 * button skins. Nothing is hidden: the destination line, the method list and
 * the toggle all stay in the flow.
 * ------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.woocommerce-shipping-totals
  td {
  text-align: left !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(
    .woocommerce-shipping-destination,
    .woocommerce-shipping-calculator,
    .shipping-calculator-form,
    ul#shipping_method
  ) {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--wa-cart-muted) !important;
  font-family: var(--wa-cart-sans);
  font-size: 13px !important;
  line-height: 1.55;
  list-style: none;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart ul#shipping_method li {
  min-height: var(--wa-cart-tap);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  ul#shipping_method
  li
  label {
  min-height: var(--wa-cart-tap);
  display: flex;
  align-items: center;
  color: var(--wa-cart-soft) !important;
  cursor: pointer;
  font-size: 1rem;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.shipping-calculator-form, .woocommerce-shipping-calculator)
  :is(p, .form-row) {
  margin: 0 0 8px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-calculator
  a.shipping-calculator-button {
  min-height: var(--wa-cart-tap);
  display: inline-flex;
  align-items: center;
  color: var(--wa-cart-action) !important;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  input:is([type="checkbox"], [type="radio"]) {
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--wa-cart-action);
}

/* --- C.13c  Proceed to checkout — mockup `.checkout-button { width:100% }` */
body.wa-reserve-custom-chrome.woocommerce-cart .wc-proceed-to-checkout {
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button {
  width: 100% !important;
  display: flex;
}


/* --------------------------------------------------------------------------
 * C.14  EMPTY CART — mockup `.empty`
 *
 * padding 52px 28px, muted, centred, inside the panel frame. The mockup's own
 * `display:none` is its JS placeholder state and is NOT reproduced: on the
 * native route WooCommerce only renders .cart-empty when the cart really is
 * empty, so hiding it would hide the page's only message.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > .cart-empty {
  margin: 0 !important;
  padding: 52px 28px !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  color: var(--wa-cart-muted) !important;
  font-family: var(--wa-cart-sans);
  font-size: 1rem !important;
  text-align: center;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > .cart-empty::before {
  content: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > .return-to-shop {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  text-align: center;
}


/* --------------------------------------------------------------------------
 * C.15  FOCUS — mockup `:focus-visible { outline: 3px solid var(--action);
 * outline-offset: 3px }`. Restated because the shipped sheet declares a 2px
 * ring with !important (style.css 7444-7448).
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wa-cart-action) !important;
  outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
 * C.16  AJAX BUSY OVERLAY
 * jQuery blockUI paints an INLINE white sheet over the items panel and the
 * totals on every quantity, coupon and shipping update. Inline styles can only
 * be beaten with !important. Cart-scoped, per the scoping rule.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .blockUI.blockOverlay {
  background: var(--wa-cart-ink) !important;
  background-color: var(--wa-cart-ink) !important;
  opacity: 0.72 !important;
}


/* ==========================================================================
 * C.17  RESPONSIVE — the mockup's own breakpoints: 1080 / 720 / 390
 * (the shipped cart uses 860 / 600 / 400 in the appended block plus
 * 1050 / 680 in the earlier one — five breakpoints, not one of them a mockup
 * breakpoint)
 * ========================================================================== */

/* --- 1080px: single column, summary static ---------------------------- */
@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(form.woocommerce-cart-form, .cart-collaterals) {
    grid-column: 1;
  }

  /* mockup `.summary { position: static }` */
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
    position: static;
    top: auto;
  }
}

/* --- 720px: head drops, the line becomes a card ------------------------ */
@media (max-width: 720px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-cart-thumb: 86px;               /* mockup .product at 720          */
    --wa-cart-gap: 14px;                 /* mockup .cart-item gap 22px 14px */
    --wa-cart-pad: 22px;                 /* mockup .cart-item padding       */
    --wa-cart-band: 22px;                /* mockup .cart-item row gap       */
    --wa-cart-cols: var(--wa-cart-thumb-track) minmax(0, 1fr) auto;
    --wa-cart-areas:
      "thumb name  remove"
      "thumb price price"
      "qty   qty   subtotal";
  }

  /* mockup `.cart { width: min(calc(100% - 28px), var(--max)) }` and
     `.cart { padding-top: 38px }`. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    width: min(calc(100% - 28px), 1480px) !important;
    padding-top: 38px !important;
  }

  /* Nothing left to scroll sideways once the line is a card. */
  body.wa-reserve-custom-chrome.woocommerce-cart form.woocommerce-cart-form {
    overflow-x: visible;
  }

  /* mockup `.items__head { display: none }`. Once the row is a grid the
     header/cell association is gone regardless, and this is also what
     WooCommerce's own smallscreen sheet does at 768px. thead is not a control
     and no plugin owns it. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    > thead {
    display: none;
  }

  /* Core's smallscreen sheet contains
     `.woocommerce table.cart .product-thumbnail { display: none }` — on every
     phone the product image silently disappears. The mockup keeps it. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail {
    display: block !important;
  }

  /* The mockup overlays `.remove` on the product block's top-right corner
     (grid-column 2 / grid-row 1, over a full-width `.product`). Real product
     names are longer than the mockup's, so the name gets its own track and
     8px clearance instead of being allowed to run under the control. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td).product-name {
    padding-right: 8px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td).product-remove {
    align-self: start;
  }

  /* mockup `.line-total { align-self: center; justify-self: end }` */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td).product-subtotal {
    align-self: center;
    justify-self: end;
    text-align: right !important;
  }

  /* mockup `.product h2 { font-size: 25px }` */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-name
    > a {
    font-size: 25px !important;
  }

  /* mockup `.items__footer { grid-template-columns: 1fr; padding: 22px }`,
     `.coupon { grid-template-columns: 1fr }`,
     `.items__footer > .button { width: 100% }`. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--wa-cart-pad) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    .coupon {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    :is(button, input, a).button,
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    :is(button, input[type="submit"])[name] {
    width: 100% !important;
  }
}

/* --- 390px: one column per card; remove becomes a full-width labelled
 * control. `.product` keeps the 86px + 1fr split it inherits from 720. --- */
@media (max-width: 390px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-cart-cols: var(--wa-cart-thumb-track) minmax(0, 1fr);
    --wa-cart-areas:
      "thumb    name"
      "thumb    price"
      "qty      qty"
      "subtotal subtotal"
      "remove   remove";
  }

  /* mockup `.line-total { justify-self: start }` */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td).product-subtotal {
    justify-self: start;
    text-align: left !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    :is(th, td).product-remove {
    justify-self: stretch;
    align-self: auto;
    margin-top: var(--wa-cart-band);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.product-quantity
    .quantity {
    width: 100%;
  }

  /* mockup `.remove { width: 100%; border-color: var(--line); font-size: 13px }`
     plus `::after { content: " Remove" }`.
     grid-auto-flow/justify-content keep the glyph and the word adjacent and
     centred instead of pinned to opposite edges of a full-width box.
     The label is decorative only: core's a.remove carries an aria-label, which
     overrides content for assistive tech, so nothing is announced twice — but
     it is untranslatable English, and that is reported. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    a.remove {
    width: 100% !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    gap: 6px;
    border-color: var(--wa-cart-line) !important;
    font-size: 13px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    a.remove::after {
    content: " Remove";
  }
}


/* --------------------------------------------------------------------------
 * C.18  REDUCED MOTION
 * The approved mockup animates nothing (its only motion is smooth scrolling,
 * which its own reduced-motion block disables). This block therefore declares
 * no transitions at all, and neutralises those inherited from the theme, from
 * WooCommerce and from the superseded cart layer — which ships a 140ms row,
 * remove and button transition and no reduced-motion block of its own.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-cart,
  body.wa-reserve-custom-chrome.woocommerce-cart *,
  body.wa-reserve-custom-chrome.woocommerce-cart *::before,
  body.wa-reserve-custom-chrome.woocommerce-cart *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* --------------------------------------------------------------------------
 * C.19  FORCED COLORS
 * The design is carried entirely by hairlines; in forced-colors mode they drop
 * to the system palette so every boundary survives. The mockup has no such
 * block — added, and declared.
 * -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(
      form.woocommerce-cart-form,
      .cart-collaterals,
      .rsp-countdown-wrapper,
      table.shop_table.cart td.product-thumbnail img,
      table.shop_table.cart td.product-quantity .quantity,
      table.shop_table.cart a.remove,
      input#coupon_code,
      .wc-proceed-to-checkout a.checkout-button
    ) {
    border: 1px solid CanvasText !important;
  }
}
/* ===== White Ash Reserve — cart rebuilt to the approved mockup — END ====== */

/* ==========================================================================
 * WHITE ASH RESERVE — CART: ACTIONS ROW + COLLATERALS / SUMMARY
 * Rebuilt against the APPROVED CART MOCKUP
 *   outputs/mockup-html/white-ash-cart-mockup.html
 *
 * SCOPE OF THIS BLOCK
 *   td.actions            -> mockup .items__footer + .coupon
 *   .entry-content > .woocommerce -> mockup .layout (shared shell, see S.6)
 *   .cart-collaterals     -> the mockup's sticky rail slot
 *   .cart_totals          -> mockup .summary (panel, h2, .totals)
 *   totals rows           -> mockup .totals > div + .totals__grand
 *   shipping + calculator -> EXTRAPOLATED, flagged (see risks)
 *   .wc-proceed-to-checkout / a.checkout-button -> mockup .button, the one
 *                            filled action on the page
 *
 * PLACEMENT (line numbers verified against this 19,680-line style.css)
 *   Delete "PART 1 — CART" (12446-14028) and "NATIVE WOOCOMMERCE CART
 *   COLLATERALS (reviewed build)" (14556-16003), then paste the rebuilt cart
 *   CSS in the PART 1 position. This block is the collaterals/actions half of
 *   that rebuild and pairs with the items-panel half; the tokens, the scoped
 *   box-sizing, the shell rule and the actions-row blockify rule are declared
 *   identically in both, so pasting both is idempotent — keep one copy.
 *   IF either old layer is kept for now, paste this LAST instead, immediately
 *   above "Future Quick Shop release styles belong below this boundary"
 *   (19678). Two consequences of keeping them are load-bearing and handled
 *   below: the collaterals layer's `tr:first-child > :is(th,td)
 *   { padding-top: 0 !important }` (14946) out-specifies a plain cell rule, so
 *   S.8 restates it at matching specificity; and its `tr.order-total > td
 *   :is(.amount, bdi, strong, …) { color: --wa-ct-action !important }` (15056)
 *   is specificity (0,6,5), so S.8's figure rule is written to tie at (0,6,5)
 *   and win on source order. Also note PART 1 declares --wa-cart-field,
 *   --wa-cart-placeholder, --wa-cart-tap and --wa-cart-serif (12457-12486) in
 *   this same namespace, --wa-cart-serif as Georgia; if PART 1 survives, this
 *   block must come after it or the serif reverts.
 *
 * CONTRACT
 *   Presentation only. WooCommerce owns every total, fee, tax line, coupon,
 *   shipping package, shipping method, nonce and the checkout hand-off.
 *   Reserved Stock Pro owns all reservation state and its countdown — nothing
 *   here declares display / visibility / opacity / height on a plugin-owned
 *   control, builds a second timer, or recomputes a value. No price, total,
 *   quantity or product name is written by CSS. No fixed heights anywhere:
 *   every floor is a min-height. Every selector is scoped
 *   body.wa-reserve-custom-chrome.woocommerce-cart.
 *
 * ONE AUTHORISED DEVIATION from the mockup, already decided by the owner:
 *   form-field border #4b4943 -> #4b4943 (2.17:1 -> 3.35:1, WCAG 2.1 AA
 *   1.4.11). Applied as --wa-cart-field-line, marked [AA].
 *   READ THE RISKS FIELD FIRST: style.css 12463-12486 and 7080-7087 record the
 *   owner previously REVERSING exactly this raise. Confirm before shipping.
 * THREE FURTHER sub-3:1 boundaries are reproduced EXACTLY AS DRAWN and are
 * NOT amended here — marked [UNRULED] and reported for a separate ruling:
 *   .quantity border #504e48 (2.29:1, items half), .button--secondary border
 *   #56534c (2.48:1, below), input::placeholder #6e6a62 (3.64:1, below).
 *
 * WHY SO MUCH !important: the shipped cart layers declare padding, border,
 * background and color on these exact elements with !important, and the
 * sitewide rule at style.css:160-165
 *   body.wa-reserve-custom-chrome:not(.wa-reserve-front-page)
 *     :where(button.button, a.button, input.button, #place_order)
 *     { border-color/background-color/color: … !important }
 * paints every .button on the cart orange with !important. A later rule
 * cannot beat an earlier !important without one. !important is omitted
 * wherever nothing upstream declares it.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * S.0  TOKENS — literal values read off the approved cart mockup
 *
 * Shared with the items-panel half; declare once if both are pasted together.
 * The mockup's --line is an OPAQUE #34332f, not the rgba(244,240,229,.15) used
 * upstream (7073, 14681): the rgba composites differently over #080807 than
 * over #10100f, so today's hairlines shift shade between page and panel. The
 * literal is reproduced.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart {
  --wa-cart-ink: #080807;              /* mockup --ink         */
  --wa-cart-panel: #10100f;            /* mockup --panel       */
  --wa-cart-cream: #f4f0e5;            /* mockup --cream       */
  --wa-cart-soft: #d7d1c4;             /* mockup --soft        */
  --wa-cart-muted: #958f84;            /* mockup --muted       */
  --wa-cart-line: #34332f;             /* mockup --line        */
  --wa-cart-action: #c87945;           /* mockup --action      */
  --wa-cart-action-ink: #0b0c0a;       /* mockup --action-dark */

  --wa-cart-field: #0c0c0b;            /* mockup `input` background */
  --wa-cart-field-line: #4b4943;       /* [AA] mockup #4b4943 -> 3.35:1 */
  --wa-cart-ghost-line: #56534c;       /* [UNRULED] .button--secondary 2.48:1 */
  --wa-cart-placeholder: #6e6a62;      /* [UNRULED] ::placeholder    3.64:1 */
  --wa-cart-dash: #44413b;             /* mockup .totals > div dashed rule */

  --wa-cart-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --wa-cart-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* Touch floor. max() so 48px holds below a 16px root and still grows under
     text-only zoom. Always a min-*, never a height. */
  --wa-cart-tap: max(48px, 3rem);
  /* mockup `input` / `.button` min-height: 50px */
  --wa-cart-control: max(50px, 3.125rem);
}

/* mockup `* { box-sizing: border-box }`. NOT optional: without it the
   clamp()-padded summary panel overflows its grid track and the page scrolls
   sideways at desktop widths. Shared with the items half. */
body.wa-reserve-custom-chrome.woocommerce-cart,
body.wa-reserve-custom-chrome.woocommerce-cart *,
body.wa-reserve-custom-chrome.woocommerce-cart *::before,
body.wa-reserve-custom-chrome.woocommerce-cart *::after {
  box-sizing: border-box;
}


/* ==========================================================================
 * PART A — THE ACTIONS ROW  (mockup .items__footer + .coupon)
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * S.1  The actions <tr> is a block box
 *
 * Restated from the items half so this block stands alone; identical
 * declarations, so pasting both is idempotent. Once the row is a block the
 * colspan=6 is irrelevant and td.actions can simply BE the mockup's footer
 * grid — which retires the float/clearfix/table-fixup apparatus the shipped
 * block needed (13093-13123). Nothing is hidden: a plugin row that is not a
 * cart line keeps rendering, it is only blockified.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  > tbody
  > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item) {
  width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
 * S.2  td.actions — mockup `.items__footer`
 * grid minmax(0,1fr) auto, gap 16px, padding 24px 28px. No align-items: the
 * mockup declares none, so both children stretch to the row box, exactly as
 * drawn. No bottom hairline: the mockup's footer is the last thing in the
 * panel and draws no rule.
 *
 * The shipped rule (13103-13107) also prints a clearfix `::after`. That
 * pseudo-element would become a stray grid item here, so it is neutralised.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions {
  width: auto !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 24px 28px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  white-space: normal;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions::after {
  display: none;
  content: none;
}

/* Core's smallscreen sheet prints `attr(data-title) ": "` on responsive-table
   cells. The approved cart shows no per-cell label in the footer. Narrowed to
   cells that actually carry data-title — exactly and only core's own
   generated label; a plugin's decorative ::before survives. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions[data-title]::before {
  content: none !important;
}

/* --------------------------------------------------------------------------
 * S.3  .coupon — mockup `.coupon`
 * max-width 520px, grid minmax(0,1fr) auto, gap 8px. Field and button are
 * SEPARATE controls with a real 8px gutter — not the joined/zero-gap pair the
 * shipped block builds (13117 `gap: 0` + 13157 `border-right: 0`).
 *
 * NOTE: cart.php fires do_action('woocommerce_cart_coupon') INSIDE .coupon, so
 * a plugin can add a third child. It wraps to a second grid row rather than
 * being squeezed; nothing is hidden.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* WooCommerce's coupon <label> is screen-reader-text by contract and is the
   accessible name for #coupon_code. The approved mockup ships the SAME
   visually-hidden real <label> (`.sr-only`), so native and mockup agree and
   the placeholder is redundant on both. Kept out of the grid flow and IN the
   accessibility tree: not removed, not unhidden, not replaced. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  .coupon
  label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * S.4  #coupon_code — mockup `input`
 * width 100%, min-height 50px, padding 12px 14px, 1px border, #0c0c0b fill,
 * cream text, square. font-size 16px and line-height 1.55 because the mockup
 * sets `button, input { font: inherit }` over a 16px/1.55 body — and because
 * anything under 16px triggers iOS focus zoom. (Shipped: 14px, padding
 * 0 13px, min-height 48px — 13148-13163.)
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  input#coupon_code {
  /* Core's smallscreen sheet floats this at width:48%. */
  float: none !important;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--wa-cart-field-line) !important;   /* [AA] 3.35:1 */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font-family: var(--wa-cart-sans);
  font-size: 16px;
  line-height: 1.55;
}

/* [UNRULED] mockup literal #6e6a62 = 3.64:1 on #0c0c0b. Reproduced as drawn.
   The field has a real visually-hidden label in both mockup and native, so
   this placeholder is decorative duplication, not the accessible name.
   `opacity: 1` only neutralises Firefox's UA placeholder fade so the rendered
   tone IS the declared tone — it does not change the value. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  input#coupon_code::placeholder {
  color: var(--wa-cart-placeholder) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * S.5  Apply coupon + Update cart — mockup `.button.button--secondary`
 *
 * The mockup has exactly TWO tiers and BOTH footer controls are the secondary
 * one. Native's second footer control is Update cart rather than the mockup's
 * Continue shopping; same tier, no new tier invented. There is no filled
 * button anywhere in `.items__footer`, so geometry and ghost skin live in one
 * rule. Both attribute forms are covered: legacy markup is
 * `<input type="submit" name="update_cart">`.
 *
 * Mockup `.button`: min-height 50, padding 12px 20px, 1px border, weight 850,
 * letter-spacing .1em, uppercase, and — via `button { font: inherit }` —
 * 16px/1.55 in the body sans. `border-radius: 0` is stated because the theme
 * rounds buttons; the mockup renders square.
 * (Shipped: 9px/800, padding 0 15px, min-height 48px, and an --action-outlined
 * ghost for Apply coupon vs a separate quiet tertiary for Update cart —
 * 13181-13249.)
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input):is([name="apply_coupon"], [name="update_cart"]) {
  float: none !important;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-ghost-line) !important;  /* [UNRULED] 2.48:1 */
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.55;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The approved cart mockup defines NO :hover on `.button` — neither tier moves
   on hover. These selectors therefore only NEUTRALISE the shipped repaints
   (13214-13217 fills Apply coupon orange; 13251-13259 turns Update cart
   orange). They restate the resting values and repaint nothing. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input):is([name="apply_coupon"], [name="update_cart"]):is(
    :hover,
    :focus
  ) {
  border-color: var(--wa-cart-ghost-line) !important;
  background: transparent !important;
  color: var(--wa-cart-cream) !important;
}

/* mockup `.button:disabled`. WooCommerce ships Update cart disabled until a
   quantity changes. (Shipped 13263-13276 instead recolours the control and
   pins `opacity: 1 !important`, so the approved fade never renders.)
   Still focusable — no pointer-events:none, no aria change. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(button, input):is([name="apply_coupon"], [name="update_cart"]):is(
    [disabled],
    [aria-disabled="true"],
    .disabled
  ) {
  cursor: not-allowed;
  opacity: 0.45 !important;
}

/* Anything else hooked into woocommerce_cart_actions stays contained. Nothing
   is hidden and nothing is repainted. */
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  > :not(.coupon):not([name="update_cart"]) {
  min-width: 0;
  max-width: 100%;
}


/* ==========================================================================
 * PART B — THE COLLATERALS RAIL AND THE SUMMARY  (mockup .summary)
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * S.6  The shell grid + the rail slot
 *
 * SHARED SHELL RULE. The rail cannot be placed or made sticky without it, so
 * it is emitted here: `.entry-content > .woocommerce` IS the mockup's
 * `.layout` — native has no `.layout` element, `form.woocommerce-cart-form`
 * and `.cart-collaterals` are siblings inside that wrapper. The shipped sheet
 * declares this grid at 7113-7125 with the WRONG tracks
 * (minmax(320px,.65fr)), a clamp(24px,3vw,48px) gap, no align-items (so the
 * rail stretches), a 1540px cap and clamp(20px,4vw,64px) gutters.
 * `align-items: start` is load-bearing twice over: it is the mockup value AND
 * it is what stops the rail being stretched, which would kill the sticky.
 * If the items-panel half also emits this rule, keep ONE copy.
 *
 * MEASURE + PADDING are a mapping decision, not a literal: the mockup's outer
 * measure lives on `.cart` (`width: min(calc(100% - 48px), 1480px)`;
 * `padding-block: clamp(48px,6vw,94px) 84px`), which also wraps the h1 and the
 * `.hold` panel. Native's page title and notices sit OUTSIDE
 * `.entry-content > .woocommerce`, so only the measure and the 84px tail carry
 * over literally; the top padding reproduces `.intro { margin-bottom:
 * clamp(42px,5vw,72px) }`, which is the gap the mockup actually draws
 * immediately above `.layout`. Declared as a divergence.
 *
 * The mockup's `.summary` is a direct child of `.layout` and is
 * `position: sticky; top: 24px`. Native's grid child in that slot is
 * `.cart-collaterals`, so the sticky goes on the column and the panel chrome
 * on `.cart_totals`. The shipped sheet has no sticky anywhere.
 *
 * RAIL ORDER: woocommerce_cart_collaterals prints cross-sells BEFORE the
 * totals. That is a DOM ordering problem and must be fixed in PHP, never with
 * flex `order` (it desynchronises visual order from tab and reading order
 * inside a purchase flow — WCAG 1.3.2 / 2.4.3):
 *   remove_action('woocommerce_cart_collaterals','woocommerce_cross_sell_display');
 *   add_action('woocommerce_cart_collaterals','woocommerce_cross_sell_display',20);
 * Until that lands the rail is still correct, just not yet the approved
 * order — see risks.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 24px;
  align-items: start;
  width: min(calc(100% - 48px), 1480px);   /* mockup .cart measure */
  max-width: none;
  margin-inline: auto;
  padding: clamp(42px, 5vw, 72px) 0 84px !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  position: sticky;
  top: 24px;                  /* mockup .summary { top: 24px } */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;                  /* mockup .layout gap, reused between panels */
  min-width: 0;               /* a long method label must not widen the track */
  width: auto;
  max-width: 100%;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
 * S.7  Panel chrome — mockup `.summary`
 * 1px --line hairline on --panel, square, no shadow, padding
 * clamp(24px, 3vw, 40px). (Shipped: clamp(22px,2.6vw,36px) at 7293, on an
 * rgba hairline.)
 *
 * `.cross-sells` has NO approved mockup. It is given the shared panel chrome
 * and nothing else — no invented card grid. Flagged in risks.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells) {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-sans);
  overflow-wrap: anywhere;
}

/* mockup `.summary h2` — serif 500 clamp(32px,3vw,46px)/1, no tracking, 26px
   below. (Shipped: Georgia, clamp(27px,2.4vw,38px), weight 400,
   letter-spacing -0.035em, 22px below — 7300-7310 and again 14743-14755.)
   The mockup also prints an `.eyebrow` ("Order summary") above it and a
   `.summary__note` below the totals; neither has a native element and CSS must
   not invent copy, so neither is reproduced. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(.cart_totals, .cross-sells)
  > h2 {
  margin: 0 0 26px !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(32px, 3vw, 46px) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
 * S.8  TOTALS — mockup `.totals`
 *
 * `.totals` is a stack of `1fr auto` divs; native is a <table>. The table is
 * blockified (markup untouched, only `display` changed) and each <tr> becomes
 * the mockup's row: grid 1fr auto, gap 20px, padding 17px 0, bottom rule 1px
 * DASHED #44413b — and the grand row KEEPS its rule, exactly as drawn. No
 * align-items: the mockup declares none, so cells stretch and their text sits
 * at the top of the row, as drawn.
 * `.totals { margin-bottom: 28px }` becomes the table's bottom margin, which
 * is also the only gap above Proceed to checkout (cart-totals.php renders
 * `.wc-proceed-to-checkout` INSIDE `.cart_totals`).
 *
 * Every rule walks `> tbody > tr >` so it (a) cannot reach a nested table a
 * plugin renders inside a totals cell and (b) matches the specificity of the
 * superseded collaterals layer in case that layer is still present. (HTML
 * parsing always inserts the implied <tbody> cart-totals.php omits.)
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals table.shop_table,
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals table.shop_table {
  margin: 0 0 28px !important;      /* mockup .totals { margin-bottom: 28px } */
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 17px 0 !important;
  border-bottom: 1px dashed var(--wa-cart-dash) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > :is(th, td) {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--wa-cart-sans) !important;
  font-size: 16px !important;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* The mockup gives its FIRST totals row the same 17px top padding as every
   other row. The superseded collaterals layer strips it at 14946 with
   specificity (0,5,4) !important, which out-ranks the (0,4,4) cell rule above;
   restated here at matching specificity so the row is right whether or not
   that layer is deleted. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:first-child
  > :is(th, td) {
  padding: 0 !important;
}

/* Core's responsive sheet prints `attr(data-title) ": "` here too. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > :is(th, td)[data-title]::before {
  content: none !important;
}

/* mockup `.totals span:first-child` — muted, NOT bold, NOT a caps eyebrow.
   (Shipped renders these as a 9px/700/.06em uppercase eyebrow at width 45%
   (13335-13347) / 38% (14819-14835).) <th> is bold, centred and table-header
   by UA default, so weight, alignment and casing are stated explicitly. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > th {
  color: var(--wa-cart-muted) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
}

/* The value cell. In the mockup the second cell inherits cream from <body>;
   the cells carrying a figure are <strong> and therefore bold, the cells
   carrying descriptive text ("Calculated at checkout") are plain spans and are
   not. That distinction is reproduced literally here and below.
   (Shipped: 12px (13354) / 11px (14847) --soft.) */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > td {
  color: var(--wa-cart-cream) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

/* mockup `.totals strong` — the figure: cream and bold. Excluded on the
   shipping row, where the amount sits inside a method LABEL and bolding it
   would invent emphasis the approved design does not have (the mockup's
   Shipping row carries no figure at all).
   SPECIFICITY IS DELIBERATE: this selector computes to (0,6,5), tying the
   superseded layer's `tr.order-total > td :is(.amount, bdi, strong, …)
   { color: --wa-ct-action !important }` (15056-15073) so it wins on source
   order. Do not simplify it while that layer is still in the file. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr:not(.woocommerce-shipping-totals)
  > td
  :is(strong, .amount, bdi) {
  color: var(--wa-cart-cream) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
}

/* mockup `.totals__grand` — 19px on BOTH cells, BOTH cream, sans, weight 700,
   padding 17px, and it KEEPS its dashed rule. (Shipped makes the label a serif
   clamp(18px,1.6-1.7vw,20px), paints the figure --action at 15px — which is
   the CHECKOUT mockup's `.totalRow`, not this one — and sets
   `border-bottom: 0`: 13362-13393 and 15029-15073.) */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.order-total
  > :is(th, td) {
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-sans) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Core's tax small-print ("(includes …)" / "(estimated for …)"). 13px sans,
   sentence case — not the 9px/700/.05em uppercase the superseded layer forces
   onto `.includes_tax` / `.tax_label` (14904-14920). Any OTHER <small> a
   plugin prints in a totals cell is deliberately left at the inherited 16px:
   Reserved Stock Pro and comparable plugins print reservation copy in exactly
   that slot and this block must not shrink it. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  > :is(th, td)
  :is(.includes_tax, .tax_label) {
  display: block;
  margin-top: 5px;
  color: var(--wa-cart-muted) !important;
  font-family: var(--wa-cart-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.5;
  text-transform: none !important;
}

/* Coupon rows: `tr.cart-discount.coupon-{slug}`. The remove control stays a
   LINK — a destructive action must not read as the page's promoted control.
   Anchored through `table.shop_table > tbody > tr` so it outranks the layer's
   own (0,5,4) discount-cell colour rule at 14962. 48px target floor.
   (Shipped: 9px/800/.1em uppercase — 14987-15007.) */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  a.woocommerce-remove-coupon {
  min-height: var(--wa-cart-tap);
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: var(--wa-cart-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-decoration: underline;
  text-transform: none !important;
  text-underline-offset: 4px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr
  a.woocommerce-remove-coupon:hover {
  color: var(--wa-cart-action) !important;
}


/* --------------------------------------------------------------------------
 * S.9  SHIPPING + CALCULATOR — EXTRAPOLATED, FLAGGED
 *
 * The approved cart mockup renders Shipping as a single plain totals row
 * ("Calculated at checkout"). It contains NO method chooser and NO address
 * calculator, so there is nothing to copy. These rules therefore borrow the
 * only approved "choose one of these" pattern in the system — the CHECKOUT
 * mockup's `.payment label` — and add the 48px touch floor and the [AA] field
 * border. This is extrapolation, not cart-mockup fidelity. See risks.
 *
 * `.shipping-calculator-form` is toggled by WooCommerce's own slideToggle and
 * ships with an inline `display: none`. NO display, visibility, height,
 * max-height or overflow declaration is made on that element or on
 * `form.woocommerce-shipping-calculator` anywhere below — only on their
 * descendants — so the toggle keeps working.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.woocommerce-shipping-totals {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > tbody
  > tr.woocommerce-shipping-totals
  > td {
  color: var(--wa-cart-soft) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart ul#shipping_method,
body.wa-reserve-custom-chrome.woocommerce-cart .woocommerce-shipping-methods {
  display: grid;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 0 !important;
  list-style: none;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  > li {
  min-height: var(--wa-cart-tap);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--wa-cart-field-line);   /* [AA] 3.35:1 */
  background: var(--wa-cart-field);
  color: var(--wa-cart-soft) !important;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  > li:is(:has(input:checked), :focus-within) {
  border-color: var(--wa-cart-action);
}

/* The label fills the row, so the whole 48px band is the tap target rather
   than the radio dot alone. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  > li
  label {
  min-width: 0;
  margin: 0 !important;
  color: inherit !important;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* Colour only. No width/height is set on the radio: a fixed box on a core
   control is a fixed height, and it stops the dot growing under text zoom. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  > li
  input[type="radio"] {
  margin: 0;
  accent-color: var(--wa-cart-action);
}

/* "Shipping to <strong>…</strong>" — the shipped blanket
   `.cart_totals :where(.order-total, .order-total .amount, strong)
   { color: cream !important }` (7332-7336) catches this string too; here it is
   muted copy with a soft emphasis, like the mockup's `.reservation`. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-destination {
  margin: 0 0 8px !important;
  color: var(--wa-cart-muted) !important;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-destination
  strong {
  color: var(--wa-cart-soft) !important;
  font-weight: 700;
}

body.wa-reserve-custom-chrome.woocommerce-cart a.shipping-calculator-button {
  min-height: var(--wa-cart-tap);
  display: inline-flex;
  align-items: center;
  color: var(--wa-cart-action) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Descendants only — the wrapper's own display stays WooCommerce's business. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  .form-row {
  width: 100% !important;
  min-width: 0;
  float: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* mockup `input` (with the [AA] border) */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input.input-text, input[type="text"], select) {
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--wa-cart-field-line) !important;   /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font-family: var(--wa-cart-sans);
  font-size: 16px;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  ::placeholder {
  color: var(--wa-cart-placeholder) !important;   /* [UNRULED] 3.64:1 */
  opacity: 1;
}

/* Calculator submit — the mockup's secondary tier, full width in this rail.
   No hover: the approved `.button` has none. The :hover/:focus selector only
   neutralises the shipped orange fill at 13555-13560. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"],
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(button, input)[name="calc_shipping"]:is(:hover, :focus) {
  width: 100% !important;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-ghost-line) !important;  /* [UNRULED] 2.48:1 */
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-cream) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* select2, if WooCommerce enhances the country/state selects. Route-qualified
   rather than chrome-wide: select2 reparents its dropdown to <body>, which
   still carries .woocommerce-cart, so this still matches — while Checkout and
   My Account keep their own field tokens. Colour and geometry only; nothing is
   hidden. The width guard is select2's known zero-width bug when it
   initialises inside the hidden calculator section. No fixed height, so a long
   country name can wrap.
   UNVERIFIED: select2 may not be enqueued on this build's cart. Inert if not. */
body.wa-reserve-custom-chrome.woocommerce-cart .select2-container {
  width: 100% !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .select2-container--default
  :is(
    .select2-selection,
    .select2-dropdown,
    .select2-search--dropdown .select2-search__field
  ) {
  height: auto !important;
  min-height: var(--wa-cart-control);
  border: 1px solid var(--wa-cart-field-line) !important;   /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: var(--wa-cart-action) !important;
  color: var(--wa-cart-action-ink) !important;
}


/* --------------------------------------------------------------------------
 * S.10  PROCEED TO CHECKOUT — mockup `.button` + `.checkout-button`
 *
 * The ONE filled action on the page: full width, min-height 50px, 1px --action
 * border, --action fill, --action-dark #0b0c0a label, 16px/1.55/850/.1em
 * uppercase, square. `height: auto` so a two-line label cannot clip. The
 * mockup's `.totals { margin-bottom: 28px }` already sets the gap, so this
 * element takes no padding of its own — cart-totals.php renders
 * `.wc-proceed-to-checkout` inside `.cart_totals`, directly after the table,
 * exactly where the mockup puts the button.
 * (Shipped: 11px/.13em/54px/#080807 label at 7351-7368, then 10px/.13em/54px/
 * padding 12px 18px at 15498-15525.)
 *
 * The approved cart mockup defines NO :hover on `.button` — the fill does not
 * move. The :hover/:focus selectors below therefore only NEUTRALISE the
 * shipped `background: cream !important` (7370-7376) and the invented #d58a54
 * hover (13606-13612, 15526-15537) — a colour that appears in NEITHER approved
 * mockup. They repaint nothing.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .wc-proceed-to-checkout {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button,
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button:hover,
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button:focus {
  width: 100% !important;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-action-ink) !important;
  cursor: pointer;
  font-family: var(--wa-cart-sans) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.55;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Anything else a plugin hooks into woocommerce_proceed_to_checkout is
   contained and otherwise left alone — gateway express buttons keep their own
   brand, which is usually a requirement of the gateway's own terms. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  > :not(a.checkout-button) {
  min-width: 0;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
 * S.11  FOCUS — mockup `:focus-visible { outline: 3px solid var(--action);
 * outline-offset: 3px }`. The shipped sheet sets 2px with !important at
 * 7444-7448, so this restates at 3px. The two selectors exist to out-specify
 * both that rule and the superseded collaterals layer's own 2px ring.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  :is(a, button, input, select, textarea, [tabindex]):focus-visible,
body.wa-reserve-custom-chrome.woocommerce-cart
  table.shop_table.cart
  td.actions
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wa-cart-action) !important;
  outline-offset: 3px !important;
}


/* ==========================================================================
 * S.12  RESPONSIVE — the mockup's own breakpoints: 1080 / 720 / 390
 * (the shipped extrapolation uses 1050 / 860 / 680 / 600 / 400 — five
 * breakpoints, none of which is a mockup breakpoint)
 * ========================================================================== */

/* --- 1080px: single column; the summary stops sticking ------------------ */
@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  /* max-width/margin restated to neutralise the superseded layer's
     `max-width: 680px; margin-inline: auto !important` at 15742-15748, which
     caps and centres the rail — the mockup does neither. */
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
    grid-column: 1;
    position: static;          /* mockup `.summary { position: static }` */
    top: auto;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
  }
}

/* --- 720px: measure narrows; the footer stacks; controls go full width -- */
@media (max-width: 720px) {
  /* mockup `.cart { width: min(calc(100% - 28px), var(--max)) }` */
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    width: min(calc(100% - 28px), 1480px);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px !important;   /* mockup .items__footer { padding: 22px } */
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    .coupon {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    :is(button, input):is([name="apply_coupon"], [name="update_cart"]) {
    width: 100% !important;
  }
}

/* --- 390px: the mockup changes nothing in the footer or the summary, so
 * nothing is declared here. The rail is already single-column, the coupon is
 * already stacked and every control is already full width. Stated explicitly
 * so a future reader does not read this as an omission. */


/* --------------------------------------------------------------------------
 * S.13  REDUCED MOTION
 * The approved mockup animates nothing but smooth scrolling, so this block
 * declares no transitions at all. This neutralises any inherited from the
 * theme, from WooCommerce or from a superseded layer (140ms ease at 13208,
 * 13248, 13602, 15006, 15524).
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals,
  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals *,
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions,
  body.wa-reserve-custom-chrome.woocommerce-cart
    table.shop_table.cart
    td.actions
    * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* --------------------------------------------------------------------------
 * S.14  FORCED COLORS
 * The design is carried by hairlines; in forced-colors mode they drop to the
 * system palette so every boundary survives. (The mockup has none — added,
 * and declared as a divergence.)
 * -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(
      .cart-collaterals .cart_totals,
      .cart-collaterals .cross-sells,
      :is(ul#shipping_method, .woocommerce-shipping-methods) > li,
      table.shop_table.cart td.actions input#coupon_code
    ) {
    border: 1px solid CanvasText !important;
  }
}


/* --------------------------------------------------------------------------
 * S.15  AJAX BUSY OVERLAY
 * jQuery blockUI paints an INLINE white sheet over the totals rail on every
 * quantity, coupon and shipping update. Inline styles can only be beaten with
 * !important. Cart-scoped, per the scoping rule.
 * IF PART 1 IS DELETED, RETAIN OR RE-HOME its chrome-scoped twin at style.css
 * 13298-13302 — otherwise mini-cart, checkout and add-to-cart AJAX lose the
 * dark overlay and flash white. See risks.
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart .blockUI.blockOverlay {
  background: var(--wa-cart-ink) !important;
  background-color: var(--wa-cart-ink) !important;
  opacity: 0.72 !important;
}
/* ==== White Ash Reserve — cart actions + collaterals/summary — END ======= */

/* ==========================================================================
 * WHITE ASH RESERVE — CART, REBUILT AGAINST THE APPROVED MOCKUP
 * Source of truth: outputs/mockup-html/white-ash-cart-mockup.html (read in
 * full: :root, .cart, .intro, .eyebrow, h1, .intro__copy, .hold*, .layout,
 * .items, .items__head, .cart-item, .product*, .reservation, .quantity,
 * .line-total, .remove, .items__footer, .coupon, input, .button*, .summary,
 * .totals*, .summary__note, .empty, :focus-visible, and all four media
 * queries — 1080 / 720 / 390 / prefers-reduced-motion).
 *
 * PLACEMENT: replaces the whole extrapolated cart block that currently begins
 * after "Approved checkout structural parity - END" (style.css line 7771) and
 * runs from ~12447 (PART 1 — CART) through PART 3. Paste in the same place.
 *
 * SCOPE: every selector begins body.wa-reserve-custom-chrome.woocommerce-cart.
 * Nothing here can reach a route the custom chrome does not own.
 *
 * CONTRACT: presentation only. WooCommerce owns every cart line, price,
 * quantity, coupon, shipping method, nonce and submission. Reserved Stock Pro
 * owns reservation state and its countdown — its panel is re-skinned and
 * NOTHING else: no second timer, no recomputation, and no display/visibility/
 * opacity/inset/position on the plugin's own footer instance. No price,
 * quantity, product name or total is written by CSS, and no mockup copy is
 * reproduced. The only `content:` strings are the mockup's own 390px remove
 * label and the removal of core's notice glyph from the empty-cart message.
 *
 * WHY !important: the sheet already declares padding, border, background,
 * color, width, float and height on these exact selectors with !important
 * (cart/checkout fidelity block ~7057-7771; global notice block ~6425-6560;
 * the sitewide :where(button.button, a.button, input.button) rule ~160), and
 * functions.php prints a critical block at wp_head priority 100 — i.e. AFTER
 * this stylesheet. Source order cannot beat that; specificity can, and every
 * selector here carries .woocommerce-cart on top of .wa-reserve-custom-chrome.
 * !important is omitted on every property nothing upstream declares.
 *
 * ONE AUTHORISED DEVIATION from the mockup: form-field border
 * #4b4943 -> #4b4943 (2.17:1 -> 3.35:1, WCAG 2.1 AA 1.4.11). Marked [AA].
 * Three further sub-threshold boundaries are reproduced EXACTLY AS DRAWN and
 * marked [UNRULED] — reported for the owner, never silently amended:
 *   .quantity border #504e48 (2.29:1), .button--secondary border #56534c
 *   (2.48:1), input::placeholder #6e6a62 (3.64:1).
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * C.0  TOKENS — read straight off the mockup's :root
 * -------------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart {
  --wa-cart-ink: #080807;
  --wa-cart-panel: #10100f;
  --wa-cart-raised: #171715;
  --wa-cart-cream: #f4f0e5;
  --wa-cart-soft: #d7d1c4;
  --wa-cart-muted: #958f84;
  /* OPAQUE #34332f, as drawn. The shipped sheet uses
     rgba(244,240,229,.15), which composites to ~#2b2a26 on the ink — a
     visibly darker hairline than the approved one. */
  --wa-cart-line: #34332f;
  --wa-cart-action: #c87945;
  --wa-cart-action-ink: #0b0c0a;

  --wa-cart-field: #0c0c0b;
  /* [AA] the single authorised deviation. The mockup draws #4b4943. */
  --wa-cart-field-line: #4b4943;
  /* [UNRULED] 3.64:1 — mockup value, reproduced, reported. */
  --wa-cart-placeholder: #6e6a62;
  /* [UNRULED] 2.29:1 — the quantity control's only visible edge. */
  --wa-cart-qty-line: #504e48;
  /* [UNRULED] 2.48:1 — the secondary button's only visible edge. */
  --wa-cart-secondary-line: #56534c;
  /* Dashed rule between totals rows. */
  --wa-cart-totals-line: #44413b;

  --wa-cart-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;

  --wa-cart-max: 1480px;
  --wa-cart-gutter: 48px;   /* mockup: width: min(calc(100% - 48px), --max) */
  --wa-cart-pad: 28px;      /* .cart-item / .items__head / .items__footer */
  --wa-cart-thumb: 112px;   /* .product first track */
  /* Touch floor expressed as a MINIMUM, never a height, so it survives
     text-only zoom. The mockup's 48px `.remove` and 50px `.button` are read
     as floors for the same reason — see "divergences". */
  --wa-cart-tap: max(48px, 3rem);
  --wa-cart-control: max(50px, 3.125rem);
}

/* mockup `* { box-sizing: border-box }`, `body { min-width: 320px;
   overflow-x: hidden }`, `html { scroll-behavior: smooth }`. */
body.wa-reserve-custom-chrome.woocommerce-cart,
body.wa-reserve-custom-chrome.woocommerce-cart *,
body.wa-reserve-custom-chrome.woocommerce-cart *::before,
body.wa-reserve-custom-chrome.woocommerce-cart *::after {
  box-sizing: border-box;
}

body.wa-reserve-custom-chrome.woocommerce-cart {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--wa-cart-ink) !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(
    #main-container,
    main#main,
    .site-main,
    .site-content,
    .content-area,
    .ct-container,
    .ct-container-full,
    .ct-content,
    article,
    .entry-content,
    .woocommerce
  ) {
  background: var(--wa-cart-ink) !important;
  color: var(--wa-cart-soft) !important;
}

/* mockup `:focus-visible { outline: 3px solid var(--action); offset: 3px }`.
   Declared once, globally for the route, so no control can fall back to the
   theme's 2px ring. */
body.wa-reserve-custom-chrome.woocommerce-cart :focus-visible {
  outline: 3px solid var(--wa-cart-action) !important;
  outline-offset: 3px !important;
}


/* ==========================================================================
 * C.1  THE INTRO BAND — mockup `.intro`
 *
 * Native has no `.intro` container and no aside slot, so the mockup's
 * two-column intro (copy | .hold) is mapped as a single column and the hold
 * panel is handled separately in C.2. See "divergences".
 * ========================================================================== */

/* --- C.1a  The band. `:is()` not `:where()`, so this outranks the shipped
 * `:where(.entry-header, .hero-section, .page-title-section)` at style.css
 * 7669-7678 on specificity rather than source order.
 *
 * Measure is the mockup's: a flat 24px gutter each side, capped at 1480px —
 * NOT the shipped 1540px + clamp(20px,4vw,64px). The mockup draws no rule
 * under the intro, so the shipped border-bottom is removed.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.entry-header, .hero-section, .page-title-section) {
  width: min(calc(100% - var(--wa-cart-gutter)), var(--wa-cart-max));
  max-width: var(--wa-cart-max);
  margin-inline: auto;
  /* mockup `.cart { padding-block: clamp(48px,6vw,94px) 84px }` — TOP only.
     The intro's own bottom gap (`.intro { margin-bottom: clamp(42px,5vw,72px)
     }`) belongs after the intro COPY, which native renders outside this band,
     so the shell's top padding carries it (C.3). */
  padding: clamp(48px, 6vw, 94px) 0 0 !important;
  border-bottom: 0 !important;
  background: var(--wa-cart-ink) !important;
}

/* --- C.1b  h1 --------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.entry-title, .page-title, h1.entry-title, h1.page-title) {
  max-width: 830px;
  margin: 0 !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(56px, 7.4vw, 112px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.88 !important;
  /* Not in the mockup: a long localised title must wrap rather than push the
     page sideways at 320px. Wrapping only — no size change. */
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* --- C.1c  The eyebrow — mockup `.eyebrow` (byte-identical in the approved
 * checkout mockup, so it is a system token, not a cart one-off).
 *
 * There is NO native element in this position and CSS must not invent copy.
 * This styles OWNER-AUTHORED carriers only: a paragraph the owner tags
 * `wa-cart-eyebrow` on the Cart page, or Blocksy's page-title description.
 * If neither exists, no eyebrow renders and nothing is faked.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.entry-header, .hero-section, .page-title-section, .entry-content)
  :is(p.wa-cart-eyebrow, .wa-cart-eyebrow, .page-description) {
  max-width: 100%;
  margin: 0 0 12px !important;
  color: var(--wa-cart-action) !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* --- C.1d  Intro copy — mockup `.intro__copy`. The only native carrier is
 * owner-authored page content preceding the [woocommerce_cart] output;
 * `:has(~ .woocommerce)` confines the rule to exactly that.
 * ---------------------------------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  .entry-content
  > p:has(~ .woocommerce) {
  width: min(calc(100% - var(--wa-cart-gutter)), var(--wa-cart-max));
  max-width: var(--wa-cart-max);
  /* mockup `.intro__copy { margin: 24px 0 0 }` — the gap under the h1. */
  margin: 24px auto 0 !important;
  /* The BLOCK takes the shell measure so its left edge lines up with the
     panels below; the padding caps the TEXT at the mockup's 660px without
     centring it, and collapses to 0 once the shell is narrower than 660px. */
  padding-right: max(0px, 100% - 660px);
  color: var(--wa-cart-muted) !important;
  font-family: inherit;
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .entry-content
  > p:has(~ .woocommerce)
  + p:has(~ .woocommerce) {
  margin-top: 24px !important;   /* mockup `.intro__copy { margin: 24px 0 0 }` */
}


/* ==========================================================================
 * C.2  RESERVED STOCK PRO — the mockup's `.hold` panel
 *
 * VERIFIED in the plugin source (build/plugin-review/reserved-stock-pro):
 *   classes/class-countdown.php:97,111 emit ONLY
 *     <div class="rsp-countdown-wrapper %s">
 *       <div class="rsp-countdown-content" data-expiration-timestamp="…">…
 *   assets/css/countdown.css:1 pins that wrapper
 *     position:fixed; left:50%; bottom:30px; transform:translateX(-50%)
 *   and hides it with `.rsp-no-reservations { display: none }`;
 *   the countdown TEXT is one admin-configurable string
 *   (class-countdown.php:52, default "Cart items are reserved for {minutes}
 *   minutes and {seconds} seconds.") substituted by assets/js/countdown.js.
 *
 * Consequences:
 *   1. The panel is a fixed bottom bar, not an intro aside. Placement is the
 *      plugin's (`rsp_default_countdown_location` / the [rsp_countdown]
 *      shortcode), so NO position, inset, transform, z-index or display is
 *      declared on the plugin's own instance. Chrome only.
 *   2. By default there is no element around the digits, so the mockup's
 *      `.hold__time` has no carrier. It is applied to strong/b/time only,
 *      which exist ONLY if the owner wraps the placeholders in the plugin's
 *      countdown-text setting. Nothing fakes the figure and nothing here
 *      reads, formats or recomputes the expiry.
 *   3. The mockup's `.hold__label` has no counterpart and is NOT invented.
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-wrapper {
  /* Cannot exceed the viewport at 390 or 320. No fixed width, no height. */
  max-width: min(calc(100vw - var(--wa-cart-gutter)), 560px);
  padding: 24px;                                    /* mockup `.hold` */
  border: 1px solid var(--wa-cart-line);
  border-top: 2px solid var(--wa-cart-action);
  border-radius: 0;
  background: var(--wa-cart-panel);
  box-shadow: none;             /* the plugin ships 0 0 8px -1px #000000bf */
  color: var(--wa-cart-muted);
  font-family: inherit;
  font-size: 13px;                                  /* mockup `.hold p` */
  line-height: 1.55;
  text-align: left;                            /* the plugin centres it */
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-content {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  overflow-wrap: anywhere;
}

/* mockup `.hold__time`. NO font-weight and NO margin are declared, because
   the mockup declares neither — its `.hold__time` is a <strong>, so the
   figure is bold by inheritance. Renders only where the owner has wrapped
   {minutes}/{seconds} in <strong>, <b> or <time> in Reserved Stock Pro's
   countdown-text setting; absent that, this matches nothing and the panel is
   muted body copy, which is the honest result. Because the figure is a
   BLOCK, the wrapped part must END the string or the sentence splits — that
   is an owner decision about their own copy. CSS supplies none of it. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .rsp-countdown-wrapper
  :is(strong, b, time) {
  display: block;
  color: var(--wa-cart-cream);
  font-family: var(--wa-cart-serif);
  font-size: clamp(36px, 4vw, 54px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* mockup `.hold p { margin: 12px 0 0; color: muted; font-size: 13px }`. */
body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-wrapper p {
  margin: 12px 0 0;
  color: var(--wa-cart-muted);
  font-size: 13px;
}

/* The plugin's loading dots, in the system accent. Colour only — the markup,
   the animation and the loading state stay the plugin's. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .rsp-countdown-loading-dots--dot {
  background-color: var(--wa-cart-action);
}

/* The in-flow variant. Reaching the mockup's intro-aside placement needs an
   OWNER action, not CSS: filter `rsp_default_countdown_location` to false and
   print [rsp_countdown] in the Cart page content. This rule styles that case
   and only that case — the selector requires the wrapper to be inside
   .entry-content, which the wp_footer instance never is. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .entry-content
  .rsp-countdown-wrapper {
  position: static;
  width: min(100%, 430px);      /* mockup `.intro` aside track upper bound */
  max-width: 100%;
  margin: 0 0 24px;
  transform: none;
}


/* ==========================================================================
 * C.3  THE SHELL — mockup `.layout`
 *
 * `.entry-content > .woocommerce` carries the form and the collaterals as
 * direct children, so it is the `.layout` grid. The selector repeats the
 * shipped `#main-container` hop (style.css 7113) so it can out-specify it.
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce {
  display: grid;
  /* mockup: minmax(0, 1.35fr) minmax(360px, .65fr), gap 24px.
     Shipped: minmax(320px, .65fr) and gap clamp(24px, 3vw, 48px). */
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 24px;
  align-items: start;
  width: min(calc(100% - var(--wa-cart-gutter)), var(--wa-cart-max));
  max-width: var(--wa-cart-max);
  margin-inline: auto;
  /* mockup `.intro { margin-bottom: clamp(42px,5vw,72px) }` above,
     `.cart { padding-block: … 84px }` below. */
  padding: clamp(42px, 5vw, 72px) 0 84px !important;
}

/* WooCommerce prints the notices wrapper, the empty message and the return
   link as DIRECT children of `.woocommerce`, and so do most cart plugins.
   Without this the first of them claims the 1.35fr track and shoves the item
   panel into the summary column. Written as a NEGATION so it also covers
   markup that does not exist yet — the shipped rule at style.css 7127-7140
   enumerates five known classes and misses everything else. */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce
  > :not(form.woocommerce-cart-form):not(.cart-collaterals) {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* An empty cart has no form, so the summary track would leave a 360px void. */
body.wa-reserve-custom-chrome.woocommerce-cart
  #main-container
  .entry-content
  > .woocommerce:not(:has(form.woocommerce-cart-form)) {
  grid-template-columns: minmax(0, 1fr);
}


/* ==========================================================================
 * C.4  THE ITEMS PANEL — mockup `.items`
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart form.woocommerce-cart-form {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
  /* HARD RULE: a wide table scrolls in its own container, never the page.
     The rows below are grids, so this should never engage — it is the net
     for a plugin column or a long locale string. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-cart-line) transparent;
  -webkit-overflow-scrolling: touch;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar {
  height: 8px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form::-webkit-scrollbar-thumb {
  background: var(--wa-cart-line);
}

/* The approved design is a card list, not a table grid: the mockup uses
   <article> rows with `display: grid`. The native table is re-laid out to
   match — styled, never replaced; every cell keeps its class, its content and
   its DOM order. See "risks" for the table-semantics consequence. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > :is(thead, tbody, tfoot) {
  display: block;
  min-width: 0;
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  :is(td, th) {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
  overflow-wrap: anywhere;
}


/* ==========================================================================
 * C.5  THE COLUMN HEAD — mockup `.items__head`
 *
 * Native prints SIX header cells (remove, thumbnail, name, price, quantity,
 * subtotal) where the mockup draws four labels. The mockup has no price
 * column and native output may not be hidden, so `Price` takes the same slot
 * its VALUE takes in the body row — the second line of the Selection track —
 * and Quantity, Subtotal and the remove slot centre across both lines. See
 * "divergences".
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  > tr {
  display: grid;
  /* The mockup's `minmax(0,1fr) 140px 120px 48px` with the `.product`
     grid's own 112px first track hoisted, because native puts the thumbnail
     and the name in SEPARATE cells and CSS cannot nest them. */
  grid-template-columns:
    var(--wa-cart-thumb) minmax(0, 1fr) 140px 120px 48px;
  column-gap: 20px;
  row-gap: 6px;
  align-items: center;
  min-height: 64px;
  padding: 12px var(--wa-cart-pad);
  border-bottom: 1px solid var(--wa-cart-line);
  color: var(--wa-cart-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-align: left;
  text-transform: inherit !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-thumbnail {
  grid-column: 1;
  grid-row: 1 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-name {
  grid-column: 2;
  grid-row: 1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-price {
  grid-column: 2;
  grid-row: 2;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-quantity {
  grid-column: 3;
  grid-row: 1 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-subtotal {
  grid-column: 4;
  grid-row: 1 / -1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  > thead
  th.product-remove {
  grid-column: 5;
  grid-row: 1 / -1;
}


/* ==========================================================================
 * C.6  THE ITEM ROW — mockup `.cart-item`
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns:
    var(--wa-cart-thumb) minmax(0, 1fr) 140px 120px 48px;
  /* mockup `.cart-item` gap 20px; `.product` gap 22px. One grid can carry one
     column-gap, so the row takes 20px and the thumbnail cell makes up the
     extra 2px (C.7a). Row gap is the mockup's `.reservation` 10px rhythm. */
  column-gap: 20px;
  row-gap: 10px;
  align-items: center;
  padding: var(--wa-cart-pad);
  border-bottom: 1px solid var(--wa-cart-line);
  background: transparent;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-thumbnail {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-name {
  grid-column: 2;
  grid-row: 1;
}

/* The mockup has no price column. Native's unit price is placed under the
   title, in the type the mockup gives `.reservation` — the only place in the
   approved row where a muted secondary line exists. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-price {
  grid-column: 2;
  grid-row: 2;
  color: var(--wa-cart-muted) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-quantity {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-subtotal {
  grid-column: 4;
  grid-row: 1 / -1;
  align-self: center;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tr.woocommerce-cart-form__cart-item
  > td.product-remove {
  grid-column: 5;
  grid-row: 1 / -1;
  align-self: center;
}


/* ==========================================================================
 * C.7  THE PRODUCT CELL — mockup `.product`, `.product__image`,
 *      `.product__meta`, `.product h2`, `.reservation`
 * ========================================================================== */

/* --- C.7a  The image frame -------------------------------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-thumbnail {
  width: var(--wa-cart-thumb);
  /* aspect-ratio, NOT a height: the frame scales with the track. */
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* style.css 20280-20287 still declares `padding-right: 2px !important` from
     the layer that drew the hairline on the IMG and used padding to make up
     the mockup's 22px `.product` gap. This rule moved that hairline onto the
     frame and the gap onto margin-right, so the leftover padding now only
     insets the picture 2px from its own frame's right edge. The mockup's
     `.product__image` has no padding and the image fills the square. */
  padding: 0 !important;
  /* Makes up the mockup's 22px `.product` gap over the row's 20px. */
  margin-right: 2px;
  border: 1px solid var(--wa-cart-line) !important;
  background:
    radial-gradient(circle at 64% 34%, rgba(200, 121, 69, 0.3), transparent 20%),
    linear-gradient(145deg, #23231f, #0b0b0a) !important;
  color: var(--wa-cart-cream);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-thumbnail
  :is(a, img) {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  margin: 0;
  /* mockup `.product__image` carries ONE hairline, and it is on the FRAME.
     Three earlier layers also draw a border on the IMG - style.css 7205-7214
     (0,5,3), 12700-12712 (0,5,4) and 20360-20375 (0,5,4, !important) - so the
     tile renders as a box inside a box and the picture never fills the 112px
     track. Neutralised here because this is the highest-specificity,
     last-in-source rule that reaches the image. width/height need !important
     for the same reason: 20364-20366 declares `width: 100% !important` and
     `height: auto !important`. */
  border: 0 !important;
  object-fit: cover;
}

/* --- C.7b  Title, attributes, reservation message ---------------------- */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-name {
  color: var(--wa-cart-cream) !important;
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-name
  > a {
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.05 !important;
  text-decoration: none !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

/* Variation attributes are native's nearest thing to the mockup's
   `.product__meta` (action caps above the title). They are NOT reordered
   above the title: flex/grid reordering would break DOM-vs-visual sequence
   (WCAG 1.3.2), so they keep the type and follow the title. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-name
  :is(dl.variation, .wc-item-meta) {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--wa-cart-action) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-name
  :is(dl.variation, .wc-item-meta)
  :is(dt, dd, p, li) {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit;
}

/* Reserved Stock Pro's per-line message
   (class-frontend.php:473, hooked to woocommerce_after_cart_item_name, so it
   renders inside td.product-name) maps to the mockup's `.reservation` line:
   13px muted with a `--soft` strong. The shipped sheet draws it as a bordered
   chip with a 3px left rule — no such object exists in the approved design.
   No display/visibility/opacity/height is set: the plugin owns whether it
   appears and what it says. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-wrapper {
  max-width: 100%;
  margin: 10px 0 0;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-expiry {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wa-cart-muted) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .reserved-stock-pro-cart-expiry
  :is(strong, b) {
  color: var(--wa-cart-soft) !important;
}


/* ==========================================================================
 * C.8  QUANTITY — mockup `.quantity`
 *
 * The mockup puts the boundary on the `.quantity` BOX (1px #504e48) and gives
 * the controls inside `border: 0`. The shipped sheet puts a border on
 * `input.qty` instead and leaves the box bare. Corrected here.
 *
 * Native prints only `<label class="screen-reader-text">` + `input.qty`, so
 * the mockup's `44px 38px 44px` three-track grid can only be complete when a
 * plugin adds steppers — a `:has()` variant below supplies it then. Nothing
 * inside `.quantity` is ever hidden.
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  .quantity {
  min-width: 126px;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--wa-cart-qty-line) !important;   /* [UNRULED] 2.29:1 */
  border-radius: 0 !important;
  background: transparent !important;
}

/* The complete mockup control, when a plugin supplies the two steppers. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  .quantity:has(:is(button, a.plus, a.minus, .plus, .minus)) {
  grid-template-columns: 44px minmax(38px, 1fr) 44px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  .quantity
  input.qty {
  width: 100%;
  min-width: 38px;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  padding: 0 6px !important;
  border: 0 !important;                    /* mockup: the box carries the edge */
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* mockup `.quantity button`: 44 x 48 minimum, no border, transparent,
   `--soft`. Styled, never hidden. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  .quantity
  :is(button, a.plus, a.minus, .plus, .minus) {
  min-width: 44px;
  height: auto !important;
  min-height: var(--wa-cart-tap) !important;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wa-cart-soft) !important;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  text-decoration: none !important;
}

/* Sold-individually and fixed-quantity lines print a plain string instead of
   an input. Keep it legible rather than letting it read as a dead control. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  .quantity:not(:has(input.qty)) {
  padding: 12px 14px;
  border-color: transparent !important;
  color: var(--wa-cart-soft) !important;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
 * C.9  SUBTOTAL AND REMOVE — mockup `.line-total`, `.remove`
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-subtotal {
  color: var(--wa-cart-cream) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* mockup `.remove { width: 48px; height: 48px }`. Expressed as MINIMA, per
   the brief's no-fixed-heights rule — the painted box is identical at the
   default text size and grows instead of clipping under text-only zoom. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-remove
  a.remove {
  width: auto !important;
  min-width: 48px;
  height: auto !important;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wa-cart-muted) !important;
  cursor: pointer;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1;
  text-decoration: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.product-remove
  a.remove:is(:hover, :focus-visible) {
  border-color: var(--wa-cart-line) !important;
  background: transparent !important;
  color: var(--wa-cart-action) !important;
}


/* ==========================================================================
 * C.10  THE ACTIONS FOOTER — mockup `.items__footer`, `.coupon`, `input`,
 *       `.button`, `.button--secondary`
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tbody
  > tr:has(> td.actions) {
  display: block;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  td.actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 24px var(--wa-cart-pad) !important;
  border: 0 !important;
  background: transparent !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon {
  max-width: 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Column gap only. Core's `<label class="screen-reader-text">` is a third
     child; where a theme leaves it in flow it takes the collapsed first row
     instead of stealing the field's cell. */
  gap: 0 8px;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon
  > label {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon
  > input#coupon_code {
  grid-column: 1;
  grid-row: 2;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon
  > button[name="apply_coupon"] {
  grid-column: 2;
  grid-row: 2;
}

/* mockup `input`. The border is the ONE authorised deviation: #4b4943 has
   been raised to #4b4943 (2.17:1 -> 3.35:1, WCAG 2.1 AA 1.4.11). Everything
   else is the mockup's. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon
  input#coupon_code {
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--wa-cart-field-line) !important;      /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font: inherit;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  .coupon
  input#coupon_code::placeholder {
  color: var(--wa-cart-placeholder);                 /* [UNRULED] 3.64:1 */
  opacity: 1;
}

/* mockup `.button` — the ONE button scale in the approved cart:
   min-height 50, padding 12px 20px, inherited 1rem, weight 850, .1em caps.
   The mockup declares NO hover on `.button`, so none is declared here; the
   :hover selectors that follow exist only to neutralise the cream/#d58a54
   repaints that the shipped sheet and the wp_head critical block apply.

   Written as a SELECTOR LIST, not one :is() group: an :is() takes the
   specificity of its most specific arm, which would make every arm as
   specific as the worst one and stop the 720px full-width rules and the
   checkout button's own `width: 100%` from ever landing. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="apply_coupon"],
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="update_cart"],
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  input[name="update_cart"],
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  .shipping-calculator-form
  button,
body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button,
body.wa-reserve-custom-chrome.woocommerce-cart
  p.return-to-shop
  a.button {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-action) !important;
  background-color: var(--wa-cart-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-action-ink) !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.55;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* mockup `.button--secondary { border-color: #56534c; background: transparent;
   color: var(--cream) }`. Apply coupon, Update cart, Calculate shipping and
   Return to shop are the mockup's secondary tier ("Apply coupon", "Continue
   shopping"); Proceed to checkout is the only filled action on the page. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="apply_coupon"],
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="update_cart"],
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  input[name="update_cart"],
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  .shipping-calculator-form
  button,
body.wa-reserve-custom-chrome.woocommerce-cart
  p.return-to-shop
  a.button {
  border-color: var(--wa-cart-secondary-line) !important;   /* [UNRULED] 2.48:1 */
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wa-cart-cream) !important;
}

/* No hover repaint exists in the approved mockup. These rules only hold the
   resting state against the theme's and the critical block's hovers. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="apply_coupon"]:is(:hover, :focus, :active),
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  button[name="update_cart"]:is(:hover, :focus, :active),
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  input[name="update_cart"]:is(:hover, :focus, :active),
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  .shipping-calculator-form
  button:is(:hover, :focus, :active),
body.wa-reserve-custom-chrome.woocommerce-cart
  p.return-to-shop
  a.button:is(:hover, :focus, :active) {
  border-color: var(--wa-cart-secondary-line) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wa-cart-cream) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button:is(:hover, :focus, :active) {
  border-color: var(--wa-cart-action) !important;
  background: var(--wa-cart-action) !important;
  background-color: var(--wa-cart-action) !important;
  color: var(--wa-cart-action-ink) !important;
}

/* mockup `.button:disabled { cursor: not-allowed; opacity: .45 }`. This is
   the approved resting look of a control WooCommerce has ALREADY disabled —
   it does not disable, hide or block anything itself. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  :is(button, input)[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Anything else WooCommerce or a plugin hooks into the actions cell
   (`woocommerce_cart_actions`) spans the footer instead of fighting for a
   track. Hidden inputs and the nonce stay out of the grid flow naturally. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  td.actions
  > :not(.coupon):not([name="update_cart"]):not(input[type="hidden"]):not(script):not(style):not(template):not(noscript) {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* ==========================================================================
 * C.11  THE SUMMARY RAIL — mockup `.summary`, `.totals`, `.summary__note`
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  /* mockup `.items, .summary { border: 1px solid var(--line); background:
     var(--panel) }` - the SUMMARY is the panel and nothing bordered wraps it.
     style.css 21033-21045 panels `.cart-collaterals` itself with !important.
     This rule already zeroes that layer's padding but not its border or its
     fill, so the summary renders inside a second concentric hairline. */
  border: 0 !important;
  background: transparent !important;
  display: grid;
  gap: 24px;
  /* mockup `.summary { position: sticky; top: 24px }`. Sticky sits on the
     GRID ITEM, whose grid area spans the full row height — on `.cart_totals`
     alone it would have nothing to travel within, because the shell uses
     `align-items: start`. */
  position: sticky;
  top: 24px;
  align-self: start;
}

body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
  color: var(--wa-cart-soft) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .cart_totals > h2 {
  margin: 0 0 26px !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(32px, 3vw, 46px) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 28px !important;   /* mockup `.totals { margin-bottom: 28px }` */
  padding: 0 !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  > :is(thead, tbody, tfoot) {
  display: block;
}

/* mockup `.totals > div`. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px dashed var(--wa-cart-totals-line);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  :is(th, td) {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 400;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  th {
  color: var(--wa-cart-muted) !important;
  font-size: 1rem;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  td {
  color: var(--wa-cart-cream) !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  td
  :is(strong, .amount, .woocommerce-Price-amount) {
  color: var(--wa-cart-cream) !important;
  font-weight: 700;
}

/* mockup `.totals__grand { font-size: 19px }`. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  :is(th, td) {
  font-size: 19px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.order-total
  th {
  color: var(--wa-cart-cream) !important;
  font-weight: 700;
}

/* The shipping row carries a method list and the calculator, which do not fit
   a two-column money row. It becomes a stack — see "divergences". */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.woocommerce-shipping-totals {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .cart_totals
  table.shop_table
  tr.woocommerce-shipping-totals
  td {
  text-align: left;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods) {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid;
  gap: 8px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li {
  min-height: var(--wa-cart-tap);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wa-cart-soft) !important;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li
  label {
  min-height: var(--wa-cart-tap);
  display: flex;
  align-items: center;
  margin: 0;
  color: inherit !important;
  font: inherit;
  cursor: pointer;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul#shipping_method, .woocommerce-shipping-methods)
  li
  input[type="radio"] {
  /* rem, not px: the control grows with a text-only zoom instead of shrinking
     away from its label. Its 48px target comes from the row. */
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--wa-cart-action);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .woocommerce-shipping-destination {
  margin: 0 0 10px !important;
  color: var(--wa-cart-muted) !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  a.shipping-calculator-button {
  min-height: var(--wa-cart-tap);
  display: inline-flex;
  align-items: center;
  color: var(--wa-cart-action) !important;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form {
  margin: 12px 0 0 !important;
  display: grid;
  gap: 10px;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(p, .form-row) {
  margin: 0 !important;
  padding: 0 !important;
}

/* mockup `input`, including the [AA] border. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input[type="text"], input[type="search"], input.input-text, select, textarea) {
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--wa-cart-field-line) !important;     /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
  color-scheme: dark;
  font: inherit;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(input, textarea)::placeholder {
  color: var(--wa-cart-placeholder);                  /* [UNRULED] 3.64:1 */
  opacity: 1;
}

/* Select2, when WooCommerce enhances the country/state selects. Never
   hidden — recoloured to the same field. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .shipping-calculator-form
  :is(
    .select2-container--default .select2-selection,
    .select2-container--default .select2-selection__rendered
  ) {
  min-height: var(--wa-cart-control);
  display: flex;
  align-items: center;
  border: 1px solid var(--wa-cart-field-line) !important;     /* [AA] */
  border-radius: 0 !important;
  background: var(--wa-cart-field) !important;
  color: var(--wa-cart-cream) !important;
  line-height: 1.55 !important;
}

/* mockup `.checkout-button { width: 100% }`. */
body.wa-reserve-custom-chrome.woocommerce-cart .wc-proceed-to-checkout {
  margin: 0 !important;
  padding: 0 !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button {
  width: 100% !important;
}

/* Cross-sells have no counterpart in the approved cart. EXTRAPOLATED from the
   summary panel, one type step down so they cannot out-shout the totals. */
body.wa-reserve-custom-chrome.woocommerce-cart .cross-sells {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--wa-cart-line) !important;
  background: var(--wa-cart-panel) !important;
  box-shadow: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart .cross-sells > h2 {
  margin: 0 0 16px !important;
  color: var(--wa-cart-cream) !important;
  font-family: var(--wa-cart-serif) !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}


/* ==========================================================================
 * C.12  EMPTY CART — mockup `.empty` + the return action
 *
 * In the mockup `.empty` sits INSIDE the items panel: 52px/28px inset, muted,
 * centred, on the panel ground inside its 1px hairline. Native prints a bare
 * `p.cart-empty.woocommerce-info` with no panel and no form, so the panel
 * treatment moves onto the message itself — the approved LOOK, not the
 * approved DOM.
 *
 * The mockup's `.empty { display: none }` is a preview-only JS state and is
 * deliberately NOT reproduced: WooCommerce decides when this renders.
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty,
body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty.woocommerce-info {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 52px var(--wa-cart-pad) !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  background-color: var(--wa-cart-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-muted) !important;
  font-family: inherit;
  font-size: 1rem !important;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Core's notice glyph belongs to a notice. The empty state is the page's only
   content and the mockup draws no mark on it. The pseudo-element is emptied;
   no element and no plugin control is hidden. */
body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty::before,
body.wa-reserve-custom-chrome.woocommerce-cart
  p.cart-empty.woocommerce-info::before {
  content: none !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop {
  display: flex;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
 * C.13  WOOCOMMERCE NOTICES ON THE CART ROUTE
 *
 * EXTRAPOLATION, DECLARED: no approved mockup contains a WooCommerce notice.
 * Derived from the one accent-panel idiom the cart and checkout mockups agree
 * on — cart `.hold` and checkout `.seal` are each 1px `--line` with a 2px
 * `--action` TOP rule on the panel ground and no shadow — plus the cart's
 * single button scale. The shipped sitewide notice is a 3px-left-ruled,
 * drop-shadowed card; no such object exists in the approved system.
 *
 * The BOX only. `content`, the glyph's position and dismiss behaviour stay
 * with the global notice layer, which is why the left padding is still read
 * from `--wa-notice-gutter`.
 * ========================================================================== */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  min-width: 0;
  max-width: 100%;
  display: flow-root;
  margin: 0 0 14px !important;
  padding: 20px 20px 20px var(--wa-notice-gutter, clamp(36px, 4vw, 46px)) !important;
  border: 1px solid var(--wa-cart-line) !important;
  border-top: 2px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-panel) !important;
  background-color: var(--wa-cart-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-soft) !important;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  list-style: none;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):last-child {
  margin-bottom: 0 !important;
}

/* The error accent is the theme's existing value (--wa-notice-error), moved
   from the left edge to the top edge so the object family stays consistent.
   No new colour is introduced. */
body.wa-reserve-custom-chrome.woocommerce-cart .woocommerce-error {
  border-top-color: var(--wa-notice-error, #df715f) !important;
  border-left-color: var(--wa-cart-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul, ol).woocommerce-error
  > li {
  margin-left: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(ul, ol).woocommerce-error
  > li
  + li {
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--wa-cart-line) !important;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a:not(.button):not(.wc-forward) {
  color: var(--wa-cart-cream) !important;
  text-decoration: underline;
  text-decoration-color: var(--wa-cart-action);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* The notice action joins the cart's single button scale. It stays FLOATED:
   WooCommerce prints the button before the message text, and un-floating it
   would need flex, which tears "Have a coupon? <a>Click here</a>" into two
   boxes in the notices that carry inline links. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, button.button, input.button, a.wc-forward) {
  float: right;
  width: auto !important;
  max-width: 55%;
  height: auto !important;
  min-height: var(--wa-cart-control) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px 18px !important;
  padding: 12px 20px !important;
  border: 1px solid var(--wa-cart-action) !important;
  border-radius: 0 !important;
  background: var(--wa-cart-action) !important;
  background-color: var(--wa-cart-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--wa-cart-action-ink) !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.55;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  :is(a.button, button.button, input.button, a.wc-forward):hover {
  border-color: var(--wa-cart-action) !important;
  background: var(--wa-cart-action) !important;
  background-color: var(--wa-cart-action) !important;
  color: var(--wa-cart-action-ink) !important;
}


/* ==========================================================================
 * C.14  THE DEFENSIVE LAYER
 *
 * Anything a plugin injects should look deliberate WITHOUT this block naming
 * its selector. Every rule is a negation or an element selector.
 *
 * What it deliberately does NOT do: it never sets display, visibility,
 * opacity or height, so no injected control can be hidden or collapsed by it;
 * and it never repaints an unrecognised BUTTON — express-checkout and gateway
 * buttons (PayPal, Apple Pay, Amazon Pay) are brand-locked, so they get
 * containment and a touch floor and nothing else.
 * ========================================================================== */

/* Plugin rows inside the cart table: the row inset and the row hairline. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  table.shop_table.cart
  tbody
  > tr:not(.woocommerce-cart-form__cart-item):not(.cart_item):not(:has(> td.actions)) {
  display: block;
  padding: 22px var(--wa-cart-pad);
  border-bottom: 1px solid var(--wa-cart-line);
  color: var(--wa-cart-soft) !important;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Unknown blocks between the panel border and the table. */
body.wa-reserve-custom-chrome.woocommerce-cart
  form.woocommerce-cart-form
  > :not(table.shop_table):not(input):not(script):not(style):not(template):not(noscript) {
  min-width: 0;
  max-width: 100%;
  padding: 22px var(--wa-cart-pad);
  border-top: 1px solid var(--wa-cart-line);
  color: var(--wa-cart-soft) !important;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Unknown panels in the summary rail get the rail's chrome. */
body.wa-reserve-custom-chrome.woocommerce-cart
  .cart-collaterals
  > :not(.cart_totals):not(.cross-sells):not(script):not(style):not(template):not(noscript) {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--wa-cart-line);
  border-radius: 0;
  background: var(--wa-cart-panel);
  box-shadow: none;
  color: var(--wa-cart-soft);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* A heading in an unknown panel: the summary serif, one step down. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  > :not(table.shop_table):not(.cart_totals)
  :is(h2, h3, h4) {
  margin: 0 0 16px;
  color: var(--wa-cart-cream);
  font-family: var(--wa-cart-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* Unknown text fields get the mockup's field, including the [AA] border.
   input.qty and #coupon_code are excluded — they are owned above. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.qty):not(#coupon_code),
    select,
    textarea
  ) {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--wa-cart-control);
  padding: 12px 14px;
  border: 1px solid var(--wa-cart-field-line);        /* [AA] */
  border-radius: 0;
  background: var(--wa-cart-field);
  color: var(--wa-cart-cream);
  color-scheme: dark;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  :is(input, textarea)::placeholder {
  color: var(--wa-cart-placeholder);                  /* [UNRULED] 3.64:1 */
  opacity: 1;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  input:is([type="checkbox"], [type="radio"]) {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--wa-cart-action);
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  > :not(table.shop_table)
  label:not(.screen-reader-text) {
  display: block;
  margin: 0 0 8px;
  color: var(--wa-cart-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* Unknown interactive controls: containment and a real touch target only. No
   colour is imposed, so a gateway's express button keeps its brand. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals, .wc-proceed-to-checkout)
  :is(button, a.button, input[type="submit"], input[type="button"]) {
  max-width: 100%;
  min-height: var(--wa-cart-tap);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A plugin table must never widen the page: it scrolls inside its own box. */
body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  table:not(.shop_table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-collapse: collapse;
  color: var(--wa-cart-soft);
  font-size: 14px;
  -webkit-overflow-scrolling: touch;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals, .entry-content > .woocommerce)
  :is(img, svg, video, canvas, iframe, embed, object) {
  max-width: 100%;
}

body.wa-reserve-custom-chrome.woocommerce-cart
  :is(form.woocommerce-cart-form, .cart-collaterals)
  :is(p, li, dd, dt, span, strong, em, small, code, time) {
  overflow-wrap: anywhere;
}

/* WooCommerce's AJAX overlay, in the system ground rather than white. */
body.wa-reserve-custom-chrome.woocommerce-cart .blockUI.blockOverlay {
  background: var(--wa-cart-ink) !important;
}


/* ==========================================================================
 * C.15  RESPONSIVE — the mockup's own 1080 / 720 / 390, plus a 320 floor
 * ========================================================================== */

/* --- 1080px: `.intro` and `.layout` collapse to one column, `.hold` caps at
 * 560px, `.summary` goes static. -------------------------------------- */
@media (max-width: 1080px) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    #main-container
    .entry-content
    > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  body.wa-reserve-custom-chrome.woocommerce-cart .cart-collaterals {
    position: static;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .entry-content
    .rsp-countdown-wrapper {
    width: min(100%, 560px);
  }
}

/* --- 720px: measure narrows to min(calc(100% - 28px), --max); `.cart`
 * padding-top 38px; `.items__head` hidden; `.cart-item` becomes `1fr auto`
 * with the product spanning; `.items__footer` and `.coupon` stack. ----- */
@media (max-width: 720px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-cart-gutter: 28px;
    --wa-cart-pad: 22px;
    --wa-cart-thumb: 86px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(.entry-header, .hero-section, .page-title-section) {
    padding-top: 38px !important;
  }

  /* The mockup hides `.items__head` here. That is the ONE place the approved
     design removes something, and it is safe: these six cells are `&nbsp;`
     and four repeated column labels whose meaning is carried by the row
     itself once it becomes a card. No control and no data is hidden. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    > thead {
    display: none;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item {
    /* mockup `1fr auto` with the `.product` 86px track hoisted, as at
       desktop, because thumbnail and name are separate native cells. */
    grid-template-columns: var(--wa-cart-thumb) minmax(0, 1fr) auto;
    column-gap: 16px;     /* mockup `.product` gap at 720 */
    row-gap: 22px;        /* mockup `.cart-item` row gap at 720 */
    padding: var(--wa-cart-pad);
  }

  /* mockup: `.remove { grid-column: 2; grid-row: 1; align-self: start }` —
     it is placed first, and the product then flows to the next row. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-remove {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-thumbnail {
    grid-column: 1;
    grid-row: 2;
    margin-right: 0;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-name {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-price {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  /* mockup: quantity and line total share the next row. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-quantity {
    grid-column: 1 / 3;
    grid-row: 4;
    align-self: center;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-subtotal {
    grid-column: 3;
    grid-row: 4;
    align-self: center;
    justify-self: end;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    td.product-name
    > a {
    font-size: 25px !important;   /* mockup `.product h2` at 720 */
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    td.actions {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--wa-cart-pad) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    .coupon {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    .coupon
    > input#coupon_code {
    grid-column: 1;
    grid-row: 2;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    .coupon
    > button[name="apply_coupon"] {
    grid-column: 1;
    grid-row: 3;
  }

  /* mockup `.items__footer > .button { width: 100% }`. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    button[name="apply_coupon"],
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    button[name="update_cart"],
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    td.actions
    input[name="update_cart"] {
    width: 100% !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart p.return-to-shop a.button {
    width: 100% !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    padding: 18px 16px 18px var(--wa-notice-gutter, 32px) !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
    :is(a.button, button.button, input.button, a.wc-forward) {
    float: none;
    width: 100% !important;
    max-width: 100%;
    display: flex;
    margin: 0 0 14px !important;
  }
}

/* --- 390px: `.cart-item` collapses; `.remove` becomes a full-width labelled
 * button; `.line-total` aligns left. ----------------------------------- */
@media (max-width: 390px) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item {
    /* The mockup's `.cart-item` is a single 1fr track here, but its `.product`
       keeps its own 86px + 1fr nested grid. Native has no `.product`
       wrapper, so the two tracks stay on the row and everything else spans —
       otherwise the thumbnail would drop above the title, which the approved
       design never does. See "divergences". */
    grid-template-columns: var(--wa-cart-thumb) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 18px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-thumbnail {
    grid-column: 1;
    grid-row: 1;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-name {
    grid-column: 2;
    grid-row: 1;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-price {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-quantity {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* mockup `.line-total { justify-self: start }`. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-subtotal {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    tr.woocommerce-cart-form__cart-item
    > td.product-remove {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: stretch;
  }

  /* mockup: full width, `--line` border, 13px, and the visible word.
     `content` here is a UI LABEL, not cart data — no price, quantity, name or
     total is written. The link keeps its own aria-label, so the accessible
     name is unchanged by this. */
  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    td.product-remove
    a.remove {
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--wa-cart-line) !important;
    font-size: 13px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    td.product-remove
    a.remove::after {
    content: " Remove";
  }

  body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty,
  body.wa-reserve-custom-chrome.woocommerce-cart p.cart-empty.woocommerce-info {
    padding: 40px 18px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart .rsp-countdown-wrapper {
    padding: 18px;
  }
}

/* --- 320px floor. Not in the mockup: its h1 clamp bottoms out at 56px and
 * its countdown figure at 36px, neither of which fits a long word in a 320px
 * viewport. Type only — no layout changes. ----------------------------- */
@media (max-width: 340px) {
  body.wa-reserve-custom-chrome.woocommerce-cart {
    --wa-cart-thumb: 72px;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(.entry-title, .page-title, h1.entry-title, h1.page-title) {
    font-size: clamp(38px, 13vw, 56px) !important;
    hyphens: auto;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    td.product-name
    > a {
    font-size: 21px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .rsp-countdown-wrapper
    :is(strong, b, time) {
    font-size: clamp(28px, 11vw, 36px);
  }
}


/* ==========================================================================
 * C.16  MOTION AND FORCED COLORS
 * ========================================================================== */

/* The approved mockup animates nothing but smooth scrolling, and its own
   reduced-motion rule only turns that off. This neutralises whatever the
   theme, WooCommerce or the plugin brings on this route — including Reserved
   Stock Pro's infinite loading-dot pulse, which is exactly what a vestibular
   preference is asking about. `animation: none` leaves the dots VISIBLE at
   their base style; only the motion stops. Nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  body.wa-reserve-custom-chrome.woocommerce-cart,
  body.wa-reserve-custom-chrome.woocommerce-cart *,
  body.wa-reserve-custom-chrome.woocommerce-cart *::before,
  body.wa-reserve-custom-chrome.woocommerce-cart *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    .rsp-countdown-loading-dots--dot {
    animation: none !important;
  }
}

/* This design is carried by hairlines; in forced-colors they drop to the
   system palette so every boundary survives. */
@media (forced-colors: active) {
  body.wa-reserve-custom-chrome.woocommerce-cart
    :is(
      form.woocommerce-cart-form,
      .cart_totals,
      .cross-sells,
      p.cart-empty,
      .woocommerce-message,
      .woocommerce-info,
      .woocommerce-error,
      .rsp-countdown-wrapper
    ) {
    border: 1px solid CanvasText !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-cart
    form.woocommerce-cart-form
    table.shop_table.cart
    .quantity {
    border: 1px solid CanvasText !important;
  }
}
/* ===== White Ash Reserve — cart, rebuilt against the approved mockup — END */

/* ==========================================================================
 * M1. ORDER PANEL WIDTH ON PHONES
 *
 * The summary column was 276px of usable content on a 390px screen -- 71% of
 * the viewport, with 114px eaten by nesting. Measured chain at 390:
 *
 *     390  viewport
 *     358  div.woocommerce            (-32, page gutter, left alone)
 *     358  .ct-order-review           25px padding each side + 2px border
 *     304  #order_review              14px padding each side
 *     276  #payment                   content
 *
 * The 25px and 14px are BLOCKSY's, not ours -- nothing in this file declares
 * padding on either element, which is why searching here for the culprit finds
 * nothing. Confirmed by enumerating every matching rule in the CSSOM.
 *
 * Trimming both on phones returns 26px to the content (276 -> 302, +9%), which
 * is what the BTCPay reminder list needs to stop breaking after two or three
 * words. Desktop is untouched: the two-column layout has room already, and the
 * 25px inset is the mockup's panel padding there.
 *
 * Placed at the END of the file deliberately. Blocksy's woocommerce bundle is
 * enqueued before this stylesheet, so source order already favours us, but
 * these selectors also out-specify anything it is likely to use. Both, not one.
 * ========================================================================== */

@media (max-width: 720px) {
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    > .ct-order-review {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #order_review {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  /* The details rail is the same nested-padding shape; keep the two columns
     visually consistent now that they stack. */
  body.wa-reserve-custom-chrome.woocommerce-checkout
    form.checkout.woocommerce-checkout
    #customer_details {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

/* ==========================================================================
 * M2. COUPON FORM
 *
 * Paired with the template override at woocommerce/checkout/form-coupon.php,
 * which replaces core's hidden `screen-reader-text` label with a real visible
 * one and drops the `form-row-first` / `form-row-last` wrappers.
 *
 * Those wrappers are why the old markup looked wrong: core floats them 50/50,
 * so the input and the Apply button each took half a very wide row, and the
 * label -- absolutely positioned, with the clipping that should have hidden it
 * lost somewhere in the cascade -- printed on top of the field.
 *
 * This is a flex row instead: label above, input and button side by side, the
 * button sized to its text. Rules are keyed on the new .wa-coupon* classes so
 * nothing here depends on core's row classes, and none of the earlier
 * form.checkout_coupon slices in this file target them.
 * ========================================================================== */

/* Specificity note: the grid rule at 7862 is (0,4,2). An earlier draft of this
   selector was (0,3,2) and lost, leaving the label beside the field on desktop
   while mobile looked correct -- source order does not rescue a weaker
   selector. This is (0,6,2). */
body.wa-reserve-custom-chrome.woocommerce-checkout
  form.checkout_coupon.woocommerce-form-coupon.wa-coupon {
  /* MUST reset display. 7864 makes form.checkout_coupon a two-column grid
     (`minmax(0, 1fr) auto`) sized for core's old two-child markup: input, then
     button. Our markup's two children are the LABEL and the input+button row,
     so without this they land in those two columns and the label prints beside
     the field instead of above it. Measured at 1440 before the reset: label at
     x=421, input at x=709, 15px of vertical overlap. */
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--wa-commerce-line);
  border-left: 3px solid var(--wa-commerce-action);
  border-radius: 0;
  background: var(--wa-commerce-panel);
  box-shadow: none;
}

body.wa-reserve-custom-chrome .wa-coupon .wa-coupon__label {
  /* Static, not absolute: this is the fix for the overlap. */
  position: static;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  margin: 0 0 10px;
  color: var(--wa-commerce-muted, #958f84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: normal;
}

body.wa-reserve-custom-chrome .wa-coupon .wa-coupon__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

body.wa-reserve-custom-chrome .wa-coupon .wa-coupon__input {
  /* min-width:0 or the input refuses to shrink below its intrinsic size and
     pushes the button onto its own line earlier than it needs to. */
  flex: 1 1 200px;
  min-width: 0;
  width: auto;
  min-height: 50px;
  margin: 0;
}

body.wa-reserve-custom-chrome .wa-coupon .wa-coupon__submit {
  flex: 0 0 auto;
  min-height: 50px;
  margin: 0;
  padding: 0 24px;
  white-space: nowrap;
}

/* Below the flex-basis the row wraps on its own; make the button full width
   when it does, rather than leaving a stub floating next to empty space. */
@media (max-width: 480px) {
  body.wa-reserve-custom-chrome .wa-coupon .wa-coupon__submit {
    flex: 1 1 100%;
  }
}

/* The toggle notice above the form. The global notice treatment already gives
   it the panel + copper rule; only the link needs to read as a link. */
body.wa-reserve-custom-chrome
  .wa-coupon-toggle
  .woocommerce-info
  a.showcoupon {
  color: var(--wa-commerce-action) !important;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * Future Quick Shop release styles belong below this boundary and must remain
 * scoped to the Quick Shop component in assets/css/quick-shop.css.
 */