/* ==========================================================================
   HerbXMedica — wp.css
   Loaded LAST, after the seven files ported from the static build.

   Those seven ship byte-identical and are never edited. This file exists for
   the one category of rule the static build could not have had: markup that
   only exists once the site is running on WordPress.

   EVERY RULE IN HERE IS LISTED IN THE HANDOVER REPORT. Keep it that way, and
   keep it short — if something here is growing into a layout, the bug is in
   the PHP markup, not in the CSS.

   Contents
     1. Pagination        .hxm-pager     — the static build had no archives
     2. Single-post prose .hxm-entry     — its journal cards linked to '#'
     3. [hidden] repair                  — a bug carried over from the build
     4. Cart, checkout, My Account       — pages the static build never had
     5. Shop                            — sidebar scrollbar, mobile grid
     6. Admin bar                      — the header is fixed, not sticky
   ========================================================================== */


/* 1. PAGINATION -----------------------------------------------------------
   The static build's only paging control was the shop's "Load more", which
   is a button, not a page list. An archive needs numbered pages, so this
   borrows the existing chip/button vocabulary rather than inventing one. */

.hxm-pager {
  margin-top: clamp(32px, 4vw, 56px);
}

.hxm-pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.hxm-pager .page-numbers {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-white);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-decoration: none;
  transition: border-color var(--hxm-t-base) var(--hxm-ease),
              background-color var(--hxm-t-base) var(--hxm-ease),
              color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-pager a.page-numbers:hover {
  border-color: var(--hxm-leaf);
  color: var(--hxm-green);
}

.hxm-pager .page-numbers.current {
  border-color: var(--hxm-leaf);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
}

.hxm-pager .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border-color: transparent;
  background: none;
  color: var(--hxm-muted);
}

.hxm-pager .page-numbers svg {
  width: 16px;
  height: 16px;
}


/* 2. SINGLE-POST PROSE ----------------------------------------------------
   .hxm-measure already sets the readable column width; this only gives the
   flowed elements inside a post their vertical rhythm. All values resolve
   through tokens, so a reskin carries the article with it. */

.hxm-entry__media {
  margin: 0 0 clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--hxm-r-md);
}

.hxm-entry__media img {
  display: block;
  width: 100%;
  height: auto;
}

.hxm-entry__body {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-sm);
  line-height: var(--hxm-lh-body);
}

.hxm-entry__body > * + * {
  margin-top: 1.15em;
}

.hxm-entry__body h2,
.hxm-entry__body h3,
.hxm-entry__body h4 {
  margin-top: 1.8em;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  letter-spacing: var(--hxm-ls-tight);
  line-height: var(--hxm-lh-snug);
}

.hxm-entry__body h2 { font-size: var(--hxm-fs-xl); }
.hxm-entry__body h3 { font-size: var(--hxm-fs-lg); }
.hxm-entry__body h4 { font-size: var(--hxm-fs-md); }

.hxm-entry__body a {
  color: var(--hxm-green);
  text-underline-offset: 3px;
}

.hxm-entry__body ul,
.hxm-entry__body ol {
  padding-left: 1.3em;
  list-style: revert;
}

.hxm-entry__body li + li {
  margin-top: 0.4em;
}

.hxm-entry__body blockquote {
  margin-left: 0;
  padding-left: 20px;
  border-left: 2px solid var(--hxm-leaf);
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-md);
}

.hxm-entry__body img,
.hxm-entry__body figure img {
  height: auto;
  max-width: 100%;
  border-radius: var(--hxm-r-md);
}

.hxm-entry__body figcaption {
  margin-top: 8px;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
}

.hxm-entry__body code,
.hxm-entry__body pre {
  background: var(--hxm-mist);
  border-radius: var(--hxm-r-xs);
}

.hxm-entry__body code { padding: 2px 6px; }

.hxm-entry__body pre {
  overflow-x: auto;
  padding: 16px;
}

.hxm-entry__body table {
  width: 100%;
  border-collapse: collapse;
}

.hxm-entry__body th,
.hxm-entry__body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hxm-line);
  text-align: left;
}


/* 3. [hidden] REPAIR ------------------------------------------------------
   Found while diffing the port against the static build, and present in
   BOTH — this is a bug carried over, not one introduced here.

   `hidden` is only a UA stylesheet rule (display: none) at the very bottom
   of the cascade, so ANY author rule that sets `display` beats it. Three
   components set one unconditionally:

       .hxm-utils__count  { display: grid }   header wishlist + order badges
       .hxm-news__success { display: flex }   homepage AND footer newsletter
       .hxm-cart__empty   { display: flex }   the order drawer's empty state

   The visible consequences on a fresh page load are a "0" badge sitting on
   the wishlist and order icons that should not be there at all, and — worse
   — a green "You are on the list. Check your inbox to confirm." panel shown
   to every visitor in the footer and on the homepage, before anyone has
   typed an address. That last one is a false confirmation, which is why this
   is repaired rather than reproduced.

   The JavaScript already toggles the `hidden` property correctly in every
   case (cart.js -> renderBadge, ui.js -> initForms). It only ever failed to
   take visual effect. Honouring the attribute is therefore enough; no JS
   changes and no edits to the seven shipped stylesheets.

   To revert to exact static-build parity, delete this block. The proper home
   for the fix is `[hidden] { display: none !important }` in base.css, which
   is worth doing if the static build is ever revised.  */

.hxm-utils__count[hidden],
.hxm-bottombar__count[hidden],
.hxm-news__success[hidden],
.hxm-cart__empty[hidden],
.hxm-cart__foot[hidden],
.hxm-cart__savings[hidden] {
  display: none;
}


/* 4. CART, CHECKOUT AND MY ACCOUNT ----------------------------------------
   The largest block in this file, and the one with the clearest reason to
   exist: the static build had no checkout at all, so it has no styles for
   one. WooCommerce ships its own stylesheets, but they are dequeued — they
   carry their own grid, their own type scale and their own button shapes,
   and every one of those fights the design.

   So WooCommerce markup is restyled here in the site's own vocabulary.
   Everything resolves through tokens, so a reskin carries the checkout
   with it.

   Scoped under .hxm-checkout and .woocommerce so nothing here can reach the
   catalogue templates.                                                      */

/* Where a sticky column comes to rest. The header is position: fixed and
   about 125px tall once it has shrunk on scroll (76px bar + 48px nav + rule),
   so anything sticky at the old 24px slid underneath it. Used by the cart and
   checkout summaries and the shop's filter sidebar. */
:root { --hxm-sticky-top: 148px; }

.hxm-checkout {
  --hxm-co-gap: clamp(24px, 3vw, 44px);
}

.hxm-checkout__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.hxm-checkout__title {
  margin: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-page);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  line-height: var(--hxm-lh-tight);
}

.hxm-checkout__note {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 0;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
}

.hxm-checkout__note svg { width: 16px; height: 16px; color: var(--hxm-green); }


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

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--hxm-line);
  border-left-width: 3px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  list-style: none;
}

.woocommerce-message { border-left-color: var(--hxm-leaf); }
.woocommerce-info    { border-left-color: var(--hxm-green); }
.woocommerce-error   { border-left-color: var(--hxm-danger); }
.woocommerce-error li { list-style: none; }


/* --- fields -------------------------------------------------------------- */

.woocommerce .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
}

.woocommerce .form-row label {
  margin-bottom: 6px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
}

.woocommerce .form-row .required { color: var(--hxm-danger); text-decoration: none; }

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-selection {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-xs);
}

.woocommerce textarea { min-height: 110px; resize: vertical; }

.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible {
  outline: var(--hxm-focus-ring);
  outline-offset: var(--hxm-focus-offset);
}


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

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #place_order {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--hxm-leaf);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  cursor: pointer;
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease);
}

.woocommerce .button:hover,
.woocommerce #place_order:hover {
  background: var(--hxm-green);
  border-color: var(--hxm-green);
}

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

.woocommerce .checkout-button,
.woocommerce #place_order {
  width: 100%;
  min-height: 56px;
  font-size: var(--hxm-fs-xs);
}

/* The update-cart control is secondary to the checkout button beside it. */
.woocommerce button[name="update_cart"] {
  border-color: var(--hxm-line-strong);
  background: transparent;
  color: var(--hxm-forest);
}

.woocommerce button[name="update_cart"]:hover {
  border-color: var(--hxm-leaf);
  background: transparent;
  color: var(--hxm-green);
}


/* --- the cart table ------------------------------------------------------ */

.woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 28px;
  border: 1px solid var(--hxm-line);
  border-collapse: collapse;
  border-radius: var(--hxm-r-md);
  overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hxm-line);
  text-align: left;
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  background: var(--hxm-mist);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.shop_table img {
  width: 64px;
  height: auto;
  border-radius: var(--hxm-r-xs);
}

.woocommerce .product-name a {
  color: var(--hxm-ink);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce .product-name a:hover { color: var(--hxm-green); }

.woocommerce .product-name dl.variation { margin: 4px 0 0; }

.woocommerce .product-name dl.variation dt,
.woocommerce .product-name dl.variation dd {
  display: inline;
  margin: 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
}

.woocommerce .product-name dl.variation dd { margin-right: 8px; }
.woocommerce .product-name dl.variation p { display: inline; margin: 0; }

.woocommerce .product-remove a.remove {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-ink-soft);
  color: var(--hxm-danger);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.woocommerce .product-remove a.remove:hover {
  background: var(--hxm-danger);
  color: var(--hxm-white);
}

.woocommerce .quantity input[type="number"] {
  width: 88px;
  min-height: 42px;
  text-align: center;
}

.woocommerce .cart .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px;
}

.woocommerce .coupon {
  display: flex;
  flex: 1 1 260px;
  gap: 8px;
}

.woocommerce .coupon input { min-width: 0; }


/* --- totals and order review --------------------------------------------- */

.woocommerce .cart_totals,
.woocommerce .cart-collaterals {
  max-width: 460px;
  margin-left: auto;
}

.woocommerce .cart_totals h2,
.woocommerce #order_review_heading,
.woocommerce .woocommerce-billing-fields h3,
.woocommerce .woocommerce-additional-fields h3 {
  margin: 0 0 14px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
}

.woocommerce .order-total th,
.woocommerce .order-total td {
  background: var(--hxm-mist);
  font-size: var(--hxm-fs-sm);
  font-weight: 700;
}

.woocommerce .woocommerce-Price-amount {
  font-weight: 600;
  white-space: nowrap;
}


/* --- screen-reader text ---------------------------------------------------
   Woo's templates hide labels with WordPress's .screen-reader-text, which
   normally comes from Woo's own stylesheet. That stylesheet is dequeued, so
   without this the cart printed "REMOVE ITEM", "THUMBNAIL IMAGE" and
   "<product> quantity" as visible text.                                     */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  word-wrap: normal !important;
}


/* --- the cart page --------------------------------------------------------
   woocommerce/cart/cart.php: items on the left, a sticky order summary on the
   right, the same two-column rhythm as the checkout. Everything is scoped to
   .hxm-cartpage and prefixed with .woocommerce so it outranks the generic
   shop_table rules above and the mobile card rules in "small screens".      */

/* The cart opens 20px closer to the header than a full section rhythm —
   client request 2026-09-26. Cart only; the checkout keeps the full gap. */
.woocommerce-cart [data-section="commerce"] {
  padding-top: calc(var(--hxm-section-y) - 20px);
}

.hxm-cartpage {
  display: grid;
  gap: var(--hxm-co-gap);
  align-items: start;
}

@media (min-width: 1000px) {
  .hxm-cartpage {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  }

  /* The header is position: fixed and ~125px tall once stuck, so a 24px
     offset slid the summary's heading underneath it. */
  .hxm-cartpage__aside {
    position: sticky;
    top: var(--hxm-sticky-top);
  }
}

/* The item list's layout follows this column's width — see "the item list
   at every width" below. */
.hxm-cartpage__main {
  min-width: 0;
  container: hxm-cartmain / inline-size;
}

.hxm-cartpage__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hxm-cartpage__card,
.hxm-coupon,
.hxm-summary {
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
  box-shadow: var(--hxm-shadow-sm);
}

.hxm-cartpage__card { overflow: hidden; }

/* The strip above the list: how many items, and the way back to the shop. */
.hxm-cartpage__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-cartpage__count {
  margin: 0;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
}

.hxm-cartpage__continue {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--hxm-green);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  text-decoration: none;
}

.hxm-cartpage__continue svg { width: 16px; height: 16px; transition: transform var(--hxm-t-fast) var(--hxm-ease); }
.hxm-cartpage__continue:hover { color: var(--hxm-forest); }
.hxm-cartpage__continue:hover svg { transform: translateX(-3px); }

/* --- the item list --- */

.woocommerce .hxm-cartpage table.hxm-cartlist {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.woocommerce .hxm-cartpage table.hxm-cartlist th {
  padding: 12px 16px;
  background: var(--hxm-paper);
  color: var(--hxm-muted);
  white-space: nowrap;
}

.woocommerce .hxm-cartpage table.hxm-cartlist td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--hxm-line);
}

.woocommerce .hxm-cartpage table.hxm-cartlist tr:last-child td { border-bottom: 0; }

/* Undo the generic "small screens" card rules for Woo tables further down:
   this list has its own layouts, chosen by column width rather than screen
   width, and the summary is two narrow columns that should stay a table.
   Without this a 700px phone-landscape got half of each system. */
.woocommerce .hxm-cartpage table.hxm-cartlist thead { display: table-header-group; }

.woocommerce .hxm-cartpage table.hxm-cartlist tr,
.woocommerce .hxm-cartpage table.hxm-summary__table tr {
  display: table-row;
  padding: 0;
  border: 0;
}

.woocommerce .hxm-cartpage table.hxm-cartlist td,
.woocommerce .hxm-cartpage table.hxm-summary__table td { display: table-cell; }

.woocommerce .hxm-cartpage table.hxm-cartlist td { text-align: left; }

.woocommerce .hxm-cartpage table.hxm-cartlist td::before,
.woocommerce .hxm-cartpage table.hxm-summary__table td::before { content: none; }

.woocommerce .hxm-cartpage table.hxm-cartlist th:first-child,
.woocommerce .hxm-cartpage table.hxm-cartlist td:first-child { padding-left: 22px; }

.woocommerce .hxm-cartpage table.hxm-cartlist th:last-child,
.woocommerce .hxm-cartpage table.hxm-cartlist td:last-child { padding-right: 18px; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail { width: 112px; padding-right: 0; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail a { display: block; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail img {
  display: block;
  width: 88px;
  height: 88px;
  border: 1px solid var(--hxm-line);
  border-radius: calc(var(--hxm-r-xs) * 2);
  background: var(--hxm-mist);
  object-fit: cover;
}

.woocommerce .hxm-cartpage .hxm-cartlist .product-name { line-height: 1.4; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-name a {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-xs);
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce .hxm-cartpage .hxm-cartlist .product-name a:hover { color: var(--hxm-green); }

.woocommerce .hxm-cartpage .hxm-cartlist .backorder_notification {
  margin: 6px 0 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
}

.woocommerce .hxm-cartpage .hxm-cartlist .product-price { width: 130px; white-space: nowrap; }
.woocommerce .hxm-cartpage .hxm-cartlist .product-quantity { width: 150px; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-subtotal {
  width: 120px;
  color: var(--hxm-ink);
  text-align: right;
  white-space: nowrap;
}

.woocommerce .hxm-cartpage .hxm-cartlist .product-subtotal .woocommerce-Price-amount { font-weight: 700; }

.woocommerce .hxm-cartpage table.hxm-cartlist th.product-subtotal { text-align: right; }

.woocommerce .hxm-cartpage .hxm-cartlist .product-remove { width: 56px; text-align: right; }

.hxm-cartlist__mrp {
  display: block;
  margin-top: 2px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
}

.hxm-cartlist__mrp .woocommerce-Price-amount { font-weight: 400; }

/* The stepper: the site's .hxm-qty, with Woo's own number input in the middle
   so the field name and value cart.js posts are untouched. */
.hxm-cartlist__qty .quantity { display: contents; }

.hxm-cartlist__qty .hxm-qty__btn {
  width: 40px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* components.css fades the whole stepper when any control in it is disabled —
   right for an out-of-stock PDP, wrong here, where "−" at 1 is only a limit. */
.hxm-cartlist__qty.hxm-qty:has(:disabled) { opacity: 1; }

.hxm-cartlist__qty .hxm-qty__btn:disabled {
  color: var(--hxm-line-strong);
  cursor: not-allowed;
  background: transparent;
}

.woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty {
  width: 46px;
  min-height: 0;
  height: 42px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--hxm-line);
  border-radius: 0;
  background: transparent;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty::-webkit-outer-spin-button,
.woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty:focus-visible { outline-offset: -2px; }

.hxm-cartlist__single { font-weight: 600; }

.woocommerce .hxm-cartpage .product-remove a.remove {
  width: 38px;
  height: 38px;
  background: transparent;
  color: var(--hxm-muted);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.woocommerce .hxm-cartpage .product-remove a.remove svg { width: 18px; height: 18px; }

.woocommerce .hxm-cartpage .product-remove a.remove:hover,
.woocommerce .hxm-cartpage .product-remove a.remove:focus-visible {
  background: rgba(178, 59, 44, 0.08);
  color: var(--hxm-danger);
}

/* While cart.js is updating, the list says so instead of looking frozen. */
.hxm-cartpage .woocommerce-cart-form.processing .hxm-cartpage__card { opacity: 0.6; transition: opacity var(--hxm-t-fast) var(--hxm-ease); }

/* --- actions: the coupon, and the update button --- */

.hxm-cartpage__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.woocommerce .hxm-cartpage .coupon.hxm-coupon {
  display: block;
  flex: none;
  padding: 20px 22px;
}

.hxm-coupon__label {
  display: block;
  margin: 0 0 10px;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
}

.hxm-coupon__row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.woocommerce .hxm-cartpage .hxm-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.woocommerce .hxm-cartpage .hxm-coupon__input::placeholder { text-transform: none; }

.woocommerce .hxm-cartpage .hxm-coupon__apply {
  flex: 0 0 auto;
  min-width: 132px;
}

/* Woo's inline coupon error (appended into .coupon by cart.js) arrived as
   unstyled body text, and the field it refers to did not change at all. */
.woocommerce .coupon-error-notice {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0 0;
  color: var(--hxm-danger);
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
}

.woocommerce .coupon-error-notice::before {
  content: "!";
  display: inline-grid;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-danger);
  color: var(--hxm-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}

.woocommerce input.has-error {
  border-color: var(--hxm-danger);
  box-shadow: 0 0 0 3px rgba(178, 59, 44, 0.1);
}

/* --- the empty cart --- */

.hxm-emptycart {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 24px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
  box-shadow: var(--hxm-shadow-sm);
  text-align: center;
}

.hxm-emptycart__icon {
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-mist);
  color: var(--hxm-green);
  place-items: center;
}

.hxm-emptycart__icon svg { width: 34px; height: 34px; }

.woocommerce .hxm-emptycart__title {
  margin: 0 0 8px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
}

.hxm-emptycart__text {
  max-width: 40ch;
  margin: 0 0 28px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.6;
}

.hxm-emptycart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

@media (max-width: 479px) {
  .hxm-emptycart__actions { flex-direction: column; align-self: stretch; }
  .hxm-emptycart__actions .hxm-btn { width: 100%; justify-content: center; }
}

/* Secondary, and on the right, for the no-JS case where it is needed. */
.woocommerce .hxm-cartpage .hxm-cartpage__update { align-self: flex-end; }
.hxm-cartpage__update svg { width: 16px; height: 16px; }

/* With cart-page.js running, quantities apply themselves. The button stays in
   the DOM — the script presses it, which is what cart.js listens for — but is
   taken out of sight. */
.hxm-cartpage.is-auto .hxm-cartpage__update {
  position: absolute !important;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- the order summary --- */

.woocommerce .hxm-cartpage .cart-collaterals,
.woocommerce .hxm-cartpage .cart_totals {
  max-width: none;
  margin: 0;
}

.hxm-summary { padding: 24px; }

.woocommerce .hxm-summary .hxm-summary__title {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-summary__ship {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: calc(var(--hxm-r-xs) * 2);
  background: var(--hxm-mist);
}

.hxm-summary__shipmsg {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-3xs);
}

.hxm-summary__shipmsg svg { flex: none; width: 18px; height: 18px; color: var(--hxm-green); }
.hxm-summary__ship.is-free .hxm-summary__shipmsg { color: var(--hxm-green); font-weight: 600; }

.hxm-summary__meter {
  height: 6px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-white);
  overflow: hidden;
}

.hxm-summary__meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hxm-leaf);
}

.woocommerce .hxm-cartpage table.hxm-summary__table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.woocommerce .hxm-cartpage table.hxm-summary__table th,
.woocommerce .hxm-cartpage table.hxm-summary__table td {
  padding: 9px 0;
  border: 0;
  background: transparent;
  vertical-align: top;
}

.woocommerce .hxm-cartpage table.hxm-summary__table th {
  color: var(--hxm-muted);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.woocommerce .hxm-cartpage table.hxm-summary__table td {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  text-align: right;
}

.woocommerce .hxm-cartpage table.hxm-summary__table .cart-discount td { color: var(--hxm-green); }

.woocommerce .hxm-cartpage table.hxm-summary__table .woocommerce-remove-coupon {
  margin-left: 4px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
}

.hxm-summary__table #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hxm-summary__table #shipping_method li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 6px;
}

.hxm-summary__table #shipping_method input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--hxm-leaf);
}

.hxm-summary__table #shipping_method label { cursor: pointer; }

.hxm-summary__table .woocommerce-shipping-destination { margin-top: 4px; }

.hxm-summary__table .shipping-calculator-button {
  color: var(--hxm-green);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
}

.hxm-summary__table .shipping-calculator-form { margin-top: 12px; text-align: left; }

.woocommerce .hxm-cartpage table.hxm-summary__table .order-total th,
.woocommerce .hxm-cartpage table.hxm-summary__table .order-total td {
  padding-top: 16px;
  border-top: 1px solid var(--hxm-line);
  background: transparent;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  vertical-align: middle;
}

.woocommerce .hxm-cartpage table.hxm-summary__table .order-total .woocommerce-Price-amount { font-size: var(--hxm-fs-lg); font-weight: 700; }

.woocommerce .hxm-cartpage table.hxm-summary__table .order-total small {
  display: block;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  font-weight: 400;
}

.hxm-summary__saved {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: calc(var(--hxm-r-xs) * 2);
  background: var(--hxm-mist);
  color: var(--hxm-green);
  font-size: var(--hxm-fs-3xs);
}

.hxm-summary__saved svg { flex: none; width: 16px; height: 16px; }

.hxm-summary .wc-proceed-to-checkout { margin-top: 18px; }
.hxm-summary .wc-proceed-to-checkout .checkout-button { margin: 0; }

.hxm-summary__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 14px 0 0;
  padding: 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  list-style: none;
}

.hxm-summary__trust li { display: inline-flex; gap: 6px; align-items: center; }
.hxm-summary__trust svg { width: 15px; height: 15px; color: var(--hxm-green); }

/* --- the item list at every width -----------------------------------------
   The list switches layout on the width of its OWN column, not the screen's:
   between 1000px and ~1100px the summary takes 400px beside it, so a laptop
   screen leaves the list narrower than a tablet does. Keyed to the viewport,
   the full table overflowed its card there and clipped the bin off the end.

   > 820px column   full table
   641–820px        compact table: smaller image, tighter columns
   <= 640px         one card per line (phones, and laptops 1000–1100px)     */

@container hxm-cartmain (max-width: 820px) {
  .woocommerce .hxm-cartpage table.hxm-cartlist td { padding: 16px 12px; }

  .woocommerce .hxm-cartpage table.hxm-cartlist th { padding-inline: 12px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail { width: 88px; padding-right: 0; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail img { width: 64px; height: 64px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-name a { font-size: var(--hxm-fs-2xs); }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-price { width: 108px; }
  .woocommerce .hxm-cartpage .hxm-cartlist .product-quantity { width: 136px; }
  .woocommerce .hxm-cartpage .hxm-cartlist .product-subtotal { width: 96px; }
  .woocommerce .hxm-cartpage .hxm-cartlist .product-remove { width: 44px; }

  .hxm-cartlist__qty .hxm-qty__btn { width: 34px; }
  .woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty { width: 40px; }
}

/* One card per line: image on the left, name and unit price beside it, bin
   top-right, and the stepper with the line total underneath. */
@container hxm-cartmain (max-width: 640px) {
  .woocommerce .hxm-cartpage table.hxm-cartlist,
  .woocommerce .hxm-cartpage table.hxm-cartlist tbody { display: block; }

  .woocommerce .hxm-cartpage table.hxm-cartlist thead { display: none; }

  .woocommerce .hxm-cartpage table.hxm-cartlist tr.cart_item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price price"
      "qty   qty   total";
    gap: 4px 14px;
    padding: 16px;
    border-bottom: 1px solid var(--hxm-line);
  }

  .woocommerce .hxm-cartpage table.hxm-cartlist tr.cart_item:last-child { border-bottom: 0; }

  .woocommerce .hxm-cartpage table.hxm-cartlist td,
  .woocommerce .hxm-cartpage table.hxm-cartlist td:first-child,
  .woocommerce .hxm-cartpage table.hxm-cartlist td:last-child {
    display: block;
    padding: 0;
    border: 0;
  }

  /* The table's column widths must not size the grid tracks here. */
  .woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail,
  .woocommerce .hxm-cartpage .hxm-cartlist .product-price,
  .woocommerce .hxm-cartpage .hxm-cartlist .product-quantity,
  .woocommerce .hxm-cartpage .hxm-cartlist .product-subtotal,
  .woocommerce .hxm-cartpage .hxm-cartlist .product-remove { width: auto; padding: 0; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail { grid-area: thumb; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-thumbnail img { width: 76px; height: 76px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-name { grid-area: name; align-self: start; padding-top: 2px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-price {
    grid-area: price;
    align-self: start;
    color: var(--hxm-muted);
    font-size: var(--hxm-fs-3xs);
  }

  .hxm-cartlist__mrp { display: inline; margin: 0 0 0 6px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-remove {
    grid-area: remove;
    align-self: start;
    margin: -8px -8px 0 0;
  }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-quantity { grid-area: qty; margin-top: 12px; }

  .hxm-cartlist__qty .hxm-qty__btn { width: 40px; }
  .woocommerce .hxm-cartpage .hxm-cartlist__qty input.qty { width: 46px; }

  .woocommerce .hxm-cartpage .hxm-cartlist .product-subtotal {
    grid-area: total;
    align-self: center;
    margin-top: 12px;
    font-size: var(--hxm-fs-xs);
    text-align: right;
  }
}

/* --- the cart page on phones --- */

@media (max-width: 767px) {
  .hxm-cartpage__bar { padding: 14px 16px; }
  .woocommerce .hxm-cartpage .coupon.hxm-coupon { padding: 16px; }
  .hxm-summary { padding: 20px 16px; }
}

@media (max-width: 479px) {
  .hxm-coupon__row { flex-direction: column; }
  .woocommerce .hxm-cartpage .hxm-coupon__apply { width: 100%; }
}


/* --- checkout layout ------------------------------------------------------
   Two real columns, not grid-placed siblings.

   Woo's own template emits customer details, the "Your order" heading and the
   order review as three siblings with nothing wrapping the second column. A
   tall left column spanning both rows then donates half its height to row one,
   which pushed the order box 744px below its own heading. The template
   override in woocommerce/checkout/form-checkout.php wraps the right side in
   .hxm-co__aside so this is an ordinary two-column layout.

   The summary sticks while the form is filled, so the total and the pay button
   stay in view — which is the whole reason to put it on the right.           */

.hxm-co {
  display: grid;
  gap: var(--hxm-co-gap);
  align-items: start;
}

@media (min-width: 1000px) {
  .hxm-co {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  }
}

.hxm-co__main { min-width: 0; }

@media (min-width: 1000px) {
  .hxm-co__aside {
    position: sticky;
    top: var(--hxm-sticky-top);
  }
}

.hxm-co__summary {
  padding: 22px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
  box-shadow: var(--hxm-shadow-sm);
}

.hxm-co__summary #order_review_heading {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hxm-line);
}

/* Woo's two-up wrapper: billing and shipping stack here, because shipping is
   a disclosure behind a checkbox rather than a second column. */
.woocommerce .col2-set,
.woocommerce-page .col2-set {
  display: block;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: auto;
  float: none;
}

.woocommerce .col2-set .col-2:empty { display: none; }

/* Section headings inside the form. */
.woocommerce .woocommerce-billing-fields > h3,
.woocommerce .woocommerce-shipping-fields > h3,
.woocommerce .woocommerce-additional-fields > h3 {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hxm-line);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
}

.woocommerce .woocommerce-shipping-fields { margin-top: 28px; }

/* The "ship to a different address" toggle is a heading AND a control, so it
   reads as a switch rather than as another form label. */
.woocommerce .woocommerce-shipping-fields > h3#ship-to-different-address {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--hxm-fs-md);
}

.woocommerce #ship-to-different-address-checkbox { width: 18px; height: 18px; accent-color: var(--hxm-leaf); }

/* --- the field grid ------------------------------------------------------
   Woo already tags each row with form-row-first / -last / -wide. Using those
   gives first and last name side by side without touching the markup.       */

.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce .form-row-first { grid-column: 1; }
.woocommerce .form-row-last  { grid-column: 2; }
.woocommerce .form-row-wide,
.woocommerce .form-row.notes  { grid-column: 1 / -1; }

@media (max-width: 575px) {
  .woocommerce .woocommerce-billing-fields__field-wrapper,
  .woocommerce .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce .form-row-first,
  .woocommerce .form-row-last { grid-column: 1; }
}

/* --- the coupon notice ---------------------------------------------------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
  margin-bottom: 24px;
  padding: 12px 16px;
  font-size: var(--hxm-fs-3xs);
}

.woocommerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-mist);
}

.woocommerce form.checkout_coupon .form-row { flex: 1 1 200px; margin: 0; }
.woocommerce form.checkout_coupon .form-row-last { flex: 0 0 auto; }

/* --- summary lines -------------------------------------------------------- */

.hxm-co__table { margin: 0; border: 0; border-radius: 0; }

.hxm-co__table td,
.hxm-co__table th {
  padding: 12px 0;
  border-bottom: 1px solid var(--hxm-line);
  background: transparent;
}

.hxm-co__table tfoot th {
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-co__table tfoot td { text-align: right; font-weight: 600; }

.hxm-co__table .order-total th,
.hxm-co__table .order-total td {
  padding-top: 16px;
  border-bottom: 0;
  background: transparent;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
}

/* One line: thumbnail with a quantity badge, then name and unit price. */
.hxm-co__line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hxm-co__thumb {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-mist);
  overflow: visible;
}

.hxm-co__thumb img {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--hxm-r-xs) - 1px);
  object-fit: cover;
}

.hxm-co__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  font-family: var(--hxm-font-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  place-items: center;
  text-align: center;
}

.hxm-co__meta { display: block; min-width: 0; }

.hxm-co__title {
  display: block;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1.35;
}

.hxm-co__each,
.hxm-co__line .variation {
  display: block;
  margin-top: 2px;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
}

.hxm-co__table .product-total {
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.hxm-co__saving {
  display: block;
  margin-top: 4px;
  color: var(--hxm-green);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
}

/* Woo's shipping radio list inside the summary. */
.hxm-co__table #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.hxm-co__table #shipping_method li { padding: 3px 0; }

.hxm-co__table #shipping_method label {
  color: var(--hxm-ink);
  cursor: pointer;
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
}

.hxm-co__table #shipping_method input { accent-color: var(--hxm-leaf); }

.woocommerce-shipping-destination {
  margin: 6px 0 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  text-align: right;
}

.woocommerce-shipping-calculator { text-align: right; font-size: var(--hxm-fs-label); }


/* --- payment ------------------------------------------------------------- */

.woocommerce #payment { margin-top: 8px; }

.woocommerce #payment ul.payment_methods {
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 1px solid var(--hxm-line);
  list-style: none;
}

.woocommerce #payment ul.payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hxm-line);
}

.woocommerce #payment ul.payment_methods li:last-child { border-bottom: 0; }

.woocommerce #payment ul.payment_methods label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--hxm-ink);
  cursor: pointer;
  font-weight: 600;
}

.woocommerce #payment .payment_box {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-mist);
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
}

.woocommerce #payment .payment_box p:last-child { margin-bottom: 0; }

.woocommerce-terms-and-conditions-wrapper {
  margin: 14px 0;
  font-size: var(--hxm-fs-3xs);
}


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

.woocommerce .woocommerce-order p,
.woocommerce .woocommerce-thankyou-order-received {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-sm);
}

.woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 20px 0 28px;
  padding: 18px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
  list-style: none;
}

.woocommerce ul.woocommerce-order-overview li {
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-xs);
  letter-spacing: 0;
  text-transform: none;
}


/* The way back into the shop. Rendered by hxm_thankyou_actions() on the
   woocommerce_thankyou action, below the order and customer tables, because
   Woo ships that page with no forward link of its own. */

.hxm-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--hxm-line);
}

@media (max-width: 575px) {
  /* Full width and stacked: on a phone this is the only control on the
     screen, and a pair of half-width buttons reads as one split control. */
  .hxm-thanks-actions { flex-direction: column; }
  .hxm-thanks-actions .hxm-btn { width: 100%; }
}


/* --- My Account ----------------------------------------------------------
   Moved to assets/css/account.css, which loads after this file on the account
   pages only.

   What used to be here was a two-column grid on `.woocommerce-account
   .woocommerce`. That selector matched two nested elements — page.php's own
   wrapper AND the wrapper the [woocommerce_my_account] shortcode prints — so
   the inner one was placed in the outer grid's 220px sidebar column, and the
   account content, sized `minmax(0, 1fr)` inside 220px, collapsed to a strip
   a few characters wide. page.php no longer adds a wrapper of its own, and the
   account layout is now keyed on the theme's own class names rather than on
   `.woocommerce`, so neither half of that can happen again.               */


/* --- the drawer's secondary link ----------------------------------------- */

/* A real secondary button under the primary one, not a text link. */
.hxm-cart__viewcart { margin-top: 10px; }


/* --- small screens -------------------------------------------------------
   The cart table has no useful mobile form, so each row becomes a card with
   its header printed from the cell's data-title attribute.                  */

@media (max-width: 767px) {
  .woocommerce table.shop_table thead { display: none; }

  .woocommerce table.shop_table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--hxm-line);
  }

  .woocommerce table.shop_table td {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border: 0;
    text-align: right;
  }

  .woocommerce table.shop_table td::before {
    content: attr(data-title);
    color: var(--hxm-muted);
    font-family: var(--hxm-font-label);
    font-size: var(--hxm-fs-label);
    font-weight: 600;
    letter-spacing: var(--hxm-ls-label);
    text-align: left;
  }

  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.product-thumbnail::before { content: ""; }

  .woocommerce .cart_totals,
  .woocommerce .cart-collaterals { max-width: none; }

  .woocommerce .cart .actions { justify-content: stretch; }
  .woocommerce .cart .actions .button { width: 100%; }
}


/* 5. SHOP -----------------------------------------------------------------
   Two fixes and a mobile pass, all requested after the port was reviewed.

   THE SIDEBAR SCROLLBAR. pages.css pins the filter column with
   `max-height: calc(100vh - 140px); overflow-y: auto`. The filter stack is
   about 1650px tall, so on any normal screen that produced a second scrollbar
   inside the page — and the bottom filters were only reachable by scrolling a
   panel most people never realise is scrollable.

   Sticky is kept, but only where the column actually fits: above 1100px of
   viewport height it sticks, below that it scrolls with the page like any
   other column. Either way there is no inner scrollbar and every filter is
   reachable.                                                                */

.hxm-sidebar {
  position: static;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

@media (min-height: 1100px) and (min-width: 1025px) {
  .hxm-sidebar {
    position: sticky;
    top: var(--hxm-sticky-top);
  }
}

/* Tighter filter groups: the column was long enough to be the problem above,
   and a filter list does not need 22px of air on both sides of every rule. */
.hxm-sidebar .hxm-filter { padding-block: 18px; }

.hxm-sidebar .hxm-filter__title {
  font-size: var(--hxm-fs-2xs);
}

/* Bigger hit areas on the checkboxes without making the list taller: the row
   is padded rather than spaced. */
.hxm-sidebar .hxm-check {
  padding-block: 7px;
  border-radius: var(--hxm-r-xs);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-sidebar .hxm-check:hover {
  background: var(--hxm-mist);
}


/* --- toolbar -------------------------------------------------------------
   Count on the left, controls on the right, with a rule under it so the grid
   below reads as a separate block.                                          */

.hxm-toolbar {
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-toolbar__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}


/* --- mobile ---------------------------------------------------------------
   responsive.css drops the grid to ONE column below 576px, which on a 390px
   screen gives a 350px-wide card with a 350px-tall photograph: one product
   fills the whole viewport and the range feels far smaller than it is.

   Two-up is the modern default and it is what every phone shopper expects, so
   the grid stays at two and the card shrinks to suit.                       */

@media (max-width: 575px) {
  .products.hxm-products { --hxm-cols: 2; gap: 12px; }

  .hxm-product__body { padding: 10px 10px 12px; gap: 5px; }

  .hxm-product__cat {
    font-size: 10px;
    letter-spacing: 0.03em;
  }

  .woocommerce-loop-product__title {
    font-size: var(--hxm-fs-2xs);
    line-height: 1.25;
  }

  /* The rating row is the first thing worth losing at this size — the stars
     alone still carry it, and the count is on the product page. */
  .hxm-product .hxm-rating__count { display: none; }

  .hxm-product__foot .price { font-size: var(--hxm-fs-xs); }

  .hxm-product__cta {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .hxm-product__cta svg { width: 15px; height: 15px; }

  /* Hover-revealed on a pointer, permanently visible on touch — which at
     two-up would cover a third of the photograph. Wishlist is the only one
     worth the space; quick view and compare are both on the card's own page. */
  .hxm-product__rail { gap: 6px; top: 8px; right: 8px; }
  .hxm-product__railbtn { width: 34px; height: 34px; }
  .hxm-product__railbtn:nth-child(n + 2) { display: none; }

  .hxm-product__badges { gap: 4px; top: 8px; left: 8px; }
  .hxm-product__badges .hxm-badge { padding: 3px 7px; font-size: 10px; }
}

/* --- toolbar on mobile ----------------------------------------------------
   The two selects and the column toggle each took a full-width row, so the
   controls alone were 171px tall before a single product appeared.          */

@media (max-width: 767px) {
  .hxm-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
  }

  .hxm-toolbar__group {
    width: auto;
    gap: 10px;
  }

  .hxm-toolbar__group:first-child {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .hxm-toolbar__group:last-child {
    display: contents;
  }

  .hxm-toolbar .hxm-select {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  /* Three column layouts are meaningless where only one fits. */
  .hxm-toolbar .hxm-viewtoggle { display: none; }

  .hxm-filterbtn { min-height: 42px; }
}

/* The filter sheet is the only way to reach the filters below 1024px, so it
   is worth making obvious. */
@media (max-width: 1023px) {
  .hxm-filterbtn {
    border-color: var(--hxm-leaf);
    color: var(--hxm-green);
    font-weight: 600;
  }
}


/* --- active filters ------------------------------------------------------- */

.hxm-active:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}


/* --- even cards ----------------------------------------------------------
   "MEN'S & WOMEN'S CARE - TABLET" wraps to two lines where "IMMUNITY -
   CHURNA" does not, and a longer title wraps where a short one does not. The
   grid then sizes every row to its tallest card and the shorter ones grow a
   gap above the price. Clamping both to a fixed number of lines makes the
   whole grid regular, which is most of what "tidy" means in a product grid. */

.hxm-product__cat {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woocommerce-loop-product__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Two lines of title at the card's own line-height, so a one-line title
   reserves the same space as a two-line one and every price sits on the
   same baseline across the row. */
.woocommerce-loop-product__title {
  min-height: calc(2 * 1.25em);
}


/* 6. ADMIN BAR ------------------------------------------------------------
   The header is position: fixed, so it no longer gets pushed down by the
   html { margin-top } WordPress adds for the admin bar — logged-in editors
   would have the announcement row hidden behind it. Offset the header by the
   bar's own height instead. Below 600px the admin bar is not fixed: it
   scrolls away with the page, so the header goes back to top: 0. */

body.admin-bar .hxm-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .hxm-header { top: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .hxm-header { top: 0; }

  /* ...but WordPress still pushes the document down by html { margin-top:
     46px } for a bar the header no longer sits below. The header is fixed and
     the room it needs is reserved on <body>, so that 46px is counted a second
     time and lands as a band of empty paper between the header and the first
     section -- on every page, for logged-in editors only. Take it back.
     Measured: 46px gap before, 0 after, at 420px; 601px and up are unaffected
     because the header is offset by the bar's height there instead. */
  body.admin-bar { padding-top: calc(var(--hxm-head-h) - 46px); }
}