/* ==========================================================================
   HerbXMedica — pages.css
   Layout specific to shop.html, product.html, about.html, contact.html
   and 404.html. Shared pieces live in components.css.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HEADER BANNER  (shop, about, contact, product)
   ========================================================================== */
.hxm-pagehead {
  position: relative;
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  padding-block: clamp(36px, 5vw, 64px);
  overflow: hidden;
}

.hxm-pagehead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  position: relative;
  z-index: 2;
}

.hxm-pagehead__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-page);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-on-dark);
  margin-top: 14px;
}

.hxm-pagehead__sub {
  margin-top: 14px;
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-sm);
  line-height: 1.6;
  max-width: 54ch;
}

.hxm-pagehead .hxm-crumb { color: var(--hxm-on-dark-muted); }
.hxm-pagehead .hxm-crumb a:hover { color: var(--hxm-leaf-light); }
.hxm-pagehead .hxm-crumb [aria-current="page"] { color: var(--hxm-leaf-light); }

.hxm-pagehead__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-3xs);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-on-dark);
  padding: 10px 16px;
  border: 1px solid var(--hxm-on-dark-line);
  border-radius: var(--hxm-r-xs);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. SHOP LAYOUT
   ========================================================================== */
.hxm-shop {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

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

/* --- Sidebar ------------------------------------------------------------- */
.hxm-sidebar {
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 4px;
}

.hxm-filter { border-bottom: 1px solid var(--hxm-line); padding-block: 22px; }
.hxm-filter:first-child { padding-top: 0; }

.hxm-filter__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-forest);
  margin-bottom: 12px;
}

.hxm-filter__title svg {
  width: 18px;
  height: 18px;
  color: var(--hxm-green);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-filter[open] .hxm-filter__title svg { transform: rotate(180deg); }
.hxm-filter__body { display: flex; flex-direction: column; gap: 2px; }

/* --- Dual-handle price range (hand-built, no library) --------------------- */
.hxm-range { padding-top: 6px; }

.hxm-range__slider {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
}

.hxm-range__track {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 3px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line);
}

.hxm-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--hxm-leaf);
}

.hxm-range__input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.hxm-range__input:focus { outline: none; }

.hxm-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hxm-white);
  border: 2px solid var(--hxm-forest);
  cursor: grab;
  box-shadow: var(--hxm-shadow-sm);
}

.hxm-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hxm-white);
  border: 2px solid var(--hxm-forest);
  cursor: grab;
  box-shadow: var(--hxm-shadow-sm);
}

.hxm-range__input:focus-visible::-webkit-slider-thumb { outline: var(--hxm-focus-ring); outline-offset: 2px; }
.hxm-range__input:focus-visible::-moz-range-thumb { outline: var(--hxm-focus-ring); outline-offset: 2px; }

.hxm-range__values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-forest);
  font-variant-numeric: tabular-nums;
}

.hxm-range__values i { flex: 1; height: 1px; background: var(--hxm-line); }

/* --- Rating filter rows -------------------------------------------------- */
.hxm-ratingfilter { display: flex; align-items: center; gap: 8px; }
.hxm-ratingfilter .hxm-stars { width: 74px; }

/* --- Active filter chips ------------------------------------------------- */
.hxm-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.hxm-active__label {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  margin-right: 4px;
}

.hxm-active__clear {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-danger);
  padding: 8px 4px;
  min-height: 34px;
}

.hxm-active__clear:hover { text-decoration: underline; }

/* --- Toolbar -------------------------------------------------------------- */
.hxm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-toolbar__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hxm-toolbar__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  font-variant-numeric: tabular-nums;
}

.hxm-toolbar .hxm-select { min-height: 44px; width: auto; min-width: 170px; }
.hxm-toolbar .hxm-select--sm { min-width: 96px; }

.hxm-viewtoggle {
  display: flex;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
}

.hxm-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--hxm-muted);
  border-left: 1px solid var(--hxm-line);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-viewtoggle__btn:first-child { border-left: 0; }
.hxm-viewtoggle__btn svg { width: 17px; height: 17px; }
.hxm-viewtoggle__btn:hover { background: var(--hxm-mist); color: var(--hxm-forest); }

.hxm-viewtoggle__btn[aria-pressed="true"] {
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
}

.hxm-filterbtn { display: none; }

/* --- Results -------------------------------------------------------------- */
.hxm-results { position: relative; min-height: 300px; }

.hxm-results--c1 { --hxm-cols: 1; }
.hxm-results--c3 { --hxm-cols: 3; }
.hxm-results--c4 { --hxm-cols: 4; }

.hxm-results__grid { display: grid; gap: 24px; grid-template-columns: repeat(var(--hxm-cols, 3), minmax(0, 1fr)); }

.hxm-skeletons { display: grid; gap: 24px; grid-template-columns: repeat(var(--hxm-cols, 3), minmax(0, 1fr)); }

/* List view — the loop markup does not change, only the card layout */
.hxm-results--list .products.hxm-products { grid-template-columns: 1fr; }

.hxm-results--list .hxm-product {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: stretch;
}

/* Not square here. The row is as tall as the body beside it, the media is
   stretched to that height, and a 1:1 ratio then derived its WIDTH from the
   height -- a crude card's body runs ~330px, so the photo came out 330 wide
   in a 220 column and sat on top of the text. Filling the cell instead keeps
   the photo inside its track at any body height. */
.hxm-results--list .hxm-product__media { aspect-ratio: auto; width: 100%; min-height: 220px; }

.hxm-results--list .hxm-product__body {
  padding: 24px 28px;
  justify-content: center;
  gap: 10px;
}

.hxm-results--list .woocommerce-loop-product__title { font-size: var(--hxm-fs-md); min-height: 0; }
.hxm-results--list .hxm-product__excerpt { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); max-width: 62ch; }
.hxm-results--list .hxm-product__cta { opacity: 1; }
.hxm-results--list .hxm-product__foot { justify-content: flex-start; gap: 20px; }

/* Empty state */
.hxm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(48px, 8vw, 96px) 24px;
  text-align: center;
  border: 1px dashed var(--hxm-line-strong);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-mist);
}

.hxm-empty__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--hxm-white);
  color: var(--hxm-green);
}

.hxm-empty__icon svg { width: 28px; height: 28px; }

.hxm-empty__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
}

.hxm-empty__text { color: var(--hxm-muted); font-size: var(--hxm-fs-2xs); max-width: 46ch; }

/* Load more */
.hxm-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}

.hxm-loadmore__meter {
  width: min(280px, 100%);
  height: 3px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line);
  overflow: hidden;
}

.hxm-loadmore__meter span {
  display: block;
  height: 100%;
  background: var(--hxm-leaf);
  transform-origin: left center;
  transition: transform 420ms var(--hxm-ease);
}

.hxm-loadmore__note {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Mobile filter bottom sheet ------------------------------------------- */
.hxm-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--hxm-z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.hxm-sheet.is-open { visibility: visible; pointer-events: auto; }

.hxm-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hxm-scrim-50);
  opacity: 0;
  transition: opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-sheet.is-open .hxm-sheet__backdrop { opacity: 1; }

.hxm-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  background: var(--hxm-paper);
  border-radius: var(--hxm-r-lg) var(--hxm-r-lg) 0 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 380ms var(--hxm-ease-out);
}

.hxm-sheet.is-open .hxm-sheet__panel { transform: none; }

.hxm-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hxm-line);
  flex: none;
}

.hxm-sheet__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
}

.hxm-sheet__body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }

.hxm-sheet__foot {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hxm-line);
  background: var(--hxm-mist);
}

/* ==========================================================================
   3. SINGLE PRODUCT
   ========================================================================== */

/* The PDP breadcrumb is hidden, not removed: the trail wraps to two lines on
   narrow screens and reads as clutter directly above the gallery. The markup
   stays in the document so the crumb JS and the search-engine trail are
   untouched. */
[data-section="product-crumb"] { display: none; }
.hxm-single {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

/* --- Gallery -------------------------------------------------------------- */
.woocommerce-product-gallery {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  position: sticky;
  top: 116px;
}

.hxm-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hxm-gallery__thumb {
  position: relative;
  display: block;
  width: 88px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-mist);
  transition: border-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hxm-gallery__thumb:hover { border-color: var(--hxm-line-strong); }
.hxm-gallery__thumb[aria-current="true"] { border-color: var(--hxm-leaf); border-width: 2px; }

.hxm-gallery__thumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hxm-scrim-42);
}

.hxm-gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--hxm-white);
}

.hxm-gallery__thumb-play svg { width: 20px; height: 20px; }

.hxm-gallery__stage {
  position: relative;
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  background: var(--hxm-mist);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}

.hxm-gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms var(--hxm-ease);
}

.hxm-gallery__stage.is-zoomed img { transform: scale(2); }

.hxm-gallery__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hxm-gallery__zoomhint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-glass);
  color: var(--hxm-forest);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  pointer-events: none;
}

.hxm-gallery__zoomhint svg { width: 14px; height: 14px; }

/* Lightbox */
.hxm-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--hxm-z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--hxm-scrim-86);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--hxm-t-base) var(--hxm-ease), visibility var(--hxm-t-base);
}

.hxm-lightbox.is-open { visibility: visible; opacity: 1; }
.hxm-lightbox figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hxm-lightbox img { max-width: min(900px, 100%); max-height: 78vh; border-radius: var(--hxm-r-md); }
.hxm-lightbox__note { text-align: center; max-width: 52ch; }

.hxm-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hxm-white);
  color: var(--hxm-forest);
}

.hxm-lightbox__close svg { width: 20px; height: 20px; }

/* --- Summary --------------------------------------------------------------- */
.summary.entry-summary { display: flex; flex-direction: column; gap: 16px; }

.hxm-single__title { margin-top: 6px; }

.hxm-single__hi {
  font-family: var(--hxm-font-deva);
  font-size: var(--hxm-fs-md);
  font-weight: 400;
  color: var(--hxm-muted);
  margin-left: 8px;
}

/* One layout serves both catalogues, so the second line of the h1 holds
   whichever name the product has: the Devanagari one for a retail pack, the
   botanical binomial for a raw material. A binomial is written in italic and
   in the body face, not in Devanagari. */
.hxm-single__hi--latin {
  font-family: var(--hxm-font-body);
  font-style: italic;
}

/* The rate beside the pack price. The bag is what is charged for; the
   per-kilogram figure is what the trade quotes in. */
.hxm-single__unit {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-muted);
}

/* Price on Request sits in the amount's own place and has to read as a
   sentence rather than a number, so it drops to the body face. */
.hxm-single__por {
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-md);
  font-weight: 600;
  color: var(--hxm-forest);
}

.hxm-single__ratinglink { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hxm-single__ratinglink a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
}

.hxm-single__ratinglink a:hover { text-decoration: underline; }

.hxm-single__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 4px;
}

.hxm-single__price .amount { font-size: var(--hxm-fs-xl); }
.hxm-single__short { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); max-width: 58ch; }

.hxm-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-block: 18px;
  border-block: 1px solid var(--hxm-line);
}

.hxm-benefit { display: flex; flex-direction: column; gap: 8px; }

.hxm-benefit__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hxm-leaf-soft);
  color: var(--hxm-green);
}

.hxm-benefit__icon svg { width: 18px; height: 18px; }
.hxm-benefit__text { font-size: var(--hxm-fs-2xs); line-height: 1.5; color: var(--hxm-ink); }

/* Quantity keeps its natural width, the single action takes the rest.
   (It briefly held three controls; the WhatsApp order button is gone.) */
.hxm-single__buyrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.hxm-single__buyrow .hxm-btn { min-width: 0; }

.hxm-single__secondary { display: flex; flex-wrap: wrap; gap: 10px; }

.hxm-wishbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  min-height: 48px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-forest);
  transition: border-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-wishbtn svg { width: 18px; height: 18px; }
.hxm-wishbtn:hover { border-color: var(--hxm-leaf); color: var(--hxm-green); }
.hxm-wishbtn.is-active { border-color: var(--hxm-leaf); color: var(--hxm-green); background: var(--hxm-leaf-softer); }

/* Pincode checker */
.hxm-pincode {
  padding: 18px 20px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-mist);
}

.hxm-pincode__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-forest);
  margin-bottom: 12px;
}

.hxm-pincode__head svg { width: 16px; height: 16px; color: var(--hxm-green); }
.hxm-pincode__row { display: flex; gap: 8px; }
.hxm-pincode__row .hxm-input { min-height: 44px; }

.hxm-pincode__result {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-green);
}

.hxm-pincode__result svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.hxm-pincode__result--bad { color: var(--hxm-danger); }

/* Trust row */
.hxm-trustrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hxm-trustrow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  text-align: center;
}

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

.hxm-trustrow__item span {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hxm-muted);
  line-height: 1.4;
}

/* --- Sticky buy bar -------------------------------------------------------- */
.hxm-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: var(--hxm-z-sticky-bar);
  background: var(--hxm-paper);
  border-bottom: 1px solid var(--hxm-line);
  box-shadow: var(--hxm-shadow-head);
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  transition: transform 320ms var(--hxm-ease), visibility 320ms;
}

.hxm-stickybar.is-in { transform: none; visibility: visible; }

.hxm-stickybar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

.hxm-stickybar__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-mist);
}

.hxm-stickybar__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hxm-stickybar__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.hxm-stickybar__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.hxm-stickybar__price { margin-left: auto; }
.hxm-stickybar__price .amount { font-size: var(--hxm-fs-md); }
.hxm-stickybar__cta { flex: none; }

/* --- Tabs ------------------------------------------------------------------ */

/* The panel was capped at 78ch while the strip above it ran the full 1500px
   container, so every panel sat in the left half of the page with a dead
   column of nothing beside it — and the three ingredient cards were squeezed
   into that half for no reason at all.
   The measure belongs to the reading column inside the block, not to the
   block (the .hxm-measure note in section 8 says the same thing), so the cap
   comes off the panel and the block itself is centred at a width the card
   grids and the prose both sit well in. */
.woocommerce-tabs {
  width: 100%;
  max-width: 1080px;
  margin-top: clamp(48px, 6vw, 84px);
  margin-inline: auto;
}

.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--hxm-line); }

.woocommerce-Tabs-panel p + p { margin-top: 14px; }
.woocommerce-Tabs-panel p { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); }

/* Prose keeps a readable line; the card and spec grids below it must not, so
   the cap sits on the text elements rather than on their container. */
.woocommerce-Tabs-panel > p,
.woocommerce-Tabs-panel > ul,
.woocommerce-Tabs-panel > ol { max-width: 72ch; }

/* Description and dosage are prose closed by a callout. Guarded on :has() so
   a panel whose callout is conditional — the crude description, which only
   prints one where a traditional use is recorded — falls back to the plain
   block flow instead of holding an empty rail open. */
.hxm-tabs__panel--split:has(> .hxm-callout) {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.hxm-tabs__panel--split:has(> .hxm-callout) > * { grid-column: 1; }

.hxm-tabs__panel--split:has(> .hxm-callout) > .hxm-callout {
  grid-column: 2;
  grid-row: 1;
  margin-block: 0;
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3 {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  margin-block: 26px 12px;
}

.hxm-tabgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Ingredient cards (product page ledger) */
.hxm-ingcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.hxm-ingcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
}

.hxm-ingcard__media {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--hxm-mist);
  overflow: hidden;
}

.hxm-ingcard__media img { width: 84%; height: 84%; object-fit: contain; }

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

.hxm-ingcard__name {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
}

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

/* --- Reviews section -------------------------------------------------------

   Was the fifth tab; it is a section of its own now and gets the whole
   container. The rating rail sits beside the quotations rather than above
   them, which is what stops a 1500px-wide row of five-star bars.

   The three placements are explicit because product.js re-renders this block
   as one innerHTML write of three siblings — summary, heading, list — and
   auto-placement would deal them 1, 2, 1 across the two columns. Keep these in
   step with renderReviews(). */
.hxm-reviews {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.hxm-reviews > .hxm-reviewsummary { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
.hxm-reviews > .hxm-reviewlist__heading { grid-column: 2; grid-row: 1; }
.hxm-reviews > .hxm-reviewlist { grid-column: 2; grid-row: 2; }

/* In a 340px rail the score cannot sit beside the bars, so it stacks above
   them and the card reads as one block instead of two cramped ones. White,
   because the card's own mist is the section's ground here and the two would
   otherwise be the same colour. */
.hxm-reviews .hxm-reviewsummary {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px 26px 30px;
  background: var(--hxm-white);
}

/* --- FAQ section -----------------------------------------------------------

   Was the sixth tab. The questions decide the sale, so they are a section, and
   the heading block sits in a rail beside them: it fills the width the
   accordions cannot use (.hxm-acc__body caps its own line at 72ch) and gives
   the "ask us instead" button somewhere to live. */
.hxm-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
}

.hxm-faq__cta { margin-top: 26px; }

/* The first accordion's top rule would double the section's own top edge. */
.hxm-faq__list > .hxm-acc:first-child > .hxm-acc__summary { padding-top: 0; }

/* Reviews tab */
.hxm-reviewsummary {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 26px 28px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-mist);
  margin-bottom: 30px;
}

.hxm-reviewsummary__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.hxm-reviewsummary__num {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--hxm-forest);
}

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

.hxm-reviewbars { display: flex; flex-direction: column; gap: 9px; }

.hxm-reviewbar {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
}

.hxm-reviewbar__label,
.hxm-reviewbar__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-muted);
  font-variant-numeric: tabular-nums;
}

.hxm-reviewbar__count { text-align: right; }

.hxm-reviewbar__track {
  height: 5px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line);
  overflow: hidden;
}

.hxm-reviewbar__fill {
  display: block;
  height: 100%;
  background: var(--hxm-turmeric-ink);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 800ms var(--hxm-ease);
}

.hxm-reviewbar.is-filled .hxm-reviewbar__fill { transform: scaleX(var(--hxm-potency, 0)); }

.hxm-reviewlist__heading {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  margin-bottom: 6px;
}

.hxm-reviewlist { display: flex; flex-direction: column; gap: 0; }

.hxm-reviewitem {
  display: flex;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-reviewitem:last-child { border-bottom: 0; }
.hxm-reviewitem__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; }
.hxm-reviewitem__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.hxm-reviewitem__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.hxm-reviewitem__name { font-family: var(--hxm-font-display); font-size: var(--hxm-fs-2xs); font-weight: 600; }

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

.hxm-reviewitem__title { font-family: var(--hxm-font-display); font-size: var(--hxm-fs-sm); font-weight: 600; }
.hxm-reviewitem__text { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); }

/* Dosage tab callout */
.hxm-callout {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-left: 3px solid var(--hxm-leaf);
  border-radius: 0 var(--hxm-r-xs) var(--hxm-r-xs) 0;
  background: var(--hxm-mist);
  margin-block: 20px;
}

.hxm-callout svg { width: 20px; height: 20px; color: var(--hxm-green); flex: none; margin-top: 2px; }
.hxm-callout p { font-size: var(--hxm-fs-2xs); color: var(--hxm-ink); }

/* ==========================================================================
   4. ABOUT
   ========================================================================== */
.hxm-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}

.hxm-story__text p + p { margin-top: 16px; }
.hxm-story__text p { font-size: var(--hxm-fs-sm); color: var(--hxm-muted); }

/* The portrait is gone at the client's request, so this is a centred figure
   rather than a two-column card: mark, eyebrow, quote, attribution. The
   measure is held at 40ch-ish by max-width so a wide screen does not stretch
   the quote into a single flat line. */
.hxm-founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(34px, 4.5vw, 64px) clamp(24px, 4vw, 72px);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-lg);
  background: var(--hxm-white);
  text-align: center;
}

/* Takes over the job the photograph did: it gives the block a point to start
   from. A disc rather than a bare glyph, so it reads as deliberate. */
.hxm-founder__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--hxm-mist);
  color: var(--hxm-leaf);
}

.hxm-founder__mark svg { width: 26px; height: 26px; }

/* The eyebrow's rule sits to its left everywhere else; centred here it needs
   a matching one on the right or the label looks pushed off its axis. */
.hxm-founder .hxm-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--hxm-leaf);
  flex: none;
}

.hxm-founder__quote {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
  text-wrap: balance;
}

.hxm-founder__who { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hxm-founder__who strong { font-family: var(--hxm-font-display); font-size: var(--hxm-fs-2xs); }

.hxm-founder__who span {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
}

.hxm-gallerygrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.hxm-gallerygrid figure {
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  background: var(--hxm-mist);
  position: relative;
}

.hxm-gallerygrid img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 640ms var(--hxm-ease); }
.hxm-gallerygrid figure:hover img { transform: scale(1.05); }

.hxm-gallerygrid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--hxm-scrim-0) 0%, var(--hxm-scrim-86) 70%);
  color: var(--hxm-white);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.hxm-teamcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
}

.hxm-teamcard__avatar { width: 64px; height: 64px; border-radius: 50%; }
.hxm-teamcard__name { font-family: var(--hxm-font-display); font-size: var(--hxm-fs-sm); font-weight: 700; }

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

.hxm-teamcard__note { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); }

/* ==========================================================================
   5. CONTACT
   ========================================================================== */
.hxm-contact {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.hxm-contact__form { display: flex; flex-direction: column; gap: 18px; }
.hxm-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.hxm-contactcards { display: flex; flex-direction: column; gap: 16px; }

.hxm-contactcard {
  display: flex;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
}

.hxm-contactcard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hxm-leaf-soft);
  color: var(--hxm-green);
}

.hxm-contactcard__icon svg { width: 20px; height: 20px; }

.hxm-contactcard__title {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  margin-bottom: 5px;
}

.hxm-contactcard__value { font-size: var(--hxm-fs-2xs); color: var(--hxm-ink); line-height: 1.55; }
.hxm-contactcard__value a:hover { color: var(--hxm-green); }

.hxm-map {
  position: relative;
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  background: var(--hxm-mist);
  border: 1px solid var(--hxm-line);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.hxm-map__note { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hxm-map__note svg { width: 30px; height: 30px; color: var(--hxm-green); }

.hxm-map__note span {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  max-width: 42ch;
  line-height: 1.6;
}

.hxm-hours { display: flex; flex-direction: column; gap: 0; }

.hxm-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hxm-line);
  font-size: var(--hxm-fs-2xs);
}

.hxm-hours__row:last-child { border-bottom: 0; }

.hxm-hours__time {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-forest);
}

/* ==========================================================================
   6. 404
   ========================================================================== */
.hxm-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-block: clamp(40px, 6vw, 80px);
}

.hxm-404__art { max-width: 460px; width: 100%; }
.hxm-404__code {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-3xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hxm-green);
}

.hxm-404__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xl);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  max-width: 18ch;
}

.hxm-404__text { color: var(--hxm-muted); font-size: var(--hxm-fs-sm); max-width: 48ch; }
.hxm-404__search { width: min(520px, 100%); margin-top: 6px; }
.hxm-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* ==========================================================================
   7. SMALL PAGE-LEVEL HELPERS
   ========================================================================== */
/* The split-banner point list reused on a light background */
.hxm-story__point { color: var(--hxm-ink); }
.hxm-story__text .hxm-split__points { margin-block: 26px 0; }
.hxm-story__text .hxm-h2 { margin-top: 16px; }
.hxm-story__text em { font-style: italic; color: var(--hxm-forest); }

.hxm-contact__title { margin-block: 14px 26px; }

/* Centred CTA row on about / contact / 404 */
.hxm-about__cta { justify-content: center; margin-top: 0; }

/* ==========================================================================
   8. READING MEASURE
   Sections keep the standard 1222px container so page gutters match across
   the whole site; long-form reading blocks are constrained inside it rather
   than by shrinking the container itself.
   ========================================================================== */
.hxm-measure {
  max-width: 860px;
  margin-inline: auto;
}

/* ==========================================================================
   9. SHOP — category chip row (reference-style quick category switch)
   ========================================================================== */
.hxm-shopcats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hxm-shopcat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-forest);
  transition: border-color var(--hxm-t-fast) var(--hxm-ease),
              background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-shopcat span {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-muted);
  font-variant-numeric: tabular-nums;
}

.hxm-shopcat:hover,
.hxm-shopcat:focus-visible {
  border-color: var(--hxm-forest);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
}

.hxm-shopcat:hover span,
.hxm-shopcat:focus-visible span { color: var(--hxm-leaf); }

/* ==========================================================================
   10. SHOP — help band
   ========================================================================== */
.hxm-shophelp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 40px;
}

.hxm-shophelp__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  letter-spacing: var(--hxm-ls-tight);
  margin-block: 12px 10px;
}

.hxm-shophelp__text {
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
  max-width: 60ch;
}

.hxm-shophelp__actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* ==========================================================================
   11. HELP CENTRE  —  one page per topic
   Rail of sibling topics on the left, prose on the right. The rail is a real
   <aside> rather than a repeated footer menu so the current topic can be
   marked, and it collapses under the prose on a phone: a reader who followed
   a link from the footer wants the answer first and the list second.
   ========================================================================== */
.hxm-help {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}

.hxm-help__railinner {
  position: sticky;
  top: calc(var(--hxm-head-h) + 24px);
  display: grid;
  gap: 22px;
}

.hxm-help__railtitle {
  margin-bottom: 12px;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-help__nav { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

.hxm-help__navlink {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 11px 14px;
  border-radius: var(--hxm-r-md);
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
  line-height: 1.4;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-help__navlink svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--hxm-t-fast) var(--hxm-ease), transform var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-help__navlink:hover { background: var(--hxm-mist); color: var(--hxm-forest); }
.hxm-help__navlink:hover svg { opacity: 1; transform: none; }

/* The current topic reads as selected without borrowing the primary green a
   button uses — this is a position marker, not an action. */
.hxm-help__navlink.is-current {
  background: var(--hxm-leaf-softer);
  color: var(--hxm-forest);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--hxm-leaf);
}

.hxm-help__navlink.is-current svg { opacity: 1; transform: none; color: var(--hxm-leaf); }

/* --- the ask-a-person card ----------------------------------------------- */

.hxm-help__card {
  padding: 22px;
  border-radius: var(--hxm-r-lg);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  text-align: left;
}

.hxm-help__cardico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--hxm-on-dark-tint);
  color: var(--hxm-whatsapp);
}

.hxm-help__cardico svg { width: 22px; height: 22px; }

.hxm-help__cardtitle {
  margin-bottom: 6px;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  line-height: var(--hxm-lh-snug);
}

.hxm-help__cardtext {
  margin-bottom: 16px;
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-label);
  line-height: 1.55;
}

.hxm-help__cardlink {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-help__cardlink svg { width: 15px; height: 15px; }
.hxm-help__cardlink:hover { color: var(--hxm-on-dark); }

/* --- the prose column ---------------------------------------------------- */

.hxm-help__body { max-width: 74ch; }

.hxm-help__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--hxm-line);
}

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

.hxm-help__back {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--hxm-green);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-help__back svg {
  width: 15px;
  height: 15px;
  transition: transform var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-help__back:hover { color: var(--hxm-forest); }
.hxm-help__back:hover svg { transform: translateX(3px); }

/* --- questions, as an accordion ------------------------------------------ */
/* A help page written as a list of questions gets the same accordion the
   product pages and the contact page use. It is authored with WordPress's own
   Details block rather than raw markup, so the client edits it in the editor
   like any other block — which is why these rules target .wp-block-details and
   not .hxm-acc. The two are styled to be indistinguishable. */

.hxm-entry__body .wp-block-details {
  border-bottom: 1px solid var(--hxm-line);
}

/* Consecutive questions stack on their shared rule, so the prose rhythm
   between blocks comes off. The first one keeps its gap from the heading. */
.hxm-entry__body > .wp-block-details + .wp-block-details { margin-top: 0; }

.hxm-entry__body .wp-block-details > summary {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  color: var(--hxm-ink);
  cursor: pointer;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

/* Both spellings: Safari still wants the pseudo-element, everyone else reads
   ::marker. Without them the browser's own triangle sits beside our plus. */
.hxm-entry__body .wp-block-details > summary::-webkit-details-marker { display: none; }
.hxm-entry__body .wp-block-details > summary::marker { content: ''; }

.hxm-entry__body .wp-block-details > summary:hover { color: var(--hxm-green); }

.hxm-entry__body .wp-block-details > summary:focus-visible {
  outline: var(--hxm-focus-ring);
  outline-offset: var(--hxm-focus-offset);
}

/* The plus is drawn from two gradients rather than the sprite, because a
   summary authored in the block editor has nowhere to hang an <svg><use>.
   Rotating it 45deg on open turns it into the close cross, exactly as
   .hxm-acc__icon does. */
.hxm-entry__body .wp-block-details > summary::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background-image:
    linear-gradient(var(--hxm-green), var(--hxm-green)),
    linear-gradient(var(--hxm-green), var(--hxm-green));
  background-size: 100% 2px, 2px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-entry__body .wp-block-details[open] > summary::after { transform: rotate(45deg); }

.hxm-entry__body .wp-block-details > *:not(summary) {
  max-width: 72ch;
  margin-top: 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
}

.hxm-entry__body .wp-block-details > *:not(summary) + *:not(summary) { margin-top: 0.9em; }
.hxm-entry__body .wp-block-details > *:last-child { padding-bottom: 22px; }

.hxm-entry__body .wp-block-details[open] > *:not(summary) {
  animation: hxm-acc-in 320ms var(--hxm-ease);
}


/* ==========================================================================
   12. CONTACT FORM  —  Forminator, wearing the theme's fields
   The form is saved with form-style "none", so Forminator ships almost no
   opinion of its own and these rules are additions rather than overrides.
   Everything is scoped to .hxm-fmtr; the dropdown is the exception, because
   select2 renders its open panel at the end of <body> where no scope reaches.
   ========================================================================== */
.hxm-fmtr .forminator-ui.forminator-custom-form { display: flex; flex-direction: column; gap: 18px; }

/* Forminator's own loader stub, shown before its script reveals the form. */
.hxm-fmtr > .forminator-ui:not(form) { display: none; }

.hxm-fmtr .forminator-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.hxm-fmtr .forminator-col { grid-column: span 12; min-width: 0; }
.hxm-fmtr .forminator-col-6 { grid-column: span 6; }
.hxm-fmtr .forminator-col-12 { grid-column: span 12; }

.hxm-fmtr .forminator-field { display: flex; flex-direction: column; gap: 7px; }

.hxm-fmtr .forminator-label {
  margin: 0;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-fmtr .forminator-required { color: var(--hxm-danger); }

/* --- inputs -------------------------------------------------------------- */

.hxm-fmtr .forminator-input,
.hxm-fmtr .forminator-textarea,
.hxm-fmtr .select2-container .select2-selection--single {
  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-2xs);
  line-height: 1.5;
  transition: border-color var(--hxm-t-fast) var(--hxm-ease), box-shadow var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-fmtr .forminator-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.hxm-fmtr .forminator-input::placeholder,
.hxm-fmtr .forminator-textarea::placeholder { color: var(--hxm-muted); opacity: 0.75; }

.hxm-fmtr .forminator-input:hover,
.hxm-fmtr .forminator-textarea:hover,
.hxm-fmtr .select2-container:hover .select2-selection--single { border-color: var(--hxm-line-strong); }

.hxm-fmtr .forminator-input:focus,
.hxm-fmtr .forminator-textarea:focus,
.hxm-fmtr .select2-container--open .select2-selection--single,
.hxm-fmtr .select2-container--focus .select2-selection--single {
  border-color: var(--hxm-leaf);
  box-shadow: 0 0 0 3px var(--hxm-leaf-soft);
  outline: none;
}

/* --- the subject dropdown ------------------------------------------------ */
/* Forminator always renders a select through select2, so the closed control
   is a span, not a select. It is dressed to match the inputs above, with the
   same inline chevron .hxm-select uses. */

/* Forminator only hands a select to select2 when it is searchable, so on this
   form the native control is what the reader actually sees. It gets .hxm-select
   metrics and chevron; the select2 rules below stay for the other case, and
   cannot clash because select2 hides the original with !important. */
.hxm-fmtr select.forminator-select--field {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background-color: var(--hxm-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B60' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  color: var(--hxm-ink);
  cursor: pointer;
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.5;
  transition: border-color var(--hxm-t-fast) var(--hxm-ease), box-shadow var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-fmtr select.forminator-select--field:hover { border-color: var(--hxm-line-strong); }

.hxm-fmtr select.forminator-select--field:focus {
  border-color: var(--hxm-leaf);
  box-shadow: 0 0 0 3px var(--hxm-leaf-soft);
  outline: none;
}

/* The unpicked state reads as a placeholder, not as an answer. */
.hxm-fmtr select.forminator-select--field:has(option[value=""]:checked) { color: var(--hxm-muted); }

.hxm-fmtr .select2-container { width: 100% !important; }

.hxm-fmtr .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B60' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.hxm-fmtr .select2-container .select2-selection__rendered {
  padding: 0;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.5;
}

.hxm-fmtr .select2-container .select2-selection__placeholder { color: var(--hxm-muted); opacity: 0.75; }
.hxm-fmtr .select2-container .select2-selection__arrow { display: none; }

/* The open panel is a child of body, out of reach of .hxm-fmtr. Forminator
   marks its own dropdowns, so this is still scoped to this plugin rather than
   to every select2 that might ever load. */
.forminator-select-dropdown-container .select2-dropdown,
.select2-container--open .select2-dropdown.forminator-select-dropdown {
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  box-shadow: var(--hxm-shadow-md);
  overflow: hidden;
}

.forminator-select-dropdown-container .select2-results__option,
.select2-container--open .forminator-select-dropdown .select2-results__option {
  padding: 11px 14px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
}

.forminator-select-dropdown-container .select2-results__option--highlighted,
.select2-container--open .forminator-select-dropdown .select2-results__option--highlighted {
  background: var(--hxm-leaf-softer);
  color: var(--hxm-forest);
}

.forminator-select-dropdown-container .select2-results__option[aria-selected="true"],
.select2-container--open .forminator-select-dropdown .select2-results__option[aria-selected="true"] {
  background: var(--hxm-green-soft);
  color: var(--hxm-forest);
  font-weight: 600;
}

/* --- validation ---------------------------------------------------------- */

.hxm-fmtr .forminator-error-message {
  margin-top: 2px;
  color: var(--hxm-danger);
  font-size: var(--hxm-fs-3xs);
}

.hxm-fmtr .forminator-has_error .forminator-input,
.hxm-fmtr .forminator-has_error .forminator-textarea,
.hxm-fmtr .forminator-has_error .select2-container .select2-selection--single {
  border-color: var(--hxm-danger);
  box-shadow: 0 0 0 3px rgba(178, 59, 44, 0.10);
}

/* The banner above the form after a submit — error and success share it. */
.hxm-fmtr .forminator-response-message {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-mist);
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.55;
}

.hxm-fmtr .forminator-response-message[aria-hidden="true"] { display: none; }
.hxm-fmtr .forminator-response-message p { margin: 0; }

.hxm-fmtr .forminator-error {
  border-color: rgba(178, 59, 44, 0.28);
  background: rgba(178, 59, 44, 0.06);
  color: var(--hxm-danger);
}

.hxm-fmtr .forminator-success {
  border-color: rgba(44, 106, 72, 0.24);
  background: var(--hxm-green-soft);
  color: var(--hxm-green);
}

/* --- submit -------------------------------------------------------------- */
/* The last row holds the button alone, so it takes the button's metrics
   rather than a field's. */

.hxm-fmtr .forminator-row-last .forminator-field { align-items: flex-start; }

.hxm-fmtr .forminator-button-submit {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--hxm-green);
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-green);
  color: var(--hxm-white);
  cursor: pointer;
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease),
              box-shadow var(--hxm-t-base) var(--hxm-ease);
}

.hxm-fmtr .forminator-button-submit:hover {
  border-color: var(--hxm-forest);
  background: var(--hxm-forest);
  transform: translateY(-2px);
  box-shadow: var(--hxm-shadow-md);
}

.hxm-fmtr .forminator-button-submit:active { transform: none; }
.hxm-fmtr .forminator-button-submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* The edit link Forminator prints for editors only. Kept, because it is the
   fastest way in, but it is not part of the page. */
.hxm-fmtr .forminator-edit-module { margin-top: 10px; }

.hxm-fmtr .forminator-module-edit-link {
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-fmtr .forminator-module-edit-link:hover { color: var(--hxm-green); }

/* ==========================================================================
   13. WISHLIST  —  saved items, as a page
   ========================================================================== */

/* The grid arrives empty and wishlist.js fills it, so this is what stands in
   the meantime. It is removed on the first paint whether or not anything was
   saved -- a reader with no script gets this line rather than a blank page. */
.hxm-wishlist__loading {
  padding: clamp(40px, 7vw, 80px) 0;
  text-align: center;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
}

/* Only shown once the list has something in it: "keep shopping" next to the
   one destructive action on the page. */
.hxm-wishlist__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hxm-line);
}

.hxm-wishlist__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

/* It empties the whole list, so it reads as a warning on approach rather than
   sitting in the danger colour permanently and competing with the CTA. */
.hxm-wishlist__clear:hover,
.hxm-wishlist__clear:focus-visible { color: var(--hxm-danger); }

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

.hxm-wishlist__note { margin-top: 40px; }

@media (max-width: 576px) {
  .hxm-wishlist__foot { flex-direction: column; align-items: stretch; }
  .hxm-wishlist__foot .hxm-btn { justify-content: center; }
  .hxm-wishlist__clear { justify-content: center; }
}