/* ===================================================================
   Arsalan & Brothers — "HX" theme
   Unique light design: warm cream canvas, electric-violet brand,
   coral-orange CTAs, amber stars. All homepage sections use the hx-*
   namespace. Product-page blocks live at the bottom.
   =================================================================== */
:root {
  /* GLOWXIS brand palette — royal blue + golden orange, from the logo.
     Var names keep their historical hxvio-* spelling: store.css maps its own
     tokens onto them, so renaming would silently break the checkout colors. */
  --hxb: #f8fafd;             /* cool porcelain background */
  --hxink: #16244d;           /* navy ink (logo "GLOW") */
  --hxmut: #5d6a8a;           /* muted blue-grey */
  --hxvio: #1d4fc4;           /* royal blue — primary brand */
  --hxvio-2: #3f6fe0;
  --hxvio-soft: #e8effc;
  --hxvio-line: #dce5f6;
  --hxor: #f68b1f;            /* golden orange CTA (logo "XIS") */
  --hxor-2: #e07607;
  --hxamber: #ffb31a;
  --hxcard: #ffffff;
  --hxr: 22px;
  --hxr-sm: 14px;
  --hxsh: 0 2px 6px rgba(19, 42, 102, .05), 0 14px 40px rgba(19, 42, 102, .08);
  --hxsh-lg: 0 8px 20px rgba(19, 42, 102, .10), 0 30px 70px rgba(19, 42, 102, .14);
  --hxsh-or: 0 10px 26px rgba(224, 118, 7, .35);
}

body { background: var(--hxb); color: var(--hxink); }

.hx-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }

/* ---------- shared bits ---------- */
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--hxvio-soft); color: var(--hxvio);
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  border-radius: 999px; padding: 7px 15px; margin-bottom: 16px;
}

/* ONE global inter-section rhythm — every section, hero included, breathes the same */
.hx-sec { padding: clamp(32px, 4vw, 56px) 0; }

/* every section shares the ONE light background — no per-section tints */
.hx-sec-tint { background: none; }

/* (section hairline dividers removed — owner prefers seamless section flow) */

.hx-sec-head { text-align: center; max-width: 600px; margin: 0 auto clamp(28px, 4vw, 46px); }

.hx-sec-head h2, .hx-benefits-copy h2 {
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.15;
  text-wrap: balance; color: var(--hxink);
}

.hx-stars { color: var(--hxamber); letter-spacing: 1.5px; }

/* ---------- buttons ---------- */
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--hxor) 0%, var(--hxor-2) 100%);
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .1px;
  border: 0; border-radius: 999px; padding: 15px 28px; cursor: pointer;
  box-shadow: var(--hxsh-or);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.hx-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.hx-btn:active { transform: translateY(0); }

.hx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.hx-btn svg { width: 18px; height: 18px; flex: none; }

.hx-btn-lg { font-size: 16.5px; padding: 17px 34px; }

.hx-btn-sm { font-size: 13.5px; padding: 10px 20px; box-shadow: 0 6px 16px rgba(224, 118, 7, .28); }

.hx-btn-block { width: 100%; }

.hx-btn-wa { background: #25D366; box-shadow: 0 10px 26px rgba(18, 140, 126, .35); }

.hx-btn-wa svg { width: 20px; height: 20px; }

.hx-btn-invert { background: #fff; color: var(--hxvio); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }

.hx-btn-ghost { background: #fff; color: var(--hxvio); box-shadow: inset 0 0 0 2px var(--hxvio-line); }

.hx-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--hxvio); }

.hx-btn-ghostlight { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

.hx-btn-ghostlight:hover { background: rgba(255, 255, 255, .22); }

/* ---------- announcement ticker ---------- */
.hx-announce {
  background: linear-gradient(90deg, var(--hxvio) 0%, var(--hxvio-2) 55%, var(--hxvio) 100%);
  color: #fff; overflow: hidden; padding: 9px 0; white-space: nowrap;
}

.hx-announce-track { display: inline-flex; align-items: center; gap: 26px; padding-left: 26px; animation: hxTicker 30s linear infinite; }

.hx-announce-track span { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

.hx-announce-track i { font-style: normal; color: var(--hxamber); font-size: 11px; }

@keyframes hxTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.hx-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248, 250, 253, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hxvio-line);
}

.hx-head-in { display: flex; align-items: center; gap: 20px; height: 88px; }

.hx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hxink); min-width: 0; }

/* width:auto — the img's width ATTRIBUTE (311, set for layout reservation)
   otherwise wins as the box width and object-fit centers the art inside it,
   pushing the logo off the left edge. */
.hx-logo img { height: 64px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; display: block; }

@media (max-width: 560px) { .hx-logo img { height: 50px; } .hx-head-in { height: 72px; } }

.hx-logo-mark {
  width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--hxvio), var(--hxvio-2));
  color: #fff; font-weight: 900; font-size: 18px;
  box-shadow: 0 6px 16px rgba(29, 79, 196, .35);
}

.hx-logo-name { font-weight: 900; font-size: 17px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx-nav { display: none; align-items: center; gap: 4px; margin: 0 auto; }

.hx-nav a {
  font-size: 14px; font-weight: 650; color: var(--hxmut); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; transition: color .15s, background .15s;
}

.hx-nav a:hover { color: var(--hxvio); background: var(--hxvio-soft); }

.hx-head-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Header CTA stays one line — the logo name truncates instead */
.hx-head-acts .hx-btn { white-space: nowrap; }

@media (max-width: 560px) {
  .hx-head-acts .hx-btn { padding: 9px 13px; font-size: 12.5px; }
}

.hx-cart {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--hxvio-line); border-radius: 14px; background: #fff;
  color: var(--hxink); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}

.hx-cart:hover { border-color: var(--hxvio); box-shadow: 0 4px 14px rgba(29, 79, 196, .16); }

.hx-cart svg { width: 21px; height: 21px; }

.hx-cart .cart-count {
  position: absolute; top: -7px; right: -7px; background: var(--hxor); color: #fff;
  font-size: 10.5px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 3px 8px rgba(224, 118, 7, .4);
}

@media (min-width: 820px) { .hx-nav { display: flex; } }

/* ---------- hero ---------- */
/* Full-viewport hero: fills the screen below the announcement bar + header
   (125px desktop / 109px mobile), content vertically centered. svh keeps
   mobile browsers' collapsing URL bar from causing jumps. */
.hx-hero {
  position: relative; overflow: hidden; padding: clamp(32px, 4vw, 56px) 0;
  min-height: calc(100vh - 125px); min-height: calc(100svh - 125px);
  display: flex; align-items: center;
}

@media (max-width: 560px) { .hx-hero { min-height: calc(100svh - 109px); } }

/* (hero glow overlay removed — hero shares the same flat light background) */

.hx-hero-grid { position: relative; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }

@media (min-width: 920px) { .hx-hero-grid { grid-template-columns: 11fr 9fr; } }

.hx-hero-copy h1 {
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.08;
  text-wrap: balance; color: var(--hxink);
}

.hx-hero-copy h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hxvio) 10%, var(--hxor) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hx-hero-sub { margin-top: 18px; font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.65; color: var(--hxmut); max-width: 560px; }

.hx-proof { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--hxink); }

.hx-proof .hx-stars { font-size: 14.5px; }

.hx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hx-hero-note { margin-top: 14px; font-size: 12.5px; font-weight: 650; color: var(--hxmut); letter-spacing: .2px; }

.hx-hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }

.hx-hero-img {
  position: relative; width: min(88%, 470px); border-radius: 26px; z-index: 1;
  filter: drop-shadow(0 30px 44px rgba(19, 42, 102, .28));
}

.hx-sticker {
  position: absolute; z-index: 2; background: #fff; color: var(--hxink);
  font-size: 12.5px; font-weight: 800; padding: 9px 15px; border-radius: 999px;
  box-shadow: var(--hxsh-lg); border: 1.5px solid var(--hxvio-line);
}

.hx-sticker.s1 { top: 8%; right: 4%; rotate: 5deg; }

.hx-sticker.s2 { bottom: 10%; left: 2%; rotate: -5deg; }

@media (max-width: 560px) {
  .hx-hero { padding-top: 30px; }
  .hx-hero-ctas .hx-btn { width: 100%; }
  .hx-hero-art { min-height: 240px; }

  .hx-hero-img { width: min(92%, 340px); }
}

/* countdown chips (hero + offer) */
.hx-count { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hx-count .cell {
  background: #fff; border: 1.5px solid var(--hxvio-line); border-radius: 14px;
  min-width: 68px; padding: 10px 8px; text-align: center; box-shadow: var(--hxsh);
}

.hx-count .num { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; color: var(--hxvio); font-variant-numeric: tabular-nums; line-height: 1.1; }

.hx-count .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--hxmut); margin-top: 3px; }

/* ---------- trust bar ---------- */
.hx-trustbar { padding: 30px 0; }

.hx-trustbar-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr);
  padding: 18px clamp(16px, 2.5vw, 28px); box-shadow: var(--hxsh);
}

.hx-trust-item { display: flex; align-items: center; gap: 12px; }

.hx-trust-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 22px;
  background: var(--hxvio-soft); border-radius: 14px;
}

.hx-trust-tx b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.2px; }

.hx-trust-tx small { display: block; font-size: 12px; color: var(--hxmut); font-weight: 600; margin-top: 1px; }

/* ---------- product cards ---------- */
/* auto-fit (not auto-fill): 2 products split the row 50/50 */
/* Tracks cap at 380px and center: one product renders as one tidy centered
   card instead of a full-width giant (auto-fit + 1fr stretched it). */
.hx-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; gap: clamp(16px, 2.4vw, 26px); }

.hx-prod {
  width: 100%; background: var(--hxcard);
  border: 1px solid var(--hxvio-line); border-radius: var(--hxr); overflow: hidden;
  box-shadow: var(--hxsh); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.hx-prod:hover { transform: translateY(-6px); box-shadow: var(--hxsh-lg); }

.hx-prod-img { position: relative; display: block; aspect-ratio: 1; background: linear-gradient(150deg, #eef4ff, #fff4ec); }

.hx-prod-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }

.hx-prod:hover .hx-prod-img img { transform: scale(1.05) rotate(-1deg); }

.hx-off {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--hxor); color: #fff; font-size: 12.5px; font-weight: 900;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 5px 14px rgba(224, 118, 7, .38);
}

.hx-prod-body { padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }



.hx-prod h3 { font-size: 17.5px; font-weight: 850; line-height: 1.3; letter-spacing: -.3px; }

.hx-prod h3 a { color: inherit; text-decoration: none; }

.hx-prod h3 a:hover { color: var(--hxvio); }


.hx-prod-price { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 6px; }

.hx-prod-price b { font-size: 23px; font-weight: 900; color: var(--hxvio); letter-spacing: -.5px; }

.hx-prod-price s { font-size: 14px; color: var(--hxmut); }

.hx-prod-free {
  font-size: 12.5px; font-weight: 700; color: #8a5300; background: #fff6e8;
  border: 1px dashed #ffd699; border-radius: 10px; padding: 7px 11px;
}

/* ---------- pest guide ---------- */
.hx-pests { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }

.hx-pest {
  background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr);
  padding: 24px 20px; box-shadow: var(--hxsh); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hx-pest:hover { transform: translateY(-4px); box-shadow: var(--hxsh-lg); }

.hx-pest-ic {
  width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px;
  background: linear-gradient(140deg, var(--hxvio-soft), #ffeee2); border-radius: 18px; margin-bottom: 14px;
  overflow: hidden;
}

.hx-pest-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }

.hx-pest h3 { font-size: 17px; font-weight: 850; letter-spacing: -.3px; margin-bottom: 10px; }

.hx-pest ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }

.hx-pest li { position: relative; padding-left: 16px; font-size: 13px; color: var(--hxmut); line-height: 1.45; }

.hx-pest li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--hxor); }

.hx-pest-tag {
  margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 800;
  color: var(--hxvio); background: var(--hxvio-soft); border-radius: 999px; padding: 6px 13px;
}

/* ---------- benefits ---------- */
.hx-benefits { display: grid; gap: clamp(26px, 4vw, 54px); align-items: center; }

@media (min-width: 880px) { .hx-benefits { grid-template-columns: 9fr 11fr; } }

.hx-benefits-art { position: relative; }

/* The tile IS the image: full size, no padding, no crop — the photo's own
   aspect sets the tile height, rounded by the tile's radius. */
.hx-benefits-tile {
  position: relative; border-radius: 30px; overflow: hidden; min-height: 280px;
  background: linear-gradient(150deg, var(--hxvio-soft), #ffeadb);
  box-shadow: var(--hxsh-lg);
}

.hx-benefits-tile img { display: block; width: 100%; height: auto; }

.hx-benefits-copy .hx-eyebrow { margin-bottom: 12px; }

.hx-checks { list-style: none; display: grid; gap: 12px; margin-top: 22px; }

@media (min-width: 640px) { .hx-checks { grid-template-columns: 1fr 1fr; } }

.hx-checks li {
  display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 650;
  color: var(--hxink); line-height: 1.45;
  background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr-sm);
  padding: 13px 15px; box-shadow: var(--hxsh);
}

.hx-check {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--hxvio), var(--hxvio-2)); color: #fff;
  font-size: 12px; font-weight: 900; border-radius: 8px; margin-top: 1px;
}

/* ---------- how it works ---------- */
.hx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; counter-reset: hxstep; }

.hx-step {
  position: relative; background: var(--hxcard); border: 1px solid var(--hxvio-line);
  border-radius: var(--hxr); padding: 30px 22px 24px; text-align: center; box-shadow: var(--hxsh);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hx-step:hover { transform: translateY(-4px); box-shadow: var(--hxsh-lg); }

.hx-step-n {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--hxor), var(--hxor-2)); color: #fff;
  font-size: 15px; font-weight: 900; border-radius: 50%;
  box-shadow: 0 6px 16px rgba(224, 118, 7, .35), 0 0 0 5px var(--hxb);
}

.hx-sec-tint .hx-step-n { box-shadow: 0 6px 16px rgba(224, 118, 7, .35), 0 0 0 5px var(--hxb); }

.hx-step-ic { display: block; font-size: 34px; margin: 6px 0 10px; }

.hx-step h3 { font-size: 16.5px; font-weight: 850; letter-spacing: -.3px; margin-bottom: 7px; }

.hx-step p { font-size: 13.5px; color: var(--hxmut); line-height: 1.55; }

/* ---------- before / after ---------- */
/* Same cap-and-center as .hx-prods: a lone before/after pair stays a readable
   card width instead of stretching two portrait halves across the desktop. */
.hx-ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 660px)); justify-content: center; gap: 22px; }

.hx-ba { margin: 0; background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr); overflow: hidden; box-shadow: var(--hxsh); }

.hx-ba-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--hxvio-line); }

.hx-ba-half { position: relative; aspect-ratio: 4/5; background: #edf2fb; }

.hx-ba-half img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hx-ba-tag {
  position: absolute; top: 10px; left: 10px; font-style: normal;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px; padding: 5px 11px; border-radius: 999px; color: #fff;
}

.hx-ba-tag.before { background: rgba(36, 26, 61, .82); }

.hx-ba-tag.after { background: var(--hxor); }

.hx-ba figcaption { padding: 13px 16px; font-size: 13.5px; font-weight: 750; color: var(--hxink); }

/* ---------- testimonials ---------- */
.hx-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; }

.hx-quote {
  background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr);
  padding: 24px 22px; box-shadow: var(--hxsh); display: flex; flex-direction: column; gap: 12px;
}

.hx-quote-stars { color: var(--hxamber); font-size: 15px; letter-spacing: 2.5px; }

.hx-quote p { font-size: 14.5px; line-height: 1.65; color: #33405e; flex: 1; }

.hx-quote-who { display: flex; align-items: center; gap: 12px; }

.hx-quote-av {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--hxvio), var(--hxvio-2));
}

.hx-quote-who b { display: block; font-size: 14px; font-weight: 800; }

.hx-quote-who small { display: block; font-size: 12px; color: var(--hxmut); font-weight: 600; margin-top: 1px; }

/* ---------- guarantee duo ---------- */
.hx-duo { display: grid; gap: 18px; }

@media (min-width: 720px) { .hx-duo { grid-template-columns: 1fr 1fr; } }

.hx-duo-card {
  position: relative; background: var(--hxcard); border-radius: var(--hxr);
  padding: 30px 26px; box-shadow: var(--hxsh); overflow: hidden;
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--hxcard), var(--hxcard)), linear-gradient(135deg, var(--hxvio-2), #d8ccff);
  background-origin: border-box; background-clip: padding-box, border-box;
}

.hx-duo-ic {
  display: inline-grid; place-items: center; width: 54px; height: 54px; font-size: 27px;
  background: linear-gradient(140deg, var(--hxvio-soft), #ffeee2); border-radius: 16px; margin-bottom: 14px;
}

.hx-duo-card h3 { font-size: 19px; font-weight: 850; letter-spacing: -.4px; margin-bottom: 8px; }

.hx-duo-card p { font-size: 14px; color: var(--hxmut); line-height: 1.65; }

/* ---------- countdown offer band ---------- */
.hx-offer {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(130deg, var(--hxvio) 0%, #7c3aed 55%, #9333ea 100%);
  border-radius: 28px; padding: clamp(34px, 5vw, 58px) clamp(18px, 4vw, 46px);
  box-shadow: 0 26px 60px rgba(29, 79, 196, .35);
}

.hx-offer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 240px at 85% 10%, rgba(255, 179, 26, .25), transparent 60%),
    radial-gradient(380px 260px at 8% 90%, rgba(246, 139, 31, .28), transparent 60%);
}

.hx-offer > * { position: relative; }

.hx-offer h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; letter-spacing: -.8px; }

.hx-offer p { margin-top: 10px; font-size: 15px; opacity: .9; }

.hx-offer .hx-count { justify-content: center; margin: 24px 0 26px; }

.hx-offer .hx-count .cell { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); box-shadow: none; backdrop-filter: blur(4px); }

.hx-offer .hx-count .num { color: #fff; }

.hx-offer .hx-count .lbl { color: rgba(255, 255, 255, .75); }

/* ---------- FAQ ---------- */
.hx-faq { display: flex; flex-direction: column; gap: 10px; }

.hx-faq-item {
  background: var(--hxcard); border: 1px solid var(--hxvio-line); border-radius: var(--hxr-sm);
  box-shadow: var(--hxsh); overflow: hidden;
}

.hx-faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 17px 20px; font-weight: 800; font-size: 14.5px; cursor: pointer; letter-spacing: -.2px;
}

.hx-faq-item summary::-webkit-details-marker { display: none; }

.hx-faq-plus {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--hxvio-soft); color: var(--hxvio); border-radius: 9px;
  font-size: 16px; font-weight: 900; line-height: 0; padding: 0;
  transition: rotate .2s ease, background .2s, color .2s;
}

.hx-faq-item[open] .hx-faq-plus { rotate: 45deg; background: var(--hxvio); color: #fff; }

.hx-faq-a { padding: 0 20px 18px; font-size: 14px; color: var(--hxmut); line-height: 1.7; }

/* ---------- final CTA ---------- */
.hx-cta {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(130deg, #2b1a5e 0%, var(--hxvio) 60%, var(--hxvio-2) 100%);
  border-radius: 28px; padding: clamp(34px, 5vw, 58px) clamp(20px, 4.5vw, 56px);
  box-shadow: 0 26px 60px rgba(43, 26, 94, .35);
  display: grid; gap: 26px; align-items: center;
}

.hx-cta.has-img { grid-template-columns: 1fr; }

@media (min-width: 860px) { .hx-cta.has-img { grid-template-columns: 3fr 2fr; } }

.hx-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(460px 280px at 90% 0%, rgba(246, 139, 31, .30), transparent 60%);
}

.hx-cta > * { position: relative; }

.hx-cta h2 { font-size: clamp(25px, 3.6vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.12; text-wrap: balance; }

.hx-cta p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; opacity: .92; max-width: 560px; }

.hx-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.hx-cta-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

.hx-cta-chips span {
  font-size: 12.5px; font-weight: 750; background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 7px 14px;
}

.hx-cta-art { display: grid; place-items: center; }

.hx-cta-art img { width: min(100%, 320px); border-radius: 20px; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .35)); }

@media (max-width: 560px) {
  .hx-cta-btns .hx-btn { width: 100%; }
}

/* ---------- footer ---------- */
.hx-foot { background: linear-gradient(180deg, #eef3fc 0%, #e6edf9 100%); border-top: 1px solid var(--hxvio-line); }

.hx-foot-grid { display: grid; gap: clamp(26px, 4vw, 60px); padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: 34px; }

@media (min-width: 820px) { .hx-foot-grid { grid-template-columns: 5fr 3fr 4fr; } }

.hx-foot-brand p { margin-top: 14px; font-size: 13.5px; color: var(--hxmut); line-height: 1.7; max-width: 340px; }

.hx-social { display: flex; gap: 9px; margin-top: 18px; }

.hx-social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px;
  background: #fff; color: var(--hxvio); border: 1px solid var(--hxvio-line);
  transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}

.hx-social a:hover { transform: translateY(-2px); background: var(--hxvio); color: #fff; box-shadow: 0 8px 18px rgba(29, 79, 196, .3); }

.hx-social svg { width: 19px; height: 19px; }

.hx-foot-col h4 { font-size: 12.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hxink); margin-bottom: 14px; }

.hx-foot-col a, .hx-foot-col span { display: block; font-size: 14px; font-weight: 600; color: var(--hxmut); text-decoration: none; padding: 5px 0; }

.hx-foot-col a:hover { color: var(--hxvio); }

.hx-foot-bottom { border-top: 1px solid rgba(29, 79, 196, .14); }

.hx-foot-bottom-in { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }

.hx-foot-bottom-in span { font-size: 12.5px; font-weight: 600; color: var(--hxmut); }

.hx-foot-strip { letter-spacing: .3px; }

/* ---------- floating WhatsApp button ---------- */
.wa-float {
  position: fixed; bottom: 20px; left: 20px; z-index: 80; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(18, 140, 126, .45);
  transition: transform .18s ease;
}

.wa-float:hover { transform: scale(1.08); }

.wa-float svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 820px) {
  .wa-float { bottom: 84px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-announce-track, .hx-ship-truck, .hx-trust2, .hx-demand-fire, .hx-feel span { animation: none !important; }
  .hx-feel span:first-child { opacity: 1; }
}

/* ===================================================================
   PRODUCT PAGE — same HX system: container, colors, cards, CRO widgets
   =================================================================== */
/* padding-top/bottom only — a `padding:` shorthand would zero the hx-wrap side padding */
.hx-pdp { display: grid; gap: clamp(24px, 3vw, 56px); padding-top: clamp(18px, 2.6vw, 40px); padding-bottom: clamp(40px, 4vw, 64px); }

@media (min-width: 900px) {
  .hx-pdp { grid-template-columns: 21fr 19fr; align-items: start; }
  .hx-pdp-gal { position: sticky; top: 96px; }
}

/* gallery */
.hx-gal-main {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1;
  background: linear-gradient(150deg, #eef4ff, #fff4ec);
  border: 1px solid var(--hxvio-line); box-shadow: var(--hxsh);
}

.hx-gal-gift {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  background: linear-gradient(135deg, var(--hxvio), var(--hxvio-2)); color: #fff;
  font-size: 11.5px; font-weight: 800; padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 5px 14px rgba(29, 79, 196, .35);
}

.hx-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.gthumb {
  width: 70px; height: 70px; border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid var(--hxvio-line); background: #fff; transition: border-color .13s;
}

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

.gthumb.on, .gthumb:hover { border-color: var(--hxvio); }

/* buy box */




.hx-buy h1 { font-size: clamp(21px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.7px; line-height: 1.18; margin-top: 8px; }


.hx-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.hx-price-now {
  font-size: clamp(32px, 4vw, 42px); font-weight: 900; letter-spacing: -1.2px; line-height: 1;
  color: var(--hxvio);
  background: linear-gradient(120deg, var(--hxvio), var(--hxvio-2) 75%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.hx-price-was { font-size: 16.5px; color: var(--hxmut); text-decoration: line-through; }

.hx-price-off {
  background: linear-gradient(135deg, var(--hxor), var(--hxor-2)); color: #fff;
  font-weight: 900; font-size: 13px; padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(224, 118, 7, .32); transform: rotate(-2deg);
  animation: hxOffPop 2.4s ease-in-out infinite;
}

@keyframes hxOffPop { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.07); } }

.hx-save-line {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  margin-top: 12px; background: var(--hxvio-soft); border: 1.5px dashed var(--hxvio-2);
  color: var(--hxvio); font-weight: 800; font-size: 13.5px; padding: 8px 15px; border-radius: 999px;
}

/* variant pills */
.hx-buy-label { font-weight: 800; font-size: 14.5px; margin-top: 20px; color: var(--hxink); }

.vpills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }

.vpill {
  font: inherit; font-size: 14px; font-weight: 750; padding: 10px 20px; cursor: pointer;
  border: 2px solid var(--hxvio-line); border-radius: 999px; background: #fff; color: var(--hxink);
  transition: border-color .15s, background .15s, color .15s;
}

.vpill:hover { border-color: var(--hxvio-2); }

.vpill.on { border-color: var(--hxvio); background: var(--hxvio-soft); color: var(--hxvio); }

/* bundles */
.hx-bundles { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.hx-bundle {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--hxvio-line); border-radius: 18px;
  padding: 16px 18px; cursor: pointer; box-shadow: var(--hxsh);
  transition: border-color .16s, background .16s, box-shadow .16s;
}

.hx-bundle:hover { border-color: #c9b8ff; }

.hx-bundle.selected { border-color: var(--hxvio); background: #f0f5ff; box-shadow: 0 0 0 4px rgba(29, 79, 196, .10), var(--hxsh); }

.hx-bundle input { accent-color: var(--hxvio); width: 20px; height: 20px; flex: none; }

.hx-b-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hx-b-qty { font-weight: 900; font-size: 16.5px; letter-spacing: -.2px; }

.hx-b-save { font-size: 12.5px; color: #147a45; font-weight: 800; }

.hx-b-price { margin-left: auto; text-align: right; }

.hx-b-price .p { display: block; font-weight: 900; font-size: 19px; color: var(--hxvio); }

.hx-b-price .c { display: block; font-size: 12.5px; color: var(--hxmut); text-decoration: line-through; }

.hx-b-label {
  position: absolute; top: -11px; right: 16px;
  background: linear-gradient(135deg, var(--hxor), var(--hxor-2)); color: #fff;
  font-size: 11px; font-weight: 900; padding: 4px 12px; border-radius: 999px;
  letter-spacing: .4px; box-shadow: 0 4px 10px rgba(224, 118, 7, .35);
}

/* delivery route widget — the truck drives dispatch → doorstep on a loop */
.hx-ship { background: var(--hxvio-soft); border-radius: 16px; padding: 14px 16px 11px; margin-top: 16px; }

.hx-ship-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--hxink); }

.hx-ship-top b { white-space: nowrap; }

.hx-ship-free {
  font-style: normal; background: #147a45; color: #fff; font-size: 10.5px; font-weight: 900;
  letter-spacing: .5px; border-radius: 999px; padding: 4px 11px; flex: none;
}

.hx-ship-route { display: flex; align-items: center; margin: 15px 2px 5px; }

.hx-ship-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hxvio); flex: none; box-shadow: 0 0 0 3px rgba(29, 79, 196, .15); }

.hx-ship-dot.end { background: var(--hxor); box-shadow: 0 0 0 3px rgba(224, 118, 7, .18); }

.hx-ship-line { position: relative; flex: 1; height: 0; border-top: 2px dashed rgba(29, 79, 196, .35); margin: 0 6px; }

/* scaleX(-1): the truck emoji faces LEFT, so driving rightwards looked like
   reversing all the way to the customer's house */
.hx-ship-truck { position: absolute; top: -14px; left: 0; font-size: 17px; line-height: 1; transform: scaleX(-1); animation: hxDrive 4.5s cubic-bezier(.45, .05, .55, .95) infinite; }

@keyframes hxDrive {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 18px); opacity: 0; }
}

.hx-ship-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--hxmut); font-weight: 700; }

/* trust tiles — 2×2, staggered rise on load, gentle lift on hover */
.hx-trusts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

@media (max-width: 420px) { .hx-trusts { grid-template-columns: 1fr; } }

.hx-trust2 {
  display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--hxvio-line);
  border-radius: 14px; padding: 11px 13px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: hxRise .55s ease backwards;
}

.hx-trust2:nth-child(2) { animation-delay: .08s; }

.hx-trust2:nth-child(3) { animation-delay: .16s; }

.hx-trust2:nth-child(4) { animation-delay: .24s; }

.hx-trust2:hover { transform: translateY(-3px); box-shadow: var(--hxsh); border-color: var(--hxvio-2); }

.hx-trust2 > span {
  font-size: 19px; width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--hxvio-soft); border-radius: 12px;
}

.hx-trust2 b { display: block; font-size: 13px; font-weight: 850; color: var(--hxink); line-height: 1.25; }

.hx-trust2 small { display: block; font-size: 11.5px; color: var(--hxmut); font-weight: 650; line-height: 1.35; }

@keyframes hxRise { from { opacity: 0; transform: translateY(10px); } }

.hx-vid-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(22, 36, 77, .72); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; border-radius: 999px; padding: 5px 13px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* real weekly-demand ribbon — renders only at 3+ orders/week */
.hx-demand {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: #fff7ea; border: 1px solid #ffe2b8; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 750; color: #8a4b00;
}

.hx-demand-fire { animation: hxFlicker 1.6s ease-in-out infinite; }

@keyframes hxFlicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* emotional rotator — three lines cross-fade on a CSS-only 9s loop */
.hx-feel { position: relative; height: 24px; margin-top: 16px; overflow: hidden; text-align: center; }

.hx-feel span {
  position: absolute; inset: 0; font-size: 13.5px; font-weight: 750; color: var(--hxvio);
  opacity: 0; animation: hxFeel 9s infinite;
}

.hx-feel span:nth-child(2) { animation-delay: 3s; }

.hx-feel span:nth-child(3) { animation-delay: 6s; }

@keyframes hxFeel {
  0%, 3% { opacity: 0; transform: translateY(9px); }
  8%, 29% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-9px); }
}

/* buy CTAs */
.hx-buy-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.hx-buy-ctas .hx-btn { width: 100%; font-size: 16.5px; padding: 17px 22px; }

/* product "Why It Works" — 2×2 tinted panels with white icon tiles */
.hx-feats2 { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1020px; margin: 0 auto; }

@media (min-width: 700px) { .hx-feats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1100px) { .hx-feats2 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }

.hx-feat2 {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--hxvio-soft); border-radius: 18px; padding: 20px 22px;
}

.hx-feat2-ic {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-size: 25px;
  background: #fff; border-radius: 16px; box-shadow: var(--hxsh);
}

.hx-feat2 b { display: block; font-size: 15.5px; font-weight: 850; color: var(--hxink); }

.hx-feat2 p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: #33405e; }

/* guarantee banner — one bold brand-gradient card (replaces the sparse duo) */
.hx-gban {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
  background: linear-gradient(120deg, var(--hxvio) 0%, var(--hxvio-2) 100%);
  color: #fff; border-radius: var(--hxr); padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--hxsh-lg);
}

.hx-gban-icon {
  font-size: clamp(40px, 5vw, 58px); line-height: 1; flex: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
}

.hx-gban-copy { min-width: 0; }

.hx-gban-copy h2 { font-size: clamp(21px, 2.8vw, 30px); font-weight: 900; letter-spacing: -.6px; line-height: 1.2; }

.hx-gban-copy p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; opacity: .93; max-width: 640px; }

.hx-gban-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.hx-gban-chips span {
  font-size: 12.5px; font-weight: 800; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.hx-gban-btn { flex: none; margin-left: auto; white-space: nowrap; }

@media (max-width: 760px) {
  .hx-gban { flex-direction: column; align-items: flex-start; }
  .hx-gban-btn { margin-left: 0; width: 100%; }
}

/* trust band + description */
.hx-tband { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }

.hx-tband-item {
  background: #fff; border: 1px solid var(--hxvio-line); border-radius: var(--hxr);
  padding: 24px 18px; text-align: center; box-shadow: var(--hxsh);
}

.hx-tband-item svg { width: 34px; height: 34px; color: var(--hxvio); margin-bottom: 10px; }

.hx-tband-item b { display: block; font-size: 15.5px; font-weight: 850; margin-bottom: 5px; letter-spacing: -.2px; }

.hx-tband-item span { font-size: 13px; color: var(--hxmut); line-height: 1.5; }

.hx-desc { max-width: 780px; margin: 0 auto; font-size: 15.5px; line-height: 1.75; color: #33405e; }

@media (max-width: 640px) { .hx-desc { text-align: center; } }

/* product details feature grid (under the description) */
.hx-about-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; max-width: 980px; margin: 26px auto 0; }

.hx-about-feat {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  background: #fff; border: 1px solid var(--hxvio-line); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--hxsh);
}

.hx-about-feat .ic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 19px;
  background: var(--hxvio-soft); border-radius: 12px;
}

.hx-about-feat b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; }

.hx-about-feat small { display: block; font-size: 12px; color: var(--hxmut); margin-top: 2px; line-height: 1.45; }

/* mobile sticky order bar */
.hx-mbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--hxvio-line); box-shadow: 0 -6px 20px rgba(19, 42, 102, .12);
  padding: 10px clamp(16px, 3vw, 40px); align-items: center; gap: 14px;
}

.hx-mbar-price { display: flex; flex-direction: column; line-height: 1.15; }

.hx-mbar-price span { font-weight: 900; font-size: 19px; color: var(--hxvio); }

.hx-mbar-price small { color: var(--hxmut); text-decoration: line-through; font-size: 12px; }

.hx-mbar .hx-btn { flex: 1; padding: 13px 18px; font-size: 15px; }

@media (max-width: 900px) {
  .hx-mbar { display: flex; }
}


/* product reviews (storefront section) */
.rv-sec { padding: clamp(30px, 4vw, 50px) 0 clamp(44px, 5vw, 64px); }

.rv-head { font-size: clamp(21px, 3vw, 28px); font-weight: 900; letter-spacing: -.5px; margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.rv-avg { font-size: 13.5px; font-weight: 750; color: var(--hxmut); }

.rv-none { color: var(--hxmut); font-size: 14px; margin-bottom: 14px; }

.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 26px; }

.rv-item { background: #fff; border: 1px solid var(--hxvio-line); border-radius: var(--hxr-sm); padding: 16px 18px; box-shadow: var(--hxsh); }

.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }

.rv-top b { font-size: 14px; font-weight: 800; }

.rv-stars { color: var(--hxamber); font-size: 13px; letter-spacing: 1.5px; }

.rv-item p { font-size: 13.5px; line-height: 1.6; color: #33405e; }

.rv-when { display: block; margin-top: 9px; font-size: 11.5px; color: var(--hxmut); font-weight: 600; }

.rv-img { display: inline-block; margin-top: 10px; }

.rv-img img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hxvio-line); display: block; transition: transform .15s; }

.rv-img:hover img { transform: scale(1.04); }

.rv-photo {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 12px;
  font-size: 13px; font-weight: 750; color: var(--hxvio);
  background: var(--hxvio-soft); border: 1.5px dashed var(--hxvio-2); border-radius: 999px; padding: 9px 16px;
}

.rv-photo.has { background: #e9f9ef; border-color: #21c46a; color: #147a45; }

.rv-form { max-width: 560px; background: #fff; border: 1px solid var(--hxvio-line); border-radius: var(--hxr); padding: 22px; box-shadow: var(--hxsh); }

.rv-form h3 { font-size: 16.5px; font-weight: 850; margin-bottom: 12px; }

.rv-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 12px; }

.rv-rate input { display: none; }

.rv-rate span { font-size: 25px; color: #ddd3f2; cursor: pointer; transition: color .12s; }

.rv-rate label:hover span, .rv-rate label:hover ~ label span,
.rv-rate input:checked + span, .rv-rate label:has(input:checked) ~ label span { color: var(--hxamber); }

.rv-form input, .rv-form textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 12px 14px; margin-bottom: 10px;
  border: 1.5px solid var(--hxvio-line); border-radius: 12px; background: #fdfcff;
}

.rv-form input:focus, .rv-form textarea:focus { outline: none; border-color: var(--hxvio); box-shadow: 0 0 0 4px rgba(29, 79, 196, .1); }

.rv-form textarea { min-height: 90px; resize: vertical; }

.rv-form button {
  font: inherit; font-size: 14.5px; font-weight: 800; color: #fff; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--hxor), var(--hxor-2));
  border-radius: 999px; padding: 13px 26px; box-shadow: var(--hxsh-or);
}

.rv-msg { margin-top: 10px; font-size: 13.5px; font-weight: 700; }

/* ================= round-5 additions ================= */
/* desktop: nav truly centered between logo and actions */
@media (min-width: 820px) {
  .hx-head-in { position: relative; }
  .hx-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
}

/* mobile header: burger left, centered logo, cart right (CTA hidden) */
.hx-burger {
  display: none; width: 44px; height: 44px; flex: none; place-items: center;
  border: 1.5px solid var(--hxvio-line); border-radius: 14px; background: #fff;
  color: var(--hxink); cursor: pointer;
}

.hx-burger svg { width: 22px; height: 22px; }

.hx-mnav { display: none; }

@media (max-width: 819px) {
  .hx-head-in { position: relative; justify-content: space-between; }
  .hx-burger { display: grid; }
  .hx-head-acts .hx-btn { display: none; }
  .hx-logo { position: absolute; left: 50%; transform: translateX(-50%); max-width: 56%; }
  .hx-mnav.open { display: block; }
  .hx-mnav { background: #fff; border-bottom: 1px solid var(--hxvio-line); box-shadow: 0 16px 32px rgba(19, 42, 102, .14); }
  .hx-mnav a { display: block; padding: 13px clamp(16px, 4vw, 24px); font-size: 14.5px; font-weight: 700; color: var(--hxink); text-decoration: none; border-top: 1px solid var(--hxvio-line); }
  .hx-mnav a:active { background: var(--hxvio-soft); }
}

/* sticky order bar polish */
.hx-mbar { border-radius: 18px 18px 0 0; padding: 10px clamp(14px, 3vw, 24px) 12px; gap: 12px; box-shadow: 0 -10px 28px rgba(19, 42, 102, .16); }

.hx-mbar-price .hx-mbar-lbl { text-decoration: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--hxmut); font-weight: 700; }

/* reviews: center everything while there are no reviews yet */
.rv-emptysec .rv-head { justify-content: center; text-align: center; }

.rv-emptysec .rv-none { text-align: center; margin-bottom: 20px; }

.rv-emptysec .rv-form { margin: 0 auto; }

/* review photo picker (with live preview) */
.rv-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.rv-photo { background: #fff; border: 1.5px dashed var(--hxvio-2); color: var(--hxvio); border-radius: 14px; padding: 11px 18px; margin-bottom: 0; font-weight: 750; }

.rv-photo svg { width: 18px; height: 18px; flex: none; }

.rv-photo.has { background: var(--hxvio-soft); border-style: solid; }

.rv-photo-prev { position: relative; display: inline-block; }

.rv-photo-prev img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--hxvio-line); display: block; }

.rv-photo-prev button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--hxink); color: #fff; font-size: 10px; display: grid; place-items: center; cursor: pointer; padding: 0; }

/* product description accordion */
.hx-desc-acc { max-width: 860px; margin: 0 auto; }

.hx-desc-body { color: #33405e; font-size: 14.5px; line-height: 1.7; }

.hx-desc-body p { margin: 8px 0; }

.hx-desc-body ul, .hx-desc-body ol { margin: 8px 0 8px 20px; }

.hx-desc-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }

.hx-desc-body th, .hx-desc-body td { border: 1px solid var(--hxvio-line); padding: 8px 10px; text-align: left; }

/* footer logo on dark/tinted footers */
.hx-logo-inv img { filter: brightness(0) invert(1); }

/* buy-box description accordion */
.hx-desc-item { margin-top: 14px; }

.hx-desc-item .hx-desc-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }

.hx-desc-item .hx-desc-body th, .hx-desc-item .hx-desc-body td { border: 1px solid var(--hxvio-line); padding: 7px 9px; text-align: left; }

.hx-desc-item .hx-desc-body ul, .hx-desc-item .hx-desc-body ol { margin: 8px 0 8px 20px; }

.hx-desc-item .hx-desc-body p { margin: 8px 0; }

.hx-desc-item .hx-desc-body h2, .hx-desc-item .hx-desc-body h3 { font-size: 15px; font-weight: 800; margin: 14px 0 6px; }

/* Shopify-style placeholder artwork (empty image slots) */
.hx-ph { display: block; width: 100%; height: 100%; min-height: 230px; border-radius: 14px;
  background-color: #f1f2f4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 170' fill='none' stroke='%23a3a9b3' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 150h192'/%3E%3Cpath d='M30 150V78c0-24 15-40 34-40s34 16 34 40v72' fill='%23fff'/%3E%3Cpath d='M56 38c0-9 16-9 16 0'/%3E%3Cpath d='M30 96h68'/%3E%3Crect x='44' y='108' width='40' height='30' rx='8' fill='%23fff'/%3E%3Cpath d='M138 150l6-62h66l6 62z' fill='%23fff'/%3E%3Cpath d='M158 88c0-20 38-20 38 0'/%3E%3Crect x='74' y='96' width='104' height='54' rx='10' fill='%23fff'/%3E%3Cpath d='M74 118h104'/%3E%3Cpath d='M104 118v12M148 118v12'/%3E%3C/svg%3E");
  background-position: center; background-size: min(60%, 220px) auto; background-repeat: no-repeat; }

.hx-ph::after { content: none; display: none; }

.hx-benefits-tile .hx-ph { min-height: 360px; }

.hx-ba-half .hx-ph { min-height: 250px; border-radius: 0; }

/* hero placeholder: compact tile so the blob animation stays visible behind it */
.hx-hero-img.hx-ph { width: min(62%, 320px); height: auto; min-height: 0; aspect-ratio: 1; background-size: 62% auto; }

/* Sticky footer + short-page centering: #app fills the viewport, main grows
   and vertically centers pages shorter than the screen (track order etc.). */
#app { min-height: 100vh; display: flex; flex-direction: column; }
main.theme-main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

/* ===== ab-live gallery engine (ported) — vars mapped onto the GLOWXIS palette ===== */
:root { --ab-primary: var(--hxvio); --ab-danger: var(--hxor-2); --ab-ink: var(--hxink); }

.main-img-wrap { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; position: relative; cursor: zoom-in; user-select: none; touch-action: pan-y; }
.gal-img-outer { position: relative; width: 100%; aspect-ratio: 1; margin-bottom: 12px; }
.gal-track { position: absolute; top: 0; left: 0; display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }
.gal-track img { height: 100%; object-fit: cover; flex-shrink: 0; user-select: none; pointer-events: none; border-radius: 18px; }
/* A clip is a slide: identical box to the photos above ($itemW). The <video> keeps
   pointer-events:none exactly like the photos, so the wrapper's drag/click-to-zoom
   handler treats it identically — only the sound button is clickable. */
.gal-track .gal-vid { position: relative; height: 100%; flex-shrink: 0; border-radius: 18px; overflow: hidden; }
.gal-track .gal-vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; user-select: none; pointer-events: none; }
.gal-sound { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.58); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; z-index: 3; }
.gal-sound:hover { background: rgba(0,0,0,.82); }
.gal-sound svg { width: 20px; height: 20px; }
.gal-sound .ic-loud { display: none; }
.gal-vid.unmuted .gal-sound .ic-muted { display: none; }
.gal-vid.unmuted .gal-sound .ic-loud { display: block; }
.thumb-strip { display: flex; gap: 8px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 8px; padding-left: 2px; }
.thumb-strip::-webkit-scrollbar { height: 4px; }
.thumb-strip::-webkit-scrollbar-track { background: #f9fafb; border-radius: 2px; }
.thumb-strip::-webkit-scrollbar-thumb { background: var(--ab-primary); border-radius: 2px; }
.thumb-strip::-webkit-scrollbar-thumb:hover { background: var(--ab-danger); }
.thmb { width: 72px; height: 72px; flex-shrink: 0; border: 2px solid #ffffff; border-radius: 10px; cursor: pointer;     transition: .5s all; overflow: hidden; outline: 2px solid transparent; outline-offset: 0; }
.thmb.active, .thmb:hover { border-color: #000000;    transition: .5s all;    padding: 3px; border-radius: 10px; }
.thmb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
/* video thumbnail: same box as a photo + a play glyph so it reads as a clip */
.thmb { position: relative; }
.thmb video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; background: #000; }
.thmb-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.thmb-play svg { width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
.thmb-play { background: rgba(0, 0, 0, .18); }
.gal-arrow { position: absolute; top: 94%; transform: translateY(-50%); width: 28px; height: 28px; background: rgba(255,255,255,0.88); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; color: var(--ab-ink); z-index: 2; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.gal-arrow:hover { background: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,0.2); transform: translateY(-50%) scale(1.08); }
.gal-arrow.prev { left: 8px; }
.gal-arrow.next { right: 8px; }
.zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.zoom-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.zoom-track { position: absolute; inset: 0; display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); z-index: 0; touch-action: pan-y; }
.zoom-item { height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; user-select: none; pointer-events: none; }
.zoom-item img { max-width: 88vw; max-height: 72vh; object-fit: contain; border-radius: 10px; transform: scale(0.92); transition: transform 0.3s ease; }
.zoom-overlay.open .zoom-item img { transform: scale(1); }
/* Zoom video player — always-on custom bar (native `controls` auto-hide).
   .zoom-item is pointer-events:none so a drag over a PHOTO swipes and a click
   closes. A video is not a photo: without this the player never receives a
   click at all — every press fell through to the overlay and shut the popup. */
.zv { position: relative; display: inline-block; max-width: 88vw; pointer-events: auto; }
.zv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); border-radius: 0 0 10px 10px; }
.zv-btn { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.zv-btn:hover { background: rgba(255,255,255,.3); }
.zv-btn svg { width: 16px; height: 16px; }
.zv-play .i-pause, .zv-mute .i-loud { display: none; }
.zv.playing .zv-play .i-play { display: none; }
.zv.playing .zv-play .i-pause { display: block; }
.zv.unmuted .zv-mute .i-muted { display: none; }
.zv.unmuted .zv-mute .i-loud { display: block; }
.zv-time { color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.zv-seek { flex: 1 1 auto; min-width: 60px; }
.zv-vol { flex: 0 0 70px; }
.zv-bar input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px; background: rgba(255,255,255,.3); cursor: pointer; }
.zv-bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; }
.zv-bar input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
@media (max-width: 600px) { .zv-time { display: none; } .zv-vol { flex: 0 0 52px; } }
.zoom-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.zoom-thumbs { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,0.5); border-radius: 12px; }
.zoom-thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid rgba(255,255,255,0.2); transition: border-color 0.2s, transform 0.2s; flex-shrink: 0; }
.zoom-thumb:hover { border-color: rgba(255,255,255,0.6); transform: scale(1.06); }
.zoom-thumb.active { border-color: #ffffff; }
.zoom-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.zoom-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; background: #ffffff; border: 1px solid #000; border-radius: 50%; color: #000; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; }
.zoom-close:hover { background: rgba(255,255,255,0.25); }
.zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: #ffffff; border: 1px solid #000; border-radius: 50%; color: #000; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; }
.zoom-nav:hover { background: rgba(255,255,255,0.25); }
.zoom-nav.prev { left: 16px; }
.zoom-nav.next { right: 16px; }
.zoom-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 12px; }
@media (max-width: 768px) {
  .ptag {
    font-size: 12px;
}
.p-sub {
        font-size: 11px;
        margin-top: 6px;
        line-height: 1.4;
    }
#bw-pbundle .bw1-qty {
    font-size: 16px !important;
    margin-bottom: 4px;
}
.pacc-item {
    margin-bottom: 5px;
}
#bw-pbundle .bw1-badge {
    margin-left: 5px !important;
    font-size: 9px !important;
    padding: 4px 11px 4px !important;
}
  span.pacc-title-icon {
    font-size: 14px;
}
.p-vendor {
    margin-bottom: 10px;
}
.price-card {
    margin-bottom: 10px;
    padding: 12px;
}
#bw-pbundle .bw4-card{
           padding: 12px !important;
}
.sbtn {
    font-size: 14px;
}
#bw-pbundle .bw1-save {
    font-size: 11px !important;
}
#bw-pbundle .bw1-orig {
    font-size: 12px !important;
    margin-right: 9px;
}
  .prod-crumb { padding: 9px 3%; }
  .product-layout { flex-direction: column; gap: 10px; }
  .prod-gallery { position: static; max-width: 480px; margin: 0 auto; width: 100%; }
  .p-info h1 { font-size: 19px; }
  .p-info { padding-bottom: 0; width: 100%; min-width: 100%; max-width: 100%; }
  .svg-icon { display: inline-flex; width: 15px; height: 15px; vertical-align: middle; flex-shrink: 0; margin: 0; margin-right: 3px; margin-top: .5px; }
  .p-rating-row { margin-bottom: 10px; }
  .p-rating-row .p-stars { font-size: 16px; }
  .p-rating-row .p-rtxt { font-size: 13px; }
  .p-rating-row .p-sold { font-size: 12px; }
  .p-trust-row { gap: 6px; }
  .p-tr-item span { font-size: 9px; }
  .cart-row { flex-wrap: wrap; }
  .cart-row .atc { position: relative; z-index: 9; }
  .wa-order-btn { padding: 12px; }
  .ab-ticker { padding: 7px 0; }
  .ab-ticker__cell { font-size: 12px; padding-right: 26px; gap: 6px; }
  .ab-ticker__cell::after { right: 11px; }
  .ab-ticker__ico { width: 15px; height: 15px; }
  .mbi-sub { display: none; }
  .mob-buy-bar { left: 10px; right: 10px; bottom: 12px; width: auto; max-width: none; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); padding: 8px 10px; transform: translateY(calc(100% + 24px)); }
  .mob-buy-atc { padding: 11px 16px; font-size: 12px; border-radius: 999px; }
.p-gifts {
    gap: 0;
    margin-bottom: 12px;
        justify-content: space-between;
}
.p-tr-item .svg-icon {
    width: 22px;
    height: 22px;
    color:rgb(0, 0, 0);
}
#bw-pbundle .bw1-pill {
    gap: 7px !important;
}
.di-row {
    font-size: 14px;
}
#bw-pbundle .bw-head {
    font-size: 14px !important;
        margin-bottom: 9px !important;

}
    .p-tr-item span {
        font-size: 12px;
}
.gft {
    width: 32%;
    padding: 5px 6px;
    display: flex;
    justify-content: center;
}
.qb {
    width: 28px;
    height: 42px;
}
.qv {
    width: 32px;
}
.thmb { width: 59px; height: 59px; }


}

/* hx-skin over the ported gallery */
.gal-img-outer { position: relative; }
.main-img-wrap { border-radius: 26px; border: 1px solid var(--hxvio-line); box-shadow: var(--hxsh); aspect-ratio: 1; background: linear-gradient(150deg, #eef4ff, #fff4ec); }
.main-img-wrap .hx-off { z-index: 3; }

/* ===== buy-box widget rack ===== */
.hx-w-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.hx-w-facts span { font-size: 12px; font-weight: 750; color: var(--hxmut); background: #fff; border: 1px solid var(--hxvio-line); border-radius: 999px; padding: 5px 12px; }
.hx-w-cutoff { margin-top: 12px; font-size: 13px; font-weight: 750; color: #8a4b00; background: #fff7ea; border: 1px solid #ffe2b8; border-radius: 12px; padding: 9px 14px; }
.hx-w-cutoff b { color: #b45309; }
.hx-w-stock { margin-top: 10px; font-size: 13px; font-weight: 750; color: #147a45; }
.hx-w-stock.low { color: #b91c1c; display: flex; align-items: center; gap: 10px; }
.hx-w-stock-bar { flex: 0 0 90px; height: 7px; border-radius: 4px; background: #fee2e2; overflow: hidden; }
.hx-w-stock-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ef4444, #f97316); }
.hx-w-math { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--hxmut); }
.hx-w-math b { color: var(--hxink); }
.hx-w-total { margin-top: 10px; font-size: 13px; font-weight: 750; color: var(--hxink); background: var(--hxvio-soft); border-radius: 12px; padding: 9px 14px; }
.hx-w-guar { text-align: center; font-size: 12.5px; font-weight: 750; color: #147a45; margin-top: 2px; }
.hx-w-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font-size: 12.5px; font-weight: 750; color: var(--hxink); }
.hx-w-steps span { background: #fff; border: 1px solid var(--hxvio-line); border-radius: 999px; padding: 6px 12px; }
.hx-w-steps i { font-style: normal; color: var(--hxmut); }
.hx-w-secure { margin-top: 12px; font-size: 12px; font-weight: 650; color: var(--hxmut); }
.hx-w-returns { margin-top: 10px; }

/* perfect-for chips */
.hx-w-for { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 750; }
.hx-w-for b { color: var(--hxmut); font-weight: 800; }
.hx-w-for span { background: var(--hxvio-soft); color: var(--hxink); border-radius: 999px; padding: 6px 13px; }

/* what's in the box */
.hx-w-box { margin-top: 12px; background: #fff; border: 1px solid var(--hxvio-line); border-radius: 14px; padding: 12px 15px; font-size: 13px; }
.hx-w-box b { display: block; color: var(--hxink); margin-bottom: 5px; }
.hx-w-box span { color: var(--hxmut); font-weight: 650; }

/* original vs bazaar copies */
.hx-w-vs { margin-top: 14px; border: 1px solid var(--hxvio-line); border-radius: 16px; overflow: hidden; font-size: 12.5px; }
.hx-w-vs .r { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; padding: 9px 14px; background: #fff; }
.hx-w-vs .r + .r { border-top: 1px dashed var(--hxvio-line); }
.hx-w-vs .r.h { background: var(--hxvio-soft); font-weight: 850; color: var(--hxink); }
.hx-w-vs .ok { text-align: center; color: #147a45; font-weight: 900; }
.hx-w-vs .no { text-align: center; color: #b91c1c; font-weight: 900; }

/* ===== mobile overflow fixes ===== */
/* Base icon size — ab-live defines this globally; without it the gallery
   arrow/close SVGs render at the 300x150 browser default and push the page
   wider than the phone screen. */
.svg-icon { display: inline-flex; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; }
.gal-arrow .svg-icon, .zoom-nav .svg-icon, .zoom-close .svg-icon { width: 20px; height: 20px; margin: 0; }

/* Nothing may widen the page sideways, ever. */
html, body { overflow-x: clip; }

/* The WhatsApp float rides ABOVE the sticky order bar on mobile instead of
   hiding behind it / covering the first thumbnail. */
@media (max-width: 819px) { .wa-float { bottom: 14px; } body.mbar-on .wa-float { bottom: 74px; } }

/* belt-and-braces: the round buttons clip anything oversized inside them */
.gal-arrow, .zoom-nav, .zoom-close { overflow: hidden; }
.zoom-overlay { overflow: hidden; }

/* Grid blowout guard: children may never exceed their column (the gallery
   measured 9px wider than the wrap on mobile via min-content stretching). */
.hx-pdp > * { min-width: 0; }
.hx-pdp-gal, .gal-img-outer, .main-img-wrap, .thumb-strip { max-width: 100%; }

/* Sticky order bar: hidden while the real Order button is on screen — it only
   slides up once the CTA scrolls away (no duplicate buttons in view). */
.hx-mbar { transform: translateY(115%); transition: transform .28s ease; }
.hx-mbar.on { transform: translateY(0); }

/* ===== mobile buy-box polish ===== */
@media (max-width: 560px) {
  /* facts + routine strips: ONE row, compact chips */
  .hx-w-facts { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .hx-w-facts::-webkit-scrollbar { display: none; }
  .hx-w-facts span { padding: 3px 8px; font-size: 9.5px; white-space: nowrap; flex: none; }
  .hx-w-steps { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .hx-w-steps::-webkit-scrollbar { display: none; }
  .hx-w-steps span { padding: 5px 9px; font-size: 11px; white-space: nowrap; flex: none; }
  .hx-w-steps i { font-size: 10px; flex: none; }
  /* emotional rotator smaller */
  .hx-feel { height: 20px; margin-top: 10px; }
  .hx-feel span { font-size: 12px; }
  /* tighter vertical rhythm between the widgets */
  .hx-ship, .hx-trusts { margin-top: 10px; }
  .hx-w-secure, .hx-w-vs, .hx-demand, .hx-w-facts { margin-top: 8px; }
  .hx-buy-ctas { margin-top: 12px; gap: 8px; }
  /* description reads smaller on a phone */
  .hx-desc-body, .hx-desc-body p, .hx-desc-body li { font-size: 13.5px; line-height: 1.6; }
  /* WhatsApp float: smaller */
  .wa-float { width: 38px; height: 38px; bottom: 14px; left: 12px; transition: bottom .25s ease; }
  body.mbar-on .wa-float { bottom: 74px; }
  .wa-float svg { width: 20px; height: 20px; }
}

/* ===== reviews: centered like the other sections + popup form ===== */
.rv-head { justify-content: center; text-align: center; }
.rv-none { text-align: center; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; gap: 14px; }
.rv-cta-row { text-align: center; margin-top: 26px; }

.rv-modal {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(22, 36, 77, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.rv-modal.open { display: flex; }
.rv-modal .rv-form { margin: 0; width: min(560px, 100%); max-height: 88vh; overflow: auto; position: relative; }
.rv-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--hxvio-soft); color: var(--hxink); font-size: 15px; font-weight: 800;
  cursor: pointer; display: grid; place-items: center;
}
.rv-close:hover { background: var(--hxvio-line); }

/* The ✕ must not inherit the form's orange submit-button look — outspecify it */
.rv-form button.rv-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 0; background: var(--hxvio-soft); color: var(--hxink);
  font-size: 15px; font-weight: 800; box-shadow: none; display: grid; place-items: center;
}
.rv-form button.rv-close:hover { background: var(--hxvio-line); transform: none; filter: none; }

/* single-column mobile: gallery and buy box sit close, not a desktop-sized gap */
@media (max-width: 899px) { .hx-pdp { gap: 12px; } }

/* ===== reviews redesign — summary + testimonial-grade cards ===== */
.rv-summary { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 26px; }
.rv-summary b { font-size: 46px; font-weight: 900; color: var(--hxink); line-height: 1; letter-spacing: -1px; }
.rv-sum-stars { color: var(--hxamber); font-size: 19px; letter-spacing: 3px; }
.rv-summary small { color: var(--hxmut); font-weight: 650; font-size: 12.5px; }

.rv-item { background: #fff; border: 1px solid var(--hxvio-line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--hxsh); }
.rv-item > p { font-size: 14px; line-height: 1.65; color: #33405e; }
.rv-who { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.rv-av {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--hxvio), var(--hxvio-2)); color: #fff;
  font-weight: 800; font-size: 14px; display: grid; place-items: center;
}
.rv-who-tx { flex: 1; min-width: 0; }
.rv-who-tx b { display: block; font-size: 14.5px; font-weight: 850; color: var(--hxink); line-height: 1.2; }
.rv-verified { display: block; font-size: 11.5px; color: #147a45; font-weight: 700; margin-top: 2px; }
.rv-who .rv-stars { color: var(--hxamber); font-size: 14px; letter-spacing: 1px; flex: none; }

/* ===== reviews module: rating panel + review rows, side by side ===== */
.rv-wrap2 { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .rv-wrap2 { grid-template-columns: 1fr; } }
.rv-wrap2.rv-noreviews { grid-template-columns: 1fr; max-width: 560px; }

.rv-panel {
  background: var(--hxvio-soft); border-radius: 18px; padding: 26px 20px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.rv-panel > b { font-size: 42px; font-weight: 900; color: var(--hxink); line-height: 1; letter-spacing: -1px; }
.rv-panel .rv-sum-stars { font-size: 17px; }
.rv-panel > small { color: var(--hxmut); font-weight: 650; font-size: 12px; }
.rv-panel .hx-btn { width: 100%; margin-top: 14px; font-size: 13.5px; padding: 11px 16px; }

.rv-wrap2 .rv-list { grid-template-columns: 1fr; justify-content: stretch; gap: 12px; }

/* zoom-overlay clip: capped size so the control bar stays on screen (the one
   base .zv rule the port missed — without it the video shoved the bar away) */
.zv video { max-width: 88vw; max-height: 72vh; border-radius: 10px; background: #000; display: block; }

/* zoom player: wider seek, volume lives in a vertical popover off the speaker */
.zv { position: relative; }
.zv-bar { min-width: min(460px, 86vw); }
.zv-bar .zv-seek { flex: 1 1 auto; min-width: 160px; }
.zv-volpop {
  position: absolute; right: 6px; bottom: 54px; display: none;
  background: rgba(0, 0, 0, .78); border-radius: 12px; padding: 12px 9px;
}
.zv.show-vol .zv-volpop { display: block; }
.zv-volpop .zv-vol { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 110px; }

/* controls live INSIDE the clip: the bar pins to the video's bottom edge and
   never grows wider than the video itself */
.zv { position: relative; display: inline-block; }
.zv-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; min-width: 0; }
.zv-bar .zv-seek { min-width: 0; }
.zv-volpop { right: 4px; bottom: 60px; }

/* failed clip: dark placeholder with a tap-to-retry message, no dead controls */
.zv.zv-failed { min-width: min(320px, 80vw); min-height: 220px; background: #111; border-radius: 10px; display: grid; place-items: center; }
.zv.zv-failed video, .zv.zv-failed .zv-bar, .zv.zv-failed .zv-volpop { display: none; }
.zv-failed-msg { display: none; color: #fff; font-size: 13px; font-weight: 700; padding: 20px; text-align: center; cursor: pointer; }
.zv.zv-failed .zv-failed-msg { display: block; }

/* volume popover v2: a real vertical slider via rotation — the writing-mode
   trick rendered as a squashed box on some Chrome builds */
.zv-volpop {
  width: 46px; height: 140px; padding: 0; right: 2px; bottom: 62px;
  align-items: center; justify-content: center;
}
.zv.show-vol .zv-volpop { display: flex; }
.zv-volpop .zv-vol {
  writing-mode: horizontal-tb; direction: ltr;
  transform: rotate(-90deg); width: 112px; height: 22px;
}

/* buffering clip: sized placeholder + spinner, controls hidden until ready */
.zv.zv-loading { min-width: min(320px, 80vw); min-height: 220px; background: #111; border-radius: 10px; }
.zv.zv-loading .zv-bar, .zv.zv-loading .zv-volpop { display: none; }
.zv.zv-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
  animation: hxSpin .8s linear infinite;
}
@keyframes hxSpin { to { transform: rotate(360deg); } }

/* controls: no bar background, no button circles — clean icons at the very
   bottom edge of the clip (a soft text-shadow keeps them readable) */
.zv-bar {
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  left: 8px; right: 8px; bottom: 2px; padding: 6px 4px;
}
.zv-bar .zv-btn { background: none; box-shadow: none; border: 0; }
.zv-bar .zv-btn svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.zv-time { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.zv-volpop { bottom: 48px; }

/* Full-height hero is a FLEX wrapper: without min-width:0 the wrap's
   min-content (the big hero image) blew the copy column past the phone
   screen and the subheading clipped mid-word. */
.hx-hero > .hx-wrap { min-width: 0; max-width: 100%; }
.hx-hero-grid > * { min-width: 0; }
.hx-hero-img { max-width: 100%; }

/* Order button while checkout loads — a spinner so the tap is never ignored */
.hx-btn.is-loading { opacity: .85; pointer-events: none; }
.hx-btn.is-loading::after {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: hxSpin .7s linear infinite;
}
.hx-btn.is-loading svg { display: none; }

/* Slow checkout: the button offers a clear retry instead of a frozen spinner */
.hx-btn.is-retry { background: linear-gradient(135deg, #b45309, #92400e); pointer-events: auto; }
.hx-btn.is-retry::after { content: '↻'; font-size: 17px; font-weight: 900; border: 0; animation: none; }