/* HERBIX storefront – full takeover of the Sanitayaki chrome on HERBIX pages */
body.hx-mode{--ink:#1c2b33;--cream:#f6f2e9;--bg:#fcfbf8;--line:#e7e2d6;--muted:#6b7378;--green:#1f9d63;--r:2rem;background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;font-size:16px}
body.hx-mode .sanitayaki-header,body.hx-mode .mobile-bottom-nav,body.hx-mode .sanitayaki-footer{display:none!important}
.hx-page{overflow:hidden}
.hx-page h1,.hx-page h2,.hx-page h3,.hx-logo{font-family:"Playfair Display",serif;margin:0;letter-spacing:0}
.hx-wrap{width:min(100% - 40px,1180px);margin-inline:auto}
.hx-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
/* promo + header */
.hx-promo{background:var(--ink);color:#fff;text-align:center;font-size:12px;font-weight:500;padding:8px 12px}
.hx-header{position:sticky;top:0;z-index:40;background:rgba(252,251,248,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hx-header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;height:64px}
.hx-logo{font-size:26px;font-weight:700;letter-spacing:.06em!important;color:var(--ink)}
.hx-nav{display:flex;justify-content:center;gap:28px;font-size:14px;font-weight:500}
.hx-nav a{color:var(--muted);transition:color .2s}.hx-nav a:hover{color:var(--ink)}
.hx-nav .hx-back{color:var(--green);font-weight:600}
.hx-cart{position:relative;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.hx-cart:hover{background:var(--cream)}.hx-cart i,.hx-cart svg{width:21px;height:21px}
/* buttons */
.hx-btn-main,.hx-btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:600;transition:all .2s;cursor:pointer}
.hx-btn-main{background:var(--green);color:#fff;border:1px solid var(--green)}.hx-btn-main:hover{filter:brightness(.9);transform:translateY(-1px)}
.hx-btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}.hx-btn-line:hover{background:var(--ink);color:#fff}
/* hero */
.hx-hero{background:radial-gradient(1200px 500px at 85% 0%,#e9f4ec,transparent 60%),var(--bg)}
.hx-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:72px 0}
.hx-hero h1{margin-top:16px;font-size:clamp(42px,6vw,76px);font-weight:600;line-height:1.05}
.hx-hero h1 em{color:var(--green);font-style:italic}
.hx-lead{max-width:440px;margin:24px 0 0;font-size:18px;line-height:1.65;color:var(--muted)}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hx-bars{display:flex;gap:6px;margin-top:32px}.hx-bars i{display:block;width:40px;height:6px;border-radius:99px}
.hx-hero-img{overflow:hidden;border-radius:var(--r);box-shadow:0 30px 60px -20px rgba(28,43,51,.35)}
.hx-hero-img img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
/* benefits */
.hx-benefits{background:var(--cream);border-block:1px solid var(--line)}
.hx-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0}
.hx-benefits-grid>div{display:flex;align-items:center;gap:12px}
.hx-benefits-grid span{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hx-benefits-grid i,.hx-benefits-grid svg{width:20px;height:20px}
.hx-benefits-grid b{display:block;font-size:15px}.hx-benefits-grid small{color:var(--muted);font-size:12px}
/* products */
.hx-products{padding:80px 0 20px}
.hx-sec-head h2,.hx-how h2,.hx-faq h2{margin-top:8px;font-size:clamp(30px,4vw,44px);font-weight:600;line-height:1.15}
.hx-sec-head{margin-bottom:40px}
.hx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hx-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:1.5rem;background:#fff;box-shadow:0 2px 10px rgba(28,43,51,.05);transition:box-shadow .25s,transform .25s}
.hx-card:hover{box-shadow:0 22px 40px -18px rgba(28,43,51,.28);transform:translateY(-4px)}
.hx-card-img{position:relative;aspect-ratio:1/1;background:#f3f1ea;overflow:hidden}
.hx-card-img img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hx-card.is-set .hx-card-img img{object-fit:contain;object-position:center}
.hx-badge{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:99px;background:#e0481f;color:#fff;font-size:11px;font-weight:700}
.hx-card-body{display:flex;flex:1;flex-direction:column;padding:24px;border-top:4px solid var(--c)}
.hx-card-tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.hx-card h3{margin-top:8px;font-size:24px;font-weight:600}
.hx-card-notes{margin-top:4px;font-size:13px;font-weight:600;color:var(--c)}
.hx-card p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.hx-card-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px}
.hx-price{font-size:24px;font-weight:700}.hx-price del{margin-right:6px;font-size:14px;font-weight:400;color:var(--muted)}.hx-price ins{text-decoration:none}
.hx-price em{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:99px;background:#e8f6ee;color:#16794b;font-size:12px;font-style:normal;font-weight:700;vertical-align:middle}
.hx-card .hx-btn-main{background:var(--c);border-color:var(--c)}
.hx-buy-now{text-align:center;font-size:13px;font-weight:600;color:var(--ink)}.hx-buy-now:hover{color:var(--c)}
/* how */
.hx-how{margin-top:80px;background:var(--cream);padding:80px 0}
.hx-how-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hx-how-grid>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:0 10px 30px rgba(28,43,51,.12)}
.hx-steps{display:grid;gap:32px;margin-top:40px}.hx-steps>div{display:flex;gap:20px}
.hx-steps b{font-family:"Playfair Display",serif;font-size:32px;font-weight:500;color:var(--green)}
.hx-steps h3{font-size:21px;font-weight:600}.hx-steps p{margin:4px 0 0;color:var(--muted)}
/* faq */
.hx-faq{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;padding:80px 0 20px}
.hx-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.hx-faq summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;font-weight:600;list-style:none}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--green)}.hx-faq details[open] summary::after{content:"–"}
.hx-faq details p{margin:10px 0 0;color:var(--muted);line-height:1.7}
/* cta */
.hx-cta-wrap{padding-top:64px}
.hx-cta{padding:56px 24px;border-radius:var(--r);background:var(--ink);color:#fff;text-align:center}
.hx-cta h2{font-size:clamp(26px,3.6vw,38px)}.hx-cta p{margin:12px auto 28px;max-width:420px;opacity:.8}
.hx-cta .hx-btn-main{background:#fff;color:var(--ink);border-color:#fff}
/* footer */
.hx-footer{margin-top:80px;background:var(--cream);border-top:1px solid var(--line);padding:56px 0 28px}
.hx-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.hx-footer p{margin:12px 0 0;font-size:14px;color:var(--muted)}
.hx-footer ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.hx-footer a:hover{text-decoration:underline}
.hx-footer .hx-disclaimer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:1.6}
/* responsive */
@media(max-width:980px){.hx-grid{grid-template-columns:repeat(2,1fr)}.hx-benefits-grid{grid-template-columns:repeat(2,1fr)}.hx-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.hx-hero-grid,.hx-how-grid,.hx-faq{grid-template-columns:1fr;gap:32px}.hx-hero-grid{padding:40px 0}.hx-nav{display:none}.hx-header-row{grid-template-columns:1fr auto}.hx-how,.hx-products,.hx-faq{padding-block:56px 12px}.hx-how{padding-bottom:56px}}
@media(max-width:560px){.hx-grid{grid-template-columns:1fr}.hx-footer-grid{grid-template-columns:1fr}}