/* ============================================================
   CART · CHECKOUT · ACCOUNT

   The cart and the account pages are WooCommerce's own templates,
   dressed. The checkout is laid out by the theme: a stripped-back
   page (template-checkout.php), three numbered steps on the left
   and the order in a panel on the right. It is still WooCommerce's
   classic checkout underneath, with every hook intact, because the
   freight rules, Stripe, the order bumps and cart recovery all hang
   off it. See inc/checkout.php.
   ============================================================ */

/* ---------- WooCommerce's own design tokens ----------
   Woo styles its form controls through these, at a specificity the theme
   would have to fight to beat (.woocommerce form .form-row .input-text).
   Setting the variables is the supported way in and it reaches every
   control at once, including ones no rule below names. */
:root{
  --wc-form-color-background: #0A0D0F;
  --wc-form-color-text:       #EFEBE4;
  --wc-form-border-color:     rgba(239,235,228,.13);
  --wc-form-border-width:     1px;
  --wc-form-border-radius:    0;
  --wc-content-bg:            #14181B;
  --wc-separator-color:       rgba(239,235,228,.13);
  --wc-subtext:               rgba(239,235,228,.60);
  --wc-primary:               #C9A96B;
  --wc-primary-text:          #100C05;
  --wc-secondary:             #14181B;
  --wc-secondary-text:        #EFEBE4;
  --wc-highlight:             #C9A96B;
  --wc-highligh-text:         #100C05;
  --wc-card-border-radius:    0;
}

.woocommerce-cart .sec,
.woocommerce-checkout .sec,
.woocommerce-account .sec{ padding-block:clamp(2rem,4vw,3.5rem); }

/* The generic page template puts content in .story, which is a 64ch
   reading measure. Commerce needs the full width. */
.woocommerce-cart .story,
.woocommerce-checkout .story,
.woocommerce-account .story{ max-width:none; margin-inline:0; }

/* ---------- shared form controls ---------- */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-selection{
  font-family:var(--body); font-size:1rem; color:var(--bone);
  background:var(--wc-form-color-background); border:1px solid var(--line); border-radius:0;
  padding:.8rem .9rem; width:100%; height:auto; line-height:1.4;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .input-text:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce .select2-container--focus .select2-selection{
  outline:none; border-color:var(--brass); background:var(--wc-form-color-background);
}
.woocommerce ::placeholder{ color:var(--dimmer); }
.woocommerce label,
.woocommerce .form-row label,
.woocommerce-form__label{
  font-family:var(--display); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  display:block; margin-bottom:.45rem;
}
.woocommerce .required{ color:var(--brass); border:0; text-decoration:none; }
.woocommerce .form-row{ margin:0 0 1.15rem; padding:0; }

/* Select2 is what Woo uses for country and state. */
.woocommerce .select2-container--default .select2-selection--single{ height:auto; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--bone); line-height:1.4; padding:0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ top:50%; transform:translateY(-50%); right:.6rem; }
.select2-dropdown{ background:var(--ink-2); border-color:var(--line); color:var(--bone); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--brass); color:#100C05; }

/* ---------- buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-button,
.woocommerce #place_order{
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.8rem; border:1px solid var(--brass); border-radius:0;
  background:var(--brass); color:#100C05; cursor:pointer; line-height:1;
  transition:background .22s ease, transform .22s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover{ background:#DCBE7E; color:#100C05; transform:translateY(-2px); }
/* WooCommerce paints its "alt" buttons (Proceed to checkout, Place order) purple. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{ background:var(--brass); color:#100C05; border-color:var(--brass); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover{ background:#DCBE7E; }
.woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; text-align:center; padding:1.2rem 1.5rem; font-size:.8rem; margin-bottom:1rem; }
.woocommerce .button:disabled,
.woocommerce .button.disabled{ opacity:.5; cursor:not-allowed; transform:none; }
/* Secondary actions read as outlines, so the primary one stays obvious. */
.woocommerce .cart .actions .button[name="update_cart"],
.woocommerce .wc-backward,
.woocommerce .woocommerce-Button--previous{
  background:transparent; color:var(--bone); border-color:rgba(239,235,228,.35);
}
.woocommerce .cart .actions .button[name="update_cart"]:hover,
.woocommerce .wc-backward:hover{ background:rgba(239,235,228,.09); color:var(--bone); border-color:var(--bone); }

/* ---------- tables: cart, order review, account orders ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:0; border-collapse:collapse; width:100%;
  background:var(--ink-2); margin:0 0 1.75rem;
}
.woocommerce table.shop_table th{
  font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); text-align:left;
  padding:1rem; border-bottom:1px solid var(--line);
}
.woocommerce table.shop_table td{
  padding:1rem; border-top:1px solid var(--line); color:var(--bone); vertical-align:middle;
}
.woocommerce table.shop_table tbody tr:hover{ background:rgba(201,169,107,.04); }
.woocommerce table.shop_table .product-name a{ color:var(--bone); }
.woocommerce table.shop_table .product-name a:hover{ color:var(--brass); }
.woocommerce table.shop_table .product-thumbnail img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); }
.woocommerce table.shop_table td.product-remove a.remove{
  color:var(--dimmer) !important; font-size:1.35rem; line-height:1; background:none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover{ color:#E0907F !important; background:none; }
.woocommerce .quantity input.qty{ width:5rem; text-align:center; padding:.6rem .4rem; }
.woocommerce .cart .actions{ padding:1rem; }
.woocommerce .cart .actions .coupon{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.woocommerce .cart .actions .coupon .input-text{ width:auto; flex:1 1 14rem; }

/* The order total is the number people actually look for. */
.woocommerce .order-total th,
.woocommerce .order-total td,
.woocommerce table.shop_table tfoot .order-total .amount{
  font-family:var(--display); font-weight:800; font-size:1.15rem; color:var(--bone);
  letter-spacing:-.01em;
}
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{
  font-size:clamp(1.1rem,1rem + .6vw,1.45rem); margin-bottom:1.1rem;
}

/* ---------- cart page layout ---------- */
.woocommerce .cart-collaterals{ width:100%; display:flex; justify-content:flex-end; }
.woocommerce .cart-collaterals .cart_totals{ width:min(100%,26rem); float:none; }
.woocommerce .shipping-calculator-button{ color:var(--brass); }
.woocommerce .woocommerce-shipping-destination{ color:var(--dim); }
.woocommerce ul#shipping_method{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.woocommerce ul#shipping_method li{ color:var(--bone); }
/* The cart's freight estimate: town and price, the depot's address underneath. */
.woocommerce .cart_totals ul#shipping_method li label{
  display:inline; font-family:var(--body); font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--bone);
}
.woocommerce .cart_totals ul#shipping_method li input{ accent-color:var(--brass); }
.woocommerce .cart_totals .depot-town,
.woocommerce .cart_totals .depot-price{ font-family:var(--display); font-weight:700; }
.woocommerce .cart_totals .depot-price{ margin-left:.4rem; }
.woocommerce .cart_totals .depot-addr{ display:block; margin:.15rem 0 0 1.55rem; color:var(--dim); font-size:.92rem; line-height:1.45; }

/* ---------- notices ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews{
  background:var(--ink-2); border:1px solid var(--line); border-top:2px solid var(--brass);
  color:var(--bone); border-radius:0; padding:1.1rem 1.25rem 1.1rem 1.25rem; margin:0 0 1.5rem;
  list-style:none;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{ display:none; }
.woocommerce-error{ border-top-color:#C46A5A; }
.woocommerce-info a, .woocommerce-message a{ color:var(--brass); }

/* ---------- my account ----------
   page-my-account.php. A compact heading instead of the generic page's
   display-size title; signed out, everything sits in one centred column. */
.account-head{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.account-head .eyebrow{ margin-bottom:.7rem; }
.account-head h1{ font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem); margin:0; }
.account-lead{ margin:.75rem 0 0; color:var(--dim); }
.account--auth .account-head,
.account--auth .account-body,
.account--auth .account-note{ max-width:27rem; margin-inline:auto; }
.account--auth .account-head{ text-align:center; }
/* One column, so no grid: its gaps around the empty notices box, plus Woo's
   2em on the form, added up to a 100px hole under the heading. */
.woocommerce-account .account--auth .woocommerce{ display:block; max-width:none; }
.account--auth .woocommerce form.login,
.account--auth .woocommerce form.lost_reset_password{ margin:0; }
.account--auth form.lost_reset_password .form-row{ float:none; width:100%; }
/* The page heading already says "Log in". */
.account--auth .woocommerce > h2{ display:none; }
.account--auth .woocommerce-form-login__rememberme{ display:inline-flex; align-items:center; gap:.55rem; }
.account--auth .woocommerce-form-login__submit{ display:block; width:100%; margin:1.1rem 0 0; }
.account--auth .woocommerce-LostPassword{ margin:1.1rem 0 0; text-align:center; }
.account--auth form.lost_reset_password .button{ width:100%; }
.account-note{ margin-top:1.4rem; text-align:center; color:var(--dim); font-size:.92rem; }
.account-note a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }

/* Signed in: the dashboard's latest order, and the pick-up panel it shares
   with each order's page (inc/account.php). */
.account-hello{ margin:0 0 1.5rem; color:var(--dim); }
.account-hello strong{ color:var(--bone); font-weight:600; }
.account-hello a, .account-empty a{ color:var(--brass); }
.latest-order{ border:1px solid var(--line); background:var(--ink-2); padding:clamp(1.25rem,2.5vw,2rem); }
.latest-order-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem 1.5rem; margin-bottom:1.5rem; }
.latest-order-head .eyebrow{ margin-bottom:.55rem; }
.latest-order-head h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin:0; }
.latest-order-meta{ margin:.4rem 0 0; color:var(--dim); font-size:.95rem; }
.latest-order-items{ margin:.3rem 0 0; color:var(--bone); font-size:.95rem; }
.pickup{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.pickup > div{ background:var(--ink); padding:1.2rem 1.35rem; }
.pickup .eyebrow{ margin-bottom:.55rem; }
.pickup h3{ font-size:1.05rem; margin:0 0 .45rem; }
.pickup address{ font-style:normal; color:var(--dim); line-height:1.55; }
.pickup-map{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
  font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
}
.pickup-map svg{ width:13px; height:13px; flex:none; }
.pickup-map:hover{ color:var(--bone); }
.pickup-track-line{ margin:0 0 .9rem; color:var(--bone); font-weight:600; }
.pickup-track-line span{ margin-left:.4rem; color:var(--dim); font-weight:400; font-variant-numeric:tabular-nums; }
.pickup-note{ margin:.85rem 0 0; color:var(--dim); font-size:.92rem; }
.pickup-track .pickup-note:first-of-type:only-child{ margin-top:0; }
.woocommerce-MyAccount-content > .pickup{ margin:1.25rem 0 2rem; }
/* Woo's section headings (Order details, Billing address) inside the account
   are sub-heads, not display type. */
.woocommerce-MyAccount-content h2{ font-size:clamp(1.2rem,1rem + .7vw,1.5rem); margin:2.25rem 0 1rem; }
.woocommerce-MyAccount-content .latest-order-head h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin:0; }
@media (max-width:760px){
  .pickup{ grid-template-columns:1fr; }
}

.woocommerce-account .woocommerce{ display:grid; grid-template-columns:minmax(0,15rem) 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
/* WooCommerce clears its old float layout with ::before and ::after on this
   wrapper. In a grid those become cells of their own: the menu was pushed
   into the second column and the page dropped beneath it at 68% of 15rem.
   They go, and so do the float widths. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{ content:none; display:none; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{ float:none; width:auto; }
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce{ grid-template-columns:1fr; max-width:32rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block; padding:.75rem 1rem; border:1px solid var(--line); color:var(--dim);
  font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{ color:var(--bone); border-color:rgba(201,169,107,.5); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--brass); border-color:var(--brass); color:#100C05; }
.woocommerce-account .woocommerce-MyAccount-content{ min-width:0; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password{
  border:1px solid var(--line); background:var(--ink-2); border-radius:0; padding:clamp(1.25rem,2.5vw,2rem);
}
.woocommerce-form-login__rememberme{ color:var(--dim); }
.woocommerce-LostPassword a{ color:var(--brass); }

@media (max-width:900px){
  .woocommerce-account .woocommerce{ grid-template-columns:1fr; }
  /* Stacked, the menu would be seven full-width bars before any content. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  /* Woo's responsive cart stacks each row into a card. Keep the borders honest. */
  .woocommerce table.shop_table_responsive tr,
  .woocommerce table.shop_table_responsive td{ border-color:var(--line); }
  .woocommerce table.shop_table_responsive td::before{
    font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--brass);
  }
  .woocommerce .cart-collaterals .cart_totals{ width:100%; }
  .woocommerce .cart .actions .coupon .input-text{ flex:1 1 100%; }
}

/* ============================================================
   THE CHECKOUT
   ============================================================ */

/* ---------- on paper ----------
   Under its ink header band the checkout is light: dark type on paper, the
   way people are used to filling in a form, and the way the order emails
   read. A long form in bone on black was hard on the eye (owner, 26 Sep 2026).

   Rather than a second copy of every rule, the palette's tokens are
   re-pointed inside the page: here --bone is the type, --ink the paper and
   --ink-2 a card, so the shared rules above (notices, tables, labels, the
   login and coupon forms) come out right as they are. --brass becomes the
   darker brass that reads as type on paper, where #C9A96B is 2:1. The bright
   brass keeps two jobs under names of its own: --brass-fill behind dark type
   (the buttons, the quantity badge) and --brass-mark for what only has to be
   seen (a chosen depot's edge and dot, a focused field). Stripe's card fields
   are an iframe; inc/checkout.php hands them the same colours. */
body.co-page{ background:#F5F2EC; }
body.co-page .co-shell,
body.co-page .co-foot,
body.co-page > .select2-container{
  --ink:#F5F2EC;
  --ink-2:#FFFFFF;
  --bone:#14181B;
  --dim:#5A646B;
  --dimmer:#667076;
  --line:rgba(20,24,27,.14);
  --edge:rgba(20,24,27,.34);        /* a field's border */
  --brass:#8A6A2F;
  --brass-mark:#A8844A;
  --brass-fill:#C9A96B;
  --tint:#FAF4E6;                   /* behind a chosen depot or payment method */
  --chalk:#3B6B8C;                  /* focus rings */
  --alert:#B3261E;
  --alert-tint:#FCEBE9;
  --wc-form-color-background:#FFFFFF;
  --wc-form-color-text:#14181B;
  --wc-form-border-color:rgba(20,24,27,.34);
  --wc-content-bg:#FFFFFF;
  --wc-separator-color:rgba(20,24,27,.14);
  --wc-subtext:#5A646B;
  --wc-secondary:#FFFFFF;
  --wc-secondary-text:#14181B;
}
body.co-page .co-shell .woocommerce ::placeholder{ color:#8C9398; }
body.co-page .co-shell .woocommerce-error{ border-top-color:var(--alert); }
body.co-page > .select2-container .select2-results__option--highlighted[aria-selected]{ background:var(--brass-fill); color:#100C05; }

/* The buttons stay bright brass with dark type. On paper they darken on
   hover rather than lighten. */
body.co-page .co-shell .woocommerce a.button,
body.co-page .co-shell .woocommerce button.button,
body.co-page .co-shell .woocommerce input.button,
body.co-page .co-shell .woocommerce #place_order{ background:var(--brass-fill); border-color:var(--brass-fill); color:#100C05; }
body.co-page .co-shell .woocommerce a.button:hover,
body.co-page .co-shell .woocommerce button.button:hover,
body.co-page .co-shell .woocommerce input.button:hover,
body.co-page .co-shell .woocommerce #place_order:hover{ background:#B99553; border-color:#B99553; color:#100C05; }
.co-shell .btn--ghost{ border-color:var(--edge); }
.co-shell .btn--ghost:hover{ background:rgba(20,24,27,.05); color:var(--bone); border-color:var(--bone); }

/* A brass link on paper needs its underline to read as a link. */
.co-step-lead a,
.co .woocommerce-form-login-toggle .woocommerce-info a,
.co-summary .woocommerce-form-coupon-toggle .woocommerce-info a,
:is(.co, form#order_review) .woocommerce-terms-and-conditions-wrapper a,
:is(.co, form#order_review) .woocommerce-privacy-policy-text a,
.co-shell .woocommerce-message a:not(.button),
.co-shell .woocommerce-info a:not(.button){
  text-decoration:underline; text-decoration-color:rgba(138,106,47,.4); text-decoration-thickness:1px; text-underline-offset:3px;
}
.co-step-lead a:hover,
.co .woocommerce-form-login-toggle .woocommerce-info a:hover,
.co-summary .woocommerce-form-coupon-toggle .woocommerce-info a:hover,
:is(.co, form#order_review) .woocommerce-terms-and-conditions-wrapper a:hover{ text-decoration-color:currentColor; }

/* ---------- page chrome ---------- */
.co-head{ border-bottom:1px solid var(--line); background:var(--ink); }
.co-head .wrap{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem;
  min-height:72px; max-width:1180px;
}
/* WooCommerce caps every image on its pages at 100% wide, and style.css loads
   before WooCommerce's CSS, so the logo needs the extra weight to stay whole. */
body.co-page .co-head .logo img{ height:44px; width:auto; max-width:none; }

.co-crumbs{
  list-style:none; margin:0; padding:0; display:flex; justify-content:center; align-items:center; gap:.85rem;
  font-family:var(--display); font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dimmer);
}
.co-crumbs li{ display:flex; align-items:center; gap:.85rem; }
.co-crumbs li + li::before{ content:''; width:1.4rem; height:1px; background:var(--line); }
.co-crumbs a{ color:inherit; }
.co-crumbs a:hover{ color:var(--bone); }
.co-crumbs .is-done{ color:var(--brass-lo); }
.co-crumbs .is-current{
  color:var(--bone); text-decoration:underline; text-decoration-color:var(--brass);
  text-underline-offset:7px; text-decoration-thickness:2px;
}

.co-help{
  margin:0; display:flex; align-items:center; gap:.55rem; justify-self:end; white-space:nowrap;
  font-family:var(--display); font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.co-help svg{ width:15px; height:15px; color:var(--brass); flex:none; }
.co-help a{ color:var(--bone); margin-left:.6rem; padding-left:.9rem; border-left:1px solid var(--line); letter-spacing:.08em; }
.co-help a:hover{ color:var(--brass); }

.co-shell{ min-height:calc(100vh - 72px - 64px); background:var(--ink); color:var(--bone); }
.co-shell > .woocommerce{ max-width:1180px; margin-inline:auto; padding:clamp(1.5rem,3.5vw,3rem) var(--pad) clamp(2.5rem,5vw,4.5rem); }

.co-foot{ border-top:1px solid var(--line); background:var(--ink); }
.co-foot .wrap{
  max-width:1180px; min-height:64px; display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:center; justify-content:space-between;
  padding-block:1rem; font-size:.88rem; color:var(--dimmer);
}
.co-foot a{ color:var(--dim); }
.co-foot a:hover{ color:var(--brass); }

/* ---------- two columns ---------- */
.co{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,420px);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.co-main{ min-width:0; counter-reset:costep; }

/* ---------- a numbered step ---------- */
.co-step{ padding:0 0 clamp(1.75rem,3vw,2.5rem); margin:0 0 clamp(1.75rem,3vw,2.5rem); border-bottom:1px solid var(--line); }
.co-step:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.co-step-h{
  counter-increment:costep; display:flex; align-items:center; gap:.9rem;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem); margin:0 0 1.35rem;
}
.co-step-h::before{
  content:counter(costep); flex:none; width:2rem; height:2rem; display:grid; place-items:center;
  border:1px solid var(--brass); color:var(--brass);
  font-family:var(--display); font-size:.8rem; font-weight:700; letter-spacing:0;
}
.co-step-lead{ color:var(--dim); margin:-.5rem 0 1.25rem; max-width:58ch; }
.co-step-lead a{ color:var(--brass); white-space:nowrap; }

/* ---------- step 1: the fields ---------- */
.co .woocommerce-billing-fields > h3,
.co .woocommerce-additional-fields > h3{ display:none; }      /* the step heading says it */

.co .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.co .form-row{ grid-column:1 / -1; width:auto !important; float:none !important; margin:0 0 1.1rem; padding:0; }
.co #billing_first_name_field,
.co #billing_last_name_field,
.co #billing_phone_field,
.co #billing_company_field,
.co #billing_address_2_field,
.co #billing_city_field,
.co #billing_state_field,
.co #billing_postcode_field{ grid-column:span 1; }
/* New Zealand is the only country the shop sells to. The value still posts. */
.co #billing_country_field{ display:none !important; }   /* WooCommerce's script .show()s it inline */

/* WooCommerce draws field hints as blue tooltips that slide in on focus. Here
   they are a quiet line under the field, always there. */
body.co-page .co .form-row .woocommerce-input-wrapper .description,
body.co-page .co .form-row .description{
  display:block !important; position:static; clear:none; background:none; border-radius:0;
  margin:.4rem 0 0; padding:0; font-size:.88rem; line-height:1.4; color:var(--dimmer);
}
body.co-page .co .form-row .description::before{ display:none; }

/* A firmer edge than the shared controls: on this page the fields are the job.
   --wc-form-border-color (set with the paper, above) reaches WooCommerce's own
   rule; the selectors cover the rest. */
body.co-page .co form .form-row .input-text,
body.co-page .co form .form-row select,
body.co-page .co form .form-row textarea,
body.co-page .co form .form-row .select2-selection,
body.co-page .co-summary form .form-row .input-text{
  border:1px solid var(--edge); background:var(--ink-2); color:var(--bone); padding:.85rem .95rem;
}
body.co-page .co form .form-row .input-text:hover,
body.co-page .co form .form-row .select2-selection:hover{ border-color:rgba(20,24,27,.55); }
body.co-page .co form .form-row .input-text:focus,
body.co-page .co form .form-row select:focus,
body.co-page .co form .form-row textarea:focus,
body.co-page .co form .form-row .select2-container--focus .select2-selection,
body.co-page .co-summary form .form-row .input-text:focus{
  border-color:var(--brass-mark); background:var(--ink-2); box-shadow:0 0 0 3px rgba(201,169,107,.28);
}
/* These carry the same weight as the rule above, or it wins and a field in
   error never shows it. */
body.co-page .co form .form-row.woocommerce-invalid .input-text,
body.co-page .co form .form-row.woocommerce-invalid select,
body.co-page .co form .form-row.woocommerce-invalid .select2-selection{ border-color:var(--alert); }
body.co-page .co form .form-row.woocommerce-validated .input-text,
body.co-page .co form .form-row.woocommerce-validated select,
body.co-page .co form .form-row.woocommerce-validated .select2-container .select2-selection{ border-color:rgba(168,132,74,.6); }  /* not WooCommerce's green */
.co .checkout-inline-error-message{ color:var(--alert); font-size:.88rem; margin:.35rem 0 0; }

/* Checkboxes: create an account, newsletter, terms. */
:is(.co, form#order_review) .woocommerce-form__label-for-checkbox,
:is(.co, form#order_review) label.checkbox{
  display:flex; align-items:flex-start; gap:.65rem; cursor:pointer; margin:0;
  font-family:var(--body); font-size:.98rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--dim);
}
:is(.co, form#order_review) input[type="checkbox"]{ width:1.05rem; height:1.05rem; margin:.2rem 0 0; accent-color:var(--brass); flex:none; }
.co .woocommerce-account-fields{ margin-top:.25rem; }
.co .create-account{ margin-top:1rem; }

/* Returning customer: a quiet line, not a banner. */
.co .woocommerce-form-login-toggle{ margin:0 0 1.25rem; text-align:right; }
.co .woocommerce-form-login-toggle .woocommerce-info,
.co-summary .woocommerce-form-coupon-toggle .woocommerce-info{
  background:none; border:0; padding:0; margin:0; color:var(--dim); font-size:.95rem;
}
.co .woocommerce-form-login-toggle .woocommerce-info a,
.co-summary .woocommerce-form-coupon-toggle .woocommerce-info a{ color:var(--brass); }
.co .woocommerce-info::before,
.co-summary .woocommerce-info::before{ display:none !important; }
.co form.woocommerce-form-login{ margin:0 0 2rem; }
.co form.woocommerce-form-login .form-row-first,
.co form.woocommerce-form-login .form-row-last{ width:auto !important; }
.co .woocommerce-NoticeGroup{ margin-bottom:.5rem; }

/* The order note hides behind a link until someone wants it (site.js). */
.co .woocommerce-additional-fields{ margin-top:.25rem; }
.co-note-toggle{
  background:none; border:0; padding:0; cursor:pointer; color:var(--brass);
  font-family:var(--body); font-size:.98rem; text-decoration:underline; text-underline-offset:3px;
}
.co-note-toggle:hover{ color:var(--bone); }
.co .woocommerce-additional-fields[data-collapsed="true"] .woocommerce-additional-fields__field-wrapper{ display:none; }
.co .woocommerce-additional-fields textarea{ min-height:6.5rem; }

/* ---------- express checkout (Stripe: Apple Pay, Link) ---------- */
.co .wc-stripe-banner-checkout{ margin:0 0 clamp(1.5rem,3vw,2.25rem); }
.co .wc-stripe-banner-checkout fieldset{ border:1px solid var(--line); margin:0; padding:1rem 1.1rem 1.1rem; }
.co .wc-stripe-banner-checkout legend,
.co .wc-stripe-banner-checkout .banner-title{
  font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); padding:0 .6rem; margin:0 auto; width:auto; border:0;
}
.co ul.wc_stripe_checkout_banner_gateways{ margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; }
.co li.wc-stripe-checkout-banner-gateway{ width:auto !important; max-width:none !important; float:none !important; margin:0 !important; }
.co .wc-stripe-banner-checkout .banner-divider{
  display:flex; align-items:center; gap:1rem; margin:1.1rem 0 0;
  font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.18em; color:var(--dimmer);
}
.co .wc-stripe-banner-checkout .banner-divider::before,
.co .wc-stripe-banner-checkout .banner-divider::after{ content:''; flex:1; height:1px; background:var(--line); position:static; width:auto; }
/* No wallet on this device: no empty box. */
.co .wc-stripe-banner-checkout:not(:has(li.wc-stripe-checkout-banner-gateway:not([style*="display: none"]):not([style*="display:none"]))){ display:none; }

/* ---------- step 2: the depots ---------- */
.co-depots-wait{
  margin:0; padding:1.1rem 1.25rem; border:1px dashed rgba(20,24,27,.25); color:var(--dim);
}
.co-depots-note{ margin:0 0 .9rem; color:var(--dim); font-size:.97rem; }
.co-depots-warn{
  margin:0 0 1rem; padding:1rem 1.25rem; border:1px solid rgba(179,38,30,.3); border-left:3px solid var(--alert);
  background:var(--alert-tint); color:var(--bone); font-size:.97rem; line-height:1.55;
}
.co-depots-warn a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }

/* WooCommerce styles `ul#shipping_method li label` with an ID in the selector
   (inline labels, a hanging indent), so these carry the ID too to outrank it. */
body.co-page .co ul#shipping_method.co-depot-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
body.co-page .co ul#shipping_method li.co-depot{ margin:0; padding:0; text-indent:0; line-height:1.5; list-style:none; }
body.co-page .co ul#shipping_method li.co-depot input{ position:absolute; opacity:0; pointer-events:none; margin:0; }
body.co-page .co ul#shipping_method li.co-depot label{
  display:grid; grid-template-columns:1.25rem 1fr auto; column-gap:.95rem; row-gap:.15rem; align-items:center;
  margin:0; padding:1rem 1.15rem; cursor:pointer; border:1px solid var(--line); background:var(--ink-2);
  font-family:var(--body); font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--bone);
  text-indent:0; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.co-page .co ul#shipping_method li.co-depot label::before{
  content:''; grid-row:1 / span 2; width:1.15rem; height:1.15rem; border-radius:50%;
  border:1px solid rgba(20,24,27,.4); box-shadow:inset 0 0 0 .28rem var(--ink-2); background:transparent;
  transition:background .2s ease, border-color .2s ease;
}
body.co-page .co ul#shipping_method li.co-depot label:hover{ border-color:rgba(168,132,74,.6); }
/* Chosen: a two-pixel brass edge (the second is the inset shadow), the tint, the dot. */
body.co-page .co ul#shipping_method li.co-depot input:checked + label{ border-color:var(--brass-mark); box-shadow:inset 0 0 0 1px var(--brass-mark); background:var(--tint); }
body.co-page .co ul#shipping_method li.co-depot input:checked + label::before{ background:var(--brass-mark); border-color:var(--brass-mark); box-shadow:inset 0 0 0 .28rem var(--tint); }
body.co-page .co ul#shipping_method li.co-depot input:focus-visible + label{ outline:2px solid var(--chalk); outline-offset:2px; }
.co-depot-town{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.02em; }
.co-depot-price{ font-family:var(--display); font-weight:700; font-size:1rem; white-space:nowrap; }
.co-depot-addr{ grid-column:2 / -1; color:var(--dim); font-size:.93rem; line-height:1.45; }

/* ---------- My Account: add a payment method ----------
   woocommerce.css paints this form light grey (#ebe9eb) with a lilac panel
   under each method. Same treatment as the checkout's payment step below. */
#add_payment_method #payment{ background:transparent; border-radius:0; }
#add_payment_method #payment ul.payment_methods{ list-style:none; margin:0 0 1.35rem; padding:0; border:0; display:grid; gap:.6rem; background:none; }
#add_payment_method #payment ul.payment_methods > li{
  margin:0; padding:.95rem 1.15rem; border:1px solid var(--line); background:#0A0D0F; color:var(--bone); line-height:1.4;
  transition:border-color .2s ease;
}
#add_payment_method #payment ul.payment_methods > li:has(> input:checked){ border-color:var(--brass); }
#add_payment_method #payment ul.payment_methods > li > input[type="radio"]{ accent-color:var(--brass); margin:0 .6rem 0 0; vertical-align:middle; }
#add_payment_method #payment ul.payment_methods > li > label{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin:0; cursor:pointer; vertical-align:middle;
  font-family:var(--display); font-size:.95rem; font-weight:700; letter-spacing:.02em; color:var(--bone);
}
#add_payment_method #payment ul.payment_methods > li > label img{ max-height:22px; width:auto; margin:0; float:none; }
#add_payment_method #payment div.payment_box{
  background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--dim);
  margin:.95rem 0 0; padding:1.1rem 0 .2rem; font-size:.97rem; width:auto; box-shadow:none;
}
#add_payment_method #payment div.payment_box::before{ display:none; }
#add_payment_method #payment div.payment_box fieldset{ border:0; margin:0; padding:0; background:none; }
#add_payment_method #payment div.payment_box p:last-child{ margin-bottom:0; }
#add_payment_method #payment .form-row{ float:none; margin:0; padding:0; }
#add_payment_method #place_order{ width:100%; float:none; }

/* ---------- step 3: payment ---------- */
body.co-page :is(.co, form#order_review) #payment{ background:transparent; border-radius:0; }
body.co-page :is(.co, form#order_review) #payment ul.payment_methods{ list-style:none; margin:0 0 1.35rem; padding:0; border:0; display:grid; gap:.6rem; background:none; }
:is(.co, form#order_review) #payment ul.payment_methods > li{
  margin:0; padding:.95rem 1.15rem; border:1px solid var(--line); background:var(--ink-2); color:var(--bone); line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease;
}
:is(.co, form#order_review) #payment ul.payment_methods > li:has(> input:checked){ border-color:var(--brass-mark); box-shadow:inset 0 0 0 1px var(--brass-mark); }
/* The radio stays beside its name at any width: on a phone the card logos
   used to carry the whole label onto a line of its own. A method the Stripe
   plugin hides is hidden with an inline style, which still wins. */
:is(.co, form#order_review) #payment ul.payment_methods > li{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; column-gap:.6rem; }
:is(.co, form#order_review) #payment ul.payment_methods > li > .payment_box{ grid-column:1 / -1; }
/* WooCommerce's float clearers would be grid cells of their own. */
body.co-page :is(.co, form#order_review) #payment ul.payment_methods > li::before,
body.co-page :is(.co, form#order_review) #payment ul.payment_methods > li::after{ content:none; display:none; }
:is(.co, form#order_review) #payment ul.payment_methods > li > input[type="radio"]{ accent-color:var(--brass-mark); margin:.25rem 0 0; }
:is(.co, form#order_review) #payment ul.payment_methods > li > label{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin:0; cursor:pointer; vertical-align:middle;
  font-family:var(--display); font-size:.95rem; font-weight:700; letter-spacing:.02em; text-transform:none; color:var(--bone);
}
:is(.co, form#order_review) #payment ul.payment_methods > li > label img{ max-height:22px; width:auto; margin:0; float:none; }
body.co-page :is(.co, form#order_review) #payment div.payment_box{
  background:transparent !important; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--dim);
  margin:.95rem 0 0; padding:1.1rem 0 .2rem; font-size:.97rem; width:auto; box-shadow:none;
}
body.co-page :is(.co, form#order_review) #payment div.payment_box::before{ display:none !important; }
body.co-page :is(.co, form#order_review) #payment div.payment_box fieldset{ border:0; margin:0; padding:0; background:none; }
:is(.co, form#order_review) #payment div.payment_box p:last-child{ margin-bottom:0; }
:is(.co, form#order_review) #payment .form-row.place-order,
form#order_review #payment > .form-row{ padding:0; margin:0; }   /* pay-for-order's has no place-order class */
:is(.co, form#order_review) .woocommerce-terms-and-conditions-wrapper{ color:var(--dim); font-size:.95rem; margin:0 0 1.15rem; }
:is(.co, form#order_review) .woocommerce-terms-and-conditions-wrapper a{ color:var(--brass); }
:is(.co, form#order_review) .woocommerce-privacy-policy-text{ font-size:.9rem; color:var(--dimmer); }
:is(.co, form#order_review) .woocommerce-privacy-policy-text p{ margin:0 0 .9rem; }
:is(.co, form#order_review) #place_order{ width:100%; float:none; padding:1.3rem 1.8rem; font-size:.84rem; }

/* Order bumps ("add this to your order"), printed by the upsell plugin just
   above the payment methods. Its colours arrive inline, hence the weight. */
.co .viwcuf-checkout-ob-container:not(:empty){ margin:0 0 1.5rem; }
.co .viwcuf-checkout-ob-container:not(:empty)::before{
  content:'Add to your order'; display:block; margin:0 0 .8rem;
  font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.co .vi-wcuf-ob-product-wrap{
  border:1px solid var(--line) !important; border-radius:0 !important; background:var(--ink-2) !important;
  padding:.95rem 1.15rem !important; margin:0 0 .6rem !important; color:var(--bone) !important; cursor:pointer;
  transition:border-color .2s ease;
}
.co .vi-wcuf-ob-product-wrap:hover{ border-color:rgba(168,132,74,.6) !important; }
.co .vi-wcuf-ob-product-wrap:has(.vi-wcuf-ob-checkbox-checked){ border-color:var(--brass-mark) !important; background:var(--tint) !important; }
.co .vi-wcuf-ob-product-top{
  display:flex !important; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent !important; padding:0 !important; margin:0 0 .7rem !important;
}
.co .vi-wcuf-ob-title-wrap{ display:flex !important; align-items:center; gap:.7rem; background:transparent !important; padding:0 !important; margin:0 !important; }
.co .vi-wcuf-ob-title{ font-family:var(--display); font-size:.95rem !important; font-weight:700; color:var(--bone) !important; margin:0 !important; }
.co span.vi-wcuf-ob-checkbox{
  flex:none; width:1.15rem; height:1.15rem; margin:0 !important; border:1px solid rgba(20,24,27,.4) !important; border-radius:0 !important;
  background:transparent !important; position:relative;
}
.co span.vi-wcuf-ob-checkbox-checked{ background:var(--brass-fill) !important; border-color:var(--brass-mark) !important; }
.co span.vi-wcuf-ob-checkbox-checked::after{
  content:''; position:absolute; left:.36rem; top:.12rem; width:.3rem; height:.6rem;
  border:solid #100C05; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.co .vi-wcuf-ob-price{ font-family:var(--display); font-weight:700; white-space:nowrap; color:var(--bone) !important; }
.co .vi-wcuf-ob-price .amount,
.co .vi-wcuf-ob-price .woocommerce-Price-currencySymbol{ color:inherit !important; }
.co .vi-wcuf-ob-price del{ color:var(--dim) !important; font-weight:600; font-size:.88rem; margin-right:.5rem; opacity:1; text-decoration-thickness:1.5px; }
.co .vi-wcuf-ob-price ins{ text-decoration:none; color:var(--brass) !important; background:none; }
.co .vi-wcuf-ob-product-desc-wrap{ display:grid !important; grid-template-columns:64px 1fr; gap:.2rem 1rem; align-items:start; }
.co .vi-wcuf-ob-product-image{ width:64px !important; max-width:64px !important; float:none !important; margin:0 !important; grid-row:1 / span 2; }
.co .vi-wcuf-ob-product-image img{ width:64px !important; height:64px !important; object-fit:cover; display:block; border:1px solid var(--line); border-radius:0 !important; }
.co .vi-wcuf-ob-product-desc{ width:auto !important; float:none !important; margin:0 !important; padding:0 !important; color:var(--dim) !important; font-size:.93rem !important; line-height:1.5; }
.co .vi-wcuf-ob-product-desc strong{
  display:inline-block; margin-bottom:.15rem; font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.co .vi-wcuf-ob-cart-form{ grid-column:1 / -1; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }

/* ---------- the order panel ---------- */
.co-summary{
  position:sticky; top:1.5rem; border:1px solid var(--line); background:var(--ink-2); min-width:0;
  box-shadow:0 1px 2px rgba(20,24,27,.04), 0 14px 34px -18px rgba(20,24,27,.18);
}
.co-summary-toggle{ display:none; }
.co-summary-body{ padding:clamp(1.25rem,2.2vw,1.85rem); }
.co-summary h2{ font-size:clamp(1.05rem,1rem + .4vw,1.3rem); margin:0 0 1.1rem; }

body.co-page .co-summary table.shop_table{ border:0; border-radius:0; background:transparent; margin:0; width:100%; border-collapse:collapse; table-layout:auto; }
.co-summary table.shop_table tbody tr:hover{ background:none; }
body.co-page .co-summary table.shop_table td,
body.co-page .co-summary table.shop_table th{ border:0; padding:.55rem 0; background:none; vertical-align:middle; }
body.co-page .co-summary table.shop_table tbody td{ padding:.6rem 0; }
.co-summary .product-thumb{ width:64px; padding-right:1rem !important; position:relative; }
.co-summary .product-thumb img{ width:60px; height:60px; object-fit:cover; display:block; border:1px solid var(--line); background:var(--ink); }
.co-summary .product-quantity-badge{
  position:absolute; top:.15rem; left:46px; min-width:1.35rem; height:1.35rem; padding:0 .3rem; border-radius:999px;
  display:grid; place-items:center; background:var(--brass-fill); color:#100C05;
  font-family:var(--display); font-size:.68rem; font-weight:800; line-height:1;
}
.co-summary .product-name{ color:var(--bone); font-size:.98rem; line-height:1.35; }
.co-summary .product-name dl.variation{ margin:.2rem 0 0; font-size:.88rem; color:var(--dim); }
.co-summary .product-name dl.variation dt,
.co-summary .product-name dl.variation dd{ display:inline; margin:0; font-weight:400; }
.co-summary .product-name dl.variation dd p{ display:inline; margin:0; }
.co-summary .product-total,
.co-summary tfoot td{ text-align:right; white-space:nowrap; font-family:var(--display); font-weight:700; color:var(--bone); }
body.co-page .co-summary table.shop_table tfoot tr:first-child th,
body.co-page .co-summary table.shop_table tfoot tr:first-child td{ border-top:1px solid var(--line); padding-top:1.1rem; }
body.co-page .co-summary table.shop_table tbody tr:last-child td{ padding-bottom:1.1rem; }
.co-summary tfoot th{
  text-align:left; font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.co-summary tfoot th small,
.co-summary tfoot td small{
  display:block; margin-top:.25rem; font-family:var(--body); font-size:.88rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--dimmer);
}
.co-summary tfoot td small{ margin:0; white-space:nowrap; }
body.co-page .co-summary table.shop_table .order-total th,
body.co-page .co-summary table.shop_table .order-total td{ border-top:1px solid var(--line); padding-top:1.1rem; }
.co-summary .order-total td,
.co-summary .order-total .amount{ font-size:1.45rem; font-weight:800; letter-spacing:-.01em; color:var(--bone); }
.co-summary .order-total th{ color:var(--bone); }
.co-summary .cart-discount td{ color:var(--brass); }
.co-summary .cart-discount .woocommerce-remove-coupon{ font-family:var(--body); font-weight:400; font-size:.85rem; color:var(--dim); margin-left:.4rem; }

/* Coupon: a link until it is wanted. */
.co-summary .woocommerce-form-coupon-toggle{ margin:1.1rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line); }
.co-summary form.checkout_coupon{ border:0; background:none; padding:0; margin:.9rem 0 0; display:flex; gap:.5rem; align-items:stretch; }
.co-summary form.checkout_coupon[style*="display: none"],
.co-summary form.checkout_coupon[style*="display:none"]{ display:none !important; }
.co-summary form.checkout_coupon > p:not(.form-row){ display:none; }
.co-summary form.checkout_coupon .form-row{ margin:0; padding:0; width:auto !important; float:none !important; }
.co-summary form.checkout_coupon .form-row-first{ flex:1 1 auto; }
.co-summary form.checkout_coupon .form-row-last{ flex:none; }
/* An outline, so it outweighs the brass fill the paper gives every button. */
body.co-page .co-shell .co-summary form.checkout_coupon .button{ height:100%; padding:.9rem 1.2rem; background:transparent; color:var(--bone); border-color:var(--edge); }
body.co-page .co-shell .co-summary form.checkout_coupon .button:hover{ background:rgba(20,24,27,.05); border-color:var(--bone); transform:none; }
.co-summary form.checkout_coupon .clear{ display:none; }

/* WooCommerce dims what it is recalculating. Keep that in the palette. */
.co .blockUI.blockOverlay,
.co-summary .blockUI.blockOverlay{ background:var(--ink) !important; opacity:.55 !important; }

/* ---------- thank you ---------- */
.co-shell .woocommerce-order{ max-width:60rem; margin-inline:auto; }
.co-shell .woocommerce-thankyou-order-received{
  font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem); line-height:1.1;
  text-transform:uppercase; letter-spacing:-.005em; color:var(--bone); margin:0 0 1.5rem;
  background:none; border:0; padding:0;
}
.co-shell ul.woocommerce-thankyou-order-details{
  list-style:none; margin:0 0 2.5rem; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  border:1px solid var(--line); background:var(--ink-2);
}
.co-shell ul.woocommerce-thankyou-order-details li{
  float:none; margin:0; padding:1.1rem 1.25rem; border:0; border-right:1px solid var(--line);
  font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.co-shell ul.woocommerce-thankyou-order-details li:last-child{ border-right:0; }
.co-shell ul.woocommerce-thankyou-order-details li strong{
  display:block; margin-top:.45rem; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--bone); word-break:break-word;
}
/* WooCommerce clears its floats with ::before/::after. Inside a grid those
   pseudo-elements become cells of their own and push everything along one. */
.co-shell ul.woocommerce-thankyou-order-details::before,
.co-shell ul.woocommerce-thankyou-order-details::after,
.co-shell .woocommerce-columns--addresses::before,
.co-shell .woocommerce-columns--addresses::after{ display:none !important; }
body.co-page .co-shell ul.woocommerce-thankyou-order-details li{ border-right:1px solid var(--line); }
body.co-page .co-shell ul.woocommerce-thankyou-order-details li:last-child{ border-right:0; }
body.co-page .co-shell table.shop_table{ border-radius:0; }
body.co-page .co-shell .woocommerce-order a.button,
body.co-page .co-shell .woocommerce-order button.button{
  background:var(--brass-fill); color:#100C05; border:1px solid var(--brass-fill); border-radius:0;
}
body.co-page .co-shell .woocommerce-order a.button.cancel{ background:transparent; color:var(--bone); border-color:var(--edge); }
.co-shell .woocommerce-order h2{ font-size:clamp(1.1rem,1rem + .6vw,1.45rem); margin:0 0 1rem; }
body.co-page .co-shell .woocommerce-customer-details address{
  border:1px solid var(--line); border-radius:0; padding:1.25rem; font-style:normal; color:var(--dim); line-height:1.6; width:auto;
  background:var(--ink-2);
}
.co-shell .woocommerce-customer-details--depot-note,
.woocommerce-account .woocommerce-customer-details--depot-note{ margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid var(--line); color:var(--dimmer); font-size:.93rem; }
.co-shell .woocommerce-order-details{ margin-bottom:2.5rem; }

/* The thank-you page's own parts (woocommerce/checkout/thankyou.php): the
   welcome, what happens next, and where the order is going. */
.co-shell .ty-head{ text-align:center; margin:.5rem auto 2.25rem; max-width:40rem; }
.ty-tick{
  display:inline-grid; place-items:center; width:3.25rem; height:3.25rem; margin-bottom:1.1rem;
  border:1px solid var(--brass); color:var(--brass); transform:rotate(45deg);
}
.ty-tick svg{ width:1.35rem; height:1.35rem; transform:rotate(-45deg); }
.co-shell .ty-head .eyebrow{ margin-bottom:.7rem; }
.co-shell .ty-title{
  font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,1.2rem + 2.2vw,2.8rem); line-height:1.05;
  text-transform:uppercase; letter-spacing:-.005em; margin:0 0 .9rem; color:var(--bone);
}
.co-shell .ty-title em{ font-style:normal; color:var(--brass); }
.ty-lead{ margin:0; color:var(--dim); font-size:1.05rem; line-height:1.6; }
.ty-lead b{ color:var(--bone); font-weight:600; word-break:break-word; }

.ty-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 2.75rem; }
.ty-grid > *{ background:var(--ink-2); padding:clamp(1.3rem,2.6vw,2rem); }
.co-shell .ty-next h3{
  font-family:var(--display); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1.35rem;
}
.ty-steps{ list-style:none; margin:0; padding:0; }
.ty-steps li{ position:relative; padding:0 0 1.4rem 2rem; }
.ty-steps li:last-child{ padding-bottom:0; }
/* A brass diamond per step, as on the site's rails, joined by a hairline. */
.ty-steps li::before{
  content:''; position:absolute; left:.28rem; top:.32rem; width:.72rem; height:.72rem;
  border:1px solid var(--brass-mark); background:rgba(201,169,107,.3); transform:rotate(45deg);
}
.ty-steps li::after{
  content:''; position:absolute; left:.64rem; top:1.4rem; bottom:.3rem; width:1px; background:var(--line);
}
.ty-steps li:last-child::after{ display:none; }
.ty-steps b{
  display:block; font-family:var(--display); font-weight:800; font-size:.98rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--bone); margin-bottom:.3rem;
}
.ty-steps p{ margin:0; color:var(--dim); line-height:1.6; }
.ty-important{
  margin:1.5rem 0 0; padding:1rem 1.15rem; border-left:3px solid var(--alert); background:var(--alert-tint);
  color:var(--bone); line-height:1.6; font-size:.97rem;
}
.ty-important b{
  display:block; margin-bottom:.3rem; font-family:var(--display); font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--alert);
}
.ty-important + .ty-note{ margin-top:1rem; }
.ty-note{
  margin:1.5rem 0 0; padding:1rem 1.15rem; border-left:3px solid var(--brass-mark); background:var(--tint);
  color:var(--bone); line-height:1.6; font-size:.97rem;
}
.ty-note b{
  display:block; margin-bottom:.3rem; font-family:var(--display); font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.ty-link{
  display:inline-block; margin-top:.6rem; font-family:var(--display); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); border-bottom:1px solid rgba(138,106,47,.4); padding-bottom:.15rem;
}
.ty-link:hover{ color:var(--bone); border-color:var(--bone); }

.ty-where .eyebrow{ margin-bottom:.55rem; }
.co-shell .ty-where h3{ font-size:1.15rem; margin:0 0 .45rem; }
.ty-where address{ font-style:normal; color:var(--dim); line-height:1.6; }
.ty-help{ margin-top:1.6rem; padding-top:1.35rem; border-top:1px solid var(--line); }
.ty-help p{ margin:0; line-height:1.7; }
.ty-help a{ color:var(--bone); border-bottom:1px solid rgba(20,24,27,.25); }
.ty-help a:hover{ color:var(--brass); border-color:var(--brass); }
.ty-help-note{ margin-top:.5rem !important; color:var(--dimmer); font-size:.9rem; }
.co-shell .ty-shop{ margin-top:1.6rem; width:100%; justify-content:center; }
/* Once the page itself says where it's going, WooCommerce's small print
   headings follow as sub-heads. */
.co-shell .ty .woocommerce-order-details__title,
.co-shell .ty .woocommerce-column__title{ font-size:1.05rem; }
.co-shell .woocommerce-columns--addresses{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
body.co-page .co-shell .woocommerce-columns--addresses .woocommerce-column{ width:auto !important; float:none !important; max-width:none; }

/* ---------- smaller screens ---------- */
@media (max-width:980px){
  .co{ grid-template-columns:1fr; gap:1.5rem; }
  .ty-grid{ grid-template-columns:1fr; }
  /* The order goes first, folded away under its total. */
  .co-summary{ position:static; order:-1; }
  .co-summary-toggle{
    display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
    background:none; border:0; padding:1rem 1.15rem; color:var(--bone);
    font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  }
  .co-summary-toggle-label::after{
    content:''; display:inline-block; width:.45rem; height:.45rem; margin:0 0 .15rem .7rem;
    border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass); transform:rotate(45deg); transition:transform .2s ease;
  }
  .co-summary-toggle[aria-expanded="true"] .co-summary-toggle-label::after{ transform:rotate(-135deg); margin-bottom:-.1rem; }
  .co-summary-toggle-total{ font-size:1.05rem; letter-spacing:0; }
  .co-summary-body{ display:none; border-top:1px solid var(--line); }
  .co-summary-toggle[aria-expanded="true"] + .co-summary-body{ display:block; }
  .co-summary-body h2{ display:none; }
}
/* The logo, the steps and the WhatsApp link need about 1000px side by side.
   Below that the steps drop to a row of their own. */
@media (max-width:1000px){
  .co-head .wrap{ grid-template-columns:auto auto; row-gap:.55rem; min-height:0; padding-top:.85rem; }
  .co-crumbs{ grid-column:1 / -1; grid-row:2; justify-content:flex-start; padding:0 0 .95rem; gap:.6rem; font-size:.6rem; }
  .co-crumbs li{ gap:.6rem; }
  .co-crumbs li + li::before{ width:.9rem; }
}
@media (max-width:760px){
  body.co-page .co-head .logo img{ height:38px; }
  .co-help span{ display:none; }
  .co-help a{ border:0; margin:0; padding:0; }
  .co-shell .woocommerce-columns--addresses{ grid-template-columns:1fr; }
  .co-shell ul.woocommerce-thankyou-order-details li{ border-right:0; border-bottom:1px solid var(--line); }
  .co-shell ul.woocommerce-thankyou-order-details li:last-child{ border-bottom:0; }
}
@media (max-width:520px){
  body.co-page .co ul#shipping_method li.co-depot label{ padding:.9rem 1rem; column-gap:.75rem; }
  .co .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr; }
  .co #billing_first_name_field,
  .co #billing_last_name_field,
  .co #billing_phone_field,
  .co #billing_company_field,
  .co #billing_address_2_field,
  .co #billing_city_field,
  .co #billing_state_field,
  .co #billing_postcode_field{ grid-column:1 / -1; }
  .co-foot .wrap{ justify-content:flex-start; }
}