/* ==================================================
   NEW DEX - HOMEPAGE V3 (cream + gold, scoped to body.home)
================================================== */
body.home{
    --cream:#fbf6ec; --sand:#f3e8d4; --green:#1f3a2a; --gold:#a8782f; --gold-dark:#8a6124;
    --ink:#3a2f23; --muted:#7a6c5a; --line:#e6d9c0;
    background:var(--cream); color:var(--ink); font-family:'Poppins',sans-serif;
}
body.home h1, body.home h2, body.home h3{ font-family:'Cormorant Garamond',Georgia,serif; color:var(--ink); }

/* ---------- top bar ---------- */
.hx-topbar{
    background:var(--green); color:#efe6d2; font-size:13px;
    display:flex; justify-content:center; gap:clamp(16px,4vw,56px);
    padding:9px 16px; text-align:center; flex-wrap:wrap;
}

/* ---------- header (overrides the dark site header on the homepage only) ---------- */
body.home header{
    position:sticky; top:0; left:auto; width:100%;
    background:rgba(251,246,236,.96); backdrop-filter:blur(10px);
    box-shadow:0 1px 0 var(--line);
}
body.home header .navbar{ height:78px; }
body.home header .navbar .logo img{ height:54px; }
body.home header .navbar .nav-links li a{ color:var(--ink); font-size:15px; }
body.home header .navbar .nav-links li a:hover,
body.home header .navbar .nav-links li a.active{ color:var(--gold); }
body.home header .navbar .nav-links li a.active{ box-shadow:inset 0 -2px 0 var(--gold); }
body.home header .navbar .nav-links li a#accountNavLink,
body.home header .navbar .nav-links li a#accountNavLink:hover{ color:var(--ink); }
body.home header .navbar .nav-links li a.hx-icon{ position:relative; padding:8px 4px; }
body.home header .navbar .nav-links li a.hx-icon:hover{ color:var(--gold); }
body.home .hx-badge{
    position:absolute; top:0; right:-6px; min-width:17px; height:17px; padding:0 4px;
    border-radius:9px; background:var(--gold); color:#fff; font-size:11px; font-weight:600;
    display:flex; align-items:center; justify-content:center; line-height:1;
}
body.home .menu-toggle span{ background:var(--ink); }
.account-dropdown-toggle{ color:var(--ink) !important; }

@media (max-width:1200px){
    body.home header .navbar .nav-links{ background:var(--cream); border-top:1px solid var(--line); }
    body.home header .navbar .nav-links.active{ box-shadow:0 15px 25px rgba(60,40,10,.12); }
    body.home .account-dropdown-menu a, body.home .account-dropdown-menu button{ color:var(--ink); }
    body.home .hx-badge{ position:static; margin-left:6px; }
    body.home header .navbar .nav-links li a.hx-icon{ gap:2px; }
}

/* ---------- shared ---------- */
.hx-section{ width:92%; max-width:1200px; margin:0 auto; padding:64px 0 0; }
.hx-head h2{ font-size:clamp(28px,3.4vw,38px); font-weight:600; margin:0 0 6px; }
.hx-head p{ color:var(--muted); font-size:15px; margin:0; }
.hx-center{ text-align:center; margin-bottom:34px; }
.hx-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.hx-link{ color:var(--gold-dark); font-weight:500; font-size:14px; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
.hx-link:hover{ color:var(--green); }
.hx-msg{ grid-column:1/-1; text-align:center; padding:40px 0; color:var(--muted); }
.hx-btn{
    display:inline-block; background:var(--gold); color:#fff; text-decoration:none;
    padding:14px 34px; border-radius:30px; font-weight:500; font-size:15px;
    border:2px solid var(--gold); transition:background .25s,color .25s;
}
.hx-btn:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.hx-btn-outline{ background:transparent; color:var(--gold-dark); }
.hx-btn-outline:hover{ background:var(--gold); color:#fff; }
body.home a:focus-visible, body.home button:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ---------- hero ---------- */
.hx-hero{
    display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px;
    background:linear-gradient(100deg,var(--cream) 35%,var(--sand));
    padding:clamp(34px,6vw,80px) max(4%,calc((100% - 1200px)/2));
    min-height:460px;
}
.hx-kicker{ color:var(--gold-dark); font-size:14px; font-weight:500; margin:0 0 14px; }
.hx-hero h1{ font-size:clamp(42px,6vw,76px); line-height:1.02; font-weight:600; margin:0 0 18px; }
.hx-lead{ font-size:17px; line-height:1.7; max-width:420px; color:var(--muted); margin:0 0 28px; }
.hx-hero-points{ list-style:none; display:flex; gap:26px; margin:38px 0 0; padding:0; flex-wrap:wrap; }
.hx-hero-points li{ display:flex; align-items:center; gap:10px; color:var(--gold-dark); font-size:13px; max-width:150px; line-height:1.3; }
.hx-hero-points svg{ flex-shrink:0; width:34px; height:34px; }
.hx-hero-img img{ width:100%; max-height:430px; object-fit:contain; display:block; border-radius:18px; }

/* ---------- collections ---------- */
.hx-collections{ display:flex; justify-content:center; gap:clamp(18px,3vw,44px); flex-wrap:wrap; }
.hx-col{ width:170px; text-align:center; text-decoration:none; color:var(--ink); }
.hx-col span.ring{
    display:block; width:150px; height:150px; margin:0 auto 14px; border-radius:50%;
    background:var(--sand); border:3px solid #fff; box-shadow:0 0 0 1px var(--line); overflow:hidden;
}
.hx-col img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.hx-col:hover img{ transform:scale(1.07); }
.hx-col strong{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:600; }
.hx-col small{ color:var(--gold-dark); font-size:13px; }

/* ---------- product cards ---------- */
.hx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.hx-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 14px rgba(90,60,20,.08); display:flex; flex-direction:column; position:relative; }
.hx-card .hx-ph{ aspect-ratio:4/3; background:var(--sand); display:block; }
.hx-card .hx-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-card .hx-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.hx-card h3{ font-size:21px; font-weight:600; margin:0; line-height:1.2; }
.hx-card h3 a{ color:inherit; text-decoration:none; }
.hx-card .hx-desc{ font-size:13px; color:var(--muted); margin:0; line-height:1.5; flex:1; }
.hx-card .hx-price{ font-size:20px; font-weight:600; margin:6px 0 8px; color:var(--ink); }
.hx-card .cart-btn{
    background:var(--gold); color:#fff; border:0; border-radius:6px; padding:11px; width:100%;
    font:500 14px 'Poppins',sans-serif; cursor:pointer; transition:background .25s;
}
.hx-card .cart-btn:hover{ background:var(--gold-dark); }
.hx-card .wishlist{
    position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
    background:#fff; border:0; cursor:pointer; font-size:16px; color:#b9a98f;
    box-shadow:0 1px 6px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center;
}
.hx-card .wishlist:hover, .hx-card .wishlist.active{ color:#c0392b; }

/* ---------- trust strip ---------- */
.hx-strip{
    margin-top:64px; background:var(--sand); display:grid; grid-template-columns:repeat(4,1fr);
    padding:26px max(4%,calc((100% - 1200px)/2)); gap:16px;
}
.hx-strip div{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--gold-dark); font-size:14px; }

/* ---------- why ---------- */
.hx-why{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.hx-why-box{ background:#fff; padding:clamp(28px,4vw,52px); border-radius:14px 0 0 14px; box-shadow:0 2px 14px rgba(90,60,20,.06); }
.hx-why-box h2{ font-size:clamp(28px,3.2vw,38px); margin:0 0 18px; font-weight:600; }
.hx-why-box ul{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.hx-why-box li{ padding-left:30px; position:relative; font-size:15px; }
.hx-why-box li::before{ content:""; position:absolute; left:2px; top:5px; width:14px; height:8px; border-left:2.500px solid var(--gold); border-bottom:2.500px solid var(--gold); transform:rotate(-45deg); }
.hx-why-img{ border-radius:0 14px 14px 0; overflow:hidden; background:var(--sand); }
.hx-why-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- reviews ---------- */
.hx-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hx-review{ background:#fff; border-radius:12px; padding:22px; box-shadow:0 2px 14px rgba(90,60,20,.06); display:flex; flex-direction:column; gap:10px; }
.hx-stars{ color:var(--gold); letter-spacing:2px; font-size:16px; }
.hx-review p{ margin:0; font-size:14px; line-height:1.7; color:var(--ink); flex:1; }
.hx-review b{ font-size:14px; }

/* ---------- footer spacing on this page ---------- */
body.home footer{ margin-top:72px; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
    .hx-grid{ grid-template-columns:repeat(2,1fr); }
    .hx-strip{ grid-template-columns:repeat(2,1fr); }
    .hx-reviews{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
    .hx-hero{ grid-template-columns:1fr; text-align:left; }
    .hx-hero-img{ order:-1; }
    .hx-hero-img img{ max-height:300px; }
    .hx-why{ grid-template-columns:1fr; }
    .hx-why-box{ border-radius:14px 14px 0 0; }
    .hx-why-img{ border-radius:0 0 14px 14px; max-height:260px; }
    .hx-reviews{ grid-template-columns:1fr; }
    .hx-col{ width:42%; } .hx-col span.ring{ width:120px; height:120px; }
}
@media (max-width:480px){
    .hx-grid{ gap:12px; }
    .hx-card h3{ font-size:18px; }
    .hx-card .hx-desc{ display:none; }
    .hx-topbar span:nth-child(n+2){ display:none; }
}

/* footer headings keep the site's gold-on-green look */
body.home footer h3{ color:#d4af37; font-family:'Poppins',sans-serif; }

/* login link: the auth script adds an avatar + name; keep the text readable on cream */
body.home header .navbar .nav-links li a#accountNavLink,
body.home header .navbar .nav-links li a#accountNavLink *{ color:var(--ink) !important; }

/* ==================================================
   V2 ADDITIONS - closer match to the approved mockup
================================================== */
.hx-topbar{ justify-content:space-between; padding:9px max(4%,calc((100% - 1200px)/2)); }
body.home{ --green:#233a2b; }

/* search box */
.hx-search{ display:flex; align-items:center; background:#f1e9d9; border-radius:22px; padding:0 4px 0 16px; width:210px; flex-shrink:1; }
.hx-search input{ border:0; background:transparent; font:14px 'Poppins',sans-serif; color:var(--ink); padding:10px 0; width:100%; outline:none; min-width:0; }
.hx-search button{ border:0; background:none; color:var(--ink); cursor:pointer; padding:8px; display:flex; }
@media (max-width:1200px){ .hx-search{ order:2; margin-left:auto; width:170px; } body.home header .navbar .menu-toggle{ order:3; } }
@media (max-width:560px){ .hx-search{ display:none; } }

/* hero slider */
.hx-hero{ position:relative; background:linear-gradient(100deg,#fbf6ec 40%,#f1e3c9); }
.hx-hero h1 em{ font-style:normal; color:var(--gold-dark); }
.hx-kicker{ letter-spacing:.12em; font-size:13px; }
.hx-hero-img{ position:relative; aspect-ratio:5/4; max-height:430px; }
.hx-slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s; pointer-events:none; }
.hx-slide.on{ opacity:1; pointer-events:auto; }
.hx-slide img{ width:100%; height:100%; max-height:none; object-fit:cover; border-radius:18px 0 0 18px; display:block; }
.hx-hero{ padding-right:0; }
.hx-btn{ letter-spacing:.06em; font-size:14px; border-radius:6px; padding:14px 30px; }
.hx-btn-dark{ background:var(--green); border-color:var(--green); }
.hx-btn-dark:hover{ background:#162a1e; border-color:#162a1e; }
.hx-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.2); }
.hx-prev{ left:12px; } .hx-next{ right:12px; }
.hx-dots{ display:flex; gap:8px; margin-top:22px; }
.hx-dots button{ width:9px; height:9px; border-radius:50%; border:1.500px solid var(--gold); background:transparent; padding:0; cursor:pointer; }
.hx-dots button.on{ background:var(--gold); }
.hx-hero-points svg{ width:38px; height:38px; }
@media (max-width:760px){ .hx-hero{ padding-right:max(4%,calc((100% - 1200px)/2)); } .hx-slide img{ border-radius:14px; } .hx-hero-img{ aspect-ratio:4/3; } }

/* section headings with icon */
.hx-head h2 svg{ vertical-align:-3px; color:var(--gold-dark); margin-right:4px; }
.hx-link{ border:0; }

/* bestseller tag */
.hx-tag{ position:absolute; top:10px; left:10px; z-index:2; background:var(--gold); color:#fff; font-size:11px; font-weight:500; padding:4px 10px; border-radius:4px; }
.hx-card .cart-btn{ letter-spacing:.06em; font-size:13px; }

/* ingredients */
.hx-ingredients{ display:grid; grid-template-columns:200px 1.2fr 1.5fr; align-items:center; gap:28px; background:#f3e8d4; border-radius:12px; overflow:hidden; padding-right:28px; }
.hx-ing-img{ height:100%; min-height:190px; }
.hx-ing-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-ing-text{ padding:26px 0; }
.hx-ing-text h2{ font-size:clamp(26px,2.8vw,34px); font-weight:600; margin:0 0 10px; line-height:1.1; }
.hx-ing-text h2 span{ color:var(--gold-dark); }
.hx-ing-text p{ font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.6; max-width:340px; }
.hx-ing-list{ display:flex; justify-content:space-around; gap:14px; }
.hx-ing-list a{ text-align:center; text-decoration:none; color:var(--ink); }
.hx-ing-list .ring{ display:block; width:76px; height:76px; border-radius:50%; overflow:hidden; margin:0 auto 8px; border:3px solid #fff; background:#fff; }
.hx-ing-list img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-ing-list b{ display:block; font:600 14px 'Poppins',sans-serif; }
.hx-ing-list small{ color:var(--muted); font-size:12px; }
@media (max-width:900px){ .hx-ingredients{ grid-template-columns:1fr; padding:0 0 24px; } .hx-ing-img{ min-height:150px; max-height:170px; } .hx-ing-text,.hx-ing-list{ padding:0 24px; } .hx-ing-text{ padding-top:6px; } }

/* gift banner + why */
.hx-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:24px; }
.hx-gift{ display:flex; align-items:center; background:#f3e8d4; border-radius:12px; overflow:hidden; }
.hx-gift img{ width:44%; align-self:stretch; object-fit:cover; display:block; }
.hx-gift div{ padding:24px; }
.hx-gift h2{ font-size:clamp(26px,2.8vw,34px); font-weight:600; margin:0 0 6px; line-height:1.1; }
.hx-gift p{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.hx-duo .hx-why-box{ border-radius:12px; background:#fff; }
.hx-duo .hx-why-box h2{ font-size:clamp(24px,2.5vw,30px); margin:0 0 14px; }
.hx-duo .hx-why-box ul{ margin:0; }
@media (max-width:900px){ .hx-duo{ grid-template-columns:1fr; } }
@media (max-width:480px){ .hx-gift{ flex-direction:column; align-items:stretch; } .hx-gift img{ width:100%; height:170px; } }

/* reviews (row cards with avatar) */
.hx-reviews{ gap:16px; }
.hx-review{ flex-direction:row; align-items:flex-start; gap:14px; background:#fbf1de; box-shadow:none; }
.hx-avatar{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font:600 18px 'Poppins',sans-serif; }
.hx-review b{ display:block; }
.hx-review p{ margin:6px 0 0; font-size:13.500px; }
.hx-reviews + .hx-msg{ display:none; }

/* newsletter */
.hx-news{ margin-top:48px; background:#f3e8d4; padding:18px 4%; text-align:center; }
.hx-news form{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.hx-news-title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-weight:600; }
.hx-news-sub{ font-size:13px; color:var(--muted); }
.hx-news input{ border:1px solid var(--line); background:#fff; padding:12px 16px; border-radius:6px 0 0 6px; min-width:260px; font:14px 'Poppins',sans-serif; }
.hx-news button{ background:var(--gold); color:#fff; border:0; padding:13px 26px; border-radius:0 6px 6px 0; font:500 13px 'Poppins',sans-serif; letter-spacing:.08em; cursor:pointer; margin-left:-14px; }
.hx-news button:hover{ background:var(--gold-dark); }
#newsMsg{ margin:8px 0 0; font-size:13px; min-height:18px; }
#newsMsg.ok{ color:#2e6b3e; } #newsMsg.err{ color:#b03a2e; }
@media (max-width:640px){ .hx-news input{ min-width:0; width:62%; } .hx-news-sub{ display:block; width:100%; } }

/* footer (homepage) */
footer.hx-foot{ background:var(--green); margin-top:0; color:#e9e0cd; }
.hx-foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.5fr 1fr; gap:36px; width:92%; max-width:1200px; margin:0 auto; padding:48px 0 34px; }
.hx-foot-brand img{ width:170px; height:auto; display:block; margin-bottom:12px; }
.hx-foot-brand p{ font-size:14px; margin:0; color:#cfc6b0; }
.hx-foot-grid h3{ font:600 15px 'Poppins',sans-serif !important; color:#fff !important; margin:0 0 14px; }
.hx-foot-grid a{ display:block; color:#d8cfba; font-size:13.500px; text-decoration:none; margin-bottom:9px; }
.hx-foot-grid a:hover{ color:#e0b765; }
.hx-foot-grid p{ display:flex; gap:10px; align-items:flex-start; font-size:13.500px; line-height:1.6; margin:0 0 10px; color:#d8cfba; }
.hx-foot-grid p a{ display:inline; margin:0; }
.hx-foot-grid .fi{ flex-shrink:0; width:20px; text-align:center; }
.hx-pay{ display:flex; flex-wrap:wrap; gap:8px; }
.hx-pay b{ background:#fbf6ec; color:var(--green); font-size:12px; padding:6px 12px; border-radius:5px; }
.hx-foot-bottom{ border-top:1px solid rgba(255,255,255,.14); text-align:center; font-size:12.500px; padding:16px; color:#bdb49f; }
.hx-foot-bottom .dev-credit{ margin-left:14px; }
.hx-foot-bottom a{ color:#e0b765; text-decoration:none; }
@media (max-width:1000px){ .hx-foot-grid{ grid-template-columns:1fr 1fr 1fr; } .hx-foot-brand{ grid-column:1/-1; } }
@media (max-width:600px){ .hx-foot-grid{ grid-template-columns:1fr 1fr; gap:26px 20px; } .hx-foot-bottom .dev-credit{ display:block; margin:6px 0 0; } }

/* ==================================================
   V3 - image slots, full-width hero, rating/price, review slider
================================================== */
.hx-slot{ position:relative; display:block; overflow:hidden; background:repeating-linear-gradient(45deg,#f1e6d0,#f1e6d0 10px,#f6eddb 10px,#f6eddb 20px); border:1.500px dashed #c9b48a; }
.hx-slot::after{ content:"Upload: " attr(data-slot); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; font:500 12px 'Poppins',sans-serif; color:#8a7650; }
.hx-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; border-radius:0 !important; }
.hx-slot:has(img)::after{ display:none; }
.hx-slot:has(img){ border:0; }
.ring.hx-slot::after{ font-size:9px; content:attr(data-slot); }

/* hero: photo fills the whole banner, text sits on a soft fade */
.hx-hero{ display:block; padding:0; min-height:470px; overflow:hidden; background:var(--cream); }
.hx-hero-img{ position:absolute; inset:0; aspect-ratio:auto; max-height:none; }
.hx-hero-img::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,var(--cream) 0%,rgba(251,246,236,.92) 28%,rgba(251,246,236,0) 62%); }
.hx-slide{ border-radius:0; }
.hx-slide img{ border-radius:0 !important; }
.hx-hero-text{ position:relative; z-index:3; width:92%; max-width:1200px; margin:0 auto; padding:clamp(40px,6vw,76px) 0; box-sizing:border-box; }
.hx-hero-text > *{ max-width:470px; }
.hx-arrow{ z-index:4; }
@media (max-width:760px){
    .hx-hero{ min-height:0; }
    .hx-hero-img{ position:relative; height:230px; }
    .hx-hero-img::after{ display:none; }
    .hx-hero-text{ padding:26px 0 34px; }
    .hx-arrow{ top:115px; }
}

/* ingredient / gift / why image slots */
.hx-ing-img{ border:0; border-radius:0; }
.hx-ing-list .ring.hx-slot{ border-radius:50%; border:1.500px dashed #c9b48a; }
.hx-ing-list .ring.hx-slot:has(img){ border:3px solid #fff; }
.hx-gift .hx-gift-img{ width:44%; align-self:stretch; min-height:190px; flex-shrink:0; }
.hx-gift .hx-gift-img img{ position:absolute; }
.hx-duo .hx-why-box{ position:relative; padding-right:44%; }
.hx-why-pic{ position:absolute; top:0; right:0; bottom:0; width:40%; border-radius:0 12px 12px 0; }
@media (max-width:900px){ .hx-duo .hx-why-box{ padding-right:clamp(28px,4vw,52px); padding-bottom:220px; } .hx-why-pic{ top:auto; left:0; right:0; width:auto; height:190px; border-radius:0 0 12px 12px; } }
@media (max-width:480px){ .hx-gift .hx-gift-img{ width:100%; height:170px; min-height:0; } }

/* product rating + old price */
.hx-rate{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.hx-rate .hx-stars{ font-size:13px; letter-spacing:1px; }
.hx-card .hx-price s{ color:#a89a82; font-size:13px; font-weight:400; margin-left:4px; }
.hx-card .hx-price em{ font-style:normal; font-size:11px; font-weight:600; color:#2e6b3e; background:#e3f1e3; padding:3px 7px; border-radius:4px; margin-left:4px; vertical-align:2px; }

/* reviews slider */
.hx-rev-wrap{ position:relative; }
.hx-reviews{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.hx-reviews::-webkit-scrollbar{ display:none; }
.hx-reviews .hx-review{ flex:0 0 calc((100% - 32px)/3); scroll-snap-align:start; box-sizing:border-box; }
.hx-reviews .hx-msg{ flex:1; }
.hx-rev-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:34px; height:34px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; box-shadow:0 1px 8px rgba(0,0,0,.2); }
#revPrev{ left:-12px; } #revNext{ right:-12px; }
@media (max-width:1000px){ .hx-reviews .hx-review{ flex-basis:calc((100% - 16px)/2); } }
@media (max-width:640px){ .hx-reviews .hx-review{ flex-basis:100%; } #revPrev{ left:-6px; } #revNext{ right:-6px; } }

.hx-slide.hx-slot{ position:absolute; }
.ring.hx-slot::after{ content:"Upload: " attr(data-slot); font-size:8px; line-height:1.2; word-break:break-all; padding:6px; }

/* collections: fixed 5 tiles with image slots */
.hx-col span.ring.hx-slot{ border:1.500px dashed #c9b48a; }
.hx-col span.ring.hx-slot:has(img){ border:3px solid #fff; }
.hx-col span.ring.hx-slot::after{ font-size:9px; line-height:1.2; word-break:break-all; padding:12px; }
.hx-col small{ display:block; margin-top:2px; }

/* banner photos: keep the soaps in view */
.hx-slide:nth-child(1) img{ object-position:right center; }
.hx-slide:nth-child(2) img{ object-position:center center; }
@media (max-width:760px){ .hx-slide:nth-child(1) img{ object-position:78% center; } }

/* hero sizing: shorter banner so the photo is not over-zoomed */
.hx-hero h1{ font-size:clamp(40px,5vw,64px); max-width:700px; margin-bottom:14px; }
.hx-hero-text{ padding:clamp(30px,3.6vw,48px) 0; }
.hx-hero-text > h1{ max-width:700px; }
.hx-lead{ margin-bottom:22px; }
.hx-hero-points{ margin-top:26px; }
.hx-dots{ position:absolute; left:0; bottom:16px; margin:0; }
.hx-hero-text{ padding-bottom:58px; }
.hx-hero-img::after{ background:linear-gradient(90deg,rgba(251,246,236,.96) 0%,rgba(251,246,236,.82) 24%,rgba(251,246,236,0) 50%); }
@media (max-width:760px){ .hx-dots{ position:static; margin-top:18px; } .hx-hero-text{ padding-bottom:30px; } }

@media (max-width:760px){
    .hx-hero{ display:flex; flex-direction:column; }
    .hx-hero-img{ order:-1; }
}

@media (max-width:760px){
    .hx-hero{ align-items:stretch; }
    .hx-hero-img{ align-self:stretch; width:100%; }
}

/* === Ingredients section: matches approved mockup === */
.hx-ingredients{ grid-template-columns:300px minmax(240px,1fr) 1.5fr; gap:0; background:#faf4ec; border:1px solid #f0e6d6; border-radius:12px; padding-right:24px; min-height:140px; }
.hx-ingredients .hx-ing-img{ position:relative; min-height:140px; height:100%; -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%); mask-image:linear-gradient(to right,#000 62%,transparent 100%); }
.hx-ingredients .hx-ing-img img{ object-position:left center; }
.hx-ingredients .hx-ing-text{ padding:22px 12px 22px 0; margin-left:-30px; position:relative; z-index:1; }
.hx-ingredients .hx-ing-text h2{ font-size:clamp(24px,2.6vw,32px); }
.hx-ingredients .hx-ing-text h2 span{ color:var(--green); }
.hx-ingredients .hx-btn-dark{ background:#6b4a30; border-radius:999px; padding:10px 22px; font-size:12px; letter-spacing:.04em; }
.hx-ingredients .hx-ing-list{ justify-content:space-between; gap:10px; }
.hx-ingredients .hx-ing-list .ring{ width:68px; height:68px; background:#f3e8d4; border:0; display:flex; align-items:center; justify-content:center; }
.hx-ingredients .hx-ing-list .ring svg{ width:40px; height:40px; }
.hx-ingredients .hx-ing-list b{ font-size:12.5px; font-weight:600; }
.hx-ingredients .hx-ing-list small{ font-size:11px; }
@media (max-width:900px){ .hx-ingredients{ grid-template-columns:1fr; padding:0 0 22px; } .hx-ingredients .hx-ing-img{ -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%); mask-image:linear-gradient(to bottom,#000 70%,transparent 100%); max-height:170px; } .hx-ingredients .hx-ing-text{ margin-left:0; padding:0 24px; } .hx-ingredients .hx-ing-list{ padding:16px 24px 0; flex-wrap:wrap; } }
.hx-ingredients .hx-ing-list .ring svg{ width:54px; height:54px; flex:none; }
.hx-ingredients .hx-btn-dark{ border:0; }
@media (max-width:900px){ .hx-ingredients .hx-ing-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .hx-ingredients .hx-ing-list .ring{ width:58px; height:58px; } .hx-ingredients .hx-ing-list .ring svg{ width:42px; height:42px; } .hx-ingredients .hx-ing-list small{ display:none; } }

/* === Combos + Why Choose: matches approved mockup === */
.hx-duo{ gap:18px; }
.hx-duo .hx-gift{ position:relative; display:block; min-height:200px; background:linear-gradient(100deg,#e6cfa8 0%,#f0e0c4 55%,#f5ead6 100%); border-radius:12px; overflow:hidden; box-shadow:0 2px 14px rgba(90,60,20,.07); }
.hx-duo .hx-gift .hx-gift-text{ position:relative; z-index:2; padding:34px 0 34px 34px; width:52%; }
.hx-duo .hx-gift h2{ font-size:clamp(26px,2.7vw,34px); font-weight:500; color:#4a3524; margin:0 0 8px; line-height:1.1; }
.hx-duo .hx-gift p{ font-size:16px; color:#5a4633; margin:0 0 24px; }
.hx-combo-btn{ background:linear-gradient(180deg,#b88a3e,#9a6d2a); color:#fff; border:0; border-radius:999px; padding:12px 26px; font-size:13px; letter-spacing:.03em; display:inline-block; text-decoration:none; }
.hx-duo .hx-gift .hx-gift-img{ position:absolute; top:0; right:0; bottom:0; width:58%; min-height:0; border:0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%); mask-image:linear-gradient(to right,transparent 0,#000 30%); }
.hx-duo .hx-gift .hx-gift-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hx-duo .hx-why-box{ background:linear-gradient(100deg,#fff 0%,#fbf7f0 100%); border-radius:12px; padding:30px 44% 30px 30px; }
.hx-duo .hx-why-box h2{ font-size:clamp(22px,2.3vw,28px); font-weight:500; margin:0 0 16px; }
.hx-duo .hx-why-box ul{ gap:10px; }
.hx-duo .hx-why-box li{ padding-left:30px; font-size:14px; }
.hx-duo .hx-why-box li::before{ left:0; top:1px; width:20px; height:20px; border:0; border-radius:50%; background:#b07f33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; transform:none; }
.hx-duo .hx-why-pic{ width:42%; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 35%); mask-image:linear-gradient(to right,transparent 0,#000 35%); }
@media (max-width:900px){
  .hx-duo{ grid-template-columns:1fr; }
  .hx-duo .hx-gift .hx-gift-text{ width:60%; padding:26px 0 26px 24px; }
  .hx-duo .hx-why-box{ padding:26px 24px 210px; }
  .hx-duo .hx-why-pic{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 35%); mask-image:linear-gradient(to bottom,transparent 0,#000 35%); }
}
@media (max-width:480px){
  .hx-duo .hx-gift{ min-height:0; padding-bottom:170px; }
  .hx-duo .hx-gift .hx-gift-text{ width:100%; padding:24px; }
  .hx-duo .hx-gift .hx-gift-img{ top:auto; left:0; width:100%; height:170px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 35%); mask-image:linear-gradient(to bottom,transparent 0,#000 35%); }
}
.hx-duo .hx-gift h2{ font-size:clamp(24px,2.3vw,32px); white-space:nowrap; }
.hx-duo .hx-gift .hx-gift-text{ width:56%; }
@media (max-width:900px){ .hx-duo .hx-why-pic{ left:0; right:0; width:auto; } }
@media (max-width:480px){ .hx-duo .hx-gift .hx-gift-text{ width:100%; } .hx-duo .hx-gift h2{ white-space:normal; } .hx-combo-btn{ white-space:nowrap; } }
.hx-ingredients .hx-ing-list .ring{ background:#fff; border:3px solid #fff; box-shadow:0 1px 6px rgba(90,60,20,.12); overflow:hidden; display:block; }
.hx-ingredients .hx-ing-list .ring img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-ingredients .hx-ing-list .ring{ width:125px; height:125px; margin-bottom:10px; }
.hx-ingredients .hx-ing-list b{ font-size:14px; }
.hx-ingredients .hx-ing-list small{ font-size:12px; }
@media (max-width:900px){ .hx-ingredients .hx-ing-list .ring{ width:76px; height:76px; margin-bottom:8px; } .hx-ingredients .hx-ing-list b{ font-size:12.5px; } }