:root{--secondary-main:#458500;--hx-brand:#458500;--hx-brand-d:#3a7000;--hx-emerald:#006030;--hx-deep:#0c2a18;
--hx-deal:#c2410c;--hx-gold:#f4b400;--hx-ink:#18210f;--hx-text:#2c3526;--hx-muted:#5d6857;--hx-line:#e4e8de;
--hx-soft:#f4f7ef;--hx-well:#f5f6f2;--hx-bg:#fff;--hx-r:14px;
--hx-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

body{margin:0;background:var(--hx-bg);color:var(--hx-text);font:15px/1.5 var(--hx-font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.hx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hx-wrap{max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:1024px){.hx-wrap{padding:0 28px}}

/* buttons */
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;background:var(--hx-brand);color:#fff;font-weight:700;font-size:15px;border:2px solid var(--hx-brand);transition:background .15s,transform .15s,box-shadow .15s;cursor:pointer;white-space:nowrap}
.hx-btn:hover{background:var(--hx-brand-d);border-color:var(--hx-brand-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(69,133,0,.25)}
.hx-btn--lg{min-height:50px;padding:0 28px;font-size:16px}
.hx-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.hx-btn--ghost:hover{background:#fff;color:var(--hx-ink);border-color:#fff}
.hx-btn--outline{background:#fff;color:var(--hx-brand);border-color:var(--hx-brand)}
.hx-btn--outline:hover{background:var(--hx-brand);color:#fff}
.hx-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;color:var(--hx-ink);cursor:pointer}
.hx-icon-btn:hover{background:var(--hx-soft)}

/* notice */
.hx-notice{background:var(--hx-emerald);color:#fff;font-size:13px}
.hx-notice__in{display:flex;justify-content:center;gap:28px;padding-top:8px;padding-bottom:8px;text-align:center}
.hx-notice__in span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hx-notice__in b{color:#ffd76a}
.hx-notice__in span:not(.hx-notice__mid){display:none}
@media(min-width:768px){.hx-notice__in span:not(.hx-notice__mid){display:inline-flex}.hx-notice__in{justify-content:space-between}}

/* header */
.hx-header{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 1px 0 var(--hx-line)}
.hx-header__row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"burger logo actions" "search search search";align-items:center;column-gap:6px;row-gap:8px;padding-top:8px;padding-bottom:10px}
.hx-header__burger{grid-area:burger;margin-left:-8px}
.hx-logo{grid-area:logo}
.hx-logo img{height:34px;width:auto}
.hx-search{grid-area:search;display:flex;align-items:center;height:46px;border:2px solid var(--hx-brand);border-radius:999px;overflow:hidden;background:#fff}
.hx-search input{flex:1;min-width:0;border:0;outline:0;padding:0 16px;font-size:15px;background:transparent;color:var(--hx-ink)}
.hx-search input::placeholder{color:#8a9384}
.hx-search button{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 16px;border:0;background:var(--hx-brand);color:#fff;font-weight:700;cursor:pointer}
.hx-search button span{display:none}
.hx-search:focus-within{box-shadow:0 0 0 4px rgba(69,133,0,.16)}
.hx-actions{grid-area:actions;display:flex;align-items:center;gap:2px}
.hx-action{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:44px;height:44px;justify-content:center;border-radius:12px;color:var(--hx-ink);padding:0 6px}
.hx-action:hover{background:var(--hx-soft)}
.hx-action span small{display:block;font-size:11px;color:var(--hx-muted);line-height:1.1}
.hx-action span b{font-size:14px;line-height:1.2}
.hx-action--acc span,.hx-action__lbl{display:none}
.hx-action--cart i{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hx-deal);color:#fff;font:700 11px/18px var(--hx-font);font-style:normal;text-align:center}
.hx-navbar{display:none;border-top:1px solid var(--hx-line)}
@media(min-width:1024px){
 .hx-header__row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search actions";column-gap:28px;padding-top:12px;padding-bottom:12px}
 .hx-header__burger{display:none}
 .hx-logo img{height:44px}
 .hx-search{height:50px;max-width:760px;width:100%;justify-self:center}
 .hx-search button{padding:0 22px}
 .hx-search button span{display:inline}
 .hx-action--acc span{display:block}
 .hx-action{padding:0 10px}
 .hx-navbar{display:block}
}
.hx-navbar__in{display:flex;align-items:center;gap:6px;height:48px}
.hx-allcats{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--hx-soft);color:var(--hx-emerald);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.hx-nav{display:flex;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.hx-nav__link{display:flex;align-items:center;height:48px;padding:0 12px;font-size:14px;font-weight:600;color:var(--hx-ink);white-space:nowrap;border-bottom:3px solid transparent}
.hx-nav__item:hover .hx-nav__link,.hx-nav__item:focus-within .hx-nav__link{color:var(--hx-brand);border-bottom-color:var(--hx-brand)}
.hx-nav__deals{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--hx-deal);white-space:nowrap}
.hx-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--hx-line);box-shadow:0 24px 40px -12px rgba(16,30,8,.18);padding:24px 0 22px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.hx-nav__item:hover .hx-mega,.hx-nav__item:focus-within .hx-mega{opacity:1;visibility:visible;transform:none}
.hx-mega__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 28px}
.hx-mega__col a{display:block;font-size:14px;color:var(--hx-muted);padding:3px 0}
.hx-mega__col a:hover{color:var(--hx-brand)}
.hx-mega__col .hx-mega__cat{font-weight:700;color:var(--hx-ink);margin-bottom:4px}
.hx-mega__all{display:inline-flex;align-items:center;gap:4px;margin-top:18px;font-weight:700;color:var(--hx-brand);font-size:14px}

/* drawer */
.hx-drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.hx-drawer.is-open{visibility:visible}
.hx-drawer__scrim{position:absolute;inset:0;background:rgba(10,20,6,.45);opacity:0;transition:opacity .2s}
.hx-drawer.is-open .hx-drawer__scrim{opacity:1}
.hx-drawer__panel{position:absolute;inset:0 auto 0 0;width:min(86%,360px);background:#fff;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease}
.hx-drawer.is-open .hx-drawer__panel{transform:none}
.hx-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 12px 18px;border-bottom:1px solid var(--hx-line)}
.hx-drawer__head img{height:30px;width:auto}
.hx-drawer__deal{display:flex;align-items:center;gap:8px;margin:12px 16px;padding:12px 14px;border-radius:12px;background:#fff3ec;color:var(--hx-deal);font-weight:700}
.hx-drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.hx-drawer summary::-webkit-details-marker{display:none}
.hx-dr__top>summary{padding:14px 18px;font-weight:700;color:var(--hx-ink);border-bottom:1px solid var(--hx-line)}
.hx-dr__top[open]>summary svg,.hx-dr__sub[open]>summary svg{transform:rotate(180deg)}
.hx-dr__sub>summary{padding:11px 18px 11px 28px;font-size:14px;font-weight:600;background:var(--hx-soft)}
.hx-dr__sub a{display:block;padding:8px 18px 8px 40px;font-size:14px;color:var(--hx-muted)}
.hx-dr__sub .hx-dr__all{color:var(--hx-brand);font-weight:700}
.hx-drawer__foot{display:grid;gap:2px;padding:14px 18px 28px}
.hx-drawer__foot a{padding:8px 0;color:var(--hx-muted);font-size:14px}

/* sections */
.hx-sec{padding:28px 0}
.hx-sec--tight{padding:20px 0}
.hx-sec--soft{background:var(--hx-soft)}
@media(min-width:1024px){.hx-sec{padding:44px 0}.hx-sec--tight{padding:28px 0}}
.hx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.hx-h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--hx-ink);font-weight:800}
@media(min-width:1024px){.hx-h2{font-size:26px}}
.hx-sub{margin:4px 0 0;color:var(--hx-muted);font-size:14px}
.hx-viewall{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:14px;color:var(--hx-brand);white-space:nowrap}
.hx-viewall:hover{text-decoration:underline}

/* hero (StoreBanner) */
.hx-hero{position:relative;background:#111;overflow:hidden}
.hx-hero__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.hx-hero__track::-webkit-scrollbar{display:none}
.hx-hero__slide{position:relative;flex:0 0 100%;scroll-snap-align:start}
.hx-hero__slide img{width:100%;height:auto;aspect-ratio:9/10;object-fit:cover}
.hx-hero__copy .hx-wrap{width:100%}
.hx-hero__copy{position:absolute;inset:auto 0 0 0;padding:110px 0 54px;background:linear-gradient(180deg,rgba(8,12,6,0) 0%,rgba(8,12,6,.62) 45%,rgba(8,12,6,.86) 100%);color:#fff}
.hx-hero__eyebrow{display:inline-block;margin:0 0 10px;padding:5px 12px;border-radius:999px;background:var(--hx-gold);color:#2a1d00;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hx-hero__h{margin:0;font-size:32px;line-height:1.06;letter-spacing:-.02em;font-weight:800}
.hx-hero__p{margin:10px 0 0;font-size:15px;max-width:34ch;opacity:.92}
.hx-hero__hook{margin:8px 0 0;font-weight:700;font-size:15px;color:#ffd76a}
.hx-hero__ctas{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.hx-hero__ctas .hx-btn--ghost{display:none}
@media(max-width:767px){.hx-hero__p{display:none}.hx-hero__copy{padding-top:90px}}
.hx-hero__arrow{display:none}
.hx-hero__dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px}
.hx-hero__dot{width:8px;height:8px;padding:0;border-radius:4px;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:width .2s}
.hx-hero__dot.is-on{width:24px;background:#fff}
@media(min-width:768px){
 .hx-hero__slide img{aspect-ratio:1920/760}
 .hx-hero__copy{inset:0;display:flex;align-items:center;padding:0;background:linear-gradient(90deg,rgba(8,12,6,.78) 0%,rgba(8,12,6,.45) 38%,rgba(8,12,6,0) 62%)}
 .hx-hero__slide--light .hx-hero__copy{background:linear-gradient(90deg,rgba(250,252,246,.92) 0%,rgba(250,252,246,.6) 36%,rgba(250,252,246,0) 58%);color:var(--hx-ink)}
 .hx-hero__slide--light .hx-hero__hook{color:var(--hx-brand)}
 .hx-hero__slide--light .hx-btn--ghost{color:var(--hx-ink);border-color:var(--hx-ink)}
 .hx-hero__slide--light .hx-btn--ghost:hover{background:var(--hx-ink);color:#fff}
 .hx-hero__h{font-size:44px;max-width:12ch}
 .hx-hero__p{font-size:17px}
 .hx-hero__ctas .hx-btn--ghost{display:inline-flex}
}
@media(min-width:768px) and (max-width:1023px){
 .hx-hero__h{font-size:34px;max-width:14ch}
 .hx-hero__p{font-size:15px;max-width:30ch}
 .hx-hero__hook{font-size:14px}
 .hx-hero__ctas{margin-top:12px}
 .hx-hero__ctas .hx-btn--lg{min-height:44px;padding:0 20px;font-size:15px}
 .hx-hero__dots{bottom:10px}
 .hx-grid>:nth-child(10){display:none}
}
@media(min-width:1024px){
 .hx-hero__h{font-size:58px}
 .hx-hero__p{font-size:19px;max-width:36ch}
 .hx-hero__hook{font-size:17px}
 .hx-hero__arrow{display:grid;place-items:center;position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--hx-ink);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
 .hx-hero__arrow--prev{left:18px}.hx-hero__arrow--next{right:18px}
}

/* categories */
.hx-cats{list-style:none;margin:0;padding:2px 0 6px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:84px;gap:14px 12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.hx-cats::-webkit-scrollbar{display:none}
.hx-cat{scroll-snap-align:start}
.hx-cat a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hx-cat__img{width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--hx-well);box-shadow:0 0 0 1px var(--hx-line);transition:transform .2s,box-shadow .2s}
.hx-cat__img img{width:100%;height:100%;object-fit:cover}
.hx-cat__img--icon{display:grid;place-items:center;color:var(--hx-emerald);background:linear-gradient(140deg,#eef5e3,#dcebc8)}
.hx-cat a:hover .hx-cat__img{transform:translateY(-3px);box-shadow:0 0 0 2px var(--hx-brand),0 10px 18px -8px rgba(0,60,20,.35)}
.hx-cat__label{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--hx-ink)}
@media(min-width:768px){.hx-cats{grid-template-rows:auto;grid-auto-columns:104px}.hx-cat__img{width:92px;height:92px}}
@media(min-width:1280px){.hx-cats{grid-auto-flow:row;grid-template-columns:repeat(12,minmax(0,1fr));overflow:visible;gap:14px 10px}.hx-cat__img{width:100%;max-width:96px;height:auto;aspect-ratio:1}.hx-cat__label{font-size:13.5px}}

/* product card (easy-checkout TWO_CARD render) */
.hx-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hx-line);border-radius:var(--hx-r);overflow:hidden;transition:box-shadow .2s,transform .2s}
.hx-card:hover{box-shadow:0 14px 30px -14px rgba(16,40,8,.28);transform:translateY(-2px)}
.hx-card__media{position:relative;display:block;aspect-ratio:1;background:var(--hx-well);overflow:hidden}
.hx-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.hx-card__media.is-white img{mix-blend-mode:multiply;object-fit:contain;padding:6%}
.hx-card:hover .hx-card__media img{transform:scale(1.04)}
.hx-card__off{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:6px;background:var(--hx-deal);color:#fff;font-size:12px;font-weight:800}
.hx-card__badge{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.94);color:var(--hx-emerald);font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hx-card__wish{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:#4b5546;box-shadow:0 2px 6px rgba(0,0,0,.12);cursor:pointer}
.hx-card__wish:hover{color:var(--hx-deal)}
.hx-card__wish[aria-pressed=true]{color:#e0245e}
.hx-card__wish[aria-pressed=true] svg{fill:currentColor}
.hx-card__body{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;flex:1}
.hx-card__name{font-size:14px;line-height:1.35;color:var(--hx-ink);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.hx-card__name:hover{color:var(--hx-brand)}
.hx-card__meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hx-muted)}
.hx-rate{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:5px;background:#eef6e4;color:var(--hx-emerald);font-size:12px}
.hx-rate svg{color:#e7a500}
.hx-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;margin-top:auto}
.hx-card__price b{font-size:17px;color:var(--hx-ink);font-weight:800}
.hx-card__price s{font-size:13px;color:#8b9486}
.hx-card__price em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--hx-deal)}
.hx-card__add{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;margin-top:6px;border:0;border-radius:10px;background:var(--hx-brand);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s}
.hx-card__add:hover{background:var(--hx-brand-d)}
.hx-card__add.is-added{background:var(--hx-emerald)}

/* rail */
.hx-rail{position:relative}
.hx-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/2.15);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 10px;scroll-behavior:smooth}
.hx-rail__track::-webkit-scrollbar{display:none}
.hx-rail__track>*{scroll-snap-align:start}
.hx-rail__btn{display:none}
@media(min-width:640px){.hx-rail__track{grid-auto-columns:calc((100% - 24px)/3.2)}}
@media(min-width:1024px){
 .hx-rail__track{grid-auto-columns:calc((100% - 64px)/5);gap:16px}
 .hx-rail__btn{display:grid;place-items:center;position:absolute;top:34%;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--hx-line);background:#fff;color:var(--hx-ink);box-shadow:0 6px 16px rgba(0,0,0,.12);cursor:pointer}
 .hx-rail__btn--prev{left:-14px}.hx-rail__btn--next{right:-14px}
 .hx-rail__btn:hover{color:var(--hx-brand)}
}
.hx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:768px){.hx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){.hx-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hx-more{display:flex;justify-content:center;margin-top:22px}

/* feature cards (LargeCollectionCard) */
.hx-feats{display:grid;gap:12px}
@media(min-width:768px){.hx-feats{grid-template-columns:1fr 1fr;gap:18px}}
.hx-feat{position:relative;display:block;border-radius:18px;overflow:hidden;background:#0b1220;isolation:isolate}
.hx-feat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.hx-feat:hover img{transform:scale(1.04)}
.hx-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,20,.82) 0%,rgba(5,10,20,.45) 45%,rgba(5,10,20,0) 72%);z-index:0}
.hx-feat__copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 22px;color:#fff;max-width:68%}
.hx-feat__eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a6e36a}
.hx-feat__title{font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.hx-feat__sub{font-size:13.5px;opacity:.85}
.hx-feat__cta{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:10px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--hx-ink);font-weight:800;font-size:13.5px}
@media(min-width:1024px){.hx-feat__copy{padding:0 36px}.hx-feat__title{font-size:28px}.hx-feat__sub{font-size:15px}.hx-feat__cta{font-size:14.5px;padding:10px 18px}}

/* footer */
.hx-footer{background:var(--hx-deep);color:#c9d6c3;margin-top:0;padding:40px 0 22px;font-size:14px}
.hx-footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.hx-footer__brand{grid-column:1/-1}
.hx-footer__brand img{height:46px;width:auto;margin-bottom:12px}
.hx-footer__brand p{margin:0 0 14px;max-width:44ch;line-height:1.6}
.hx-footer h3{margin:0 0 10px;color:#fff;font-size:15px}
.hx-footer__h-gap{margin-top:20px!important}
.hx-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hx-footer a:hover{color:#fff}
.hx-social{display:flex;gap:10px}
.hx-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:800}
.hx-social a:hover{background:var(--hx-brand)}
.hx-footer__bottom{display:flex;flex-direction:column;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.hx-footer__bottom p{margin:0;color:#93a58b}
.hx-pays{display:flex;flex-wrap:wrap;gap:6px}
.hx-pay{padding:4px 9px;border-radius:6px;background:#fff;color:#1d2a16;font-size:11.5px;font-weight:800}
@media(min-width:1024px){
 .hx-footer{padding:56px 0 26px}
 .hx-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
 .hx-footer__brand{grid-column:auto}
 .hx-footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}

/* Humsya v2 — generated CSS for custom (Tier-B) sections.
   Uploaded to site_settings.sx_css_location (dedicated generated-CSS file,
   concatenated — no @import; keep the BEGIN/END markers). Every selector is
   namespaced under .sx so nothing leaks into the theme header/footer/cards.
   Brand green comes from the theme var --secondary-main (#458500). */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-brand: var(--secondary-main, #458500);
  --sx-brand-d: #3a7000;
  --sx-emerald: #006030;
  --sx-deep: #0c2a18;
  --sx-deal: #c2410c;
  --sx-gold: #f4b400;
  --sx-ink: #18210f;
  --sx-muted: #5d6857;
  --sx-line: #e4e8de;
  --sx-soft: #f4f7ef;
  --sx-radius: 18px;
  /* Shared content max-width for every custom (.sx-*) section. This was used
     in 5 places but never defined, so those sections had NO max-width and
     stretched full-bleed — the root cause of the mis-aligned sections. */
  --sx-max: 1320px;

  width: 100%;
  color: var(--sx-ink);
}
.sx .sx-head { margin: 0 0 16px; }
.sx .sx-h2 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--sx-ink); }
.sx .sx-sub { margin: 4px 0 0; font-size: 14px; color: var(--sx-muted); }
.sx .sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--sx-brand);
  background: var(--sx-brand); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  white-space: nowrap; transition: background .15s, transform .15s, box-shadow .15s;
}
.sx .sx-btn:hover { background: var(--sx-brand-d); border-color: var(--sx-brand-d); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(69,133,0,.25); }
.sx .sx-btn--ghost { background: #fff; color: var(--sx-brand); }
.sx .sx-btn--ghost:hover { background: var(--sx-brand); color: #fff; }
.sx .sx-btn--wa { background: #25d366; border-color: #25d366; color: #06301a; }
.sx .sx-btn--wa:hover { background: #1fbe5b; border-color: #1fbe5b; box-shadow: 0 8px 20px rgba(37,211,102,.3); }
@media (min-width: 1024px) { .sx .sx-h2 { font-size: 26px; } }
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp { background: #fff; border-bottom: 1px solid var(--sx-line); }
.sx-usp .sx-usp__list {
  list-style: none; margin: 0 auto; max-width: var(--sx-max); padding: 14px 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;
}
.sx-usp .sx-usp__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-usp .sx-usp__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: #eef6e4; color: var(--sx-emerald);
}
.sx-usp .sx-usp__t { display: block; font-size: 13.5px; line-height: 1.2; color: var(--sx-ink); }
.sx-usp .sx-usp__s { display: block; font-size: 12px; line-height: 1.3; color: var(--sx-muted); }
@media (min-width: 1024px) {
  .sx-usp .sx-usp__list { grid-template-columns: repeat(4, 1fr); padding: 18px 28px; }
  .sx-usp .sx-usp__item { justify-content: center; }
  .sx-usp .sx-usp__icon { width: 46px; height: 46px; }
  .sx-usp .sx-usp__t { font-size: 15px; }
  .sx-usp .sx-usp__s { font-size: 13px; }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:deal-1 */
.sx-deal .sx-deal__wrap { max-width: var(--sx-max); margin: 0 auto; padding: 0 16px; display: grid; gap: 16px; }
.sx-deal .sx-deal__main {
  display: grid; background: #fff; border-radius: var(--sx-radius); overflow: hidden;
  box-shadow: 0 1px 0 var(--sx-line), 0 18px 40px -24px rgba(16,40,8,.35);
}
.sx-deal .sx-deal__media { position: relative; display: block; background: #1a1410; }
.sx-deal .sx-deal__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sx-deal .sx-deal__off {
  position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; background: var(--sx-deal); color: #fff; font-size: 22px; font-weight: 900; line-height: .9;
  box-shadow: 0 8px 18px rgba(194,65,12,.35);
}
.sx-deal .sx-deal__off small { display: block; font-size: 10px; letter-spacing: .1em; font-weight: 800; }
.sx-deal .sx-deal__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sx-deal .sx-deal__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sx-deal .sx-deal__tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: #fff1e8; color: var(--sx-deal); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.sx-deal .sx-deal__timer { font-size: 13px; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.sx-deal .sx-deal__timer b {
  display: inline-block; min-width: 30px; padding: 3px 5px; margin: 0 1px; border-radius: 6px;
  background: var(--sx-ink); color: #fff; text-align: center; font-size: 14px;
}
.sx-deal .sx-deal__name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.sx-deal .sx-deal__rating { margin: 0; font-size: 13.5px; color: var(--sx-muted); }
.sx-deal .sx-stars { color: #e7a500; letter-spacing: 1px; }
.sx-deal .sx-deal__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sx-deal .sx-deal__price b { font-size: 30px; font-weight: 900; color: var(--sx-ink); }
.sx-deal .sx-deal__price s { font-size: 16px; color: #8b9486; }
.sx-deal .sx-deal__price em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--sx-deal); }
.sx-deal .sx-deal__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.sx-deal .sx-deal__perks li { display: flex; align-items: center; gap: 8px; }
.sx-deal .sx-deal__perks svg { flex: 0 0 auto; color: var(--sx-brand); }
.sx-deal .sx-deal__stock { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--sx-deal); }
.sx-deal .sx-deal__bar { display: block; height: 8px; border-radius: 4px; background: #f3e4da; overflow: hidden; }
.sx-deal .sx-deal__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f08a24, var(--sx-deal)); }
.sx-deal .sx-deal__eta { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--sx-emerald); font-weight: 600; }
.sx-deal .sx-deal__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.sx-deal .sx-deal__side { background: #fff; border-radius: var(--sx-radius); padding: 16px; box-shadow: 0 1px 0 var(--sx-line); display: grid; gap: 10px; align-content: start; }
.sx-deal .sx-deal__side-h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.sx-deal .sx-deal__side-h a { font-size: 13.5px; font-weight: 700; color: var(--sx-brand); text-decoration: none; }
.sx-deal .sx-deal__mini { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s; }
.sx-deal .sx-deal__mini:hover { background: var(--sx-soft); }
.sx-deal .sx-deal__mini img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.sx-deal .sx-deal__mini-body { display: grid; gap: 4px; min-width: 0; }
.sx-deal .sx-deal__mini-name { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-deal .sx-deal__mini-price { font-size: 12.5px; color: #8b9486; }
.sx-deal .sx-deal__mini-price b { font-size: 15px; color: var(--sx-ink); }
.sx-deal .sx-deal__mini-price em { font-style: normal; font-weight: 800; color: var(--sx-deal); }
@media (min-width: 768px) {
  .sx-deal .sx-deal__main { grid-template-columns: 1fr 1.1fr; }
  .sx-deal .sx-deal__media img { height: 100%; }
  .sx-deal .sx-deal__body { padding: 26px 28px; justify-content: center; }
}
@media (min-width: 1024px) {
  .sx-deal .sx-deal__wrap { padding: 0 28px; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 20px; }
  .sx-deal .sx-deal__name { font-size: 28px; }
  .sx-deal .sx-deal__price b { font-size: 34px; }
  .sx-deal .sx-deal__side { padding: 20px; }
}
/* END shoopy-gen:deal-1 */

/* BEGIN shoopy-gen:budget-1 */
.sx-budget { max-width: var(--sx-max); margin: 0 auto; padding: 0 16px; }
.sx-budget .sx-budget__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sx-budget .sx-budget__tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px; min-height: 148px;
  border-radius: var(--sx-radius); text-decoration: none; color: var(--sx-ink); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.sx-budget .sx-budget__tile:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -16px rgba(16,40,8,.4); }
.sx-budget .sx-budget__tile::after {
  content: ""; position: absolute; right: -28px; bottom: -28px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.sx-budget .sx-budget__tile--t1 { background: #e9f5dc; }
.sx-budget .sx-budget__tile--t2 { background: #fff1d6; }
.sx-budget .sx-budget__tile--t3 { background: #e2f1ea; }
.sx-budget .sx-budget__tile--t4 { background: var(--sx-deep); color: #fff; }
.sx-budget .sx-budget__tile--t4::after { background: rgba(255,255,255,.06); }
.sx-budget .sx-budget__k, .sx-budget .sx-budget__v, .sx-budget .sx-budget__d { position: relative; z-index: 1; }
.sx-budget .sx-budget__k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.sx-budget .sx-budget__v { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.sx-budget .sx-budget__d { font-size: 13px; line-height: 1.35; opacity: .8; }
.sx-budget .sx-budget__go {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 10px;
  font-size: 13.5px; font-weight: 800; color: var(--sx-brand);
}
.sx-budget .sx-budget__tile--t4 .sx-budget__go { color: #a6e36a; }
@media (min-width: 1024px) {
  .sx-budget { padding: 0 28px; }
  .sx-budget .sx-budget__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .sx-budget .sx-budget__tile { padding: 22px 24px; min-height: 172px; }
  .sx-budget .sx-budget__v { font-size: 40px; }
  .sx-budget .sx-budget__d { font-size: 14px; }
}
/* END shoopy-gen:budget-1 */

/* BEGIN shoopy-gen:reviews-1 */
.sx-rev .sx-rev__wrap { max-width: var(--sx-max); margin: 0 auto; padding: 0 16px; display: grid; gap: 16px; }
.sx-rev .sx-rev__summary {
  display: grid; justify-items: start; gap: 2px; padding: 20px; border-radius: var(--sx-radius);
  background: var(--sx-emerald); color: #fff;
}
.sx-rev .sx-rev__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a6e36a; }
.sx-rev .sx-rev__score { margin: 0; font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.sx-rev .sx-rev__score span { font-size: 20px; font-weight: 700; opacity: .7; }
.sx-rev .sx-rev__stars { color: #f4b400; letter-spacing: 2px; font-size: 15px; }
.sx-rev .sx-rev__stars--lg { font-size: 22px; }
.sx-rev .sx-rev__count { margin: 0; font-size: 14px; opacity: .85; }
.sx-rev .sx-rev__facts { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.sx-rev .sx-rev__facts b { display: block; font-size: 16px; }
.sx-rev .sx-rev__cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.sx-rev .sx-rev__cards::-webkit-scrollbar { display: none; }
.sx-rev .sx-rev__card {
  margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: #fff; border-radius: var(--sx-radius); box-shadow: 0 1px 0 var(--sx-line), 0 12px 28px -22px rgba(16,40,8,.4);
}
.sx-rev .sx-rev__card blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sx-ink); flex: 1; }
.sx-rev .sx-rev__card figcaption { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sx-rev .sx-rev__card figcaption img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.sx-rev .sx-rev__card small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--sx-brand); }
@media (min-width: 1024px) {
  .sx-rev .sx-rev__wrap { padding: 0 28px; grid-template-columns: 300px 1fr; gap: 20px; }
  .sx-rev .sx-rev__summary { padding: 30px 28px; align-content: center; }
  .sx-rev .sx-rev__score { font-size: 68px; }
  .sx-rev .sx-rev__cards { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 18px; }
  .sx-rev .sx-rev__card { padding: 22px; }
}
/* END shoopy-gen:reviews-1 */

/* BEGIN shoopy-gen:promise-1 */
.sx-promise {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(166,227,106,.18) 0%, rgba(166,227,106,0) 55%),
    linear-gradient(135deg, #006030 0%, #0c4a26 55%, #0c2a18 100%);
  color: #fff;
}
.sx-promise .sx-promise__wrap { max-width: var(--sx-max); margin: 0 auto; padding: 40px 16px; display: grid; gap: 22px; }
.sx-promise .sx-promise__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a6e36a; }
.sx-promise .sx-promise__h { margin: 0; font-size: 28px; line-height: 1.12; font-weight: 900; letter-spacing: -.02em; }
.sx-promise .sx-promise__h span { color: #ffd76a; }
.sx-promise .sx-promise__p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; opacity: .88; max-width: 56ch; }
.sx-promise .sx-promise__cta {
  display: grid; gap: 12px; justify-items: start; padding: 20px; border-radius: var(--sx-radius);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.sx-promise .sx-promise__ct { margin: 0; font-size: 14px; opacity: .9; }
.sx-promise .sx-promise__ct b { display: block; font-size: 18px; margin-bottom: 2px; opacity: 1; }
.sx-promise .sx-promise__fine { margin: 0; font-size: 12px; opacity: .65; }
@media (min-width: 1024px) {
  .sx-promise .sx-promise__wrap { padding: 64px 28px; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
  .sx-promise .sx-promise__h { font-size: 40px; }
  .sx-promise .sx-promise__p { font-size: 16px; }
  .sx-promise .sx-promise__cta { padding: 28px; }
}
/* END shoopy-gen:promise-1 */

/* BEGIN shoopy-gen:tweaks  (requested: shorter banner, white footer, MRP in card) */

/* 1) Banner (StoreBanner hero) - shorter height, same photo background */
.hx-hero__slide img { aspect-ratio: 4 / 3; }
@media (max-width: 767px) { .hx-hero__copy { padding-top: 44px; } }
@media (min-width: 768px) { .hx-hero__slide img { aspect-ratio: 1920 / 560; } }

/* 2) Footer - white background (dark, legible text on white) */
.hx-footer { background: #fff; color: var(--hx-text); border-top: 1px solid var(--hx-line); }
.hx-footer h3 { color: var(--hx-ink); }
.hx-footer__brand p { color: var(--hx-muted); }
.hx-footer__brand img { filter: brightness(0); } /* white wordmark -> dark so it shows on white */
.hx-footer a:hover { color: var(--hx-brand); }
.hx-social a { background: var(--hx-soft); color: var(--hx-emerald); }
.hx-social a:hover { background: var(--hx-brand); color: #fff; }
.hx-footer__bottom { border-top-color: var(--hx-line); }
.hx-footer__bottom p { color: var(--hx-muted); }
.hx-pay { background: var(--hx-soft); color: var(--hx-ink); box-shadow: inset 0 0 0 1px var(--hx-line); }

/* 3) Product box - always show MRP (strikethrough) + discount */
.hx-card__price s { display: inline !important; }
.hx-card__price em { display: inline !important; }
/* fallback if the live grid renders Shoopy's own native product card */
.product-card-mrp-price, .product-card .mrp, .product-card s { display: inline-block !important; }

/* END shoopy-gen:tweaks */

/* BEGIN shoopy-gen:section-headings
   Native theme section headings (category / collection / product sections and the
   collection page title) rendered at 18px/600 in the default system font. Restyle
   them to match the preview's .hx-h2: 21px on mobile, 26px on desktop, weight 800. */
.heading-title,
.section-heading,
.category-header,
.zcmh-title-text {
  font-family: var(--hx-font) !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--hx-ink) !important;
  text-align: left !important;
}
@media (min-width: 1024px) {
  .heading-title,
  .section-heading,
  .category-header,
  .zcmh-title-text { font-size: 26px !important; }
}
/* END shoopy-gen:section-headings */

/* BEGIN shoopy-gen:native-components
   Restyle the native theme's product cards, search bar, nav and category tiles
   to match the preview (.hx-card / .hx-search / .hx-cat look). */

/* --- Product card: bordered, rounded, like .hx-card --- */
.product-card { border: 1px solid var(--hx-line) !important; border-radius: 14px !important; overflow: hidden; background: #fff; }
.product-card:hover { box-shadow: 0 14px 30px -14px rgba(16,40,8,.28); }
.product-card-info { padding: 10px 12px 12px !important; }
.product-card-brand { font-size: 12px !important; color: var(--hx-muted) !important; font-weight: 600 !important; margin: 0 0 2px !important; }
.product-card-category { font-size: 14px !important; line-height: 1.35 !important; color: var(--hx-ink) !important; font-weight: 500 !important; }
/* price / mrp / discount */
.product-card-sale-price { font-size: 17px !important; font-weight: 800 !important; color: var(--hx-ink) !important; }
.product-card-mrp { font-size: 13px !important; color: #8b9486 !important; text-decoration: line-through !important; }
.product-card-discount-percent { font-size: 12.5px !important; font-weight: 700 !important; color: var(--hx-deal) !important; background: transparent !important; }
/* Add-to-cart: full-width green button like preview */
.product-card-add-wrapper { width: 100%; }
.product-card-add-to-bag,
.product-card-add-wrapper .product-card-btn {
  width: 100% !important; min-height: 40px !important; border: 0 !important; border-radius: 10px !important;
  background: var(--hx-brand) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important;
}

/* --- Search bar: green-bordered pill like .hx-search --- */
.search-box { border: 2px solid var(--hx-brand) !important; border-radius: 999px !important; overflow: hidden; background: #fff !important; }
.search-field .MuiInput-underline:before,
.search-field .MuiInput-underline:after { display: none !important; }
.search-btn:not(.search-btn-hidden) { background: var(--hx-brand) !important; color: #fff !important; }

/* --- Top nav links --- */
.desktop-nav .nav-link { color: var(--hx-ink) !important; font-weight: 600 !important; }
.desktop-nav .nav-link:hover { color: var(--hx-brand) !important; }

/* --- Category tiles: circular images like preview .hx-cat, left-aligned, denser row --- */
.cat-card-img-container { aspect-ratio: 1 !important; border-radius: 50% !important; max-width: 150px !important; margin: 0 auto !important; overflow: hidden !important; }
.cat-card-no-img-container,
.cat-card-letter-container { border-radius: 50% !important; }
.cat-card-title { text-align: center !important; }
.cat-section { justify-content: flex-start !important; }       /* left-align heading + row */
.cat-section .category-header { width: 100% !important; }
.category-swiper { --category-in-row-desktop: 7 !important; }   /* smaller, denser circles like preview */
/* END shoopy-gen:native-components */

/* BEGIN shoopy-gen:section-spacing
   Add breathing room between the reviews section and the dark promise section. */
.section:has(.sx-promise) { margin-top: 40px !important; }
/* END shoopy-gen:section-spacing */


/* humsyacom store stylesheet — PDP design.
 *
 * Loaded by app/(root)/nextron/layout.jsx for the humsyacom store (see
 * LOCAL_STORE_CSS_BY_SLUG in components/common/pdpTemplate/localPdpTemplates.js).
 * The PDP markup lives in that same file (HUMSYA_PDP_MARKUP); this file styles
 * it plus the React slot components it mounts (pricing, variant chips, footer).
 *
 * Everything is scoped under `.pdp-preset-custom` (the wrapper TemplatePdpHost
 * puts around the template) so these rules never leak to other pages/stores.
 */

.pdp-preset-custom {
  --hum-blue: #1570ef;
  --hum-indigo: #312e81;
  --hum-green: #12b76a;
  --hum-ink: #101828;
  --hum-muted: #667085;
  --hum-line: #d0d5dd;
}

.pdp-preset-custom .hum-pdp {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 28px;
  color: var(--hum-ink);
}

.pdp-preset-custom .hum-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---------------- Media ---------------- */
.pdp-preset-custom .hum-pdp__media {
  position: relative;
}
.pdp-preset-custom .hum-pdp__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

/* Thumbnails below the main image (not aside). The gallery component lays the
   thumbnail strip + main image in a flex row by default. Rather than switching
   the row to a column (which makes Swiper mis-measure its width to a huge
   value), the row is allowed to WRAP: the main image takes a full-width line,
   the strip wraps onto the next line and is laid out as a horizontal, scrollable
   row. `order` puts the image on top and the strip beneath. */
.pdp-preset-custom .hum-pdp__media .product-sticky-carousel {
  flex-wrap: wrap;
}
.pdp-preset-custom .hum-pdp__media .swiper {
  order: 1;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}
.pdp-preset-custom .hum-pdp__media .product-gallery-aside-image {
  order: 2;
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  max-height: none;
  margin-right: 0;
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Keep horizontal scrolling but hide the scrollbar chrome. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}
.pdp-preset-custom .hum-pdp__media .product-gallery-aside-image::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.pdp-preset-custom .hum-pdp__media .product-gallery-aside-image .product-image-gallery-image {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
}

/* ---------------- Buy-box ---------------- */
.pdp-preset-custom .hum-pdp__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-preset-custom .hum-pdp__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}

.pdp-preset-custom .hum-pdp__brand {
  font-size: 14px;
  color: var(--hum-muted);
  margin-top: -6px;
}
.pdp-preset-custom .hum-pdp__brand-name {
  color: var(--hum-blue);
  font-weight: 600;
}

/* Stock + rating + reviews row */
.pdp-preset-custom .hum-pdp__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}
.pdp-preset-custom .hum-pdp__instock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hum-green);
  font-weight: 600;
}
.pdp-preset-custom .hum-pdp__instock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hum-green);
  display: inline-block;
}
.pdp-preset-custom .hum-pdp__oos {
  color: #d92d20;
  font-weight: 600;
}
.pdp-preset-custom .hum-pdp__rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.pdp-preset-custom .hum-pdp__rate-star {
  color: #f5a623;
}
.pdp-preset-custom .hum-pdp__reviews-link {
  color: var(--hum-blue);
  font-weight: 600;
  text-decoration: none;
}
.pdp-preset-custom .hum-pdp__reviews-link:hover {
  text-decoration: underline;
}

/* ---------------- Variant chips (Color / Size) ---------------- */
.pdp-preset-custom .hum-pdp__variants .variants-info-fieldctn + .variants-info-fieldctn {
  margin-top: 14px;
}
.pdp-preset-custom .hum-pdp__variants .variant-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hum-ink);
  margin-bottom: 8px;
}
/* Show just the attribute name boldly; mute the "selected value" span. */
.pdp-preset-custom .hum-pdp__variants .variant-field-label span {
  color: var(--hum-muted);
  font-weight: 400;
}
.pdp-preset-custom .hum-pdp__variants .variant-values-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pdp-preset-custom .hum-pdp__variants .variant-chip {
  border: 1.5px solid var(--hum-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hum-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pdp-preset-custom .hum-pdp__variants .variant-chip:hover {
  border-color: var(--hum-blue);
}
.pdp-preset-custom .hum-pdp__variants .variant-chip.selected {
  border-color: var(--hum-blue);
  background: #eff6ff;
  color: var(--hum-blue);
}
/* Color variants render as labelled pills with the variant image on the left
   and the label on the right (image + label side by side). The base theme lays
   the chip out as a vertical column, so the row direction is forced here. */
.pdp-preset-custom .hum-pdp__variants .variant-chip.type-color {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 6px 14px 6px 6px;
}
/* The label is wrapped in a column flex box by the component; keep its text on
   one line next to the image. */
.pdp-preset-custom .hum-pdp__variants .variant-chip.type-color > div {
  flex-direction: row;
}
.pdp-preset-custom .hum-pdp__variants .variant-chip .variant-label-text {
  white-space: nowrap;
}
.pdp-preset-custom .hum-pdp__variants .variant-chip-img,
.pdp-preset-custom .hum-pdp__variants .variant-chip-img img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}

/* ---------------- Price (MRP · sale · % off) ---------------- */
.pdp-preset-custom .hum-pdp__price .product-pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-price > p {
  margin: 0;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-primary {
  order: 2;
  font-size: 26px;
  font-weight: 700;
  color: var(--hum-ink);
}
.pdp-preset-custom .hum-pdp__price .product-pricing-meas-unit {
  display: none;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-secondary {
  order: 1;
  font-size: 15px;
  color: var(--hum-muted);
  text-decoration: line-through;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-secondary::before {
  content: "MRP ";
  text-decoration: none;
  display: inline;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-discount {
  order: 3;
  font-size: 16px;
  font-weight: 600;
  color: var(--hum-blue);
  background: none;
  padding: 0;
}
.pdp-preset-custom .hum-pdp__price .product-pricing-discount::before {
  content: "(";
}
.pdp-preset-custom .hum-pdp__price .product-pricing-discount::after {
  content: " off)";
}

.pdp-preset-custom .hum-pdp__savings {
  font-size: 13px;
  color: var(--hum-green);
  font-weight: 500;
  margin-top: -6px;
}
.pdp-preset-custom .hum-pdp__prepaid {
  background: #f3f8f2;
  border: 1px solid #cfe8cf;
  color: #2e7d32;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}

/* ---------------- Actions (Add to cart + Buy now) ---------------- */
.pdp-preset-custom .hum-pdp__cta .product-footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* Qty / "Add" control — the bright-blue primary CTA. */
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button.sh-product-plus-minus-button {
  background: var(--hum-blue);
  border: 1.5px solid var(--hum-blue);
  color: #fff;
  font-weight: 600;
  min-height: 48px;
  border-radius: 10px;
}
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button .pr-outlined-button-label {
  color: #fff;
}
/* Buy now — deep indigo, full width. */
.pdp-preset-custom .hum-pdp__cta .sh-product-buy-now-button.sh-product-buy-now-button {
  background: var(--hum-indigo);
  color: #fff;
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.pdp-preset-custom .hum-pdp__cta .sh-product-buy-now-button.sh-product-buy-now-button:hover {
  background: #272362;
}

.pdp-preset-custom .hum-pdp__enquire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #25d366;
  color: #128c3e;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* ---------------- Accordions / lower sections ---------------- */
.pdp-preset-custom details.hum-pdp__desc {
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.pdp-preset-custom .hum-pdp__desc-head {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
.pdp-preset-custom .hum-pdp__desc-head::-webkit-details-marker {
  display: none;
}
.pdp-preset-custom .hum-pdp__desc-body {
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

.pdp-preset-custom .hum-pdp__reviews,
.pdp-preset-custom .hum-pdp__faq,
.pdp-preset-custom .hum-pdp__related {
  margin-top: 40px;
}

/* ---------------- Reviews & ratings ----------------
   Matches the merchant reference (avyukta "What buyers say" layout): a centered
   header, a summary card on the left (score · stars · histogram) and bordered
   review cards on the right. The markup mounts the real ProductReview component
   in .hum-rv__slot, so these rules restyle that component's own classes. Accent
   is humsya blue; the rating-star glyph is a colour-baked image so it stays
   amber (its colour can't be changed from CSS). */
.pdp-preset-custom .hum-pdp__reviews {
  --rv-ink: #101828;
  --rv-muted: #667085;
  --rv-line: #e4e7ec;
  --rv-card: #fff;
  --rv-track: #eef2f6;
  --rv-accent: var(--hum-blue);
  /* Breathing room below the reviews before the footer. */
  padding-bottom: 48px;
}

/* Centered header (eyebrow / score / count) built from the template. */
.pdp-preset-custom .hum-rv__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.pdp-preset-custom .hum-rv__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-accent);
}
.pdp-preset-custom .hum-rv__title {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rv-ink);
}
.pdp-preset-custom .hum-rv__sub {
  margin: 0;
  color: var(--rv-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Our header replaces the component's own "Reviews and Ratings" heading. */
.pdp-preset-custom .hum-rv__slot .product-review-heading {
  display: none;
}

/* The component wraps everything in a bordered white panel. The reference has
   no outer panel — just the summary card and review cards sitting on the page —
   so strip it. This also removes the boxed empty space below the shorter column
   (the gap under the ratings). */
.pdp-preset-custom .hum-rv__slot .product-review-root {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* Two columns: summary card (left) + review list (right). The component lays
   these out with inline CSS vars for inline mode; override to a fixed grid. */
.pdp-preset-custom .hum-rv__slot .product-review-root > .product-review-list {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-left: 0 !important;
}
/* The inner review list carries an inline 38px left padding (inline-mode var);
   the grid column gap already provides the horizontal spacing, so remove it so
   the gap between the columns isn't doubled. */
.pdp-preset-custom
  .hum-rv__slot
  .product-review-root
  > .product-review-list
  > .product-review-list {
  padding-left: 0 !important;
  min-width: 0;
}

/* ---- Summary card ---- */
.pdp-preset-custom .hum-rv__slot .product-review-summary {
  width: auto !important;
  margin-top: 0 !important; /* align its top with the first review card */
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
}
.pdp-preset-custom .hum-rv__slot .product-review-summary-info {
  display: block !important;
}
/* Big score stacked over the stars (uses the stars' numeric label). */
.pdp-preset-custom .hum-rv__slot .product-review-summary .rating-stars {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pdp-preset-custom .hum-rv__slot .product-review-summary .star-text {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--rv-ink);
}
.pdp-preset-custom .hum-rv__slot .product-review-subtext {
  margin: 10px 0 18px;
  color: var(--rv-muted);
  font-size: 13.5px;
}

/* ---- Histogram ---- */
.pdp-preset-custom .hum-rv__slot .product-review-ratings-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.pdp-preset-custom .hum-rv__slot .product-review-ratings-box > div {
  gap: 8px;
}
.pdp-preset-custom .hum-rv__slot .product-review-rating-num {
  color: var(--rv-muted);
  font-size: 12.5px;
  font-weight: 500;
}
/* The outer .product-review-bar is the track; the inner one is the fill. */
.pdp-preset-custom .hum-rv__slot .product-review-ratings-box .product-review-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--rv-track);
  overflow: hidden;
}
.pdp-preset-custom
  .hum-rv__slot
  .product-review-ratings-box
  .product-review-bar
  .product-review-bar {
  flex: none;
  height: 100%;
  border-radius: 999px;
  background: var(--rv-accent) !important;
}
.pdp-preset-custom .hum-rv__slot .product-review-num-of-rating {
  color: var(--rv-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-align: right;
  min-width: 36px;
}
.pdp-preset-custom .hum-rv__slot .product-review-review-btn {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* ---- Review cards (right column) ---- */
.pdp-preset-custom .hum-rv__slot .sh-margin-line {
  display: none;
}
.pdp-preset-custom .hum-rv__slot .review-card-root {
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: 16px;
  padding: 18px 20px;
  /* Match the 20px column gap so the vertical rhythm between review items is
     the same as the horizontal gap between the left and right columns. */
  margin-bottom: 20px;
}
.pdp-preset-custom .hum-rv__slot .review-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0 !important;
}
.pdp-preset-custom .hum-rv__slot .review-card-profile-img {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(21, 112, 239, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-preset-custom .hum-rv__slot .review-card-name {
  color: var(--rv-ink);
  font-size: 14.5px;
  font-weight: 700;
}
.pdp-preset-custom .hum-rv__slot .review-card-subtext {
  margin-left: auto;
  color: var(--rv-muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.pdp-preset-custom .hum-rv__slot .review-card-title {
  margin: 12px 0 4px;
  color: var(--rv-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.pdp-preset-custom .hum-rv__slot .review-card-description {
  margin: 0;
  color: var(--rv-muted);
  font-size: 14px;
  line-height: 1.6;
}
.pdp-preset-custom .hum-rv__slot .review-card-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pdp-preset-custom .hum-rv__slot .review-card-image-button {
  flex: none;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid var(--rv-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rv-track);
  cursor: pointer;
}
.pdp-preset-custom .hum-rv__slot .review-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-preset-custom .hum-rv__slot .reviews-list-viewAll {
  display: inline-block;
  margin-top: 6px;
  color: var(--rv-accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .pdp-preset-custom .hum-rv__slot .product-review-root > .product-review-list {
    grid-template-columns: 1fr;
  }
}

/* Hide wrappers that resolve to nothing (empty slot => no child rendered). */
.pdp-preset-custom .hum-pdp__highlights:empty,
.pdp-preset-custom .hum-pdp__features:empty,
.pdp-preset-custom .hum-pdp__badges:empty,
.pdp-preset-custom .hum-pdp__delivery:empty,
.pdp-preset-custom .hum-pdp__affordability:empty,
.pdp-preset-custom .hum-pdp__purchase:empty,
.pdp-preset-custom .hum-pdp__reviews:empty,
.pdp-preset-custom .hum-pdp__faq:empty,
.pdp-preset-custom .hum-pdp__related:empty {
  display: none;
}

@media (max-width: 900px) {
  .pdp-preset-custom .hum-pdp__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pdp-preset-custom .hum-pdp__title {
    font-size: 20px;
  }
}

/* ============================================================
   iHerb-style site header (humsyacom)
   ------------------------------------------------------------
   Restyles the nextron ".luxury-header" to match in.iherb.com.
   These rules are NOT scoped to .pdp-preset-custom, so they apply
   site-wide (this stylesheet loads only for the humsyacom store).

   Reference (in.iherb.com):
   - Desktop: GREEN bar (#458500), white "iHerb" wordmark, a hamburger
     that opens the side menu, a wide always-open WHITE pill search,
     then account + cart on the right. Utility strip above is WHITE.
   - Mobile: WHITE bar with a GREEN wordmark + green icons; the
     announcement strip above is GREEN with centred white text.

   The announcement bar itself is merchant HTML (hello bar). Paste
   public/humsyacom-announcement.html into the store's announcement
   settings for the iHerb-style top strip; the rules below only set a
   sensible fallback colour for the built-in notice.
   ============================================================ */

/* ---- Colour tokens — desktop defaults (green bar) ---- */
.luxury-header {
  --header-main: #458500; /* bar background */
  --header-accent: #ffffff; /* wordmark + icons */
  --header-contrast-text: #ffffff; /* nav links */
  --header-badge-main: #ffffff; /* cart badge bg */
  --header-badge-contrast-text: #458500; /* cart badge text */
  --header-box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08);
  --iherb-green: #458500;
}

/* Wordmark weight closer to iHerb's tight logotype. */
.luxury-header .logo-title h1 {
  letter-spacing: -0.5px;
  font-weight: 800;
}

/* Notice/announcement fallback: white strip (merchant HTML paints its
   own pill/content on top). */
.luxury-header #notice .notice {
  --header-notice-background: #ffffff;
  --header-notice-text: #333333;
}

/* ---- Desktop (>=1024px): green bar, hamburger + side menu, wide
   always-open white pill search ---- */
@media (min-width: 1024px) {
  /* iHerb navigates via a hamburger + slide-in menu, not a horizontal
     category strip. Show the hamburger, hide the desktop nav row. */
  .luxury-header .mobile-menu-button {
    display: flex;
    color: var(--header-accent);
    order: -1;
  }
  .luxury-header .desktop-nav-wrapper {
    display: none;
  }

  /* Logo hugs its content; the utility bar grows to fill the middle. */
  .luxury-header .main-header {
    flex: 0 0 auto;
    padding: 14px 0;
  }
  .luxury-header .utility-bar {
    flex: 1 1 auto;
    padding: 0;
  }
  .luxury-header .utility-bar-content {
    width: 100%;
  }
  /* Drop the empty left spacer so the search can start next to the logo. */
  .luxury-header .utility-bar-content > .w-full:first-child {
    display: none;
  }
  .luxury-header .utility-icons {
    width: 100%;
    gap: 18px;
    color: #ffffff;
  }

  /* Force the animated search permanently open and style it as a pill. */
  .luxury-header .search-container {
    flex: 1 1 auto;
    max-width: 640px;
    height: 48px;
    background: #ffffff;
    border-radius: 24px;
    padding: 0 20px;
    gap: 10px;
  }
  .luxury-header .search-container::before {
    display: none;
  }
  .luxury-header .search-container .input-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    flex: 1 1 auto;
    order: 1;
  }
  .luxury-header .search-container .sh-header-search-box {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }
  .luxury-header .search-container input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #333333;
  }
  .luxury-header .search-container .search-icon {
    order: 2;
    margin: 0;
    color: var(--iherb-green);
  }
  .luxury-header .search-container .search-icon svg {
    color: var(--iherb-green);
  }
}

/* ---- Mobile (<1024px): white bar, green wordmark + green icons ---- */
@media (max-width: 1023px) {
  .luxury-header {
    --header-main: #ffffff;
    --header-accent: #458500;
    --header-badge-main: #458500;
    --header-badge-contrast-text: #ffffff;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08);
  }
  /* Announcement strip: green with centred white text (fallback). */
  .luxury-header #notice .notice {
    --header-notice-background: #458500;
    --header-notice-text: #ffffff;
    font-weight: 600;
  }
}

/* ============================================================================
   HUMSYA v2 — preview-match fixes (homepage)
   ----------------------------------------------------------------------------
   Makes the live store match the index.html preview
   (https://shpy-wix.b-cdn.net/humsya-v2/index.html). Loaded last so these rules
   win the cascade over the theme + the earlier blocks in this file. Every rule
   below was verified against the live DOM on humsyacom.store.shoopy.in.

   NOTE — these are NOT controllable from CSS (set them in the Shoopy dashboard,
   web.shoopy.in -> theme/section settings):
     * Categories-in-a-row: the category carousel sets each slide width inline
       from JS (currently 1/6 desktop). Set "Categories in a row" higher
       (~10–12 desktop) to get the small circles in the preview.
     * Products-in-a-row / banner auto-slide speed: section-level settings.
   ============================================================================ */

/* ---- 1) One content width for EVERY section => vertical symmetry ----
   All home sections share the wrapper `.section > .section-item`. The theme
   left them full-bleed (no max-width) with a few components adding their own
   width/padding, so every section lined up to a different edge. Constrain them
   all to one width + centre, and neutralise the inner wrappers' own gutters so
   the only gutter is the section-item. */
.section > .section-item {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  box-sizing: border-box;
}
/* hero (StoreBanner) stays edge-to-edge like the preview */
.section > .section-item.StoreBanner-component { max-width: none !important; padding: 0 !important; }
@media (min-width: 1024px) {
  .section > .section-item:not(.StoreBanner-component) { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 1023px) {
  .section > .section-item:not(.StoreBanner-component) { padding-left: 16px !important; padding-right: 16px !important; }
}
/* the theme nests a `.page-container` (40px padding, 1440 max) inside the
   category + product sections — zero it so they align with the others */
.section-item .page-container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
/* inner wrappers: drop their own max-width/padding, inherit the section gutter */
.cat-section, .cat-section-boxed,
.sx-import-wrap, .sx-usp__list, .sx-deal__wrap, .sx-budget, .sx-rev__wrap, .sx-promise__wrap {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* full-bleed background section (the dark "promise" band): colour spans the
   viewport, content stays constrained + centred */
.sx-promise {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
.sx-promise .sx-promise__wrap {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ---- 2) Consistent spacing BETWEEN sections (theme shipped 0) ---- */
@media (min-width: 1024px) { .section + .section { margin-top: 40px !important; } }
@media (max-width: 1023px) { .section + .section { margin-top: 26px !important; } }

/* ---- 3) Banner: remove the duplicate arrows (the theme renders its own
   swiper arrows AND the custom .hx-hero arrows — they showed twice). Keep it a
   plain swipe/scroll banner with dots. ---- */
.StoreBanner-component .swiper-button-prev, .StoreBanner-component .swiper-button-next,
.hero-banner-root .swiper-button-prev, .hero-banner-root .swiper-button-next,
.hx-hero__arrow { display: none !important; }

/* ---- 4) Product card => preview .hx-card. The earlier block in this file
   targeted class names that don't exist on the live card; the real ones are:
   name=.product-card-name  price=.product-card-price  mrp=.product-card-mrp-price
   add=.product-card-action-add  badge=.product-card-tag ---- */
.product-card { border: 1px solid var(--hx-line) !important; border-radius: 14px !important; overflow: hidden; background: #fff; }
.product-card:hover { box-shadow: 0 14px 30px -14px rgba(16, 40, 8, .28); }
.product-card-info { padding: 10px 12px 12px !important; }
.product-card-name { font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--hx-ink) !important; }
.product-card-price { font-size: 17px !important; font-weight: 800 !important; color: var(--hx-ink) !important; }
.product-card-mrp-price { font-size: 13px !important; color: #8b9486 !important; text-decoration: line-through !important; }
.product-card-discount-percent { font-size: 12.5px !important; font-weight: 700 !important; color: var(--hx-deal) !important; background: transparent !important; }
.product-card-action-add, .product-card-action-add.universal-btn-style {
  background: var(--hx-brand) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
  min-height: 40px !important; font-weight: 700 !important; font-size: 14px !important;
}
.product-card-action-add:hover { background: var(--hx-brand-d) !important; }

/* ---- 5) Header => preview (white bar, green wordmark, centred green-bordered
   search pill, account + cart on the right, single category nav row, green
   announcement strip). Overrides the "iHerb hamburger" block above. ---- */
.luxury-header {
  --header-main: #ffffff;
  --header-accent: #458500;
  --header-contrast-text: #18210f;
  --header-badge-main: #c2410c;
  --header-badge-contrast-text: #ffffff;
}
/* announcement strip: emerald with centred white text, both breakpoints */
.luxury-header .notice { background: #006030 !important; color: #fff !important; text-align: center; font-weight: 600; }
.luxury-header .notice .notice-message, .luxury-header .notice * { color: #fff !important; }
/* keep only the graphic logo (drop the duplicate "humsya.com" text) */
.luxury-header .logo-heading-block { display: none !important; }

@media (min-width: 1024px) {
  /* undo the hamburger layout: show search + account + cart + the nav row */
  .luxury-header .mobile-menu-button { display: none !important; }
  .luxury-header .desktop-nav-wrapper { display: block !important; }
  .luxury-header .utility-bar { display: block !important; }
  .luxury-header .utility-bar-content { width: 100%; }
  .luxury-header .utility-icons { display: flex !important; align-items: center; gap: 14px; width: 100%; color: #18210f !important; }
  .luxury-header .utility-icons .icon-button { color: #18210f !important; }
  /* search: wide white pill with a 2px green border, centred */
  .luxury-header .desktop-search-bar-wrapper { flex: 1 1 auto; max-width: 760px !important; }
  .luxury-header .search-box.sh-header-search-box { border: 2px solid #458500 !important; border-radius: 999px !important; height: 50px; background: #fff !important; padding: 0 6px 0 18px; }
  .luxury-header .search-field input { color: #18210f; font-size: 15px; }
  .luxury-header .search-btn:not(.search-btn-hidden) { background: #458500 !important; color: #fff !important; border-radius: 999px !important; height: 40px; }
  /* category nav kept to a single row (the theme lists every category flat) */
  .luxury-header .desktop-menu-container { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: 48px; scrollbar-width: none; -ms-overflow-style: none; }
  .luxury-header .desktop-menu-container::-webkit-scrollbar { display: none; }
  .luxury-header .desktop-nav { overflow: hidden; }
  .luxury-header .desktop-nav .nav-item { color: #18210f !important; }
}
/* ---- 6) Mega menu (desktop category dropdown) => reference (iHerb-style).
   The theme renders it as a MUI popover `.menu-popover.multi-level` portaled
   under .luxury-header (so it is NOT clipped by the nav overflow fix above).
   The theme laid the columns out with grid-auto-flow:column on a fixed
   10x220px track, so only ~6 of 11 groups fit and the rest overflowed. Force a
   clean wrapping 6-column grid with green headings + chevrons and muted links.
   (The reference's "Trending brands" logo column is menu content the theme
   does not provide, so it cannot be added from CSS.) ---- */
.luxury-header .menu-popover.multi-level{
  border-radius:0 0 14px 14px !important;
  box-shadow:0 24px 40px -12px rgba(16,30,8,.18) !important;
  border-top:1px solid var(--hx-line) !important;
  max-height:min(82vh, 600px) !important;   /* theme caps at 350px, which clipped 2nd row */
}
/* COLUMN-PACKED layout: groups flow top-to-bottom and pack tightly into 5
   columns. Unlike a grid, this never leaves ragged row gaps when the category
   groups have very different numbers of items (the mis-alignment in image 7),
   and every heading/link stays hard LEFT-aligned. */
.menu-popover-content.multi-level{
  display:block !important;
  column-count:5 !important;
  column-gap:28px !important;
  padding:26px 28px 22px !important;
  max-width:1320px; margin:0 auto; box-sizing:border-box; background:#fff !important; text-align:left !important;
}
.menu-column-group{
  break-inside:avoid !important; -webkit-column-break-inside:avoid !important; page-break-inside:avoid !important;
  display:block !important; width:100% !important; margin:0 0 20px !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; text-align:left !important;
}
/* column headings: BLACK, bold, LEFT-aligned, no chevron (reference image 5) */
.menu-column-header{
  display:block !important; color:var(--hx-ink) !important; font-weight:700 !important;
  font-size:14px !important; margin:0 0 8px !important; text-align:left !important;
}
.menu-column-header::after{ content:none !important; }   /* strip the theme's chevron */
.menu-column-header:hover{ color:var(--hx-brand) !important; }
.menu-column-items{ list-style:none !important; margin:0 !important; padding:0 !important; display:block !important; text-align:left !important; }
.menu-column-items li{ margin:0 0 5px !important; text-align:left !important; }
.menu-popover-item{ display:block !important; font-size:14px !important; color:var(--hx-muted) !important; padding:0 !important; line-height:1.4 !important; text-align:left !important; }
.menu-popover-item:hover{ color:var(--hx-brand) !important; text-decoration:none; }
/* "Shop all X" link => green bold with chevron, spanning the full width at the bottom (image 5) */
.menu-popover-content a[href^="/collections/"]{ column-span:all !important; color:var(--hx-brand) !important; font-weight:700 !important; font-size:14.5px !important; display:inline-flex !important; align-items:center; gap:4px; margin-top:6px; }
.menu-popover-content a[href^="/collections/"]::after{ content:"\203A"; font-size:16px; }

/* ---- 6b) Category nav row => match the preview exactly as far as CSS allows.
   NOTE: the ORDER of the categories, which ones appear, and "Today's Deals"
   sitting at the far right are the store's MENU CONFIG (Shoopy dashboard ->
   Navigation/Menu), not CSS — CSS cannot reorder or insert menu items. Also,
   "All categories" currently links to /categories; making it OPEN the slide-in
   drawer ("work like mobile view") is theme JS behaviour, not something a
   stylesheet can change. The rules below style what IS there. ---- */
@media (min-width: 1024px) {
  .luxury-header .desktop-nav .nav-item > .nav-link { font-weight: 600; color: var(--hx-ink); }
  /* hover "active" underline like the preview (inset shadow => no layout shift, not clipped by the nav's overflow) */
  .luxury-header .desktop-nav .nav-item:hover > .nav-link,
  .luxury-header .desktop-nav .nav-item:focus-within > .nav-link { color: var(--hx-brand) !important; box-shadow: inset 0 -3px 0 var(--hx-brand); }
  /* first item "All categories" => green pill with a hamburger glyph (like the preview) */
  .luxury-header .desktop-nav .nav-item:first-child > .nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hx-soft); color: var(--hx-emerald) !important; font-weight: 700;
    height: 34px; padding: 0 14px; border-radius: 999px; box-shadow: none !important;
  }
  .luxury-header .desktop-nav .nav-item:first-child > .nav-link::before {
    content: ""; width: 15px; height: 11px; flex: 0 0 auto;
    background:
      linear-gradient(currentColor, currentColor) left 0 top 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) left 0 top 4.5px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) left 0 top 9px / 100% 2px no-repeat;
  }
  /* "Today's Deals" => red + lightning (shows only if the menu config places it in the visible row) */
  .luxury-header .desktop-nav .nav-item[data-menu-name="Today's Deals"] > .nav-link { color: var(--hx-deal) !important; font-weight: 700; box-shadow: none !important; }
  .luxury-header .desktop-nav .nav-item[data-menu-name="Today's Deals"] > .nav-link::before { content: "\26A1"; margin-right: 4px; }
}

/* ---- 6c) "All categories" => opens the slide-in drawer on desktop (image 6),
   with NO JavaScript. The theme's hamburger button (.mobile-menu-button) already
   opens the left drawer; on desktop it is hidden (rule above). Here we REVEAL it
   and lay it — invisible — exactly over the "All categories" pill. A click on the
   pill therefore lands on the hamburger and opens the drawer (verified live: the
   drawer gets .open and slides to x=0).

   The offsets ride on the header's own geometry so they stay aligned at any
   desktop width: the hamburger's positioning context is .main-header, so
   top:100% drops the overlay to the row directly below it (the category nav row),
   and left:-16px is the 40px header gutter (md:px-10) minus the 24px nav gutter
   (md:px-6). width:183px matches the pill and stops short of the next item. ---- */
@media (min-width: 1024px) {
  .luxury-header .mobile-menu-button{
    display:block !important; position:absolute !important;
    top:100% !important; bottom:auto !important; left:-16px !important;
    width:183px !important; height:48px !important;
    margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important;
    opacity:0 !important; z-index:46 !important; cursor:pointer !important;
  }
  /* drawer above the mega + hero, soft shadow, on the left (image 6) */
  .luxury-header .mobile-menu{ z-index:120 !important; }
  .luxury-header .mobile-menu.open .mobile-menu-content{ box-shadow:0 0 40px rgba(0,0,0,.18); }
}

/* ---- 7) Product description page (PDP) => iHerb-like, on-brand.
   IMPORTANT: the live store PDP uses the theme's NATIVE markup
   (.product-detail-grid / .product-title / .product-price ...), NOT the
   dormant `.pdp-preset-custom` design further up this file (that preset is not
   enabled for this store). So these rules target the native classes.
   Full iHerb parity (brand link, star rating, subscription, trust-badge rows)
   needs those fields/sections to exist in the product data + theme — CSS can
   only restyle what the theme renders. ---- */
.product-detail-grid{ max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; }
.product-title{ font-size:24px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--hx-ink) !important; }
.product-price span{ font-size:28px !important; font-weight:800 !important; color:var(--hx-ink) !important; }
.product-mrp-price span{ font-size:16px !important; color:#8b9486 !important; text-decoration:line-through !important; }
.product-discount span{ display:inline-block; font-size:13px !important; font-weight:800 !important; color:#fff !important; background:var(--hx-deal) !important; padding:3px 9px; border-radius:6px; }
.product-sku{ color:var(--hx-muted) !important; font-size:12.5px !important; }
.quantity-label{ font-weight:700 !important; color:var(--hx-ink) !important; font-size:13px; }
/* Add to cart / Buy now (render into .action-buttons) => solid green, full width */
.product-info .action-buttons button,
.product-info .action-buttons a,
.product-info .action-buttons .universal-btn-style{
  background:var(--hx-brand) !important; color:#fff !important; border:2px solid var(--hx-brand) !important;
  border-radius:10px !important; min-height:48px !important; font-weight:700 !important; font-size:15px !important;
}

/* END HUMSYA v2 preview-match fixes */
/* ==========================================================================
   refine-541091.css — humsya.com (store 541091) · round 1 (27 Oct 2026)
   Source of truth for our additions on top of the published humsyacom_merged.css.
   Built: custom-combined.css = live_backup/humsyacom_merged-live.css + this file.
   Theme: Zippy-style page-builder ("luxury-header"), light-DOM HTML collections.
   ========================================================================== */

/* 1. Fonts — one family everywhere. The HTML sections use the mock's system
   stack (--hx-font); native components fell back to Noto Sans. */
html:root { --typography-font-family: var(--hx-font); }
body, .sh-body, main, header, footer, button, input, select, textarea,
.product-card, .collection-header, .notice, .desktop-nav { font-family: var(--hx-font) !important; }

/* 2. Header nav — the 221 dead "/collections/…" items left by the earlier
   publish (deletion needs merchant OK) are hidden; the deal link is deal-coloured
   like the mock's "Today's Deals". */
.desktop-menu-container > .nav-item:has(> a.nav-link[href^="/collections/"]) { display: none !important; }
.mobile-menu a[href^="/collections/"] { display: none !important; }
.desktop-nav a.nav-link[href="/#deal-1"] { color: var(--hx-deal) !important; font-weight: 700 !important; }
.desktop-nav a.nav-link[href="/#deal-1"]::before { content: "\26A1\00a0"; }

/* 2b. Header logo — the mock wordmark is 45px tall on desktop (34px on phones). */
@media (min-width: 770px) { header .sh-header-logo, header img.logo { height: 46px !important; width: auto !important; max-width: 190px; } }
@media (max-width: 769px) { header .sh-header-logo, header img.logo { height: 36px !important; width: auto !important; } }

/* 3. Header search — the pill. The in-pill `.search-btn` is the theme's CLEAR (X)
   control (shown while typing), not the submit; see R2-4 for the magnifier. */
.search-box input::placeholder { color: #8a9384 !important; }
.search-box .search-btn:not(.search-btn-hidden) { color: var(--hx-muted) !important; background: transparent !important; }

/* 4. Hero — the theme hides its Swiper arrows; the mock shows white round arrows
   on desktop and a pill-shaped active dot. */
@media (min-width: 900px) {
  .StoreBanner-component .swiper-button-prev, .StoreBanner-component .swiper-button-next,
  .hero-banner-root .swiper-button-prev, .hero-banner-root .swiper-button-next {
    display: flex !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; color: var(--hx-ink) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18); align-items: center; justify-content: center; top: 50%; margin-top: -20px; opacity: 1 !important; }
  .hero-banner-root .swiper-button-prev::after, .hero-banner-root .swiper-button-next::after { font-family: var(--hx-font) !important; font-size: 26px !important; line-height: 1; font-weight: 600; color: var(--hx-ink); }
  .hero-banner-root .swiper-button-prev::after { content: "\2039" !important; } .hero-banner-root .swiper-button-next::after { content: "\203A" !important; }
  .hero-banner-root .swiper-button-prev { left: 18px; } .hero-banner-root .swiper-button-next { right: 18px; }
}
.hero-banner-root .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.55); opacity: 1; transition: width .2s; }
.hero-banner-root .swiper-pagination-bullet-active { width: 24px; background: #fff; }

/* 5. Section heads — mock: title + muted subtitle on the left, green "View all ›"
   on the right, baseline-aligned. The theme renders `.heading` and `.shop-all-link`
   as siblings inside `.collection-header`, with "Shop All" stacked under the title. */
.collection-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.collection-header .heading { margin: 0 !important; }
.collection-header .shop-all-link { margin: 0 0 4px auto !important; font-size: 0 !important; color: var(--hx-brand) !important; font-weight: 700 !important; white-space: nowrap; display: inline-flex; align-items: center; }
.collection-header .shop-all-link::after { content: "View all \203A"; font-size: 14px; font-weight: 700; color: var(--hx-brand); }
.collection-header .shop-all-link:hover::after { text-decoration: underline; }

/* 6. Product cards — mock anatomy: deal-orange "-48%" pill top-left, white merch
   badge bottom-left, 2-line name, bold price, solid green full-width Add to cart. */
.product-card { font-family: var(--hx-font) !important; }
.product-card .product-card-discount { position: absolute; top: 10px; left: 10px; right: auto !important; padding: 3px 8px !important; border-radius: 6px !important; background: var(--hx-deal) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.3; }
.product-card .product-card-tag { position: absolute; left: 10px; bottom: 10px; top: auto !important; right: auto !important; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.94) !important; color: var(--hx-emerald) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.product-card .product-card-image-container { position: relative; background: var(--hx-well); }
.product-card .product-card-name { font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--hx-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.product-card .product-card-price { font-size: 17px !important; font-weight: 800 !important; color: var(--hx-ink) !important; }
.product-card .sh-card-cta .pr-outlined-button,
.product-card .sh-card-cta .universal-btn-style { background: var(--hx-brand) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; min-height: 40px !important; font-weight: 700 !important; font-size: 14px !important; width: 100%; }
.product-card .sh-card-cta .pr-outlined-button:hover { background: var(--hx-brand-d) !important; }
.product-card .sh-card-cta .pr-outlined-button-label, .product-card .sh-card-cta svg { color: #fff !important; }
.product-card:hover { box-shadow: 0 14px 30px -14px rgba(16,40,8,.28); transform: translateY(-2px); transition: box-shadow .2s, transform .2s; }

/* 7. Bands — the mock gives the deal (and reviews) sections a full-bleed soft
   green band (#f4f7ef). The section grid is full width, so paint it there. */
main .section:has(.sx-deal), main .section:has(.sx-rev) { background: var(--hx-soft) !important; }

/* 8. Rhythm — same section scale on every block (measured in round 1). */
main .section:has(.sx-cats-sec) { padding-top: 0 !important; }

/* 9. Product page — the custom "hum-pdp" template (pdp-preset-custom) shipped with
   its own blue/indigo palette. Re-tokened to the store palette (§5h: Buy now solid
   brand, Add to cart brand outline), store font, and the phone grid fixed: at 375px
   the `1fr` column let the gallery Swiper grow to 16,777,196px (horizontal scroll). */
.pdp-preset-custom { --hum-blue: var(--hx-brand); --hum-indigo: var(--hx-emerald); --hum-green: var(--hx-emerald); --hum-ink: var(--hx-ink); --hum-muted: var(--hx-muted); --hum-line: var(--hx-line); font-family: var(--hx-font); }
.pdp-preset-custom .hum-pdp__title { font-family: var(--hx-font); font-weight: 800; letter-spacing: -.01em; }
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button.sh-product-plus-minus-button { background: #fff; border: 2px solid var(--hx-brand); color: var(--hx-brand); }
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button .pr-outlined-button-label,
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button svg { color: var(--hx-brand); }
.pdp-preset-custom .hum-pdp__cta .sh-product-buy-now-button.sh-product-buy-now-button { background: var(--hx-brand); }
.pdp-preset-custom .hum-pdp__cta .sh-product-buy-now-button.sh-product-buy-now-button:hover { background: var(--hx-brand-d); }
.pdp-preset-custom .hum-pdp__price .product-pricing-discount { color: var(--hx-deal); }
.pdp-preset-custom .hum-pdp__media, .pdp-preset-custom .hum-pdp__info { min-width: 0; max-width: 100%; }
.pdp-preset-custom .hum-pdp__media .product-sticky-carousel, .pdp-preset-custom .hum-pdp__media .swiper, .pdp-preset-custom .hum-pdp__media .swiper-slide { max-width: 100%; }
@media (max-width: 900px) {
  .pdp-preset-custom .hum-pdp__grid { grid-template-columns: minmax(0, 1fr); }
  .pdp-preset-custom .hum-pdp__media { overflow: hidden; }
}

/* ==========================================================================
   Round 2 (28 Oct 2026) — merchant change list (changes.docx)
   ========================================================================== */

/* R2-1 Category/listing filters: the sidebar sections (.coll-ctn) are collapsed
   accordions (body = div.pb-4.hidden). Merchant wants them open by default with
   no dropdown, so the body is forced visible and the chevron removed. */
.coll-ctn > .pb-4.hidden { display: block !important; }
.coll-ctn > .flex svg.lucide-chevron-down { display: none !important; }
.coll-ctn > .flex { cursor: default; }
/* …and the whole sidebar (wrapper toggles w-0 / w-80 via the "Filters" button) stays open on desktop */
@media (min-width: 1024px) {
  .mob-hide-lg.overflow-hidden.flex-shrink-0.w-0:has(.coll-ctn), .mob-hide-lg.overflow-hidden.flex-shrink-0.w-80:has(.coll-ctn) { width: 20rem !important; }   /* only when there are filter sections: /products has none and got an empty column */
  .mb-8 button.MuiButton-outline:has(svg.lucide-funnel) { visibility: hidden; }   /* the "Filters" toggle is redundant once the sidebar is always open */
}

/* R2-3 Header nav: 11 items (1,903px) overflowed a 1,378px container, clipping
   "Sports & Entertainment". Tighter items, chevrons hidden below 1600px, and the
   row scrolls instead of clipping if it still does not fit. */
.desktop-menu-container > .nav-item { padding: 11px 9px !important; }
.desktop-menu-container > .nav-item > a.nav-link { font-size: 13.5px !important; letter-spacing: 0 !important; white-space: nowrap; }
@media (max-width: 1599px) { .desktop-menu-container > .nav-item > svg.lucide-chevron-down { display: none !important; } .desktop-menu-container > .nav-item { gap: 0 !important; } }
.desktop-menu-container { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
.desktop-menu-container::-webkit-scrollbar { display: none; }

/* R2-4 Header search: the theme's magnifier (span.search-icon) sat outside the pill.
   The pill border moves from the MUI paper to the whole .search-container, so the
   magnifier sits inside it as a green round button. */
header .search-container { border: 2px solid var(--hx-brand) !important; border-radius: 999px !important; background: #fff !important; padding: 0 5px 0 0 !important; overflow: hidden; box-shadow: none !important; }
/* the input is autofocused on load, so a focus halo would be permanent: none */
header .search-container, header .search-container:focus-within { box-shadow: none !important; }
/* the earlier publish's `.luxury-header .search-box.sh-header-search-box` (0,3,0, !important) kept a second
   2px border on the MUI paper inside the pill; beaten with (0,4,0) */
.luxury-header .search-container .search-box.sh-header-search-box, header .search-container .search-box { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
header .search-container > .search-icon { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--hx-brand); color: #fff !important; margin-left: 2px; cursor: pointer; }
header .search-container > .search-icon svg { color: #fff !important; width: 18px !important; height: 18px !important; }
header .search-container > .search-icon:hover { background: var(--hx-brand-d); }

/* R2-5 Mega menu: column headers had 12px side padding, the items none, so
   headings sat indented from their lists. */
.menu-popover-content .menu-column-header { padding-left: 0 !important; padding-right: 0 !important; }
.menu-popover-content .menu-column-items li { margin: 0 0 6px !important; }
.menu-popover-content .menu-popover-item { display: block; line-height: 1.4; }

/* R2-8 Footer: colour logo instead of the knocked-out white one. */
.hx-footer__brand img { filter: none !important; }
/* R2-9 Footer socials + payment chips */
.hx-footer .hx-social { display: flex; gap: 10px; margin-top: 14px; }
.hx-footer .hx-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hx-soft); color: var(--hx-emerald); }
.hx-footer .hx-social a:hover { background: var(--hx-brand); color: #fff; }
.hx-footer .hx-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-footer .hx-pay { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* R2-11/12 PDP: Add to cart and Buy now on one row, same height, labels centred. */
.pdp-preset-custom .hum-pdp__cta .product-footer-buttons { flex-direction: row !important; align-items: stretch !important; gap: 12px !important; }
.pdp-preset-custom .hum-pdp__cta .product-footer-buttons > div, .pdp-preset-custom .hum-pdp__cta .product-footer-buttons > button { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button.sh-product-plus-minus-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; height: 48px; padding: 0 12px !important; line-height: 1 !important; }
.pdp-preset-custom .hum-pdp__cta .sh-product-plus-minus-button .pr-outlined-button-label { line-height: 1; }
.pdp-preset-custom .hum-pdp__cta .sh-product-buy-now-button.sh-product-buy-now-button { min-height: 48px; height: 48px; padding: 0 12px !important; line-height: 1 !important; }
.pdp-preset-custom .hum-pdp__cta .pr-plus-minus-button.sh-product-plus-minus-button { height: 48px; min-height: 48px; }
@media (max-width: 960px) { .product-footer-root.sh-pf-desk .product-footer-buttons { flex-direction: row !important; gap: 10px !important; } }

/* R2-2 Reviews: kiwla-style — stars + count + "Write a review" on top, then a
   plain vertical list (title, stars, author/date, body). No histogram, no card
   grid, brand colours. Written against the ProductReview component's classes. */
.pdp-preset-custom .product-review-reviews-container, .pdp-preset-custom .product-review-list { display: flex !important; flex-direction: column !important; gap: 8px; }
.pdp-preset-custom .product-review-summary-container, .pdp-preset-custom .product-review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 0 0 16px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.pdp-preset-custom .product-review-summary-info { display: flex; align-items: center; gap: 12px; }
.pdp-preset-custom .product-review-ratings-box { display: none !important; }
.pdp-preset-custom .product-review-subtext { font-size: 13.5px; color: var(--hx-muted); }
.pdp-preset-custom .product-review-review-btn { width: auto !important; margin: 0 !important; padding: 10px 18px !important; background: var(--hx-brand) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 700 !important; }
.pdp-preset-custom .review-card-root, .pdp-preset-custom .reviews-list-root > div > div { padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--hx-line) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.pdp-preset-custom .review-card-title { font-size: 15px !important; font-weight: 700 !important; color: var(--hx-ink) !important; margin-top: 6px !important; }
.pdp-preset-custom .review-card-name { font-size: 13px !important; color: var(--hx-muted) !important; }
.pdp-preset-custom .review-card-subtext { font-size: 12.5px !important; color: var(--hx-muted) !important; }
.pdp-preset-custom .review-card-description { font-size: 14px !important; line-height: 1.6 !important; color: var(--hx-text) !important; margin-top: 6px !important; }
.pdp-preset-custom .review-card-profile-img { display: none !important; }
.pdp-preset-custom .review-card-name::before { content: "Posted by "; }

/* ==========================================================================
   Round 3 (28 Oct 2026) — changes.pdf "changes left" + item 13
   ========================================================================== */

/* R3-0 PDP palette tokens: the template's own stylesheet is injected after the
   custom CSS, so the round-1 token override lost. Re-declared with !important. */
.pdp-preset-custom { --hum-blue: var(--hx-brand) !important; --hum-indigo: var(--hx-emerald) !important; --hum-green: var(--hx-emerald) !important; --hum-ink: var(--hx-ink) !important; --hum-muted: var(--hx-muted) !important; --hum-line: var(--hx-line) !important; }
.pdp-preset-custom .hum-pdp__variants .variant-chip.selected { border-color: var(--hx-brand) !important; background: #f0f7e8 !important; color: var(--hx-brand) !important; }
.pdp-preset-custom .hum-pdp__variants .variant-chip:hover { border-color: var(--hx-brand) !important; }

/* R3-5 PDP sale price in a highlight colour (the MRP strike stays muted). */
.pdp-preset-custom .hum-pdp__price .product-pricing-primary { color: var(--hx-brand) !important; font-size: 28px !important; }

/* R3-1 PDP status row like the reference: ★ rating · "2 reviews" | Write a review.
   The theme renders "Instock · 5.0/5 ★ · 2 reviews"; the star moves first, the
   count link gets the divider and the write-a-review text (same link: it goes to
   the reviews block where the real button is). */
.pdp-preset-custom .hum-pdp__status { gap: 10px 14px !important; }
.pdp-preset-custom .hum-pdp__rate { display: inline-flex !important; flex-direction: row-reverse; align-items: center; gap: 5px; font-weight: 700; color: var(--hx-ink) !important; }
.pdp-preset-custom .hum-pdp__rate-star { color: #ff7a1a !important; font-size: 18px; line-height: 1; }
.pdp-preset-custom .hum-pdp__reviews-link { color: var(--hx-muted) !important; font-weight: 500 !important; text-decoration: none !important; }
.pdp-preset-custom .hum-pdp__reviews-link::after { content: "\007C\00a0\00a0 Write a review"; color: var(--hx-brand); font-weight: 700; margin-left: 10px; }
.pdp-preset-custom .hum-pdp__reviews-link:hover::after { text-decoration: underline; }

/* R3-1b Reviews block: the component nests .product-review-list inside
   .product-review-list; the inner list was a 249px flex column. Full-width rows. */
.pdp-preset-custom .product-review-root > .product-review-list { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; }
.pdp-preset-custom .product-review-root > .product-review-list > .product-review-list, .pdp-preset-custom .product-review-root > .product-review-list > .product-review-list > div, .pdp-preset-custom .product-review-root > .product-review-list > .product-review-list > div > div { display: block !important; width: 100% !important; max-width: none !important; }
.pdp-preset-custom .product-review-summary { width: 100% !important; max-width: none !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 0 0 12px !important; margin: 0 0 4px !important; border: 0 !important; border-bottom: 1px solid var(--hx-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pdp-preset-custom .product-review-summary-info { display: flex !important; align-items: center; gap: 14px; width: auto !important; }
.pdp-preset-custom .product-review-summary-info > div { margin: 0 !important; }
.pdp-preset-custom .product-review-summary .rating-stars { display: flex; align-items: center; gap: 8px; }
.pdp-preset-custom .product-review-summary .star-text { font-size: 22px !important; font-weight: 800; color: var(--hx-ink); line-height: 1 !important; width: auto !important; }
.pdp-preset-custom .product-review-summary .product-review-subtext { margin: 0 !important; }
.pdp-preset-custom .product-review-summary > button, .pdp-preset-custom .product-review-summary .MuiButton-root { margin: 0 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 10px 18px !important; background: var(--hx-brand) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 700 !important; }
.pdp-preset-custom .review-card-root { width: 100% !important; max-width: none !important; padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--hx-line) !important; }
.pdp-preset-custom .review-card-header { display: flex; align-items: center; justify-content: space-between; }
.pdp-preset-custom .review-card-root .rating-stars { margin: 6px 0 4px; }

/* R3-3 Home/listing product cards: Add-to-cart gets side spacing inside the card. */
.product-card .sh-card-cta { padding: 0 10px 10px !important; }

/* R3-13 All-categories page (/categories): round tiles like the home row. */
main .grid a > div.flex.items-center.justify-center { border-radius: 50% !important; overflow: hidden; background: #f5f6f2; aspect-ratio: 1; height: auto !important; width: min(100%, 220px) !important; margin: 0 auto 16px !important; box-shadow: 0 0 0 1px var(--hx-line); }
main .grid a > div.flex.items-center.justify-center img { object-fit: cover !important; width: 100% !important; height: 100% !important; }
main .grid a > div.flex.items-center.justify-center:hover { box-shadow: 0 0 0 2px var(--hx-brand), 0 10px 18px -8px rgba(0,60,20,.35); }

/* R3-6 Feature tiles: when the two tiles stack (≤900px) the section ran into the
   deal band with only the theme's 26px gap; give it the desktop rhythm (40px). */
@media (max-width: 900px) { main .section:has(.hx-feat-row) { padding-bottom: 14px !important; } }

/* ==========================================================================
   Round 4 (28 Oct 2026) — full desktop + mobile review against the rendered mock
   ========================================================================== */
/* R4-1 Hero dots: the theme hides .swiper-pagination (display:none); the mock shows
   a pill-shaped active dot under the hero on every width. */
.hero-banner-root .swiper-pagination { display: flex !important; justify-content: center; align-items: center; gap: 8px; bottom: 14px !important; height: auto !important; }
.hero-banner-root .swiper-pagination .swiper-pagination-bullet { width: 8px !important; height: 8px !important; border-radius: 4px !important; background: rgba(255,255,255,.55) !important; opacity: 1 !important; margin: 0 !important; transition: width .2s; }
.hero-banner-root .swiper-pagination .swiper-pagination-bullet-active { width: 24px !important; background: #fff !important; }
/* R4-2 Product-row arrows: the theme's are 27×44 transparent with an iOS-blue
   glyph, overlapping the last card. Mock: 36px white circles at the row edges. */
.product-collection .swiper-button-prev, .product-collection .swiper-button-next { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #fff !important; color: var(--hx-ink) !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; top: 50% !important; margin-top: -18px !important; display: flex !important; align-items: center; justify-content: center; }
.product-collection .swiper-button-prev::after, .product-collection .swiper-button-next::after { font-family: var(--hx-font) !important; font-size: 22px !important; line-height: 1; font-weight: 600; color: var(--hx-ink) !important; }
.product-collection .swiper-button-prev::after { content: "\2039" !important; } .product-collection .swiper-button-next::after { content: "\203A" !important; }
.product-collection .swiper-button-prev { left: -6px !important; } .product-collection .swiper-button-next { right: -6px !important; }
.product-collection .swiper-button-disabled { opacity: 0 !important; pointer-events: none; }
/* R4-3 Phones: one HTML collection's inline wrapper ran 7px past the viewport
   (horizontal scrollbar at 375). Clip the wrappers; inner scrollers keep scrolling. */
@media (max-width: 769px) { .sx-import-wrap { max-width: 100% !important; min-width: 0 !important; overflow-x: clip; } }
/* R4-4 Notice bar on phones: the full message wrapped to two lines; the mock shows
   only the free-gift item on phones. notice_message now carries <span> parts. */
@media (max-width: 769px) { .notice .notice-message .n-desk { display: none !important; } }
.notice .notice-message b { color: #ffd76a; font-weight: 700; }
/* R4-5 About page: "Timings 8 AM – 9 PM" and "Delivering in 5 kms" are platform
   defaults (the store has no hours and delivers across India). Hidden until the
   merchant sets real values. */
.sh-aboutus-location-storeinfo { display: none !important; }

/* R3-4 MRP on product cards (home rows, collection and category grids). The theme's
   card has no MRP element and no setting, so the MRP is written per product from the
   catalogue (public super-products feed) and keyed on the card's PDP link.
   Regenerate this block with build_mrp_css.py whenever a price or MRP changes. */
.product-card .product-card-price { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.product-card .product-card-price::after { font-size: 12.5px; font-weight: 500; color: #8b9486; text-decoration: line-through; white-space: nowrap; }
.product-card:has(a.product-card-link[href$="/products/20-bar-compact-espresso-machine"]) .product-card-price::after { content: "MRP \20B9 14,999"; }
.product-card:has(a.product-card-link[href$="/products/3-in-1-travel-tripod-with-phone-mount"]) .product-card-price::after { content: "MRP \20B9 2,999"; }
.product-card:has(a.product-card-link[href$="/products/carote-21pcs-pots-and-pans-set-non-stick-detachable-handle-cookware-black"]) .product-card-price::after { content: "MRP \20B9 15,555"; }
.product-card:has(a.product-card-link[href$="/products/dried-mealworms-bird-treat-1-kg"]) .product-card-price::after { content: "MRP \20B9 999"; }
.product-card:has(a.product-card-link[href$="/products/galaxy-star-projector-with-timer-and-speed-control"]) .product-card-price::after { content: "MRP \20B9 2,499"; }
.product-card:has(a.product-card-link[href$="/products/glow-in-dark-aquarium-coral-decor"]) .product-card-price::after { content: "MRP \20B9 799"; }
.product-card:has(a.product-card-link[href$="/products/glowing-aquarium-mushroom-plants"]) .product-card-price::after { content: "MRP \20B9 699"; }
.product-card:has(a.product-card-link[href$="/products/mandala-projection-lantern-lights-set-of-2"]) .product-card-price::after { content: "MRP \20B9 1,799"; }
.product-card:has(a.product-card-link[href$="/products/motion-sensor-night-light-16-colours"]) .product-card-price::after { content: "MRP \20B9 999"; }
.product-card:has(a.product-card-link[href$="/products/portable-rechargeable-blender-400-ml"]) .product-card-price::after { content: "MRP \20B9 2,299"; }
.product-card:has(a.product-card-link[href$="/products/practice-golf-balls-pack-of-6"]) .product-card-price::after { content: "MRP \20B9 1,999"; }
.product-card:has(a.product-card-link[href$="/products/rechargeable-electric-lint-remover"]) .product-card-price::after { content: "MRP \20B9 899"; }
.product-card:has(a.product-card-link[href$="/products/sensarte-ceramic-cookware-sets-pots-and-pans-set-non-stick-14-piece-induction-cookware-non-toxic-healthy-non-stick-kitchen-cooking-set-with-frying-pans-set-pfas-ptfe-pfoa-pfos-free"]) .product-card-price::after { content: "MRP \20B9 17,727"; }
.product-card:has(a.product-card-link[href$="/products/silver-feng-shui-buddha-idols-set-of-2"]) .product-card-price::after { content: "MRP \20B9 1,999"; }
.product-card:has(a.product-card-link[href$="/products/smart-key-and-item-finder-tag"]) .product-card-price::after { content: "MRP \20B9 1,299"; }
.product-card:has(a.product-card-link[href$="/products/stanley-quick-flip-go-water-bottle-36-oz-push-button-lid-leakproof-and-packable-for-travel-and-sports"]) .product-card-price::after { content: "MRP \20B9 9,899"; }
.product-card:has(a.product-card-link[href$="/products/zen-buddha-incense-tray-set"]) .product-card-price::after { content: "MRP \20B9 1,499"; }

/* R6 (30 Oct 2026): MRP on its own line BELOW the sale price on product cards.
   .product-card .product-card-price (see rule above) is a row flex container, so the
   MRP ::after rendered inline to the right of the price. Switch it to a left-aligned
   vertical stack so the struck-through MRP drops to its own line under the sale price. */
.product-card .product-card-price { flex-direction: column !important; align-items: flex-start !important; row-gap: 2px !important; }
.product-card .product-card-price::after { display: block !important; }