/* =====================================================================
   HIGH TECH HEALTH — CART, CHECKOUT, ORDER CONFIRMATION (hth-commerce.css)
   ---------------------------------------------------------------------
   Enqueued by inc/commerce.php only on the cart, checkout and
   order-received pages, only while HTH Checkout is on, and after
   hth-ds.css — every colour, radius, face and curve here is a token
   from that file. Nothing new is invented; see CHECKOUT-DESIGN.md.

   SCOPE
   Every rule starts at body.hth-commerce. The markup is ours (the
   templates in inc/commerce/templates/), but the parts WooCommerce
   still draws — form rows, the payment list, notices, the order
   details table — carry WooCommerce's classes and WooCommerce's CSS,
   so this file has to out-rank woocommerce.css and Jevelin's
   WooCommerce styles on those.

   THE TWO IDS
   woocommerce.css styles the payment area through #payment and the
   button through #payment #place_order, i.e. (1,x,x) and (2,x,x).
   Rules for those parts carry the same ids, so they win on
   specificity rather than on load order. Nowhere else needs them.

   !important: Jevelin styles WooCommerce almost entirely with
   !important, so §16 at the end restates the decisions above with
   !important for exactly the properties Jevelin forces, as measured
   on the live pages. Elsewhere it appears only against other inline or
   !important declarations (the promo bar, blockUI), marked in place.
   ===================================================================== */


/* =====================================================================
   1. THE PAGE AROUND IT
   ===================================================================== */
body.hth-commerce { background: var(--hth-sand); }

/* Jevelin's pill stepper. hth_co_progress() draws the replacement. */
body.hth-commerce .woocommerce-progress { display: none; }

/* Jevelin puts 60px above the content; the progress bar is the spacer now. */
body.hth-commerce #wrapper > .content-container { padding-top: var(--hth-5); }

/* The page gutter is ours, not the page editor's.
   The cart and checkout pages wrap their shortcode in a GreenShift container
   block (110px side margins, 10px on phones, set in the editor). That is a
   plugin, and the layout must not depend on it. So: whatever wraps the
   shortcode (that block, a Group block, a WPBakery row, nothing) loses its
   side spacing here, and .woocommerce takes the design-system gutter.
   Everything inside (notices, coupon/login prompts, .hth-co) then centres
   at its own max-width. Removing the wrapper from the page changes nothing
   on these pages. (1,2,1) beats GreenShift's #id.class (1,1,0) without
   !important, at every breakpoint. */
body.hth-commerce #content :has(> .woocommerce) {
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: none;
}
body.hth-commerce #content .woocommerce { padding-left: var(--hth-gut); padding-right: var(--hth-gut); }

/* Focused header — checkout and confirmation only (body.hth-co-focus).
   Logo and the phone item stay; the menu, cart icon, promo bar go.
   Keyed on the phone link rather than a menu-item id, so it survives
   the menu being rebuilt. */
body.hth-co-focus #menu-header-navigation > li:not(:has(> a[href^="tel:"])) { display: none; }
body.hth-co-focus .sh-header-mobile-dropdown,
body.hth-co-focus #header-navigation-mobile { display: none; }
/* The promo bar ships its own rules with !important. */
body.hth-co-focus #ht-promo-bar { display: none !important; }
/* hth-call-button's floating button — the number is in the header already. */
body.hth-co-nocall .hthcb-wrap { display: none !important; }


/* =====================================================================
   2. LAYOUT
   ===================================================================== */
body.hth-commerce .hth-co {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 var(--hth-9);
  color: var(--hth-body);
  font-family: var(--hth-f-body);
}
body.hth-commerce .hth-co *,
body.hth-commerce .hth-co *::before,
body.hth-commerce .hth-co *::after { box-sizing: border-box; }

body.hth-commerce .hth-co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
body.hth-commerce .hth-co__main,
body.hth-commerce .hth-co__aside { min-width: 0; }

body.hth-commerce .hth-co__aside { position: sticky; top: calc(var(--hth-hdr-bottom, 110px) + var(--hth-5)); margin-top: var(--hth-6); }

body.hth-commerce .hth-co__head { margin: var(--hth-6) 0 var(--hth-6); }
body.hth-commerce .hth-co .hth-co__title {
  font-family: var(--hth-f-display);
  font-weight: 300;
  font-size: var(--hth-t-lg);
  letter-spacing: var(--hth-tr-lg);
  line-height: 1.05;
  color: var(--hth-head);
  margin: 0 0 var(--hth-3);
  text-transform: none;
}
body.hth-commerce .hth-co .hth-co__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--hth-t-b);
  line-height: 1.6;
  color: var(--hth-label);
}
body.hth-commerce .hth-co .hth-co-h2 {
  font-family: var(--hth-f-display);
  font-weight: 300;
  font-size: var(--hth-t-md);
  letter-spacing: var(--hth-tr-md);
  line-height: 1.15;
  color: var(--hth-head);
  margin: 0 0 var(--hth-5);
  text-transform: none;
}
body.hth-commerce .hth-co .hth-co-h3 {
  font-family: var(--hth-f-body);
  font-weight: 500;
  font-size: var(--hth-t-b);
  color: var(--hth-head);
  margin: 0 0 var(--hth-4);
  text-transform: none;
  letter-spacing: 0;
}
body.hth-commerce .hth-co-ic { flex: none; vertical-align: -2px; }

/* Screen-reader-only, for the hidden ship-to-different checkbox. */
body.hth-commerce .hth-co .hth-co-sr {
  position: absolute !important;          /* WooCommerce's h3 rules set position */
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 980px) {
  body.hth-commerce .hth-co__grid { grid-template-columns: minmax(0, 1fr); }
  body.hth-commerce .hth-co__aside { position: static; margin-top: 0; }

  /* Cart on a phone: the summary and Checkout button come straight after
     the line items, not under the steps and accessories. display:contents
     lifts the main column's children into the flex column so they can be
     ordered around the aside. */
  body.hth-commerce .hth-co--cart .hth-co__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.hth-commerce .hth-co--cart .hth-co__main { display: contents; }
  body.hth-commerce .hth-co--cart .hth-co__head      { order: 1; }
  body.hth-commerce .hth-co--cart .hth-co-cart       { order: 2; }
  body.hth-commerce .hth-co--cart .hth-co__aside     { order: 3; margin-top: var(--hth-6); }
  body.hth-commerce .hth-co--cart .hth-co-next       { order: 4; }
  body.hth-commerce .hth-co--cart .hth-co-xs         { order: 5; }
}


/* =====================================================================
   3. THE BAR — "Secure checkout · Cart — Details — Confirmation · phone"
   ===================================================================== */
body.hth-commerce .hth-co-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hth-4);
  padding: var(--hth-4) 0;
  border-bottom: 1px solid var(--hth-rule);
  font-size: 13px;
  color: var(--hth-label);
}
body.hth-commerce .hth-co-bar__secure { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .02em; }
body.hth-commerce .hth-co-bar__phone {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--hth-head); text-decoration: none; font-weight: 500; font-size: 14px;
}
body.hth-commerce .hth-co-progress {
  display: flex; align-items: center; gap: 12px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--hth-t-xs); letter-spacing: var(--hth-tr-lab); text-transform: uppercase;
}
body.hth-commerce .hth-co-progress li { display: flex; align-items: center; gap: 12px; margin: 0; }
body.hth-commerce .hth-co-progress li + li::before { content: ""; width: 28px; height: 1px; background: var(--hth-rule); }
body.hth-commerce .hth-co-progress a,
body.hth-commerce .hth-co-progress span { color: var(--hth-label); text-decoration: none; }
body.hth-commerce .hth-co-progress .is-on span { color: var(--hth-head); font-weight: 600; }
body.hth-commerce .hth-co-progress .is-done > *::before { content: "✓ "; color: var(--hth-azure); }

@media (max-width: 760px) {
  body.hth-commerce .hth-co-bar { grid-template-columns: 1fr auto; }
  body.hth-commerce .hth-co-bar__secure { display: none; }
  body.hth-commerce .hth-co-progress { gap: 8px; font-size: 11px; letter-spacing: .1em; }
  body.hth-commerce .hth-co-progress li { gap: 8px; }
  body.hth-commerce .hth-co-progress li + li::before { width: 14px; }
}
@media (max-width: 480px) {
  body.hth-commerce .hth-co-bar__phone { display: none; }
  body.hth-commerce .hth-co-bar { grid-template-columns: 1fr; justify-items: center; }
}


/* =====================================================================
   4. CART LINE ITEMS
   ===================================================================== */
body.hth-commerce .hth-co-items { display: grid; gap: var(--hth-4); }

body.hth-commerce .hth-co-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: var(--hth-5);
  padding: var(--hth-5);
  background: var(--hth-shell);
  border-radius: var(--hth-r-lg);
  box-shadow: var(--hth-shadow);
}
body.hth-commerce .hth-co-item:not(.hth-co-item--freight) { grid-template-columns: 96px minmax(0, 1fr) auto; padding: var(--hth-4) var(--hth-5); }

body.hth-commerce .hth-co-item__img {
  background: var(--hth-white);
  border-radius: var(--hth-r);
  overflow: hidden;
  aspect-ratio: 1;
}
body.hth-commerce .hth-co-item__img a { display: block; height: 100%; }
body.hth-commerce .hth-co-item__img img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; }

body.hth-commerce .hth-co .hth-co-item__name {
  font-family: var(--hth-f-display);
  font-weight: 300;
  font-size: var(--hth-t-sm);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 2px 0 var(--hth-3);
  text-transform: none;
}
body.hth-commerce .hth-co-item__name a { color: var(--hth-head); text-decoration: none; }
body.hth-commerce .hth-co-item__name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* wc_get_formatted_cart_item_data(): <dl class="variation"><dt>Wood Option:</dt><dd><p>Poplar</p></dd>… */
body.hth-commerce .hth-co dl.variation {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--hth-4);
  margin: 0 0 var(--hth-4);
  font-size: var(--hth-t-s);
  line-height: 1.5;
}
body.hth-commerce .hth-co dl.variation dt { color: var(--hth-label); font-weight: 400; margin: 0; float: none; clear: none; }
body.hth-commerce .hth-co dl.variation dd { color: var(--hth-head); margin: 0; float: none; }
body.hth-commerce .hth-co dl.variation dd p { margin: 0; }

body.hth-commerce .hth-co-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.3; color: var(--hth-head);
  background: var(--hth-white);
  border: 1px solid var(--hth-rule);
  border-radius: var(--hth-r-pill);
  padding: 5px 12px;
}
body.hth-commerce .hth-co-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hth-azure); flex: none; }
body.hth-commerce .hth-co-chip--pre::before { background: #B4632A; }   /* the one warm accent: pre-order */

body.hth-commerce .hth-co-item__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hth-3) var(--hth-5);
  margin-top: var(--hth-4);
  font-size: 13px;
}
body.hth-commerce .hth-co-item__links { display: inline-flex; align-items: center; gap: var(--hth-5); }
body.hth-commerce .hth-co-item__actions a { color: var(--hth-label); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.hth-commerce .hth-co-item__actions a:hover { color: var(--hth-head); }
/* WooCommerce's round red × */
body.hth-commerce .hth-co .product-remove a.remove {
  display: inline; width: auto; height: auto; border-radius: 0;
  font-size: 13px; font-weight: 400; line-height: inherit;
  color: var(--hth-label) !important;     /* woocommerce.css sets the red with !important */
  background: none !important;
}
body.hth-commerce .hth-co .product-remove a.remove:hover { color: var(--hth-head) !important; }

/* Quantity: "Qty [− 1 +]". The − / + are added by hth-commerce.js; without
   JS it is the plain number field, still labelled. */
body.hth-commerce .hth-co-qty { display: inline-flex; align-items: center; gap: 10px; }
body.hth-commerce .hth-co-qty.is-fixed { display: none; }
body.hth-commerce .hth-co-qty__label { font-size: 13px; color: var(--hth-label); }

body.hth-commerce .hth-co-item__price { text-align: right; white-space: nowrap; color: var(--hth-head); font-size: 18px; line-height: 1.3; }
body.hth-commerce .hth-co-item__was { display: block; font-size: 13px; color: var(--hth-label); }

body.hth-commerce .hth-co .backorder_notification { font-size: 13px; color: var(--hth-label); margin: var(--hth-2) 0 0; }

@media (max-width: 640px) {
  body.hth-commerce .hth-co-item,
  body.hth-commerce .hth-co-item:not(.hth-co-item--freight) { grid-template-columns: 88px minmax(0, 1fr); padding: var(--hth-4); gap: var(--hth-4); }
  body.hth-commerce .hth-co-item__price { grid-column: 2; grid-row: 2; text-align: left; }
}

/* Promo code + the Update button */
body.hth-commerce .hth-co-actions {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hth-4);
  padding: var(--hth-2) var(--hth-1) 0;
}
body.hth-commerce .hth-co-promo { font-size: 13px; }
body.hth-commerce .hth-co-promo summary {
  cursor: pointer; list-style: none; color: var(--hth-label);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.hth-commerce .hth-co-promo summary::-webkit-details-marker { display: none; }
body.hth-commerce .hth-co-promo .coupon { display: flex; gap: var(--hth-2); margin-top: var(--hth-3); }
body.hth-commerce .hth-co-promo .coupon .input-text {
  width: 200px; height: 40px; padding: 0 12px;
  border: 1px solid var(--hth-rule); border-radius: 8px; background: var(--hth-white);
  font: 400 14px var(--hth-f-body); color: var(--hth-head);
}
/* Quantity changes submit themselves once the JS is running. */
.hth-co-js body.hth-commerce .hth-co-update { display: none; }


/* =====================================================================
   5. "WHAT HAPPENS AFTER YOU ORDER"
   ===================================================================== */
body.hth-commerce .hth-co-next { margin-top: var(--hth-8); }
body.hth-commerce .hth-co-next__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.hth-commerce .hth-co-next__list li {
  position: relative;
  margin: 0;
  padding: var(--hth-5) var(--hth-4) 0 0;
  border-top: 1px solid var(--hth-rule);
}
body.hth-commerce .hth-co-next__list li::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 24px; height: 2px; background: var(--hth-azure);
}
body.hth-commerce .hth-co-next__list li.is-done::before { width: 100%; }
body.hth-commerce .hth-co-next__n { display: block; font: 300 28px/1 var(--hth-f-display); color: var(--hth-label); }
body.hth-commerce .hth-co-next__list li.is-done .hth-co-next__n { color: var(--hth-azure); }
body.hth-commerce .hth-co-next__list strong { display: block; margin: var(--hth-3) 0 var(--hth-1); color: var(--hth-head); font-weight: 500; }
body.hth-commerce .hth-co-next__list p { margin: 0; font-size: var(--hth-t-s); line-height: 1.55; color: var(--hth-label); }

@media (max-width: 760px) { body.hth-commerce .hth-co-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--hth-5); } }
@media (max-width: 440px) { body.hth-commerce .hth-co-next__list { grid-template-columns: minmax(0, 1fr); } }


/* =====================================================================
   6. ACCESSORIES (cross-sells)
   ===================================================================== */
body.hth-commerce .hth-co-xs { margin-top: var(--hth-8); }
body.hth-commerce .hth-co-xs__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hth-4);
}
body.hth-commerce .hth-co-xs__card {
  display: flex; flex-direction: column; gap: var(--hth-3);
  margin: 0; padding: var(--hth-4);
  background: var(--hth-shell); border-radius: var(--hth-r);
}
body.hth-commerce .hth-co-xs__img { display: block; aspect-ratio: 4 / 3; background: var(--hth-white); border-radius: 8px; overflow: hidden; }
body.hth-commerce .hth-co-xs__img img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
body.hth-commerce .hth-co-xs__name { color: var(--hth-head); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 1.35; }
body.hth-commerce .hth-co-xs__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: var(--hth-t-s); color: var(--hth-head); }
body.hth-commerce .hth-co-xs__price del { color: var(--hth-label); margin-right: 4px; }
body.hth-commerce .hth-co-xs__price ins { text-decoration: none; }
body.hth-commerce .hth-co-xs__add {
  border: 1px solid var(--hth-head); border-radius: var(--hth-r-pill);
  padding: 6px 16px; font-size: 13px; font-weight: 500; line-height: 1.2;
  color: var(--hth-head); text-decoration: none;
  transition: background var(--hth-fast) var(--hth-expo), color var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co-xs__add:hover { background: var(--hth-head); color: #fff; }

@media (max-width: 640px) {
  body.hth-commerce .hth-co-xs__list { grid-template-columns: minmax(0, 1fr); }
  body.hth-commerce .hth-co-xs__card { flex-direction: row; align-items: center; }
  body.hth-commerce .hth-co-xs__img { width: 72px; flex: none; aspect-ratio: 1; }
  body.hth-commerce .hth-co-xs__foot { flex-direction: column; align-items: flex-end; gap: 6px; margin: 0 0 0 auto; }
}


/* =====================================================================
   7. THE SUMMARY CARD — cart totals and the checkout aside
   ===================================================================== */
body.hth-commerce .hth-co .cart-collaterals { width: auto; float: none; }
body.hth-commerce .hth-co .cart-collaterals .cart_totals { width: auto; float: none; }

body.hth-commerce .hth-co-sum {
  background: var(--hth-white);
  border-radius: var(--hth-r-lg);
  padding: var(--hth-6) var(--hth-6) var(--hth-5);
  box-shadow: var(--hth-shadow);
}
body.hth-commerce .hth-co .hth-co-sum__title {
  font-family: var(--hth-f-display);
  font-weight: 300; font-size: 24px; letter-spacing: -.01em; line-height: 1.2;
  color: var(--hth-head);
  margin: 0 0 var(--hth-4);
  text-transform: none;
}

/* Totals. Reset woocommerce.css's shop_table borders first. */
body.hth-commerce .hth-co table.hth-co-rows,
body.hth-commerce .hth-co table.hth-co-rows th,
body.hth-commerce .hth-co table.hth-co-rows td {
  border: 0; background: none; margin: 0; box-shadow: none;
}
body.hth-commerce .hth-co table.hth-co-rows { width: 100%; border-collapse: collapse; font-size: 15px; }
body.hth-commerce .hth-co table.hth-co-rows tr { border-bottom: 1px solid var(--hth-rule); }
body.hth-commerce .hth-co table.hth-co-rows th,
body.hth-commerce .hth-co table.hth-co-rows td { padding: 12px 0; vertical-align: top; line-height: 1.45; }
body.hth-commerce .hth-co table.hth-co-rows th { text-align: left; font-weight: 400; color: var(--hth-body); white-space: nowrap; padding-right: var(--hth-4); }
body.hth-commerce .hth-co table.hth-co-rows td { text-align: right; color: var(--hth-head); }
body.hth-commerce .hth-co table.hth-co-rows td small,
body.hth-commerce .hth-co table.hth-co-rows .tax-total td { font-size: 13px; color: var(--hth-label); }
body.hth-commerce .hth-co table.hth-co-rows .tax-total td .amount { font-size: 15px; color: var(--hth-head); }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total { border-bottom: 0; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total th { padding-top: var(--hth-5); color: var(--hth-head); font-weight: 500; vertical-align: baseline; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total td { padding-top: var(--hth-5); vertical-align: baseline; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total td strong,
body.hth-commerce .hth-co table.hth-co-rows tr.order-total .amount {
  font-family: var(--hth-f-display); font-weight: 300;
  font-size: 32px; letter-spacing: -.02em; line-height: 1; color: var(--hth-head);
}
body.hth-commerce .hth-co table.hth-co-rows tr.order-total small.includes_tax { display: block; margin-top: 6px; }
/* Tax row: WooCommerce appends "(estimated for the United States (US))"
   to the label. The label column is nowrap, so that note pushed the table
   past the card's padding and everything right-aligned (subtotal, total)
   sat wider than the buttons. Drop the note onto its own wrapping line. */
body.hth-commerce .hth-co table.hth-co-rows th small {
  display: block; white-space: normal; margin-top: 2px;
  font-size: 12px; line-height: 1.4; color: var(--hth-label);
}

/* Delivery value (inc/commerce/delivery-value.php): "Delivery $800",
   "Free delivery discount −$800" and the non-refundable note, read as one
   group — no rule between the three, a rule after the note. With shipping
   one free rate they stand in for the "Freight delivery · Free" line: the
   cart template leaves that line out, and on checkout the table gets
   .hth-co-rows--dv and WooCommerce's row (kept for its shipping_method
   input) is hidden. Paddings are restated in §16 against Jevelin. */
body.hth-commerce .hth-co table.hth-co-rows--dv tr.woocommerce-shipping-totals { display: none; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount { border-bottom: 0; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge th,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge td { padding-bottom: 2px; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount th,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount td { padding-top: 2px; padding-bottom: 4px; }
/* The label column is nowrap (above). On a phone, "Free delivery discount"
   next to the 32px total's column pushed the table past the card (below
   ~440px wide), so there the two labels may wrap. The 55% keeps the label
   column wide enough for "Free delivery" on one line where the card allows;
   without it the table gives that column its narrowest width and the label
   breaks into three lines. "−$800.00" always stays on one line. */
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv td { white-space: nowrap; }
@media (max-width: 479px) {
  body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv th { white-space: normal; width: 55%; }
}
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note td {
  padding-top: 2px; text-align: left; white-space: normal;
  font-size: 12.5px; line-height: 1.5; color: var(--hth-label);
}
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note small { font-size: inherit; color: inherit; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note a:hover { color: var(--hth-head); }

/* Shipping chooser, when there is a real choice (non-freight carts) */
body.hth-commerce .hth-co #shipping_method { list-style: none; margin: 0; padding: 0; }
body.hth-commerce .hth-co #shipping_method li { margin: 0 0 4px; }
body.hth-commerce .hth-co .woocommerce-shipping-destination,
body.hth-commerce .hth-co .shipping-calculator-button { font-size: 13px; color: var(--hth-label); }

body.hth-commerce .hth-co-fin { margin: var(--hth-3) 0 var(--hth-5); font-size: 13px; line-height: 1.55; color: var(--hth-label); }
body.hth-commerce .hth-co-fin a { color: var(--hth-label); text-decoration: underline; text-underline-offset: 3px; }

/* The one solid button — hth-ds §10's .hth-btn, restated because
   WooCommerce's a.button.alt and Jevelin's button rules sit on it. */
body.hth-commerce .hth-co .wc-proceed-to-checkout { padding: 0; margin-top: var(--hth-4); }
body.hth-commerce .hth-co a.checkout-button.hth-co-btn,
body.hth-commerce .hth-co .button.hth-co-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--hth-3);
  width: 100%; margin: 0; padding: 19px 24px;
  border: 1px solid var(--hth-ink); border-radius: var(--hth-r);
  background: var(--hth-ink); color: #fff;
  font: 500 16px/1 var(--hth-f-body); letter-spacing: 0; text-transform: none; text-decoration: none;
  box-shadow: none;
  transition: background var(--hth-fast) var(--hth-expo), border-color var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co a.checkout-button.hth-co-btn:hover,
body.hth-commerce .hth-co .button.hth-co-btn:hover { background: #2E3E4D; border-color: #2E3E4D; color: #fff; }
body.hth-commerce .hth-co .hth-co-btn .hth-co-ic { transition: transform .6s var(--hth-expo); }
body.hth-commerce .hth-co .hth-co-btn:hover .hth-co-ic { transform: translateX(4px); }
body.hth-commerce .hth-co .button.hth-co-btn--ghost { background: transparent; color: var(--hth-head); border-color: var(--hth-rule); }

body.hth-commerce .hth-co-assure { list-style: none; margin: var(--hth-5) 0 0; padding: 0; display: grid; gap: var(--hth-2); font-size: 13.5px; color: var(--hth-body); }
body.hth-commerce .hth-co-assure li { display: flex; align-items: flex-start; gap: 10px; margin: 0; line-height: 1.45; }
body.hth-commerce .hth-co-assure .hth-co-ic { color: var(--hth-azure); margin-top: 2px; }
/* A guarantee can be a link ("30-day returns" → return policy). Jevelin colours links !important. */
body.hth-commerce .hth-co .hth-co-assure a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.hth-commerce .hth-co .hth-co-assure a:hover { color: var(--hth-head) !important; }

body.hth-commerce .hth-co-help {
  display: flex; align-items: center; gap: var(--hth-4);
  margin-top: var(--hth-5); padding-top: var(--hth-5);
  border-top: 1px solid var(--hth-rule);
  font-size: 13.5px; line-height: 1.45; color: var(--hth-label);
}
body.hth-commerce .hth-co-help__ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--hth-sand); display: grid; place-items: center; color: var(--hth-head); }
body.hth-commerce .hth-co-help a { color: var(--hth-head); font-weight: 500; text-decoration: none; }


/* =====================================================================
   8. CHECKOUT — steps and fields
   ===================================================================== */
/* WooCommerce floats the two columns of #customer_details at 48%. */
body.hth-commerce .hth-co .col2-set { width: auto; float: none; display: block; }
body.hth-commerce .hth-co .col2-set::before,
body.hth-commerce .hth-co .col2-set::after { display: none; }

body.hth-commerce .hth-co-step { padding: var(--hth-6) 0; border-top: 1px solid var(--hth-rule); }
body.hth-commerce .hth-co-steps > .hth-co-step:first-child { border-top: 0; padding-top: 0; }
body.hth-commerce .hth-co-step__head { display: flex; align-items: baseline; gap: var(--hth-4); margin-bottom: var(--hth-5); }
body.hth-commerce .hth-co-step__n { font: 300 22px/1 var(--hth-f-display); color: var(--hth-label); min-width: 18px; }
body.hth-commerce .hth-co .hth-co-step__head h2 {
  font-family: var(--hth-f-display); font-weight: 300;
  font-size: var(--hth-t-md); letter-spacing: var(--hth-tr-md); line-height: 1.15;
  color: var(--hth-head); margin: 0; text-transform: none;
}
body.hth-commerce .hth-co-step__aside { margin-left: auto; font-size: 13px; color: var(--hth-label); display: inline-flex; align-items: center; gap: 6px; }
body.hth-commerce .hth-co-step__aside a { color: var(--hth-accent); }

/* Field grid. Six columns so City / State / ZIP can share a row. */
body.hth-commerce .hth-co .hth-co-fields {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hth-4);
}
body.hth-commerce .hth-co .hth-co-fields::before,
body.hth-commerce .hth-co .hth-co-fields::after { display: none; }
body.hth-commerce .hth-co .hth-co-fields .form-row {
  grid-column: 1 / -1;
  float: none; width: auto; margin: 0; padding: 0;
}
body.hth-commerce .hth-co .hth-co-fields .form-row-first { grid-column: 1 / 4; }
body.hth-commerce .hth-co .hth-co-fields .form-row-last  { grid-column: 4 / 7; }
body.hth-commerce .hth-co .hth-co-fields--address [id$="_city_field"]     { grid-column: 1 / 3; }
body.hth-commerce .hth-co .hth-co-fields--address [id$="_state_field"]    { grid-column: 3 / 5; }
body.hth-commerce .hth-co .hth-co-fields--address [id$="_postcode_field"] { grid-column: 5 / 7; }
/* A state field WooCommerce has hidden for a country without states */
body.hth-commerce .hth-co .hth-co-fields .form-row[style*="display: none"] { display: none; }

body.hth-commerce .hth-co .form-row label {
  display: block; margin: 0 0 6px;
  font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0;
  color: var(--hth-label); text-transform: none;
}
body.hth-commerce .hth-co .form-row label .required,
body.hth-commerce .hth-co .form-row label abbr { color: var(--hth-label); text-decoration: none; border: 0; }
body.hth-commerce .hth-co .form-row label .optional { font-weight: 400; color: var(--hth-label); }
/* Address line 2 hides its label (screen-reader-text) — keep it hidden. */
body.hth-commerce .hth-co .form-row label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

body.hth-commerce .hth-co .form-row .input-text,
body.hth-commerce .hth-co .form-row select,
body.hth-commerce .hth-co .form-row textarea {
  display: block; width: 100%;
  min-height: 50px; margin: 0; padding: 12px 14px;
  background: var(--hth-white);
  border: 1px solid var(--hth-rule); border-radius: var(--hth-r);
  box-shadow: none;
  font: 400 16px/1.4 var(--hth-f-body);      /* 16px: iOS zooms anything smaller */
  color: var(--hth-head);
  transition: border-color var(--hth-fast) var(--hth-expo), box-shadow var(--hth-fast) var(--hth-expo);
  appearance: none;
}
body.hth-commerce .hth-co .form-row textarea { min-height: 96px; resize: vertical; }
body.hth-commerce .hth-co .form-row .input-text::placeholder,
body.hth-commerce .hth-co .form-row textarea::placeholder { color: #8b96a1; }
body.hth-commerce .hth-co .form-row .input-text:focus,
body.hth-commerce .hth-co .form-row select:focus,
body.hth-commerce .hth-co .form-row textarea:focus {
  outline: none; border-color: var(--hth-azure); box-shadow: 0 0 0 3px rgba(46, 134, 184, .15);
}
body.hth-commerce .hth-co .form-row.woocommerce-invalid .input-text,
body.hth-commerce .hth-co .form-row.woocommerce-invalid select { border-color: #B4432A; }
body.hth-commerce .hth-co .form-row.woocommerce-validated .input-text { border-color: var(--hth-rule); }
body.hth-commerce .hth-co .form-row .description,
body.hth-commerce .hth-co .form-row .checkout-inline-error-message {
  display: block; position: static; margin: 6px 0 0; padding: 0;
  background: none; color: var(--hth-label); font-size: 13px; line-height: 1.45;
}
body.hth-commerce .hth-co .form-row .description::before { display: none; }
body.hth-commerce .hth-co .form-row .checkout-inline-error-message { color: #B4432A; }
/* Single-country stores print the country as text, not a select. */
body.hth-commerce .hth-co .form-row strong { display: block; padding: 4px 0; font-weight: 400; color: var(--hth-head); }

/* selectWoo / select2 — WooCommerce's country and state pickers */
body.hth-commerce .hth-co .select2-container .select2-selection--single {
  height: 50px; border: 1px solid var(--hth-rule); border-radius: var(--hth-r); background: var(--hth-white);
}
body.hth-commerce .hth-co .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 48px; padding-left: 14px; color: var(--hth-head); font-size: 16px;
}
body.hth-commerce .hth-co .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; right: 8px; }
body.hth-commerce .hth-co .select2-container--focus .select2-selection--single,
body.hth-commerce .hth-co .select2-container--open .select2-selection--single { border-color: var(--hth-azure); }
body.hth-commerce .select2-dropdown { border-color: var(--hth-rule); border-radius: var(--hth-r); font-family: var(--hth-f-body); }
body.hth-commerce .select2-results__option--highlighted[aria-selected],
body.hth-commerce .select2-results__option--highlighted[data-selected] { background: var(--hth-ink); }

/* Checkboxes and the two-up option cards */
body.hth-commerce .hth-co .hth-co-check,
body.hth-commerce .hth-co .form-row label.woocommerce-form__label-for-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--hth-body); cursor: pointer;
}
body.hth-commerce .hth-co .hth-co-check input,
body.hth-commerce .hth-co .form-row label.woocommerce-form__label-for-checkbox input {
  width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--hth-ink);
}
body.hth-commerce .hth-co .hth-co-check strong { display: block; color: var(--hth-head); font-weight: 500; }
body.hth-commerce .hth-co .hth-co-check small { display: block; margin-top: 2px; color: var(--hth-label); font-size: 13.5px; line-height: 1.5; }

body.hth-commerce .hth-co .woocommerce-additional-fields { margin-top: var(--hth-5); }
body.hth-commerce .hth-co .woocommerce-additional-fields h3 { display: none; }

/* The freight panel */
body.hth-commerce .hth-co-freight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--hth-4);
  margin: 0 0 var(--hth-5); padding: var(--hth-5);
  background: var(--hth-shell); border-radius: var(--hth-r-lg);
}
body.hth-commerce .hth-co-freight__ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hth-white); color: var(--hth-head); display: grid; place-items: center;
}
body.hth-commerce .hth-co-freight__ic .hth-co-ic { width: 20px; height: 20px; }
body.hth-commerce .hth-co .hth-co-freight h3 { margin: 0 0 6px; font: 500 16px/1.35 var(--hth-f-body); color: var(--hth-head); letter-spacing: 0; text-transform: none; }
body.hth-commerce .hth-co-freight p { margin: 0 0 var(--hth-3); font-size: 14.5px; line-height: 1.6; color: var(--hth-body); }
body.hth-commerce .hth-co-freight ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--hth-body); }
body.hth-commerce .hth-co-freight li { margin: 3px 0; }
@media (max-width: 560px) { body.hth-commerce .hth-co-freight { grid-template-columns: 1fr; } }

/* "Everything about delivery ↗" (new tab) — freight panel and confirmation */
body.hth-commerce .hth-co a.hth-co-dlink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--hth-3);
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--hth-accent) !important;          /* Jevelin colours links !important */
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.hth-commerce .hth-co a.hth-co-dlink:hover { color: var(--hth-head) !important; }

/* "Made for indoor rooms. Specs and room requirements ↗" — cart item and freight panel.
   Muted note, accent link, same weight as the delivery link: read before paying, not a warning. */
body.hth-commerce .hth-co .hth-co-req { margin: var(--hth-3) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hth-body); }
body.hth-commerce .hth-co-freight .hth-co-req { margin-top: var(--hth-2); font-size: 14px; }
body.hth-commerce .hth-co .hth-co-req a {
  display: inline; font-weight: 500;
  color: var(--hth-accent) !important;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.hth-commerce .hth-co .hth-co-req a:hover { color: var(--hth-head) !important; }
/* Inline, not flex, so a long label wraps like a sentence and the ↗ stays on its last word. */
body.hth-commerce .hth-co .hth-co-req a .hth-co-ic { display: inline; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; }
body.hth-commerce .hth-co-cards__more { margin: var(--hth-4) 0 0; }

body.hth-commerce .hth-co-wg {
  margin-top: var(--hth-5); padding: var(--hth-4);
  border: 1px dashed var(--hth-sand-deep); border-radius: var(--hth-r);
  background: rgba(255, 255, 255, .45);
}
body.hth-commerce .hth-co-wg a { color: var(--hth-accent); }
body.hth-commerce .hth-co-billsame { margin: var(--hth-5) 0 0; }
body.hth-commerce .hth-co-billing { margin-top: var(--hth-5); padding-top: var(--hth-5); border-top: 1px solid var(--hth-rule); }
body.hth-commerce .hth-co-billing[hidden] { display: none; }

/* AvaTax's "Validate Address" — a quiet secondary action, not a primary button */
body.hth-commerce .hth-co button.wc_avatax_validate_address {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--hth-3) 0 0; padding: 8px 14px;
  background: transparent; color: var(--hth-head);
  border: 1px solid var(--hth-rule); border-radius: var(--hth-r-pill);
  font: 500 13px/1.2 var(--hth-f-body); text-transform: none; letter-spacing: 0; box-shadow: none;
}
body.hth-commerce .hth-co button.wc_avatax_validate_address:hover { background: var(--hth-sand-deep); border-color: var(--hth-sand-deep); }

/* Account creation + login reminder */
body.hth-commerce .hth-co .woocommerce-account-fields { margin-top: var(--hth-4); }
body.hth-commerce .hth-co .woocommerce-account-fields .create-account.hth-co-fields { margin-top: var(--hth-4); }


/* =====================================================================
   9. PAYMENT
   ===================================================================== */
body.hth-commerce .hth-co #payment { background: none; border-radius: 0; padding: 0; }
body.hth-commerce .hth-co #payment ul.payment_methods {
  display: grid; gap: var(--hth-3);
  margin: 0; padding: 0; border: 0; list-style: none;
}
body.hth-commerce .hth-co #payment ul.payment_methods::before,
body.hth-commerce .hth-co #payment ul.payment_methods::after { display: none; }
body.hth-commerce .hth-co #payment ul.payment_methods li {
  margin: 0; padding: 16px 18px;
  background: var(--hth-white);
  border: 1px solid var(--hth-rule); border-radius: var(--hth-r);
  line-height: 1.4; text-align: left;
  transition: border-color var(--hth-fast) var(--hth-expo), box-shadow var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co #payment ul.payment_methods li:has(> input:checked) {
  border-color: var(--hth-ink); box-shadow: inset 0 0 0 1px var(--hth-ink);
}
body.hth-commerce .hth-co #payment ul.payment_methods li > input[type="radio"] {
  margin: 0 10px 0 0; vertical-align: -1px; accent-color: var(--hth-ink);
}
body.hth-commerce .hth-co #payment ul.payment_methods li > label {
  display: inline; font-size: 15px; font-weight: 500; color: var(--hth-head); cursor: pointer;
}
body.hth-commerce .hth-co #payment ul.payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; margin: -2px 0 0 8px; float: none; }
body.hth-commerce .hth-co #payment div.payment_box {
  margin: 14px 0 0; padding: 0;
  background: none; color: var(--hth-body);
  font-size: 14px; line-height: 1.55;
}
body.hth-commerce .hth-co #payment div.payment_box::before { display: none; }
body.hth-commerce .hth-co #payment div.payment_box p:last-child { margin-bottom: 0; }
body.hth-commerce .hth-co #payment div.payment_box fieldset { border: 0; padding: 0; margin: 0; }
body.hth-commerce .hth-co #payment .woocommerce-SavedPaymentMethods-saveNew { margin-top: var(--hth-3); font-size: 13.5px; }

body.hth-commerce .hth-co #payment div.form-row.place-order { margin: var(--hth-5) 0 0; padding: 0; float: none; }

body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper { margin: 0 0 var(--hth-4); }
body.hth-commerce .hth-co .woocommerce-privacy-policy-text p { margin: 0 0 var(--hth-3); font-size: 12.5px; line-height: 1.55; color: var(--hth-label); }
body.hth-commerce .hth-co .woocommerce-privacy-policy-text a,
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-link { color: var(--hth-accent); }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }
/* The terms label holds the text, a &nbsp; and the required marker as
   three flex items; no gap between them, or the * drifts off the text. */
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox { gap: 0; font-size: 14.5px; }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox input { margin-right: 12px; }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions {
  max-height: 240px; overflow: auto; margin: 0 0 var(--hth-3); padding: var(--hth-4);
  background: var(--hth-white); border: 1px solid var(--hth-rule); border-radius: var(--hth-r);
  font-size: 13px; box-shadow: none;
}

body.hth-commerce .hth-co #payment #place_order {
  float: none; display: flex; align-items: center; justify-content: center;
  width: 100%; margin: 0; padding: 20px 24px;
  border: 1px solid var(--hth-ink); border-radius: var(--hth-r);
  background: var(--hth-ink); color: #fff;
  font: 500 16px/1 var(--hth-f-body); letter-spacing: 0; text-transform: none;
  box-shadow: none;
  transition: background var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co #payment #place_order:hover { background: #2E3E4D; }
body.hth-commerce .hth-co #payment #place_order:focus-visible { outline: 2px solid var(--hth-azure); outline-offset: 3px; }

body.hth-commerce .hth-co-fine { margin: var(--hth-3) 0 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--hth-label); }


/* =====================================================================
   10. CHECKOUT SUMMARY (the aside)
   ===================================================================== */
body.hth-commerce .hth-co #order_review,
body.hth-commerce .hth-co #order_review_heading { width: auto; float: none; padding: 0; }

body.hth-commerce .hth-co .hth-co-review { border: 0; margin: 0; }
body.hth-commerce .hth-co-review__items { list-style: none; margin: 0 0 var(--hth-2); padding: 0; }
body.hth-commerce .hth-co-mini {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  margin: 0; padding: 0 0 var(--hth-4);
}
body.hth-commerce .hth-co-mini + .hth-co-mini { padding-top: var(--hth-4); border-top: 1px solid var(--hth-rule); }
body.hth-commerce .hth-co-mini__img { position: relative; aspect-ratio: 1; background: var(--hth-shell); border-radius: 8px; }
body.hth-commerce .hth-co-mini__img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; margin: 0; }
body.hth-commerce .hth-co-mini__qty {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--hth-ink); color: #fff; font-size: 11px; line-height: 20px; text-align: center;
}
body.hth-commerce .hth-co-mini__name { display: block; color: var(--hth-head); font-weight: 500; font-size: 14.5px; line-height: 1.35; }
body.hth-commerce .hth-co-mini dl.variation { font-size: 13px; margin: 4px 0 8px; gap: 0 var(--hth-3); }
body.hth-commerce .hth-co-mini .hth-co-chip { font-size: 12px; padding: 3px 10px; }
body.hth-commerce .hth-co-mini__price { color: var(--hth-head); font-size: 14.5px; white-space: nowrap; }

/* Phones: the summary collapses behind "Show order summary · $8,195.00"
   and sits above the form, which is where a buyer looks for the total. */
body.hth-commerce .hth-co-sumtoggle { display: none; }

@media (max-width: 980px) {
  body.hth-commerce .hth-co--checkout .hth-co__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.hth-commerce .hth-co--checkout .hth-co__aside { order: -1; margin-top: var(--hth-4); }
  body.hth-commerce .hth-co--checkout .hth-co-sum { padding: 0; }

  body.hth-commerce .hth-co .hth-co-sumtoggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    margin: 0; padding: 16px 20px; border: 0; background: none; cursor: pointer;
    font: 500 15px/1.2 var(--hth-f-body); color: var(--hth-accent); text-transform: none; letter-spacing: 0;
  }
  body.hth-commerce .hth-co-sumtoggle__total { color: var(--hth-head); }
  body.hth-commerce .hth-co-sumtoggle__total .amount { font-weight: 500; }

  body.hth-commerce .hth-co--checkout .hth-co-review-wrap { padding: 0 20px 4px; }
  .hth-co-js body.hth-commerce .hth-co--checkout .hth-co-review-wrap { display: none; }
  .hth-co-js body.hth-commerce .hth-co--checkout .hth-co-sum.is-open .hth-co-review-wrap { display: block; }
  body.hth-commerce .hth-co--checkout #order_review_heading { display: none; }

  body.hth-commerce .hth-co--checkout .hth-co-assure,
  body.hth-commerce .hth-co--checkout .hth-co-help { display: none; }
  body.hth-commerce .hth-co--checkout .hth-co-sum.is-open .hth-co-assure { display: grid; margin: var(--hth-2) 20px 0; padding-bottom: var(--hth-5); }
}


/* =====================================================================
   11. ORDER CONFIRMATION
   ===================================================================== */
body.hth-commerce .hth-co-hero {
  margin-top: var(--hth-6);
  padding: clamp(28px, 5vw, 56px);
  background: var(--hth-ink); color: #dfe6ec;
  border-radius: var(--hth-r-lg);
}
body.hth-commerce .hth-co-hero__eyebrow {
  display: block; font-size: var(--hth-t-xs); font-weight: 500;
  letter-spacing: var(--hth-tr-lab); text-transform: uppercase; color: var(--hth-azure-lift);
}
body.hth-commerce .hth-co .hth-co-hero__title {
  font-family: var(--hth-f-display); font-weight: 300;
  font-size: var(--hth-t-lg); letter-spacing: var(--hth-tr-lg); line-height: 1.05;
  color: #fff; margin: var(--hth-4) 0; text-transform: none;
}
body.hth-commerce .hth-co .hth-co-hero__lead {
  max-width: 62ch; margin: 0; padding: 0;
  background: none; border: 0; color: #c3ced8; font-size: var(--hth-t-b); line-height: 1.6;
}
body.hth-commerce .hth-co .hth-co-hero__lead::before { display: none; }
body.hth-commerce .hth-co ul.hth-co-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  margin: var(--hth-6) 0 0; padding: var(--hth-5) 0 0;
  border-top: 1px solid var(--hth-line-dark); list-style: none;
  font-size: 13px; color: #aab8c4;
}
body.hth-commerce .hth-co ul.hth-co-hero__meta::before,
body.hth-commerce .hth-co ul.hth-co-hero__meta::after { display: none; }   /* woocommerce.css clearfix would take a flex gap */
body.hth-commerce .hth-co ul.hth-co-hero__meta li {
  float: none; margin: 0; padding: 0; border: 0;
  font-size: 13px; line-height: 1.4; text-transform: none;
  color: #aab8c4;   /* labels; a parent/Woo rule paints the li #505050, unreadable on ink */
}
body.hth-commerce .hth-co ul.hth-co-hero__meta strong { display: block; margin-top: 2px; color: #fff; font-size: 15px; font-weight: 500; }
body.hth-commerce .hth-co ul.hth-co-hero__meta strong .amount { color: #fff; }

body.hth-commerce .hth-co-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hth-5); margin-top: var(--hth-7); }
body.hth-commerce .hth-co-card { padding: var(--hth-6); background: var(--hth-shell); border-radius: var(--hth-r-lg); }
body.hth-commerce .hth-co .hth-co-card h3 { margin: 0 0 var(--hth-3); font: 500 17px/1.3 var(--hth-f-body); color: var(--hth-head); text-transform: none; letter-spacing: 0; }
body.hth-commerce .hth-co-card ol,
body.hth-commerce .hth-co-card ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
body.hth-commerce .hth-co-card li { margin: 6px 0; }
@media (max-width: 760px) { body.hth-commerce .hth-co-cards { grid-template-columns: 1fr; } }

/* WooCommerce's order details + addresses, drawn by woocommerce_thankyou */
body.hth-commerce .hth-co-details { margin-top: var(--hth-8); }
body.hth-commerce .hth-co-details section { margin: 0 0 var(--hth-7); }
body.hth-commerce .hth-co-details h2 {
  font-family: var(--hth-f-display); font-weight: 300;
  font-size: 24px; letter-spacing: -.01em; color: var(--hth-head); margin: 0 0 var(--hth-4); text-transform: none;
}
body.hth-commerce .hth-co-details table.shop_table {
  width: 100%; border: 0; border-collapse: collapse; margin: 0;
  background: var(--hth-white); border-radius: var(--hth-r-lg); overflow: hidden; box-shadow: var(--hth-shadow);
}
body.hth-commerce .hth-co-details table.shop_table th,
body.hth-commerce .hth-co-details table.shop_table td {
  padding: 14px 20px; border: 0; border-top: 1px solid var(--hth-rule);
  text-align: left; font-size: 15px; line-height: 1.5; color: var(--hth-head); background: none;
}
body.hth-commerce .hth-co-details table.shop_table thead th { border-top: 0; font-size: var(--hth-t-xs); letter-spacing: var(--hth-tr-lab); text-transform: uppercase; color: var(--hth-label); font-weight: 500; }
body.hth-commerce .hth-co-details table.shop_table td:last-child,
body.hth-commerce .hth-co-details table.shop_table th:last-child { text-align: right; }
body.hth-commerce .hth-co-details table.shop_table tfoot th { font-weight: 400; color: var(--hth-body); }
body.hth-commerce .hth-co-details table.shop_table a { color: var(--hth-head); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.hth-commerce .hth-co-details .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--hth-label); }
body.hth-commerce .hth-co-details .wc-item-meta li { margin: 0; }
body.hth-commerce .hth-co-details .wc-item-meta p { display: inline; margin: 0; }
body.hth-commerce .hth-co-details .woocommerce-customer-details address {
  padding: var(--hth-5); border: 0; border-radius: var(--hth-r-lg);
  background: var(--hth-shell); font-style: normal; line-height: 1.6; color: var(--hth-head);
}
body.hth-commerce .hth-co-details .col2-set .col-1,
body.hth-commerce .hth-co-details .col2-set .col-2 { width: auto; float: none; }
body.hth-commerce .hth-co-details .col2-set.addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hth-5); }
@media (max-width: 760px) { body.hth-commerce .hth-co-details .col2-set.addresses { grid-template-columns: 1fr; } }

/* Delivery value note under the order details table (delivery-value.php) */
body.hth-commerce .hth-co-details .hth-dv-note { margin: var(--hth-3) 0 0; font-size: 13px; line-height: 1.55; color: var(--hth-label); }
body.hth-commerce .hth-co-details .hth-dv-note small { font-size: inherit; }
body.hth-commerce .hth-co-details .hth-dv-note a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

body.hth-commerce .hth-co-failed { margin-top: var(--hth-7); max-width: 720px; }
body.hth-commerce .hth-co-failed .woocommerce-thankyou-order-failed-actions { display: flex; gap: var(--hth-3); }
body.hth-commerce .hth-co-failed .woocommerce-thankyou-order-failed-actions .button { width: auto; }


/* =====================================================================
   12. NOTICES, COUPON AND LOGIN PROMPTS
   ---------------------------------------------------------------------
   Printed by WooCommerce above our layout (woocommerce_before_cart,
   woocommerce_before_checkout_form), so these are scoped to the page
   body rather than .hth-co.
   ===================================================================== */
body.hth-commerce .woocommerce-notices-wrapper,
body.hth-commerce .woocommerce-NoticeGroup,
body.hth-commerce .woocommerce > .woocommerce-form-coupon-toggle,
body.hth-commerce .woocommerce > .woocommerce-form-login-toggle,
body.hth-commerce .woocommerce > form.checkout_coupon,
body.hth-commerce .woocommerce > form.woocommerce-form-login { max-width: 1240px; margin-left: auto; margin-right: auto; }

body.hth-commerce .woocommerce-error,
body.hth-commerce .woocommerce-message,
body.hth-commerce .woocommerce-info {
  margin: var(--hth-4) 0; padding: 14px 18px 14px 44px;
  background: var(--hth-white); color: var(--hth-head);
  border: 1px solid var(--hth-rule); border-left: 3px solid var(--hth-azure); border-radius: var(--hth-r);
  font: 400 14.5px/1.5 var(--hth-f-body); box-shadow: none;
}
body.hth-commerce .woocommerce-error { border-left-color: #B4432A; }
body.hth-commerce .woocommerce-error::before,
body.hth-commerce .woocommerce-message::before,
body.hth-commerce .woocommerce-info::before { color: var(--hth-azure); top: 14px; left: 16px; }
body.hth-commerce .woocommerce-error::before { color: #B4432A; }
body.hth-commerce .woocommerce-message .button,
body.hth-commerce .woocommerce-info .button {
  float: right; padding: 0; background: none; border: 0; box-shadow: none;
  color: var(--hth-accent); font: 500 14px/1.5 var(--hth-f-body); text-transform: none; text-decoration: underline;
}

/* "Have a promo code? Enter it here" — the bright-blue bar, made quiet */
body.hth-commerce .woocommerce-form-coupon-toggle .woocommerce-info,
body.hth-commerce .woocommerce-form-login-toggle .woocommerce-info {
  margin: var(--hth-4) auto 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  font-size: 13.5px; color: var(--hth-label); text-align: right;
}
body.hth-commerce .woocommerce-form-coupon-toggle .woocommerce-info::before,
body.hth-commerce .woocommerce-form-login-toggle .woocommerce-info::before { display: none; }
body.hth-commerce .woocommerce-form-coupon-toggle .woocommerce-info a,
body.hth-commerce .woocommerce-form-login-toggle .woocommerce-info a { color: var(--hth-head); text-decoration: underline; text-underline-offset: 3px; }

body.hth-commerce form.checkout_coupon,
body.hth-commerce form.woocommerce-form-login {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hth-2);
  margin-top: var(--hth-3); padding: 0; border: 0; border-radius: 0;
}
body.hth-commerce form.checkout_coupon .form-row { float: none; width: auto; margin: 0; padding: 0; }
body.hth-commerce form.checkout_coupon .input-text {
  width: 220px; height: 44px; padding: 0 12px;
  border: 1px solid var(--hth-rule); border-radius: 8px; background: var(--hth-white);
  font: 400 15px var(--hth-f-body); color: var(--hth-head);
}
body.hth-commerce form.checkout_coupon .button,
body.hth-commerce .hth-co-promo .coupon .button {
  height: 44px; padding: 0 18px;
  border: 1px solid var(--hth-head); border-radius: 8px; background: transparent; color: var(--hth-head);
  font: 500 14px/1 var(--hth-f-body); text-transform: none; letter-spacing: 0; box-shadow: none;
}
body.hth-commerce .hth-co-promo .coupon .button { height: 40px; }
body.hth-commerce form.checkout_coupon .clear { display: none; }


/* =====================================================================
   13. EMPTY CART — cart/cart-empty.php (ours, inc/commerce/templates/)
   ---------------------------------------------------------------------
   Replaces Jevelin's "Ops! There is nothing in your cart" + Return to
   shop. Heading and line centred, then the route cards (Settings →
   HTH Checkout → Empty cart), then the phone. The wrapper also carries
   WooCommerce's .wc-empty-cart-message, which cart.js needs — nothing
   here keys off that class.
   ===================================================================== */
body.hth-commerce .hth-co.hth-co--empty { max-width: 1040px; padding-top: var(--hth-8); container-type: inline-size; }
body.hth-commerce .hth-co-empty__head { margin: 0 auto var(--hth-7); text-align: center; }
body.hth-commerce .hth-co--empty .hth-co__lead { margin: 0 auto; max-width: 46ch; }
body.hth-commerce .hth-co--empty .hth-co__title,
body.hth-commerce .hth-co--empty .hth-co__lead { text-wrap: balance; }

/* One row of equal cards, however many there are. Wrapping them by width
   gave 2 + 1 at tablet sizes, so below 760px OF CONTENT (a container query,
   not the viewport: it follows whatever space the page leaves) the cards
   stack as rows instead. */
body.hth-commerce .hth-co-empty__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--hth-4);
}
body.hth-commerce .hth-co-empty__list > li { display: flex; margin: 0; padding: 0; }
body.hth-commerce .hth-co-empty__list > li::before { display: none; }   /* list-bullet themes */

body.hth-commerce .hth-co .hth-co-empty__card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--hth-2);
  width: 100%; min-height: 176px; padding: var(--hth-5);
  background: var(--hth-shell); border-radius: var(--hth-r);
  color: var(--hth-head); text-decoration: none;
  transition: background var(--hth-fast) var(--hth-expo), box-shadow var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co .hth-co-empty__card:hover { background: var(--hth-white); box-shadow: var(--hth-shadow); }
body.hth-commerce .hth-co .hth-co-empty__card:focus-visible { outline: 2px solid var(--hth-azure); outline-offset: 3px; }

/* Optional photo: bleeds to the card's top edge, 4:3, multiplied onto white like the cart lines. */
body.hth-commerce .hth-co-empty__img {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  margin: calc(var(--hth-5) * -1) calc(var(--hth-5) * -1) var(--hth-3);
  border-radius: var(--hth-r) var(--hth-r) 0 0; background: var(--hth-white);
}
body.hth-commerce .hth-co-empty__img img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; mix-blend-mode: multiply; }

body.hth-commerce .hth-co-empty__name {
  font-family: var(--hth-f-display); font-weight: 400;
  font-size: var(--hth-t-sm); letter-spacing: var(--hth-tr-sm); line-height: 1.2;
  color: var(--hth-head);
}
body.hth-commerce .hth-co-empty__text { font-size: var(--hth-t-s); line-height: 1.5; color: var(--hth-label); }
body.hth-commerce .hth-co-empty__go {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; margin-top: auto; align-self: flex-start;
  border: 1px solid var(--hth-rule); border-radius: 50%; color: var(--hth-head);
  transition: background var(--hth-fast) var(--hth-expo), border-color var(--hth-fast) var(--hth-expo), color var(--hth-fast) var(--hth-expo);
}
/* At least 20px between the words and the arrow, however short the card. */
body.hth-commerce .hth-co-empty__card > :nth-last-child(2) { margin-bottom: var(--hth-3); }
body.hth-commerce .hth-co .hth-co-empty__card:hover .hth-co-empty__go { background: var(--hth-ink); border-color: var(--hth-ink); color: #fff; }

/* The phone: centred under the cards, without the rule it has in the summary card. */
body.hth-commerce .hth-co--empty .hth-co-help {
  justify-content: center; margin: var(--hth-7) auto 0; padding-top: 0; border-top: 0;
}
/* Its icon disc is sand, which is this page's background — shell keeps it visible. */
body.hth-commerce .hth-co--empty .hth-co-help__ic { background: var(--hth-shell); }

/* Notices printed above ("Earthing Mat removed. Undo?") line up with the content. */
body.hth-commerce .woocommerce:has(> .hth-co--empty) > .woocommerce-notices-wrapper { max-width: 1040px; }

/* Narrow content: one card per row, words left, arrow right; a photo becomes a 72px thumbnail. */
@container (max-width: 760px) {
  body.hth-commerce .hth-co-empty__list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  body.hth-commerce .hth-co .hth-co-empty__card {
    min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--hth-4); row-gap: var(--hth-1); align-items: center;
  }
  body.hth-commerce .hth-co .hth-co-empty__card.has-img { grid-template-columns: 72px minmax(0, 1fr) auto; }
  body.hth-commerce .hth-co-empty__card .hth-co-empty__img {
    grid-column: 1; grid-row: 1 / span 2; width: 72px; margin: 0; aspect-ratio: 1; border-radius: 8px;
  }
  body.hth-commerce .hth-co-empty__card .hth-co-empty__go { grid-column: -2; grid-row: 1 / span 2; margin: 0; }
  body.hth-commerce .hth-co-empty__card > :nth-last-child(2) { margin-bottom: 0; }
}

@media (max-width: 640px) {
  body.hth-commerce .hth-co.hth-co--empty { padding-top: var(--hth-6); }
  body.hth-commerce .hth-co-empty__head { margin-bottom: var(--hth-6); }
  body.hth-commerce .hth-co--empty .hth-co-help { justify-content: flex-start; }
}


/* =====================================================================
   14. BLOCKUI — WooCommerce greys the summary while it recalculates
   ===================================================================== */
body.hth-commerce .hth-co .blockUI.blockOverlay { background: var(--hth-white) !important; border-radius: var(--hth-r-lg); } /* inline style */


/* =====================================================================
   15. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.hth-commerce .hth-co * { transition: none !important; }
}


/* =====================================================================
   16. JEVELIN ARMOUR
   ---------------------------------------------------------------------
   Measured on the live cart and checkout, 2026-09-30, with a script
   that listed every declaration from another stylesheet that beats a
   rule in this file. Jevelin writes most of its WooCommerce styling
   with !important — `table th { padding:15px 20px !important }`,
   `body p { line-height:28px !important }`,
   `.woocommerce .button:not(.add_to_cart_button) { background… !important }`
   — so specificity alone cannot win, and the harness (which has
   woocommerce.css but not Jevelin) could not show it.

   Everything below is the same decision made earlier in this file,
   restated with !important for exactly the properties Jevelin forces.
   Nothing new is decided here. If a rule above changes, change its
   twin here. Properties that WooCommerce's JavaScript toggles inline
   (display on .payment_box, the coupon form, shipping_address) are
   deliberately NOT armoured, or slideUp/slideDown would stop working.
   ===================================================================== */

/* ---- type: Jevelin forces line-height on h1–h3, p, inputs and selects */
body.hth-commerce .hth-co p { line-height: 1.6 !important; }
body.hth-commerce .hth-co .hth-co__title,
body.hth-commerce .hth-co .hth-co-hero__title { line-height: 1.05 !important; }
body.hth-commerce .hth-co .hth-co-h2,
body.hth-commerce .hth-co .hth-co-step__head h2 { line-height: 1.15 !important; }
body.hth-commerce .hth-co .hth-co-sum__title,
body.hth-commerce .hth-co-details h2 { line-height: 1.2 !important; }
body.hth-commerce .hth-co .hth-co-item__name,
body.hth-commerce .hth-co .hth-co-item__name a { line-height: 1.25 !important; }
body.hth-commerce .hth-co .hth-co-freight h3,
body.hth-commerce .hth-co .hth-co-card h3,
body.hth-commerce .hth-co .hth-co-h3 { line-height: 1.35 !important; }
body.hth-commerce .hth-co .hth-co-next__list p,
body.hth-commerce .hth-co .hth-co-fine,
body.hth-commerce .hth-co .hth-co-fin,
body.hth-commerce .hth-co .woocommerce-privacy-policy-text p { line-height: 1.55 !important; }

/* ---- the options list: dt at 20px, dd <p> at Jevelin's 28px was the misalignment */
body.hth-commerce .hth-co dl.variation dt,
body.hth-commerce .hth-co dl.variation dd,
body.hth-commerce .hth-co dl.variation dd p { line-height: 1.5 !important; margin: 0 !important; padding: 0 !important; }
body.hth-commerce .hth-co dl.variation { align-items: baseline; }

/* ---- cart line actions */
body.hth-commerce .hth-co .product-remove a.remove::before,
body.hth-commerce .hth-co .product-remove a.remove::after { content: none !important; display: none !important; }  /* Jevelin's themify × */
body.hth-commerce .hth-co .product-remove a.remove { display: inline !important; width: auto !important; height: auto !important; line-height: inherit !important; font-size: 13px !important; text-align: left !important; }
body.hth-commerce .hth-co .hth-co-qty .quantity {
  display: inline-flex !important; align-items: center; width: auto !important; float: none !important; margin: 0 !important;
  border: 1px solid var(--hth-rule); border-radius: var(--hth-r-pill); background: var(--hth-white); overflow: hidden;
}
body.hth-commerce .hth-co .hth-co-qty .quantity.hidden { display: none !important; }
/* Jevelin sets .screen-reader-text to position:relative !important, so the
   product-name label inside .quantity took 270px of the pill, and address
   line 2's hidden label still took a row of height. */
body.hth-commerce .hth-co .screen-reader-text {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
body.hth-commerce .hth-co .hth-co-qty input.qty {
  width: 46px !important; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 500 14px/36px var(--hth-f-body) !important; color: var(--hth-head) !important; text-align: center !important;
  -moz-appearance: textfield; appearance: textfield;
}
body.hth-commerce .hth-co .hth-co-qty input.qty::-webkit-outer-spin-button,
body.hth-commerce .hth-co .hth-co-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.hth-commerce .hth-co .hth-co-qty__btn {
  width: 34px; height: 36px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--hth-head); font: 400 18px/36px var(--hth-f-body); text-align: center;
  transition: background var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co .hth-co-qty__btn:hover { background: var(--hth-sand); }
body.hth-commerce .hth-co .hth-co-qty__btn:disabled { color: var(--hth-sand-deep); cursor: default; background: transparent; }

/* ---- summary tables: Jevelin's `table`, `table th/td`, cart_totals and
        review-order rules all set padding, borders and fills !important */
body.hth-commerce .hth-co table.hth-co-rows { border: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; background: none !important; }
body.hth-commerce .hth-co table.hth-co-rows tr { border: 0 !important; border-bottom: 1px solid var(--hth-rule) !important; background: none !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total { border-bottom: 0 !important; }
body.hth-commerce .hth-co table.hth-co-rows th,
body.hth-commerce .hth-co table.hth-co-rows td { border: 0 !important; background: none !important; padding: 12px 0 !important; }
body.hth-commerce .hth-co table.hth-co-rows th { padding-right: var(--hth-4) !important; color: var(--hth-body) !important; font-weight: 400 !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total th,
body.hth-commerce .hth-co table.hth-co-rows tr.order-total td { padding-top: var(--hth-5) !important; padding-bottom: 4px !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total th { color: var(--hth-head) !important; font-weight: 500 !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.order-total .amount,
body.hth-commerce .hth-co table.hth-co-rows tr.order-total .amount * { color: var(--hth-head) !important; border: 0 !important; padding: 0 !important; }
body.hth-commerce .hth-co .hth-co-mini__body { padding: 0 !important; }
/* Delivery value rows — §7 */
body.hth-commerce .hth-co table.hth-co-rows--dv tr.woocommerce-shipping-totals { display: none !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount { border-bottom: 0 !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge th,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--charge td { padding-bottom: 2px !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount th,
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv--discount td { padding-top: 2px !important; padding-bottom: 4px !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note td { padding-top: 2px !important; text-align: left !important; }
body.hth-commerce .hth-co table.hth-co-rows tr.hth-dv-note a { color: inherit !important; }

/* ---- the solid buttons */
body.hth-commerce .hth-co a.checkout-button.hth-co-btn,
body.hth-commerce .hth-co .button.hth-co-btn,
body.hth-commerce .hth-co #payment #place_order {
  display: flex !important; background: var(--hth-ink) !important; color: #fff !important;
  border: 1px solid var(--hth-ink) !important; border-radius: var(--hth-r) !important;
  line-height: 1 !important; padding: 19px 24px !important; font-size: 16px !important;
}
body.hth-commerce .hth-co a.checkout-button.hth-co-btn:hover,
body.hth-commerce .hth-co .button.hth-co-btn:hover,
body.hth-commerce .hth-co #payment #place_order:hover { background: #2E3E4D !important; border-color: #2E3E4D !important; }
body.hth-commerce .hth-co .button.hth-co-btn--ghost { background: transparent !important; color: var(--hth-head) !important; border-color: var(--hth-rule) !important; }

/* ---- secondary buttons: promo Apply, AvaTax Validate Address */
body.hth-commerce .hth-co-promo .coupon .button,
body.hth-commerce form.checkout_coupon .button {
  background: transparent !important; color: var(--hth-head) !important; border: 1px solid var(--hth-head) !important;
  border-radius: 8px !important; padding: 0 18px !important; line-height: 1 !important; font-size: 14px !important;
}
body.hth-commerce .hth-co-promo .coupon .input-text,
body.hth-commerce form.checkout_coupon .input-text { line-height: 1.2 !important; border-color: var(--hth-rule) !important; }
body.hth-commerce .hth-co button.wc_avatax_validate_address {
  background: transparent !important; color: var(--hth-head) !important; border: 1px solid var(--hth-rule) !important;
  border-radius: var(--hth-r-pill) !important; padding: 8px 14px !important; line-height: 1.2 !important; font-size: 13px !important;
}
body.hth-commerce .hth-co button.wc_avatax_validate_address:hover { background: var(--hth-sand-deep) !important; border-color: var(--hth-sand-deep) !important; }

/* ---- checkout layout: `.sh-jevelin-style3 .woocommerce #customer_details`
        fixes the details column at a fraction of the width */
body.hth-commerce .hth-co .col2-set,
body.hth-commerce .hth-co #customer_details { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
body.hth-commerce .hth-co #order_review_heading { margin: 0 0 var(--hth-4) !important; padding: 0 !important; }

/* ---- form fields */
body.hth-commerce .hth-co .form-row .input-text,
body.hth-commerce .hth-co .form-row textarea { line-height: 1.4 !important; border-color: var(--hth-rule) !important; }
body.hth-commerce .hth-co .form-row select,
body.hth-commerce .hth-co .form-row select.state_select {
  line-height: 1.4 !important; height: auto !important; min-height: 50px !important; padding: 12px 14px !important;
  border: 1px solid var(--hth-rule) !important; border-radius: var(--hth-r) !important; background-color: var(--hth-white) !important;
}
body.hth-commerce .hth-co .form-row .input-text:focus,
body.hth-commerce .hth-co .form-row textarea:focus,
body.hth-commerce .hth-co .form-row select:focus { border-color: var(--hth-azure) !important; }
body.hth-commerce .hth-co .form-row.woocommerce-invalid .input-text,
body.hth-commerce .hth-co .form-row.woocommerce-invalid select { border-color: #B4432A !important; }
body.hth-commerce .hth-co .form-row label .required,
body.hth-commerce .hth-co abbr.required { border: 0 !important; color: var(--hth-label) !important; text-decoration: none !important; }
body.hth-commerce .hth-co .hth-co-check input,
body.hth-commerce .hth-co .form-row label.woocommerce-form__label-for-checkbox input { margin: 2px 0 0 !important; }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox input { margin: 2px 12px 0 0 !important; }

/* ---- payment */
body.hth-commerce .hth-co #payment,
body.hth-commerce .hth-co .woocommerce-checkout-payment { background: none !important; }
body.hth-commerce .hth-co #payment ul.payment_methods { border: 0 !important; padding: 0 !important; }
body.hth-commerce .hth-co #payment ul.payment_methods li { color: var(--hth-head) !important; }
body.hth-commerce .hth-co #payment ul.payment_methods li > label { font-size: 15px !important; }
body.hth-commerce .hth-co #payment div.payment_box {
  background: none !important; margin: 14px 0 0 !important; padding: 0 !important;
  font-size: 14px !important; color: var(--hth-body) !important;
}
body.hth-commerce .hth-co #payment div.form-row.place-order { padding: 0 !important; }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper label { font-size: 14.5px !important; }

/* ---- notices. Jevelin replaces WooCommerce's notice templates with its
        own .sh-alert box (icon cell + h3 title), so .woocommerce-info
        never exists on these pages. */
body.hth-commerce .sh-alert {
  max-width: 1240px; margin: var(--hth-4) auto !important; padding: 14px 18px !important;
  background: var(--hth-white) !important; color: var(--hth-head) !important;
  border: 1px solid var(--hth-rule) !important; border-left: 3px solid var(--hth-azure) !important;
  border-radius: var(--hth-r) !important; box-shadow: none !important;
}
body.hth-commerce .sh-alert.sh-alert-error,
body.hth-commerce .sh-alert.sh-alert-danger { border-left-color: #B4432A !important; }
body.hth-commerce .sh-alert .sh-alert-data-icon { display: none !important; }
body.hth-commerce .sh-alert .sh-alert-title,
body.hth-commerce .sh-alert .sh-alert-title * {
  margin: 0 !important; padding: 0 !important;
  font: 400 14.5px/1.5 var(--hth-f-body) !important; color: var(--hth-head) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
body.hth-commerce .sh-alert a { color: var(--hth-accent) !important; text-decoration: underline !important; text-underline-offset: 3px; }
body.hth-commerce .sh-alert .button { float: right; background: none !important; border: 0 !important; padding: 0 !important; color: var(--hth-accent) !important; }

/* "Have a promo code? Enter it here" — the blue banner, made a quiet line */
body.hth-commerce .woocommerce-form-coupon-toggle,
body.hth-commerce .woocommerce-form-login-toggle { max-width: 1240px; margin: 0 auto; }
body.hth-commerce .woocommerce-form-coupon-toggle .sh-alert,
body.hth-commerce .woocommerce-form-login-toggle .sh-alert {
  margin: var(--hth-3) 0 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; text-align: right;
}
body.hth-commerce .woocommerce-form-coupon-toggle .sh-alert .sh-alert-title,
body.hth-commerce .woocommerce-form-coupon-toggle .sh-alert .sh-alert-title *,
body.hth-commerce .woocommerce-form-login-toggle .sh-alert .sh-alert-title,
body.hth-commerce .woocommerce-form-login-toggle .sh-alert .sh-alert-title * { font-size: 13.5px !important; color: var(--hth-label) !important; }
body.hth-commerce .woocommerce-form-coupon-toggle .sh-alert a,
body.hth-commerce .woocommerce-form-login-toggle .sh-alert a { color: var(--hth-head) !important; }
body.hth-commerce .woocommerce-form-coupon-toggle .sh-table,
body.hth-commerce .woocommerce-form-login-toggle .sh-table { display: block !important; width: auto !important; }
body.hth-commerce .woocommerce-form-coupon-toggle .sh-table-cell:not(.sh-alert-data-icon),
body.hth-commerce .woocommerce-form-login-toggle .sh-table-cell:not(.sh-alert-data-icon) { display: block !important; width: auto !important; }
body.hth-commerce form.checkout_coupon { padding: 0 !important; border: 0 !important; }


/* =====================================================================
   17. WHERE FREIGHT SHIPS — "Delivery to Hawaii is arranged by phone"
   ---------------------------------------------------------------------
   Warm, not red: nothing is wrong with the buyer's order, it just
   finishes on the phone. The one warm accent (#B4632A) is the same one
   the pre-order chip uses.
   ===================================================================== */
body.hth-commerce .hth-co .hth-co-stop:empty { display: none; }
body.hth-commerce .hth-co .hth-co-stop.is-on {
  margin: var(--hth-5) 0 0; padding: var(--hth-5);
  background: var(--hth-white); border: 1px solid var(--hth-rule); border-left: 3px solid #B4632A;
  border-radius: var(--hth-r);
}
body.hth-commerce .hth-co .hth-co-stop h3 {
  margin: 0 0 6px; font: 500 16px/1.35 var(--hth-f-body) !important; color: var(--hth-head);
  letter-spacing: 0; text-transform: none;
}
body.hth-commerce .hth-co .hth-co-stop p { margin: 0 0 var(--hth-4); font-size: 14.5px; line-height: 1.6 !important; color: var(--hth-body); }
body.hth-commerce .hth-co .hth-co-stop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hth-3) var(--hth-5); }
body.hth-commerce .hth-co a.hth-co-stop__call {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--hth-ink) !important; color: #fff !important; border-radius: var(--hth-r);
  font: 500 15px/1 var(--hth-f-body); text-decoration: none !important;
}
body.hth-commerce .hth-co a.hth-co-stop__call:hover { background: #2E3E4D !important; }
body.hth-commerce .hth-co .hth-co-stop__hours { font-size: 13px; color: var(--hth-label); }
body.hth-commerce .hth-co a.hth-co-stop__msg { font-size: 14px; color: var(--hth-accent) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Place order, replaced by the Call button while the stop applies */
body.hth-commerce .hth-co #payment a.hth-co-callbtn { justify-content: center; gap: 10px; text-decoration: none !important; }


/* =====================================================================
   18. CARD DECLINED — the panel in the Payment step
   ---------------------------------------------------------------------
   inc/commerce/decline.php. Replaces WooCommerce's red error bar when a
   card is declined. Warm like §17, not red: nothing is wrong with the
   buyer, the bank wants a word with them. Every action is an outline
   button, so Place order stays the one solid button on the page. The
   failed-order page (.hth-co-decline--page) gets the same card with a
   solid "Try again".

   Scoped to body.hth-commerce, not .hth-co: the order-pay page is
   WooCommerce's own form-pay.php. !important only where Jevelin forces
   the property (p line-height, headings, buttons) — see §16.
   ===================================================================== */
body.hth-commerce .hth-co-decline:empty,
body.hth-commerce .hth-co-decline-src { display: none !important; }
body.hth-commerce .hth-co-decline { margin: 0 0 var(--hth-5); }
body.hth-commerce .hth-co-decline [hidden] { display: none !important; }

body.hth-commerce .hth-co-decline__card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--hth-4);
  padding: var(--hth-5) var(--hth-5) var(--hth-5) calc(var(--hth-5) - 2px);
  background: var(--hth-white); color: var(--hth-body);
  border: 1px solid var(--hth-rule); border-left: 3px solid #B4632A; border-radius: var(--hth-r);
  animation: hth-co-decline-in .5s var(--hth-expo) both;
}
@keyframes hth-co-decline-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

body.hth-commerce .hth-co-decline__ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(180, 99, 42, .10); color: #B4632A;
}
body.hth-commerce .hth-co-decline__ic .hth-co-ic { width: 20px; height: 20px; }

body.hth-commerce .hth-co-decline__title {
  margin: 4px 0 var(--hth-2) !important; padding: 0 !important;
  font: 400 var(--hth-t-sm)/1.2 var(--hth-f-display) !important; letter-spacing: var(--hth-tr-sm) !important;
  color: var(--hth-head) !important; text-transform: none !important;
}
/* Focused by the script so screen readers start here; it is not a control, so no ring. */
body.hth-commerce .hth-co-decline__title:focus,
body.hth-commerce .hth-co-decline__title:focus-visible { outline: none !important; }

body.hth-commerce .hth-co-decline__reason {
  margin: 0 0 var(--hth-3) !important; font-size: 13.5px; line-height: 1.5 !important; color: var(--hth-label);
}
body.hth-commerce .hth-co-decline__reason-label {
  margin-right: 6px; font-size: var(--hth-t-xs); font-weight: 500; letter-spacing: var(--hth-tr-lab); text-transform: uppercase;
}
body.hth-commerce .hth-co-decline__text {
  margin: 0 0 var(--hth-4) !important; max-width: 60ch; font-size: 15px; line-height: 1.6 !important; color: var(--hth-body);
}
body.hth-commerce .hth-co-decline__text a { color: var(--hth-accent) !important; text-decoration: underline; text-underline-offset: 3px; }

/* What to do: numbered, quiet */
body.hth-commerce .hth-co-decline__steps { list-style: none !important; margin: 0 0 var(--hth-5) !important; padding: 0 !important; counter-reset: hth-dstep; display: grid; gap: var(--hth-3); }
body.hth-commerce .hth-co-decline__steps li {
  position: relative; margin: 0 !important; padding: 0 0 0 34px !important; list-style: none !important;
  counter-increment: hth-dstep; font-size: 14.5px; line-height: 1.55; color: var(--hth-body);
}
body.hth-commerce .hth-co-decline__steps li::before {
  content: counter(hth-dstep); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border: 1px solid var(--hth-rule); border-radius: 50%;
  font: 500 11.5px/20px var(--hth-f-body); text-align: center; color: var(--hth-head);
}
body.hth-commerce .hth-co-decline__steps strong { display: block; font-weight: 500; color: var(--hth-head); }
body.hth-commerce .hth-co-decline__steps span { display: block; }

/* Buttons. Outline on checkout; the page's solid button is still Place order. */
body.hth-commerce .hth-co-decline__alts,
body.hth-commerce .hth-co-decline__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hth-2) var(--hth-3); }
body.hth-commerce .hth-co-decline__alts { margin: 0 0 var(--hth-4); padding-top: var(--hth-4); border-top: 1px solid var(--hth-rule); }
body.hth-commerce .hth-co-decline__alts-label {
  flex-basis: 100%; margin-bottom: 2px;
  font-size: var(--hth-t-xs); font-weight: 500; letter-spacing: var(--hth-tr-lab); text-transform: uppercase; color: var(--hth-label);
}
body.hth-commerce .hth-co-decline .hth-co-decline__alt,
body.hth-commerce .hth-co-decline a.hth-co-decline__call,
body.hth-commerce .hth-co-decline a.hth-co-decline__retry {
  display: inline-flex !important; align-items: center; gap: 8px;
  width: auto !important; min-height: 44px; margin: 0 !important; padding: 11px 16px !important;
  background: var(--hth-white) !important; color: var(--hth-head) !important;
  border: 1px solid var(--hth-rule) !important; border-radius: var(--hth-r) !important; box-shadow: none !important;
  font: 500 14.5px/1.2 var(--hth-f-body) !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
  cursor: pointer; transition: border-color var(--hth-fast) var(--hth-expo), background var(--hth-fast) var(--hth-expo);
}
body.hth-commerce .hth-co-decline .hth-co-decline__alt:hover,
body.hth-commerce .hth-co-decline a.hth-co-decline__call:hover { background: var(--hth-shell) !important; border-color: var(--hth-head) !important; }
body.hth-commerce .hth-co-decline .hth-co-decline__alt:focus-visible,
body.hth-commerce .hth-co-decline a.hth-co-decline__call:focus-visible,
body.hth-commerce .hth-co-decline a.hth-co-decline__retry:focus-visible { outline: 2px solid var(--hth-azure); outline-offset: 2px; }
body.hth-commerce .hth-co-decline__alt .hth-co-ic { transition: transform .6s var(--hth-expo); }
body.hth-commerce .hth-co-decline__alt:hover .hth-co-ic { transform: translateX(3px); }
body.hth-commerce .hth-co-decline__hours { font-size: 13px; color: var(--hth-label); }

/* Failed-order page: a bigger heading and a solid Try again */
body.hth-commerce .hth-co-decline--page { margin: 0; }
body.hth-commerce .hth-co-decline--page .hth-co-decline__card { padding: var(--hth-6); gap: var(--hth-5); }
body.hth-commerce .hth-co-decline--page .hth-co-decline__title { font-size: var(--hth-t-md) !important; letter-spacing: var(--hth-tr-md) !important; margin-bottom: var(--hth-3) !important; }
body.hth-commerce .hth-co-decline a.hth-co-decline__retry { background: var(--hth-ink) !important; color: #fff !important; border-color: var(--hth-ink) !important; padding: 13px 22px !important; }
body.hth-commerce .hth-co-decline a.hth-co-decline__retry:hover { background: #2E3E4D !important; border-color: #2E3E4D !important; }

@media (max-width: 560px) {
  body.hth-commerce .hth-co-decline__card,
  body.hth-commerce .hth-co-decline--page .hth-co-decline__card { grid-template-columns: minmax(0, 1fr); gap: var(--hth-3); padding: var(--hth-5) var(--hth-4); }
  body.hth-commerce .hth-co-decline__ic { width: 36px; height: 36px; }
  body.hth-commerce .hth-co-decline .hth-co-decline__alt,
  body.hth-commerce .hth-co-decline a.hth-co-decline__call,
  body.hth-commerce .hth-co-decline a.hth-co-decline__retry { width: 100% !important; justify-content: center; }
  body.hth-commerce .hth-co-decline__hours { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.hth-commerce .hth-co-decline__card { animation: none; }
  body.hth-commerce .hth-co-decline * { transition: none !important; }
}


/* =====================================================================
   19. CHECKOUT ERRORS — what Place order says is missing
   ---------------------------------------------------------------------
   checkout.js puts its error box (.woocommerce-NoticeGroup) at the top
   of form.checkout. That form is also our two-column grid, so the box
   took the wide column, the steps were pushed into the narrow one and
   the summary dropped underneath. hth-commerce.js moves the box under
   the "Checkout" heading, links each line to its field and writes the
   message under the field. The first rule is the fallback if the
   script never runs: a full-width row above both columns, so the grid
   can't be knocked over again.

   Jevelin draws the box: .sh-alert-error, a table with an icon cell,
   and a pink (#f5c3c3) background on h3.sh-alert-title as well as on
   the box — §16 only cleared the box. Restyled as one white card with
   the red rule, the lines in body type. !important only where Jevelin
   forces the property, as in §16.
   ===================================================================== */
body.hth-commerce .hth-co__grid > .woocommerce-NoticeGroup { grid-column: 1 / -1; min-width: 0; margin: var(--hth-6) 0 0 !important; }
body.hth-commerce .hth-co__main > .woocommerce-NoticeGroup { margin: 0 0 var(--hth-6) !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup:focus { outline: none; }

body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error {
  max-width: none; margin: 0 !important; padding: 16px 20px 16px 18px !important;
  background: var(--hth-white) !important; border: 1px solid var(--hth-rule) !important; border-left: 3px solid #B4432A !important;
  border-radius: var(--hth-r) !important; box-shadow: none !important;
  animation: hth-co-decline-in .4s var(--hth-expo) both;
}
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert + .sh-alert,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error + .woocommerce-error { margin-top: var(--hth-3) !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error { padding-left: 18px !important; list-style: none !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error::before { display: none !important; }

/* Jevelin's table → plain blocks; its cells carry 18px padding and the icon */
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-table,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-table-cell { display: block !important; width: auto !important; padding: 0 !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert-data-icon { display: none !important; }
body.hth-commerce .sh-alert .sh-alert-title { background: none !important; }

body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert-title,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert-title *,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error li {
  font: 400 15px/1.5 var(--hth-f-body) !important; color: var(--hth-head) !important;
  text-transform: none !important; letter-spacing: 0 !important; background: none !important;
}
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert-title strong,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error strong { font-weight: 500 !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert-title > div + div,
body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error li + li { margin-top: 6px !important; }

/* A line that names a field links to it: ink text, a red underline. */
body.hth-commerce .hth-co .woocommerce-NoticeGroup a.hth-co-errlink {
  color: var(--hth-head) !important; text-decoration: underline !important;
  text-decoration-color: rgba(180, 67, 42, .55) !important; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
body.hth-commerce .hth-co .woocommerce-NoticeGroup a.hth-co-errlink:hover { color: var(--hth-accent) !important; text-decoration-color: currentColor !important; }
body.hth-commerce .hth-co .woocommerce-NoticeGroup a.hth-co-errlink:focus-visible { outline: 2px solid var(--hth-azure); outline-offset: 2px; border-radius: 2px; }

/* The message under the field. §8 styles it; Jevelin forces p line-height. */
body.hth-commerce .hth-co .form-row .checkout-inline-error-message,
body.hth-commerce .hth-co .hth-co-errnote { line-height: 1.45 !important; }
body.hth-commerce .hth-co .hth-co-errnote { display: block; margin: 8px 0 0 !important; padding: 0; color: #B4432A; font-size: 13px; }

/* The terms tick: woocommerce.css rings it (`.woocommerce-invalid #terms`,
   its red #a00) — our red, so an id here. The message sits under the
   text (18px box + 12px gap), not under the box. */
body.hth-commerce .hth-co .form-row.woocommerce-invalid #terms { outline: 2px solid #B4432A; outline-offset: 2px; }
body.hth-commerce .hth-co .woocommerce-terms-and-conditions-wrapper .form-row .checkout-inline-error-message { margin: 6px 0 0 30px !important; }

@media (prefers-reduced-motion: reduce) {
  body.hth-commerce .hth-co .woocommerce-NoticeGroup .sh-alert,
  body.hth-commerce .hth-co .woocommerce-NoticeGroup .woocommerce-error { animation: none; }
}