/* ==========================================================================
   HerbXMedica — components.css
   Reusable pieces used on more than one page: buttons, badges, cards, forms,
   tabs, sliders, modals, plus the global shell (header, drawer, footer,
   WhatsApp button, preloader).
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.hxm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: var(--hxm-r-xs);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition: color var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease),
              background-color var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-fast) var(--hxm-ease);
}

/* Fill sweep from left — the one shared button motion */
.hxm-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--hxm-ease);
}

.hxm-btn:hover::before,
.hxm-btn:focus-visible::before { transform: scaleX(1); }

.hxm-btn:active { transform: translateY(1px); }

.hxm-btn__icon { flex: none; width: 18px; height: 18px; }

.hxm-btn--primary {
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  border-color: var(--hxm-leaf);
}
.hxm-btn--primary::before { background: var(--hxm-forest); }
.hxm-btn--primary:hover,
.hxm-btn--primary:focus-visible { color: var(--hxm-on-dark); border-color: var(--hxm-forest); }

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

.hxm-btn--outline {
  background: transparent;
  color: var(--hxm-forest);
  border-color: var(--hxm-line-strong);
}
.hxm-btn--outline::before { background: var(--hxm-forest); }
.hxm-btn--outline:hover,
.hxm-btn--outline:focus-visible { color: var(--hxm-on-dark); border-color: var(--hxm-forest); }

.hxm-btn--outline-light {
  background: transparent;
  color: var(--hxm-on-dark);
  border-color: var(--hxm-on-dark-line);
}
.hxm-btn--outline-light::before { background: var(--hxm-leaf); }
.hxm-btn--outline-light:hover,
.hxm-btn--outline-light:focus-visible { color: var(--hxm-white); border-color: var(--hxm-leaf); }

.hxm-btn--wa {
  background: var(--hxm-whatsapp);
  color: var(--hxm-whatsapp-ink);
  border-color: var(--hxm-whatsapp);
}
.hxm-btn--wa::before { background: var(--hxm-whatsapp-deep); }
.hxm-btn--wa:hover,
.hxm-btn--wa:focus-visible { color: var(--hxm-white); border-color: var(--hxm-whatsapp-deep); }

.hxm-btn--ghost {
  min-height: 40px;
  padding: 8px 4px;
  color: var(--hxm-green);
  border: 0;
  border-radius: 0;
}
.hxm-btn--ghost::before { display: none; }

.hxm-btn--lg { min-height: 56px; padding: 16px 34px; font-size: var(--hxm-fs-xs); }
.hxm-btn--sm { min-height: 40px; padding: 9px 18px; font-size: var(--hxm-fs-3xs); }
.hxm-btn--block { display: flex; width: 100%; }

.hxm-btn[disabled],
.hxm-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Text link with an underline that draws in */
.hxm-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-green);
  padding-block: 10px;
}

.hxm-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-link:hover::after,
.hxm-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

.hxm-link svg { width: 16px; height: 16px; transition: transform var(--hxm-t-base) var(--hxm-ease); }
.hxm-link:hover svg { transform: translateX(3px); }
.hxm-link--light { color: var(--hxm-leaf-light); }

/* Icon button */
.hxm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hxm-r-xs);
  color: var(--hxm-forest);
  border: 1px solid transparent;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease),
              border-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-iconbtn svg { width: 21px; height: 21px; }
.hxm-iconbtn:hover { background: var(--hxm-mist); color: var(--hxm-green); }
.hxm-iconbtn--bordered { border-color: var(--hxm-line); }

/* ==========================================================================
   2. BADGES, CHIPS, PILLS
   ========================================================================== */
.hxm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--hxm-r-xs);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.hxm-badge--bestseller { background: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-badge--new { background: var(--hxm-leaf); color: var(--hxm-white); }
.hxm-badge--sale { background: var(--hxm-turmeric); color: var(--hxm-forest-deep); }
.hxm-badge--out { background: var(--hxm-line); color: var(--hxm-muted); }

/* Out of stock is the one badge that has to read as a stop rather than as a
   label. In the neutral --out above it was a grey chip among other grey
   chips and an unavailable pack looked exactly like an available one, so
   this takes the danger colour and puts a filled dot ahead of the words.
   The crude range keeps --out: "available on request" is how that catalogue
   is sold against the next crop, not a fault to flag in red. */
.hxm-badge--oos {
  background: rgba(178, 59, 44, 0.09);
  color: var(--hxm-danger);
}

.hxm-badge--oos::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.hxm-badge--soft { background: var(--hxm-leaf-soft); color: var(--hxm-green); }
.hxm-badge--verified { background: var(--hxm-green-soft); color: var(--hxm-green); }

.hxm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
  color: var(--hxm-ink);
  transition: border-color var(--hxm-t-fast) var(--hxm-ease),
              background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-chip:hover { border-color: var(--hxm-leaf); }
.hxm-chip svg { width: 14px; height: 14px; color: var(--hxm-muted); }
.hxm-chip--active { background: var(--hxm-forest); border-color: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-chip--active svg { color: currentColor; }

/* ==========================================================================
   3. RATING
   ========================================================================== */
.hxm-rating { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }

.hxm-stars {
  position: relative;
  display: inline-block;
  height: 14px;
  width: 80px;
  flex: none;
}

.hxm-stars__bg,
.hxm-stars__fill {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  overflow: hidden;
}

.hxm-stars__bg { color: var(--hxm-line-strong); }
.hxm-stars__fill { color: var(--hxm-turmeric-ink); width: 0; }

.hxm-stars--0 .hxm-stars__fill { width: 0%; }
.hxm-stars--10 .hxm-stars__fill { width: 10%; }
.hxm-stars--20 .hxm-stars__fill { width: 20%; }
.hxm-stars--30 .hxm-stars__fill { width: 30%; }
.hxm-stars--40 .hxm-stars__fill { width: 40%; }
.hxm-stars--50 .hxm-stars__fill { width: 50%; }
.hxm-stars--60 .hxm-stars__fill { width: 60%; }
.hxm-stars--70 .hxm-stars__fill { width: 70%; }
.hxm-stars--80 .hxm-stars__fill { width: 80%; }
.hxm-stars--90 .hxm-stars__fill { width: 90%; }
.hxm-stars--100 .hxm-stars__fill { width: 100%; }

.hxm-stars svg { width: 14px; height: 14px; flex: none; }

.hxm-rating__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hxm-muted);
  line-height: 1;
}

/* ==========================================================================
   4. PRICE
   ========================================================================== */
.hxm-price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.price .amount {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  color: var(--hxm-ink);
  letter-spacing: var(--hxm-ls-tight);
  line-height: 1.1;
}

.price del {
  text-decoration: line-through;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  font-weight: 400;
}

.price del .amount {
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-xs);
  font-weight: 500;
  color: var(--hxm-muted);
}

.hxm-save {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-green);
}

/* ==========================================================================
   5. PRODUCT CARD  —  WooCommerce-compatible loop markup
   ========================================================================== */
.products.hxm-products {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(var(--hxm-cols, 4), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A carousel slide holds exactly one card, so the loop grid must collapse to
   a single block — otherwise the card takes 1/4 of the slide width and the
   title shreds into single characters. Declared after the grid rule above
   because both selectors have the same specificity. */
.products.hxm-products--single { display: block; }

.product.hxm-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  transition: transform var(--hxm-t-base) var(--hxm-ease),
              box-shadow var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--hxm-shadow-md);
  border-color: var(--hxm-line-strong);
}

.hxm-product__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--hxm-mist);
  overflow: hidden;
}

.hxm-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 420ms var(--hxm-ease), transform 620ms var(--hxm-ease);
}

.hxm-product__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hxm-product:hover .hxm-product__img--main { opacity: 0; transform: scale(1.04); }
.hxm-product:hover .hxm-product__img--alt { opacity: 1; transform: scale(1.04); }

.hxm-product__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

/* Quick-action rail slides in from the right */
.hxm-product__rail {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity var(--hxm-t-base) var(--hxm-ease), transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-product:hover .hxm-product__rail,
.hxm-product:focus-within .hxm-product__rail { opacity: 1; transform: none; }

.hxm-product__railbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  color: var(--hxm-forest);
  box-shadow: var(--hxm-shadow-sm);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-product__railbtn svg { width: 17px; height: 17px; }
.hxm-product__railbtn:hover { background: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-product__railbtn.is-active { background: var(--hxm-leaf); color: var(--hxm-white); }

.hxm-product__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 22px;
  flex: 1;
}

.hxm-product__cat {
  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-muted);
}

.woocommerce-loop-product__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
  margin: 0;
}

.hxm-product__title-link { transition: color var(--hxm-t-fast) var(--hxm-ease); }
.hxm-product:hover .hxm-product__title-link { color: var(--hxm-green); }

.hxm-product__hi {
  display: inline;
  font-family: var(--hxm-font-deva);
  font-size: var(--hxm-fs-2xs);
  font-weight: 400;
  color: var(--hxm-muted);
  margin-left: 7px;
  white-space: nowrap;
}

.hxm-product__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 12px;
}

/* Always visible. A shopping CTA that only appears on hover is invisible on
   touch and easy to miss on desktop — this is a commerce card, not an
   article card. */
/* Two actions per card: collect it into the order list, or send this one
   product on its own. The image and title already link to the product page,
   so no third button is spent on that. */
/* One action per card since the per-product WhatsApp button was removed,
   so the button takes the full width rather than sitting in half a row. */
.hxm-product__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.hxm-product__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 12px 10px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-whatsapp);
  color: var(--hxm-whatsapp-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-product__buy svg { width: 16px; height: 16px; }

.hxm-product__buy:hover { background: var(--hxm-whatsapp-deep); color: var(--hxm-white); }

.hxm-product__cta {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 10px;
  border: 1px solid var(--hxm-forest);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-forest);
  font-family: inherit;
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-on-dark);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              border-color var(--hxm-t-fast) var(--hxm-ease);
}

/* Both labels occupy the same grid cell, so swapping them cannot resize the
   button and shuffle the card underneath it. */
.hxm-product__cta-idle,
.hxm-product__cta-done {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity var(--hxm-t-fast) var(--hxm-ease),
              transform var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-product__cta-done { opacity: 0; transform: translateY(6px); }

.hxm-product__cta.is-added { background: var(--hxm-green); border-color: var(--hxm-green); }
.hxm-product__cta.is-added .hxm-product__cta-idle { opacity: 0; transform: translateY(-6px); }
.hxm-product__cta.is-added .hxm-product__cta-done { opacity: 1; transform: none; }

.hxm-product__cta:hover { background: var(--hxm-green); border-color: var(--hxm-green); }

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

/* The card CTA is not a .hxm-btn, so it does not inherit the disabled rule
   at the top of this file. An out-of-stock pack still shows the button --
   removing it would leave the card foot ragged against its neighbours --
   but it neither reacts nor submits. */
.hxm-product__cta[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.hxm-product--out .hxm-product__media { opacity: 0.62; }

/* Compact card used in the mega menu and "recently viewed" */
.hxm-minicard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--hxm-r-xs);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease);
}

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

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

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

.hxm-minicard__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--hxm-ink);
}

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

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.hxm-field { display: flex; flex-direction: column; gap: 7px; }

.hxm-label {
  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-muted);
}

.hxm-input,
.hxm-select,
.hxm-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-ink);
  transition: border-color var(--hxm-t-fast) var(--hxm-ease), box-shadow var(--hxm-t-fast) var(--hxm-ease);
}

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

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

.hxm-input:hover,
.hxm-select:hover,
.hxm-textarea:hover { border-color: var(--hxm-line-strong); }

.hxm-input:focus,
.hxm-select:focus,
.hxm-textarea:focus {
  border-color: var(--hxm-leaf);
  box-shadow: 0 0 0 3px var(--hxm-leaf-soft);
}

.hxm-select {
  -webkit-appearance: none;
  appearance: none;
  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-field--invalid .hxm-input,
.hxm-field--invalid .hxm-textarea,
.hxm-field--invalid .hxm-select { border-color: var(--hxm-danger); }

.hxm-field--valid .hxm-input,
.hxm-field--valid .hxm-textarea { border-color: var(--hxm-green); }

.hxm-error {
  display: none;
  font-size: var(--hxm-fs-3xs);
  color: var(--hxm-danger);
}

.hxm-field--invalid .hxm-error { display: block; }

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

/* Checkbox and radio */
.hxm-check {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-ink);
  padding-block: 8px;
  min-height: 44px;
}

.hxm-check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--hxm-line-strong);
  border-radius: 3px;
  background: var(--hxm-white);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), border-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-check input[type="radio"] { border-radius: 50%; }

.hxm-check input::after {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--hxm-t-fast) var(--hxm-ease);
  background: var(--hxm-forest-deep);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 20%, 85% 8%, 38% 71%);
}

.hxm-check input[type="radio"]::after { clip-path: circle(50%); width: 8px; height: 8px; }
.hxm-check input:checked { background: var(--hxm-leaf); border-color: var(--hxm-leaf); }
.hxm-check input:checked::after { transform: scale(1); }
.hxm-check:hover input { border-color: var(--hxm-leaf); }

.hxm-check__count {
  margin-left: auto;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-muted);
}

/* Toggle switch */
.hxm-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--hxm-fs-2xs); min-height: 44px; }

.hxm-switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line-strong);
  cursor: pointer;
  transition: background-color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hxm-white);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-switch input:checked { background: var(--hxm-leaf); }
.hxm-switch input:checked::after { transform: translateX(20px); }

/* Inline newsletter / search style field group */
.hxm-inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hxm-inline-form .hxm-field { flex: 1 1 240px; }

/* Quantity stepper */
.hxm-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-white);
}

.hxm-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--hxm-forest);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-qty__btn:hover { background: var(--hxm-mist); }
.hxm-qty__btn svg { width: 16px; height: 16px; }

.hxm-qty__input {
  width: 52px;
  height: 46px;
  border: 0;
  border-inline: 1px solid var(--hxm-line);
  text-align: center;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-2xs);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.hxm-qty__input::-webkit-outer-spin-button,
.hxm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The stepper is disabled alongside the add button on an out-of-stock pack.
   Without this it keeps its live colours and only stops responding, which
   reads as broken rather than as unavailable. */
.hxm-qty:has(:disabled) { opacity: 0.5; }
.hxm-qty__btn[disabled] { pointer-events: none; }
.hxm-qty__input:disabled { background: transparent; color: var(--hxm-muted); }

/* ==========================================================================
   7. TABS
   ========================================================================== */
.hxm-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-tabs__btn {
  position: relative;
  padding: 14px 2px 16px;
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-muted);
  white-space: nowrap;
  transition: color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-tabs__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--hxm-leaf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-tabs__btn:hover { color: var(--hxm-forest); }
.hxm-tabs__btn[aria-selected="true"] { color: var(--hxm-forest); }
.hxm-tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }

/* Visible by default and animated on entry by CSS alone. Previously the
   panel sat at opacity 0 until JS added a class inside requestAnimationFrame;
   if that frame never ran, the whole tab section rendered blank. */
.hxm-tabs__panel {
  padding-top: 32px;
}

.hxm-tabs__panel[hidden] { display: none; }

/* No fill-mode on purpose: the panel's resting state is fully visible, and
   the animation is decoration played over it. If animations never run the
   content is still there, which is the whole point of the change. */
.hxm-tabs__panel:not([hidden]) {
  animation: hxm-tab-in 320ms var(--hxm-ease);
}

@keyframes hxm-tab-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Pill-style tab list used by the "shop by concern" section */
.hxm-pilltabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hxm-pilltabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 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-muted);
  transition: color var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease),
              background-color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-pilltabs__btn svg { width: 17px; height: 17px; }
.hxm-pilltabs__btn:hover { color: var(--hxm-forest); border-color: var(--hxm-line-strong); }

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

/* ==========================================================================
   8. ACCORDION  (native <details>)
   ========================================================================== */
.hxm-acc { border-bottom: 1px solid var(--hxm-line); }

.hxm-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--hxm-ink);
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-acc__summary:hover { color: var(--hxm-green); }

.hxm-acc__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--hxm-green);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-acc[open] .hxm-acc__icon { transform: rotate(45deg); }

.hxm-acc__body {
  padding-bottom: 22px;
  max-width: 72ch;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
}

.hxm-acc[open] .hxm-acc__body { animation: hxm-acc-in 320ms var(--hxm-ease); }

@keyframes hxm-acc-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. SLIDER  (shared by bestsellers, testimonials, related, hero)
   ========================================================================== */
.hxm-slider { position: relative; }

.hxm-slider__viewport {
  overflow: hidden;
  margin-inline: -4px;
  padding-inline: 4px;
}

.hxm-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 620ms var(--hxm-ease);
  will-change: transform;
}

.hxm-slider__slide {
  flex: 0 0 calc((100% - (var(--hxm-per, 4) - 1) * 24px) / var(--hxm-per, 4));
  min-width: 0;
}

.hxm-slider__nav { display: flex; gap: 8px; }

.hxm-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  color: var(--hxm-forest);
  background: var(--hxm-white);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease),
              border-color var(--hxm-t-fast) var(--hxm-ease),
              opacity var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-slider__arrow svg { width: 19px; height: 19px; }
.hxm-slider__arrow:hover { background: var(--hxm-forest); border-color: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-slider__arrow[disabled] { opacity: 0.3; pointer-events: none; }

.hxm-slider__dots { display: flex; gap: 7px; justify-content: center; margin-top: 28px; }

.hxm-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hxm-line-strong);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), width var(--hxm-t-base) var(--hxm-ease);
}

.hxm-slider__dot[aria-current="true"] { width: 26px; border-radius: var(--hxm-r-pill); background: var(--hxm-leaf); }

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

.hxm-modal.is-open { visibility: visible; opacity: 1; }

.hxm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hxm-scrim-62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hxm-modal__panel {
  position: relative;
  width: min(920px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  background: var(--hxm-paper);
  border-radius: var(--hxm-r-lg);
  box-shadow: var(--hxm-shadow-lg);
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition: transform 380ms var(--hxm-ease-out);
}

.hxm-modal.is-open .hxm-modal__panel { transform: none; }

.hxm-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hxm-white);
  color: var(--hxm-forest);
  box-shadow: var(--hxm-shadow-sm);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-modal__close:hover { background: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-modal__close svg { width: 19px; height: 19px; }

/* ==========================================================================
   11. SKELETON SHIMMER
   ========================================================================== */
.hxm-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--hxm-mist);
  border-radius: var(--hxm-r-md);
  border: 1px solid var(--hxm-line);
  min-height: 380px;
}

.hxm-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--hxm-shimmer), transparent);
  animation: hxm-shimmer 1.2s infinite;
}

@keyframes hxm-shimmer { to { transform: translateX(100%); } }

/* ==========================================================================
   12. POTENCY BAR  —  the science half of the ledger
   ========================================================================== */
.hxm-potency { display: flex; flex-direction: column; gap: 8px; }

.hxm-potency__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.hxm-potency__label {
  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-muted);
}

.hxm-potency__value {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hxm-forest);
  font-variant-numeric: tabular-nums;
}

.hxm-potency__track {
  position: relative;
  height: 4px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line);
  overflow: hidden;
}

.hxm-potency__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hxm-leaf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--hxm-ease);
}

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

.hxm-potency--on-dark .hxm-potency__label { color: var(--hxm-on-dark-muted); }
.hxm-potency--on-dark .hxm-potency__value { color: var(--hxm-on-dark); }
.hxm-potency--on-dark .hxm-potency__track { background: var(--hxm-on-dark-line); }

/* ==========================================================================
   13. SPEC LIST  —  mono key/value rows
   ========================================================================== */
.hxm-spec { display: grid; gap: 0; }

.hxm-spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hxm-line);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-spec__row:last-child { border-bottom: 0; }
.hxm-spec__key { color: var(--hxm-muted); }
.hxm-spec__val { color: var(--hxm-forest); text-align: right; }

/* ==========================================================================
   14. BREADCRUMB
   ========================================================================== */
.hxm-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  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);
}

.hxm-crumb a {
  display: inline-block;
  padding-block: 6px;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}
.hxm-crumb a:hover { color: var(--hxm-green); }
.hxm-crumb svg { width: 13px; height: 13px; opacity: 0.6; }
.hxm-crumb [aria-current="page"] { color: var(--hxm-forest); }

/* ==========================================================================
   15. HEADER
   ========================================================================== */
/* Fixed, not sticky. The header loses 80px of height when it collapses, and
   while it was sticky that shrink came out of the flow mid-scroll: the page
   under it jumped up, and the sticky box was re-solved against a box that was
   still animating, on every frame of the 240ms transition. That is what made
   the bar flicker. Out of the flow it cannot move anything below it, and the
   room it used to hold is reserved on <body> instead. */
.hxm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--hxm-z-header);
  background: var(--hxm-paper);
}

body { padding-top: var(--hxm-head-h); }

/* --- Row 1: announcement bar --- */
.hxm-announce {
  position: relative;
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  overflow: hidden;
  height: var(--hxm-announce-h);
  transition: height var(--hxm-t-base) var(--hxm-ease), opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hxm-announce-h);
  position: relative;
}

.hxm-announce__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 420ms var(--hxm-ease), transform 420ms var(--hxm-ease);
  pointer-events: none;
}

.hxm-announce__item.is-active { opacity: 1; transform: none; }
.hxm-announce__item svg { width: 14px; height: 14px; color: var(--hxm-leaf-light); }

.hxm-announce__close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;
  border-radius: var(--hxm-r-xs);
  color: var(--hxm-on-dark-muted);
  transition: color var(--hxm-t-fast) var(--hxm-ease), background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-announce__close:hover { color: var(--hxm-on-dark); background: var(--hxm-on-dark-tint-up); }
.hxm-announce__close svg { width: 15px; height: 15px; }

/* --- Row 2: main bar --- */
.hxm-mainbar {
  border-bottom: 1px solid var(--hxm-line);
  background: var(--hxm-paper);
  transition: box-shadow var(--hxm-t-base) var(--hxm-ease);
}

.hxm-mainbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--hxm-mainbar-h);
  transition: height var(--hxm-t-base) var(--hxm-ease);
}

/* The brand lockup is a wide horizontal one — the emblem sits above the tail of
   the wordmark, and logo.png is that artwork cropped to its own ink bounds, so
   the ratio below is the file's own 1046 x 514. It is roughly twice as wide as
   the square lockup it replaced, which is why every --hxm-logo-h below is
   shorter than it used to be: the box is sized to the width the header can
   spare, and the height follows from the ratio. */
.hxm-logomark {
  display: block;
  flex: none;
  height: var(--hxm-logo-h, 56px);
  aspect-ratio: 1046 / 514;
  transition: height var(--hxm-t-base) var(--hxm-ease);
}

/* logo.png is the artwork cropped to its own bounds with the white ground keyed
   out, so it needs no offset frame and no blend mode — it drops onto any
   surface as-is. The preloader, being forest, uses logo-light.png instead. */
.hxm-logomark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hxm-logo { --hxm-logo-h: 78px; }

/* Search with category dropdown */
.hxm-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 620px;
  margin-inline: auto;
}

.hxm-search__form {
  display: flex;
  align-items: stretch;
  height: 48px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  overflow: hidden;
  transition: border-color var(--hxm-t-fast) var(--hxm-ease), box-shadow var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-search__form:focus-within { border-color: var(--hxm-leaf); box-shadow: 0 0 0 3px var(--hxm-leaf-soft); }

.hxm-search__cat {
  flex: none;
  width: 152px;
  min-height: 0;
  height: 100%;
  border: 0;
  border-right: 1px solid var(--hxm-line);
  border-radius: 0;
  background-color: var(--hxm-mist);
  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);
  padding-left: 13px;
}

.hxm-search__cat:focus { box-shadow: none; }

.hxm-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 15px;
}

.hxm-search__input:focus { box-shadow: none; }

.hxm-search__submit {
  flex: none;
  width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-search__submit:hover { background: var(--hxm-green); }
.hxm-search__submit svg { width: 19px; height: 19px; }

.hxm-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  box-shadow: var(--hxm-shadow-md);
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -6px, 0);
  transition: opacity var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease),
              visibility var(--hxm-t-base);
}

.hxm-search__panel.is-open { opacity: 1; visibility: visible; transform: none; }

.hxm-search__empty {
  padding: 22px 12px;
  text-align: center;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
}

/* Right-hand utilities */
.hxm-utils { flex: none; display: flex; align-items: center; gap: 4px; }

.hxm-utils__phone {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--hxm-r-xs);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease);
}

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

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

.hxm-utils__phone-ico svg { width: 18px; height: 18px; }

.hxm-utils__phone-label {
  display: block;
  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);
  line-height: 1.4;
}

.hxm-utils__phone-num {
  display: block;
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  color: var(--hxm-forest);
  line-height: 1.3;
}

/* Wishlist, cart and account are the three controls the client reads first,
   so they run above the 44px / 21px stock icon button the rest of the site
   uses. The box grows with the glyph -- at 25px in a 44px box the icon would
   sit under the count badge pinned to its top-right corner. */
.hxm-utils__btn { position: relative; width: 50px; height: 50px; }
.hxm-utils__btn svg { width: 25px; height: 25px; }

.hxm-utils__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 500;
  display: grid;
  place-items: center;
  line-height: 1;
}

.hxm-burger { display: none; }

/* --- Row 3: nav bar --- */
.hxm-navbar {
  border-bottom: 1px solid var(--hxm-line);
  background: var(--hxm-paper);
  height: var(--hxm-navbar-h);
  overflow: visible;
  transition: height var(--hxm-t-base) var(--hxm-ease), opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--hxm-navbar-h);
  transition: height var(--hxm-t-base) var(--hxm-ease);
}

/* Right-hand side of the nav row: a shipping note and the primary action,
   so the bar is not half-empty on wide screens. */
.hxm-nav__aside {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 24px;
}

.hxm-nav__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hxm-font-label);
  font-weight: 600;
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  white-space: nowrap;
}

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

.hxm-nav__cta {
  min-height: 38px;
  padding: 8px 18px;
  font-size: var(--hxm-fs-label);
}

.hxm-nav__cta svg { width: 16px; height: 16px; }

.hxm-nav__item { position: relative; }

.hxm-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  padding-inline: 15px;
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-ink);
  transition: height var(--hxm-t-base) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-nav__link svg { width: 14px; height: 14px; opacity: 0.7; transition: transform var(--hxm-t-base) var(--hxm-ease); }

.hxm-nav__link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 12px;
  height: 2px;
  background: var(--hxm-leaf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-nav__link:hover { color: var(--hxm-green); }
.hxm-nav__link:hover::after { transform: scaleX(1); }
.hxm-nav__link[aria-current="page"] { color: var(--hxm-green); }
.hxm-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.hxm-nav__item:hover .hxm-nav__link svg { transform: rotate(180deg); }

/* Mega menu */
.hxm-mega {
  position: absolute;
  top: 100%;
  left: -15px;
  z-index: 30;
  width: min(980px, calc(100vw - 40px));
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: 0 0 var(--hxm-r-md) var(--hxm-r-md);
  box-shadow: var(--hxm-shadow-md);
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
  transition: opacity 220ms var(--hxm-ease),
              transform 220ms var(--hxm-ease),
              visibility 220ms;
}

.hxm-nav__item:hover .hxm-mega,
.hxm-nav__item:focus-within .hxm-mega { opacity: 1; visibility: visible; transform: none; }

/* Escape dismisses the panel even while the pointer is still over the item.
   Placed after the hover rule so it wins at equal specificity. */
.hxm-nav__item.hxm-nav__item--closed .hxm-mega {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
}

.hxm-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr 0.95fr;
  gap: 30px;
}

.hxm-mega__title {
  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-green);
  padding-bottom: 11px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-mega__list { display: flex; flex-direction: column; gap: 2px; }

.hxm-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 10px 10px 0;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-ink);
  border-radius: var(--hxm-r-xs);
  transition: color var(--hxm-t-fast) var(--hxm-ease), padding-left var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-mega__link:hover { color: var(--hxm-green); padding-left: 8px; }

/* The only mega link that carries an icon is "See all bestsellers". Sprite
   <svg> elements have no intrinsic size, so without this the arrow lays out at
   the replaced-element default of 300x150. */
.hxm-mega__link svg { width: 14px; height: 14px; flex: none; }

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

.hxm-mega__promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 20px;
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
}

.hxm-mega__promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hxm-mega__promo-body { position: relative; }

.hxm-mega__promo-title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  margin-block: 8px 12px;
}

/* --- Stuck state --- */
.hxm-header.is-stuck .hxm-announce { height: 0; opacity: 0; }
/* The nav stays put on scroll — hiding the menu the moment someone scrolls
   is the opposite of helpful. Only the announcement bar collapses. */
.hxm-header.is-stuck .hxm-navbar { height: 48px; }
.hxm-header.is-stuck .hxm-nav,
.hxm-header.is-stuck .hxm-nav__link { height: 48px; }
.hxm-header.is-stuck .hxm-mainbar { box-shadow: var(--hxm-shadow-head); }
.hxm-header.is-stuck .hxm-mainbar__inner { height: 76px; }
.hxm-header.is-stuck .hxm-logo { --hxm-logo-h: 54px; }

/* ==========================================================================
   16. MOBILE DRAWER
   ========================================================================== */
.hxm-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--hxm-z-drawer);
  visibility: hidden;
  pointer-events: none;
}

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

.hxm-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hxm-scrim-50);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-drawer.is-open .hxm-drawer__backdrop { opacity: 1; }

.hxm-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  background: var(--hxm-paper);
  box-shadow: var(--hxm-shadow-lg);
  transform: translate3d(100%, 0, 0);
  transition: transform 380ms var(--hxm-ease-out);
}

.hxm-drawer.is-open .hxm-drawer__panel { transform: none; }

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

.hxm-drawer__head .hxm-logomark { --hxm-logo-h: 48px; }

.hxm-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.hxm-mnav { display: flex; flex-direction: column; }

.hxm-mnav__item { border-bottom: 1px solid var(--hxm-line); }

.hxm-mnav__link,
.hxm-mnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 14px 2px;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 600;
  color: var(--hxm-ink);
  text-align: left;
}

.hxm-mnav__toggle svg { width: 20px; height: 20px; color: var(--hxm-green); transition: transform var(--hxm-t-base) var(--hxm-ease); }
.hxm-mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.hxm-mnav__sub {
  display: none;
  flex-direction: column;
  padding-bottom: 12px;
}

.hxm-mnav__sub.is-open { display: flex; animation: hxm-acc-in 280ms var(--hxm-ease); }

.hxm-mnav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 9px 0 9px 14px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
  border-left: 1px solid var(--hxm-line);
  transition: color var(--hxm-t-fast) var(--hxm-ease), border-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-mnav__sublink:hover { color: var(--hxm-green); border-color: var(--hxm-leaf); }

/* Mobile sticky bottom bar */
.hxm-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--hxm-z-sticky-bar);
  display: none;
  background: var(--hxm-paper);
  border-top: 1px solid var(--hxm-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: var(--hxm-shadow-bar);
}

.hxm-bottombar__inner { display: grid; grid-template-columns: repeat(5, 1fr); }

.hxm-bottombar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 8px 4px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hxm-muted);
}

.hxm-bottombar__btn svg { width: 20px; height: 20px; }
.hxm-bottombar__btn[aria-current="page"] { color: var(--hxm-green); }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.hxm-footer {
  position: relative;
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  overflow: hidden;
}

.hxm-footer__main {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr 1.35fr;
  gap: 40px 30px;
  padding-block: clamp(48px, 6vw, 76px);
}

.hxm-footer__logochip {
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: var(--hxm-r-md);
  background: var(--hxm-white);
}

.hxm-footer__logochip .hxm-logomark { --hxm-logo-h: 72px; }

.hxm-footer__about {
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-2xs);
  max-width: 34ch;
}

.hxm-footer__social { display: flex; gap: 8px; margin-top: 22px; }

.hxm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hxm-on-dark-line);
  border-radius: var(--hxm-r-xs);
  color: var(--hxm-on-dark);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease),
              border-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-footer__social a:hover { background: var(--hxm-leaf); border-color: var(--hxm-leaf); color: var(--hxm-white); }
.hxm-footer__social svg { width: 17px; height: 17px; }

.hxm-footer__title {
  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-leaf-light);
  margin-bottom: 18px;
}

.hxm-footer__list { display: flex; flex-direction: column; gap: 2px; }

.hxm-footer__list a {
  display: inline-block;
  padding-block: 7px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-on-dark-muted);
  transition: color var(--hxm-t-fast) var(--hxm-ease), transform var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-footer__list a:hover { color: var(--hxm-on-dark); transform: translateX(4px); }

.hxm-footer__news-text {
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-2xs);
  margin-bottom: 16px;
  max-width: 32ch;
}

.hxm-footer .hxm-input {
  background: var(--hxm-on-dark-tint);
  border-color: var(--hxm-on-dark-line);
  color: var(--hxm-on-dark);
}

.hxm-footer .hxm-input::placeholder { color: var(--hxm-on-dark-muted); }
.hxm-footer .hxm-input:focus { border-color: var(--hxm-leaf); box-shadow: 0 0 0 3px var(--hxm-leaf-ring); }
.hxm-footer .hxm-label { color: var(--hxm-on-dark-muted); }
.hxm-footer .hxm-formnote { color: var(--hxm-on-dark-muted); }

.hxm-footer__contact {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-on-dark-muted);
}

.hxm-footer__contact a { display: flex; gap: 9px; align-items: flex-start; transition: color var(--hxm-t-fast) var(--hxm-ease); }
.hxm-footer__contact a:hover { color: var(--hxm-on-dark); }
.hxm-footer__contact svg { width: 15px; height: 15px; color: var(--hxm-leaf-light); flex: none; margin-top: 2px; }

/* Trust row */
.hxm-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 34px;
  padding-block: 24px;
  border-top: 1px solid var(--hxm-on-dark-line);
}

.hxm-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hxm-footer__pay img { height: 34px; width: auto; opacity: 0.92; }

.hxm-footer__certs { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.hxm-footer__cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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-on-dark-muted);
}

.hxm-footer__cert svg { width: 16px; height: 16px; color: var(--hxm-leaf-light); }

/* Leaf-motif divider + copyright */
.hxm-footer__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
}

.hxm-footer__divider span { height: 1px; flex: 1; background: var(--hxm-on-dark-line); }
.hxm-footer__divider svg { width: 18px; height: 18px; color: var(--hxm-leaf-light); flex: none; }

.hxm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 22px 28px;
  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-on-dark-muted);
}

.hxm-footer__bottom a { transition: color var(--hxm-t-fast) var(--hxm-ease); }
.hxm-footer__bottom a:hover { color: var(--hxm-leaf-light); }
.hxm-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ==========================================================================
   18. FLOATING WHATSAPP + BACK TO TOP
   ========================================================================== */
.hxm-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--hxm-z-float);
  width: 58px;
  height: 58px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: opacity 420ms var(--hxm-ease-out), transform 420ms var(--hxm-ease-out), visibility 420ms;
  pointer-events: none;
}

.hxm-wa.is-in { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.hxm-wa__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--hxm-whatsapp);
  color: var(--hxm-white);
  box-shadow: var(--hxm-shadow-wa);
  transition: transform var(--hxm-t-base) var(--hxm-ease), box-shadow var(--hxm-t-base) var(--hxm-ease);
}

.hxm-wa__btn svg { width: 30px; height: 30px; }
.hxm-wa:hover .hxm-wa__btn { transform: translateY(-3px); box-shadow: 0 14px 36px var(--hxm-whatsapp-glow); }

.hxm-wa__pulse {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: var(--hxm-whatsapp);
  opacity: 0;
  animation: hxm-wa-pulse 2.4s var(--hxm-ease-out) infinite;
  pointer-events: none;
}

.hxm-wa__pulse--2 { animation-delay: 1.2s; }

@keyframes hxm-wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.hxm-wa__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  z-index: 2;
  padding: 10px 16px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--hxm-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hxm-t-base) var(--hxm-ease), transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-wa:hover .hxm-wa__label,
.hxm-wa__btn:focus-visible ~ .hxm-wa__label { opacity: 1; transform: translateY(-50%); }

/* Chat card */
.hxm-wacard {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 3;
  width: 300px;
  background: var(--hxm-paper);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  box-shadow: var(--hxm-shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.97);
  transform-origin: bottom right;
  transition: opacity var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease-out),
              visibility var(--hxm-t-base);
}

.hxm-wacard.is-open { opacity: 1; visibility: visible; transform: none; }

.hxm-wacard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--hxm-whatsapp-deep);
  color: var(--hxm-white);
}

.hxm-wacard__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hxm-on-image-veil);
}

.hxm-wacard__avatar svg { width: 22px; height: 22px; }
.hxm-wacard__name { font-weight: 600; font-size: var(--hxm-fs-2xs); line-height: 1.3; }

.hxm-wacard__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  opacity: 0.85;
}

.hxm-wacard__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hxm-whatsapp-dot);
}

.hxm-wacard__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.hxm-wacard__bubble {
  align-self: flex-start;
  max-width: 90%;
  padding: 11px 14px;
  border-radius: 14px 14px 14px 3px;
  background: var(--hxm-mist);
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-ink);
}

.hxm-wacard__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

.hxm-wacard__chip {
  padding: 8px 12px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-pill);
  font-size: var(--hxm-fs-label);
  color: var(--hxm-green);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-wacard__chip:hover { background: var(--hxm-leaf); color: var(--hxm-white); }

.hxm-wacard__foot { padding: 0 16px 16px; }

.hxm-wacard__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--hxm-white);
  opacity: 0.85;
}

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


/* ==========================================================================
   19. PRELOADER
   ========================================================================== */
.hxm-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--hxm-z-preloader);
  display: grid;
  place-items: center;
  background: var(--hxm-forest);
  transform: translateY(0);
  transition: transform 620ms var(--hxm-ease-out), visibility 620ms;
}

.hxm-preloader.is-done { transform: translateY(-100%); visibility: hidden; }

.hxm-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.hxm-preloader__logo {
  width: 240px;
  height: auto;
  border-radius: var(--hxm-r-md);
  opacity: 0;
  animation: hxm-fadein 620ms var(--hxm-ease) 120ms forwards;
}

.hxm-preloader__mark { width: 96px; height: auto; }

.hxm-preloader__mark path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: hxm-draw 1s var(--hxm-ease) forwards;
}

.hxm-preloader__mark path:nth-child(2) { animation-delay: 0.12s; }
.hxm-preloader__mark path:nth-child(3) { animation-delay: 0.24s; }
.hxm-preloader__mark path:nth-child(4) { animation-delay: 0.34s; }

@keyframes hxm-draw { to { stroke-dashoffset: 0; } }

.hxm-preloader__word {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hxm-leaf-light);
  opacity: 0;
  animation: hxm-fadein 600ms var(--hxm-ease) 0.5s forwards;
}

@keyframes hxm-fadein { to { opacity: 1; } }

/* ==========================================================================
   20. MARQUEE
   ========================================================================== */
.hxm-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.hxm-marquee__track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: hxm-marquee 34s linear infinite;
}

.hxm-marquee:hover .hxm-marquee__track { animation-play-state: paused; }

@keyframes hxm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.hxm-marquee__item {
  flex: none;
  display: grid;
  place-items: center;
  height: 92px;
}

.hxm-marquee__item img {
  height: 92px;
  width: auto;
  opacity: 0.9;
  transition: opacity var(--hxm-t-base) var(--hxm-ease), transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-marquee__item:hover img { opacity: 1; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hxm-marquee__track { animation: none; }
}

/* ==========================================================================
   21. NOTICE / TOAST
   ========================================================================== */
.hxm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: var(--hxm-z-modal);
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  font-size: var(--hxm-fs-3xs);
  box-shadow: var(--hxm-shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease),
              visibility var(--hxm-t-base);
}

.hxm-toast.is-in { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hxm-toast svg { width: 17px; height: 17px; color: var(--hxm-leaf-light); flex: none; }

/* ==========================================================================
   22. QUICK VIEW  (rendered inside .hxm-modal by ui.js)
   ========================================================================== */
.hxm-qv {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 0;
}

.hxm-qv__media {
  background: var(--hxm-mist);
  border-radius: var(--hxm-r-lg) 0 0 var(--hxm-r-lg);
  overflow: hidden;
}

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

.hxm-qv__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
}

.hxm-qv__title { margin-top: 4px; }
.hxm-qv__price { margin-top: 4px; }
.hxm-qv__text { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); max-width: 52ch; }
.hxm-qv__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hxm-qv__spec { margin-top: 8px; }

/* Variant selector — shared by quick view and the single product page */
.hxm-variants { display: flex; flex-direction: column; gap: 9px; }
.hxm-variants__list { display: flex; flex-wrap: wrap; gap: 8px; }

.hxm-variant {
  padding: 11px 16px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-white);
  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-muted);
  min-height: 44px;
  transition: border-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease),
              background-color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-variant:hover { border-color: var(--hxm-line-strong); color: var(--hxm-forest); }

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


/* ==========================================================================
   23. ORDER DRAWER  —  a cart in every respect except the one that matters:
   there is no checkout behind it. Lines are collected here and leave as a
   single WhatsApp message.
   ========================================================================== */
.hxm-cart {
  position: fixed;
  inset: 0;
  z-index: var(--hxm-z-drawer);
  visibility: hidden;
  pointer-events: none;
}

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

.hxm-cart__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hxm-scrim-50);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-cart.is-open .hxm-cart__backdrop { opacity: 1; }

.hxm-cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--hxm-paper);
  box-shadow: var(--hxm-shadow-lg);
  transform: translate3d(100%, 0, 0);
  transition: transform 380ms var(--hxm-ease-out);
}

.hxm-cart.is-open .hxm-cart__panel { transform: none; }

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

.hxm-cart__lines {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  color: var(--hxm-ink);
  margin-top: 6px;
}

/* Says plainly what the button at the bottom will and will not do. */
.hxm-cart__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 20px;
  background: var(--hxm-mist);
  font-size: var(--hxm-fs-3xs);
  line-height: 1.5;
  color: var(--hxm-muted);
}

.hxm-cart__note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--hxm-whatsapp); }

.hxm-cart__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.hxm-cart__list { display: flex; flex-direction: column; }

.hxm-cartline {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-cartline__media {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-mist);
}

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

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

.hxm-cartline__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  color: var(--hxm-ink);
}

.hxm-cartline__title:hover { color: var(--hxm-green); }

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

.hxm-cartline__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.hxm-cartline__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-white);
}

.hxm-cartline__step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--hxm-forest);
  cursor: pointer;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-cartline__step:hover { background: var(--hxm-forest); color: var(--hxm-on-dark); }
.hxm-cartline__step svg { width: 14px; height: 14px; }

.hxm-cartline__num {
  min-width: 26px;
  text-align: center;
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hxm-cartline__price {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 700;
  color: var(--hxm-ink);
  font-variant-numeric: tabular-nums;
}

.hxm-cartline__remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--hxm-muted);
  cursor: pointer;
  transition: background-color var(--hxm-t-fast) var(--hxm-ease), color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-cartline__remove:hover { background: var(--hxm-mist); color: var(--hxm-ink); }
.hxm-cartline__remove svg { width: 15px; height: 15px; }

.hxm-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 56px 32px;
}

.hxm-cart__empty-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hxm-mist);
  color: var(--hxm-green);
  margin-bottom: 6px;
}

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

.hxm-cart__empty-title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  color: var(--hxm-ink);
}

.hxm-cart__empty-text { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); max-width: 30ch; }
.hxm-cart__empty .hxm-btn { margin-top: 12px; }

.hxm-cart__foot {
  border-top: 1px solid var(--hxm-line);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--hxm-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hxm-cart__savings {
  font-size: var(--hxm-fs-3xs);
  color: var(--hxm-green);
  font-weight: 600;
}

.hxm-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

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

.hxm-cart__total strong {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 700;
  color: var(--hxm-ink);
  font-variant-numeric: tabular-nums;
}

.hxm-cart__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  padding: 6px 10px;
  font-size: var(--hxm-fs-3xs);
  color: var(--hxm-muted);
  cursor: pointer;
  transition: color var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-cart__clear:hover { color: var(--hxm-ink); }
.hxm-cart__clear svg { width: 14px; height: 14px; }

/* Count badge on the mobile bar entry */
.hxm-bottombar__btn { position: relative; }

.hxm-bottombar__count {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}