/* হাট (Haat) theme — reuses the SAME component class names as the default
theme's storefront.css (~90% of its ~700 rules are already CSS-var-driven:
var(--primary), var(--radius-lg), var(--shadow-sm), etc.), so tokens.css
alone re-skins most of it into the green/gold/cream identity automatically.
The handful of rules below that had DEFAULT-theme-specific hardcoded hex
(a shadow tint matching #0f6e5e, a gradient stop, etc. — not tokens) are
hand-adjusted for haat's palette; everything else is untouched from the
default theme. This mirrors real theme systems reusing a shared component
skeleton and differing mainly by tokens + a few hand-tuned accents — the
two themes' bespoke pieces are Header.tsx, Footer.tsx, tokens.css, and
this file's patched spots; block components (Hero, ProductGrid, etc.) are
imported directly from the default theme (see components/blocks.tsx). */
.sec-title { font-size: 22px; font-weight: 700; color: var(--text-heading); margin: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.see-all { font-size: 13px; font-weight: 600; color: var(--primary); }
.block { padding: 32px 0; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.badge-success { background: var(--success-subtle); color: var(--success); }
.badge-accent { background: var(--accent-subtle); color: var(--accent); }
/* announcement */
.announce { background: var(--text-heading); color: #fff; font-size: 12.5px; text-align: center; padding: 7px 0; }
.announce b { color: var(--secondary); }
/* header */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(20,32,28,.04); border-bottom: 1px solid var(--border); }
html.dark .site-header { background: rgba(22,30,27,.82); }
/* longhand top/bottom only — a `padding: 14px 0` shorthand here would zero
out the shared `.container` class's own left/right 24px gutter on this
same element (`className="container header-top"`), since this stylesheet
loads after globals.css and wins the cascade for any side it touches. */
.header-top { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--text-heading); flex-shrink: 0; }
.logo .mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.search-wrap { flex: 1; position: relative; }
.search-wrap input { width: 100%; padding: 11px 16px 11px 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong); background: var(--surface-2); font-size: 14px; color: var(--text-body); outline: none; }
.search-wrap input:focus { border-color: var(--primary); background: var(--surface); }
.search-wrap .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hact { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 11px; color: var(--text-muted); font-weight: 600; position: relative; }
.hact-btn { border: none; background: transparent; }
.hact:hover { background: var(--surface-2); color: var(--text-heading); }
.hact .cnt { position: absolute; top: 0; right: 6px; background: var(--secondary); color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; }
.nav-bar { border-top: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: 28px; padding: 11px 0; font-size: 13.5px; font-weight: 600; color: var(--text-body); overflow-x: auto; }
.nav-inner a:hover { color: var(--primary); }
.nav-inner .catbtn { display: flex; align-items: center; gap: 6px; color: var(--primary); flex-shrink: 0; }
/* hero */
.hero { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding-top: 24px; }
.hero-main { border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); min-height: 280px; padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; overflow: hidden; }
.hero-main .tag { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; }
.hero-main h1 { font-size: 32px; font-weight: 800; color: var(--text-heading); margin: 0; max-width: 420px; }
.hero-main p { color: var(--text-muted); font-size: 14px; margin: 0; max-width: 380px; }
.hero-side { display: flex; flex-direction: column; gap: 16px; }
.hero-card { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); min-height: 132px; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hero-card.warm { background: var(--secondary-subtle); }
.hero-card h4 { margin: 0; font-size: 15px; color: var(--text-heading); }
.hero-card span { font-size: 12px; color: var(--text-muted); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
/* flash sale */
.flash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.flash-title { display: flex; align-items: center; gap: 10px; }
.flash-title h2 { color: var(--secondary); }
.timer { display: flex; gap: 6px; }
.timer .u { background: var(--text-heading); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 8px; border-radius: 6px; min-width: 32px; text-align: center; }
.flash-landing { background: linear-gradient(120deg, var(--secondary-subtle), var(--primary-subtle)); border-bottom: 1px solid var(--border); padding: 42px 0; }
.flash-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.flash-landing h1 { color: var(--text-heading); font-size: 34px; line-height: 1.16; margin: 12px 0 10px; }
.flash-landing p { color: var(--text-muted); margin: 0; max-width: 650px; line-height: 1.7; }
.flash-landing .timer .u { min-width: 54px; padding: 10px 12px; font-size: 15px; box-shadow: var(--shadow-sm); }
.flash-note { display: inline-flex; align-items: center; gap: 8px; background: var(--success-subtle); color: var(--success); border: 1px solid rgba(46,125,50,.16); border-radius: var(--radius-md); padding: 10px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 18px; }
/* scroller / grid */
.scroller { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 24px 6px 52px; scrollbar-width: none; -ms-overflow-style: none; align-items: flex-start; }
.scroller::-webkit-scrollbar { display: none; }
.grid-static { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-static { grid-template-columns: repeat(3, 1fr); } }
/* product card */
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); flex-shrink: 0; width: 212px; position: relative; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1); }
.pcard-link { display: block; color: inherit; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,32,28,.16), 0 4px 10px rgba(20,32,28,.08); }
/* হাট product card image — salonix's is a SQUARE (aspect-ratio:1) white
box with the photo CONTAINED (not cropped/covered), because product shots
in the reference are studio cutouts on transparent/white backgrounds, not
full-bleed lifestyle photos. */
.pcard .img { aspect-ratio: 1; height: auto; background-color: #fff; background-size: contain; background-position: center; background-repeat: no-repeat; background-origin: content-box; padding: 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; position: relative; overflow: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .img { transform: none; }
.pcard .img .disc { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: var(--radius-pill); }
.pcard .img .wish { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); }
/* body — reference order is PRICE, then NAME, then a foot row (brand-or-unit
left / delivery-eta right); the shared component's DOM order is
vendor→name→rating→price-row (fixed for every theme), so this reorders
visually with flexbox instead of touching shared markup. Rating isn't
shown on the reference's grid cards at all (only on the product page). */
.pcard .body { padding: 26px 13px 13px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.pcard .price-row { order: 1; margin-bottom: 4px; }
.pcard .name { order: 2; font-size: 13px; font-weight: 500; color: var(--text-heading); margin-bottom: 6px; line-height: 1.3; height: 34px; overflow: hidden; }
.pcard .rating { display: none; }
.pcard .vendor {
order: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 10.5px;
color: var(--text-muted);
margin-bottom: 0;
padding-top: 4px;
border-top: 1px solid var(--border);
}
.pcard .vendor::after { content: "ডেলিভারি ১–৩ দিন"; flex-shrink: 0; }
.pcard .price { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pcard .old { font-size: 11px; color: var(--text-muted); text-decoration: line-through; }
/* quick-add — straddles the image/body seam, like the reference's
always-visible .pc-add (poking up over the image's bottom-right corner).
It's a child of `.img` (position:relative, itself sized by aspect-ratio:1
so it scales with the card) and anchored with bottom/right offsets rather
than a hardcoded top:212px-19px — that old fixed-width assumption broke
on any grid where `.pcard` isn't the scroller's fixed 212px (responsive
`.pgrid`, viewport resizes, mobile breakpoints), leaving the button
floating at the wrong spot once the card was narrower or wider. */
.quick-add { position: absolute; bottom: -19px; right: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); opacity: 1; transform: none; transition: background .2s, color .2s, transform .2s, border-color .2s; z-index: 3; }
.quick-add:hover { background: var(--primary); color: #fff; transform: scale(1.06); }
.quick-add.added { background: var(--success); color: #fff; }
/* The Lucide +/check icon has only HTML width/height ATTRIBUTES (16), no
CSS size — as a flex child with no explicit CSS width it can collapse to
0 actual rendered width in some contexts (confirmed live: the desktop
search dropdown's `.live-search-row .quick-add` renders as a solid
filled circle with the icon completely invisible, computed
`width: 0px` despite `height: 16px`) while `.pcard`'s own quick-add
circle happens to render fine. Pin the size explicitly instead of
relying on the SVG's attributes to survive flex layout everywhere this
button appears. */
.quick-add svg { width: 16px; height: 16px; flex-shrink: 0; }
/* the reference grid has no compare feature at all — hide it here rather
than showing an element the design doesn't include. */
.compare-action.compact { display: none; }
.compare-action:not(.compact) { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.compare-link { color: var(--primary); font-size: 12.5px; font-weight: 800; }
.wish-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-heading); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; border-radius: 999px; padding: 0 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .18s, color .18s, border-color .18s, transform .18s; }
.wish-btn.compact { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.94); opacity: 0; transform: translateY(-6px) scale(.94); }
.pcard:hover .wish-btn.compact, .wish-btn.compact.selected { opacity: 1; transform: translateY(0) scale(1); }
.wish-btn:hover, .wish-btn.selected { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.wish-btn:disabled { opacity: .65; cursor: progress; }
.carousel-wrap { position: relative; }
.car-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--text-heading); cursor: pointer; z-index: 5; transition: .15s; }
.car-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.car-arrow.prev { left: -8px; }
.car-arrow.next { right: -8px; }
@media (max-width: 700px) { .car-arrow { display: none; } }
/* category pill grid */
.cat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: .15s; }
.cat-item:hover { border-color: var(--primary); background: var(--primary-subtle); }
.cat-item .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-subtle); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); }
.cat-item span { font-size: 12.5px; font-weight: 600; color: var(--text-heading); }
/* entity card */
.ent-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-align: center; flex-shrink: 0; width: 150px; }
.ent-card .av { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-subtle); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-size: 20px; }
.ent-card h5 { margin: 0 0 3px; font-size: 13px; color: var(--text-heading); }
.ent-card span { font-size: 11px; color: var(--text-muted); }
/* blog card */
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; width: 280px; }
.blog-card .img { height: 130px; background: var(--surface-2); }
.blog-card .body { padding: 14px; }
.blog-card .cat { font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }
.blog-card h5 { margin: 0 0 6px; font-size: 14px; color: var(--text-heading); line-height: 1.35; }
.blog-card span { font-size: 11.5px; color: var(--text-muted); }
/* app promo */
.app-promo { border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.app-promo h3 { margin: 0 0 8px; font-size: 22px; color: var(--text-heading); }
.app-promo p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; max-width: 400px; }
.store-btns { display: flex; gap: 10px; }
.store-btn { background: var(--text-heading); color: #fff; padding: 9px 16px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: 600; }
/* footer — deliberately uses its own --footer-* tokens rather than the
page's --text-heading/--surface, since it always stays this dark shade
regardless of light/dark site mode (see tokens.css for why). */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 56px 0 22px; margin-top: 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; margin-bottom: 36px; }
.footer-grid h5 { color: var(--footer-heading); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; margin: 0 0 16px; }
.footer-grid a { display: block; font-size: 13px; color: var(--footer-text-muted); margin-bottom: 10px; width: fit-content; transition: color .15s ease; }
.footer-grid a:hover { color: var(--footer-heading); }
.footer-social a { transition: background .15s ease, transform .15s ease; }
.footer-social a:hover { background: var(--secondary) !important; transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--footer-border); padding-top: 20px; font-size: 12px; color: var(--footer-text-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.trust-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-badges span { background: var(--footer-bg-2); color: var(--footer-text); padding: 5px 10px; border-radius: 6px; font-size: 11px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* buttons (shared) */
.btn-primary { background: var(--primary); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: var(--radius-pill); border: none; font-size: 14px; box-shadow: 0 8px 20px rgba(31,75,58,.22); transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); font-weight: 700; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13.5px; }
.btn-secondary { background: var(--secondary); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: var(--radius-pill); border: none; font-size: 14px; box-shadow: 0 8px 20px rgba(200,169,107,.25); }
/* toggle (dark mode) */
.theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 99; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; box-shadow: var(--shadow-md); }
.theme-toggle button { border: none; background: transparent; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }
.theme-toggle button.active { background: var(--primary); color: #fff; }
.toast-msg { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(24px) scale(.9); max-width: min(86vw, 320px); background: var(--text-heading); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 999; box-shadow: var(--shadow-lg); font-variant-numeric: tabular-nums; }
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
@media (max-width: 760px) {
.toast-msg { bottom: calc(var(--bottomnav-h, 62px) + 14px); font-size: 12px; padding: 8px 14px; }
}
#miniCartDrawer { position: fixed; inset: 0; background: rgba(10,15,13,.5); z-index: 800; display: none; justify-content: flex-end; backdrop-filter: blur(3px); }
#miniCartDrawer.show { display: flex; }
#miniCartDrawer .mc-panel { width: 400px; max-width: 92vw; background: var(--surface); height: 100%; display: flex; flex-direction: column; box-shadow: -12px 0 50px rgba(0,0,0,.25); animation: mcSlide .28s cubic-bezier(.2,.8,.2,1); }
@keyframes mcSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
#miniCartDrawer .mc-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
#miniCartDrawer .mc-head h4 { margin: 0; font-size: 15px; color: var(--text-heading); display: flex; align-items: center; gap: 8px; }
#miniCartDrawer .mc-close { color: var(--text-muted); cursor: pointer; font-size: 12.5px; display: flex; align-items: center; gap: 4px; border: none; background: transparent; }
#miniCartDrawer .mc-body { flex: 1; overflow: auto; padding: 8px 20px; }
#miniCartDrawer .mc-foot { padding: 18px 20px; border-top: 1px solid var(--border); }
#miniCartDrawer .mc-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; }
#miniCartDrawer .mc-item:last-child { border-bottom: none; }
#miniCartDrawer .mc-thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; background: var(--primary-subtle); position: relative; overflow: hidden; }
#miniCartDrawer .mc-info { flex: 1; min-width: 0; }
#miniCartDrawer .mc-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; line-height: 1.35; }
#miniCartDrawer .mc-price { font-size: 12.5px; color: var(--text-muted); }
#miniCartDrawer .mc-qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#miniCartDrawer .mc-qty button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; font-size: 13px; color: var(--text-heading); display: flex; align-items: center; justify-content: center; }
#miniCartDrawer .mc-qty span { font-size: 12px; min-width: 14px; text-align: center; }
#miniCartDrawer .mc-remove { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
#miniCartDrawer .mc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 60px 20px; color: var(--text-muted); }
#miniCartDrawer .mc-empty p { font-size: 13px; margin: 0; max-width: 220px; }
#miniCartDrawer .mc-empty-cta { display: inline-block; margin-top: 4px; padding: 9px 22px; border-radius: var(--radius-md); background: var(--primary); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; }
#miniCartDrawer .mc-total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; color: var(--text-heading); margin-bottom: 14px; }
#miniCartDrawer .mc-checkout { display: block; width: 100%; text-align: center; background: var(--secondary); color: #fff; border: none; padding: 13px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 8px 20px rgba(200,169,107,.3); }
#miniCartDrawer .mc-viewcart { display: block; width: 100%; text-align: center; background: transparent; color: var(--primary); border: 1.5px solid var(--primary); padding: 10px; border-radius: var(--radius-md); font-weight: 700; font-size: 12.5px; margin-top: 8px; cursor: pointer; }
/* Free-delivery progress bar — ported from salonix.css's `.ship-progress`
(~line 1168-1177), shown in the mini-cart drawer footer above the total
(salonix's cart/drawer footer both use this same block). হাট-only: gated
in cart-context.tsx by `isHaat`. */
#miniCartDrawer .ship-progress { font-size: 12px; margin-bottom: 14px; }
#miniCartDrawer .ship-progress .sp-row { display: flex; align-items: center; gap: 7px; color: var(--secondary); font-weight: 600; margin-bottom: 8px; }
#miniCartDrawer .ship-progress.done .sp-row { color: var(--primary); }
#miniCartDrawer .ship-progress .sp-track { height: 7px; border-radius: var(--radius-pill); background: var(--primary-subtle); overflow: hidden; }
#miniCartDrawer .ship-progress .sp-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--secondary), var(--secondary-hover, var(--secondary))); transition: width .5s cubic-bezier(.2,.75,.3,1); }
#miniCartDrawer .ship-progress.done .sp-fill { background: linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.bottom-nav { display: none; }
@media (max-width: 760px) {
body { padding-bottom: 62px; }
.announce { font-size: 11px; padding: 6px 12px; }
.header-top { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.logo { font-size: 18px; }
.search-wrap { order: 3; flex-basis: 100%; }
.header-top { flex-wrap: wrap; }
.header-actions .lbl { display: none; }
.header-actions { margin-left: auto; }
.hact { padding: 6px 8px; }
.nav-inner { gap: 18px; padding: 9px 0; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px 8px; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
.bn-item { flex: 1; border: none; background: transparent; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; position: relative; }
.bn-item:hover { color: var(--primary); }
.bn-cart-dot { position: absolute; top: -2px; right: 26%; background: var(--secondary); color: #fff; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.theme-toggle { bottom: 74px; right: 12px; }
}
/* ===== Category / Search page (ported from Design/04-Category-Page.html, 05-Search-Results.html) ===== */
.crumb { padding: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }
.crumb a { color: var(--primary); }
.cat-banner { margin: 16px 0; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; }
.cat-banner h1 { margin: 0 0 6px; font-size: 26px; color: var(--text-heading); }
.cat-banner p { margin: 0; color: var(--text-muted); font-size: 13.5px; max-width: 520px; }
.cat-banner .cnt { font-size: 12px; color: var(--text-muted); background: var(--surface); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); flex-shrink: 0; }
.subcats { display: flex; gap: 12px; overflow-x: auto; padding: 16px 0; }
.subcat-chip { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.subcat-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; padding-bottom: 48px; }
.filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; align-self: start; position: sticky; top: 80px; }
.filters h4 { font-size: 14px; margin: 0 0 12px; color: var(--text-heading); }
.f-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.f-group:last-child { border-bottom: none; margin-bottom: 0; }
.f-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); margin-bottom: 9px; cursor: pointer; }
.f-opt input { accent-color: var(--primary); }
.f-opt .cnt { color: var(--text-muted); font-size: 11.5px; margin-left: auto; }
.price-range { display: flex; gap: 8px; align-items: center; }
.price-range input { width: 100%; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 12.5px; }
.price-range button { border: none; background: var(--primary); color: #fff; border-radius: 7px; padding: 8px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.clear-f { font-size: 12px; color: var(--primary); font-weight: 600; cursor: pointer; }
.result-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.result-count { font-size: 13.5px; color: var(--text-muted); }
.result-count b { color: var(--text-heading); }
.sort-row { display: flex; align-items: center; gap: 10px; }
.sort-row select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--text-body); }
.view-toggle { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.view-toggle button { border: none; background: var(--surface); padding: 7px 10px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.view-toggle button.active { background: var(--primary); color: #fff; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, 1fr); } .layout { grid-template-columns: 1fr; } .filters { display: none; } }
/* `1fr` grid tracks default to a min-width of the content's min-content
size, not 0 — at phone widths 3 columns of pcard content (image + name +
price) can't actually shrink to fit, so they silently overflowed past the
viewport (clipped by `.haat-shell-main`'s `overflow-x:hidden` rather than
scrolling), hiding the 2nd/3rd column's content entirely. Collapsing to 2
columns below 640px is the same fix the reference site's own
`.grid-products` gets for free from its `auto-fill minmax()` sizing. */
@media (max-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
/* .pcard's own `width:212px` (below) is sized for the horizontal Carousel
(a flex row of fixed-width, flex-shrink:0 cards) — reused verbatim inside
`.pgrid` (a CSS grid), that fixed width fought the grid track's own width
at every breakpoint, which was the actual overflow culprit above (the
column-count fix alone wasn't enough). Grid cards need to fill their
track instead. */
.pgrid .pcard { width: auto; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.pagination button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-body); cursor: pointer; }
.pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.seo-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-top: 32px; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.seo-block h4 { color: var(--text-heading); margin: 0 0 10px; }
/* ===== Product Detail page (ported from Design/06-Product-Details.html) ===== */
.pdp { display: grid; grid-template-columns: 440px 1fr 300px; gap: 32px; padding-bottom: 20px; }
@media (max-width: 1100px) { .pdp { grid-template-columns: 1fr; } }
/* Square, like the reference's `.pg-main{aspect-ratio:1}` — a fixed
420px height looked fine in the 440px-wide desktop column but turned
into a huge, oddly-proportioned rectangle once the column widened at
narrower (single/two-column) breakpoints. */
.gallery { position: sticky; top: 150px; }
@media (max-width: 1100px) { .gallery { position: static; } }
.gallery .main { aspect-ratio: 1; max-height: 480px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-subtle), var(--accent-subtle)); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; margin-bottom: 12px; position: relative; overflow: hidden; }
.gallery .main .zoom { position: absolute; bottom: 12px; right: 12px; background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 11px; box-shadow: var(--shadow-sm); }
.thumbs { display: flex; gap: 8px; }
.thumbs .t { width: 64px; height: 64px; border-radius: 8px; background: var(--surface-2); border: 2px solid var(--border); flex-shrink: 0; position: relative; overflow: hidden; }
.thumbs .t.active { border-color: var(--primary); }
.pinfo .vendor-line { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.pinfo .vendor-line a { color: var(--primary); font-weight: 600; }
.pinfo h1 { font-size: 22px; margin: 0 0 8px; color: var(--text-heading); line-height: 1.35; }
.rating-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.rating-line b { color: var(--warning); }
.rating-line .sku { border-left: 1px solid var(--border); padding-left: 10px; }
.price-block { background: var(--surface-2); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.price-block .now { font-size: 26px; font-weight: 800; color: var(--text-heading); }
.price-block .old { font-size: 14px; color: var(--text-muted); text-decoration: line-through; margin-left: 8px; }
.price-block .badge { background: var(--success-subtle); color: var(--success); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-left: 8px; }
.price-block .stock { font-size: 12.5px; color: var(--success); margin-top: 6px; font-weight: 600; }
.qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.qty-ctrl { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.qty-ctrl button { border: none; background: var(--surface-2); width: 32px; height: 34px; font-size: 16px; cursor: pointer; color: var(--text-heading); }
.qty-ctrl span { width: 36px; text-align: center; font-size: 14px; }
.cta-row { display: flex; gap: 10px; margin-bottom: 18px; }
.pdp .btn { flex: 1; padding: 13px; border-radius: var(--radius-md); border: none; font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: center; }
.btn-buy { background: var(--secondary); color: #fff; }
.btn-cart { background: var(--primary); color: #fff; }
.btn-cart:disabled, .btn-buy:disabled { opacity: .5; cursor: not-allowed; }
.btn-wish { width: 46px; flex: none; border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-md); color: var(--text-muted); }
.wish-btn-inline { position: static; width: 46px; height: 46px; flex: none; padding: 0; border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-md); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.wish-btn-inline.selected { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.book-meta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; font-size: 12.5px; color: var(--text-body); }
.book-meta .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.book-meta .row:last-child { border-bottom: none; }
.book-meta .row span:first-child { color: var(--text-muted); }
.book-meta .row span:last-child { font-weight: 500; color: var(--text-heading); }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; }
.side-card h5 { margin: 0 0 10px; font-size: 13px; color: var(--text-heading); }
.delivery-row { display: flex; gap: 10px; font-size: 12.5px; margin-bottom: 10px; align-items: flex-start; }
.delivery-row .ic { color: var(--primary); }
.vendor-card { display: flex; align-items: center; gap: 10px; }
.vendor-card .av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.vendor-card .name { font-size: 13.5px; font-weight: 600; color: var(--text-heading); }
.vendor-card .meta { font-size: 11.5px; color: var(--text-muted); }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin: 36px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.tabs span { padding-bottom: 12px; cursor: pointer; }
.tabs span.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.tab-content { padding: 24px 0; font-size: 13.5px; line-height: 1.8; color: var(--text-body); }
.tab-content h4 { color: var(--text-heading); font-size: 15px; }
.review-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.review-item .top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.review-item .user { font-weight: 600; color: var(--text-heading); font-size: 13.5px; }
.review-item .stars { color: var(--warning); font-size: 12.5px; }
.review-item p { margin: 6px 0 0; color: var(--text-body); }
.rel-section { padding: 24px 0; }
.rel-section h3 { font-size: 18px; margin: 0 0 16px; color: var(--text-heading); }
.fbt-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin: 12px 0 20px; }
.fbt-row { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; }
.fbt-item { width: 150px; flex-shrink: 0; position: relative; }
.fbt-thumb { width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--primary-subtle); margin-bottom: 8px; }
.fbt-item .name { font-size: 12.5px; line-height: 1.35; color: var(--text-heading); font-weight: 600; height: 34px; overflow: hidden; }
.fbt-plus { position: absolute; top: 54px; right: -16px; width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; z-index: 2; }
/* ===== Search Results page (ported from Design/05-Search-Results.html) ===== */
.result-head { padding: 20px 0 0; }
.result-head h1 { font-size: 19px; margin: 0 0 4px; color: var(--text-heading); }
.result-head .meta { font-size: 13px; color: var(--text-muted); }
.result-head .meta b { color: var(--text-heading); }
.tabbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 18px; margin-bottom: 4px; }
.tabbar a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-body); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.tabbar a span { color: var(--text-muted); font-size: 11px; font-weight: 800; }
.tabbar a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tabbar a.active span { color: rgba(255,255,255,.82); }
.typed-strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 18px; margin-bottom: 14px; }
.typed-card { width: 180px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; color: var(--text-body); box-shadow: var(--shadow-sm); }
.typed-card .ic, .entity-result .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.typed-card b { display: block; color: var(--text-heading); font-size: 13.5px; margin-bottom: 5px; line-height: 1.35; }
.typed-card span { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.45; height: 34px; overflow: hidden; }
.entity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.entity-result { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; color: var(--text-body); }
.entity-result .ic { flex-shrink: 0; margin-bottom: 0; }
.entity-result b { display: block; color: var(--text-heading); margin-bottom: 5px; font-size: 14px; }
.entity-result span { display: block; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 760px) { .entity-grid { grid-template-columns: 1fr; } }
.empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 60px 24px; text-align: center; }
.empty .ic { font-size: 40px; margin-bottom: 14px; }
.empty h3 { margin: 0 0 8px; color: var(--text-heading); }
.empty p { margin: 0 0 18px; color: var(--text-muted); font-size: 13.5px; }
.empty .sugg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.empty .sugg span { background: var(--surface-2); border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: var(--primary); }
/* ===== Cart / Checkout page (ported from Design/07-Cart.html, 08-Checkout.html) ===== */
.page-title { padding: 24px 0 4px; font-size: 22px; color: var(--text-heading); }
.steps { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); padding-bottom: 20px; }
.steps .on { color: var(--primary); font-weight: 700; }
.co-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding-bottom: 60px; }
@media (max-width: 900px) { .co-layout { grid-template-columns: 1fr; } }
.vendor-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.vg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-heading); }
.vg-head .ship-note { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.cart-item { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); align-items: center; }
.cart-item:last-child { border-bottom: none; }
.ci-thumb { width: 72px; height: 72px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-subtle), var(--accent-subtle)); flex-shrink: 0; }
.ci-info { flex: 1; }
.ci-info .name { font-size: 13.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; }
.ci-info .var { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.ci-price { font-size: 14px; font-weight: 700; color: var(--text-heading); }
.co-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.co-qty-ctrl button { border: none; background: var(--surface-2); width: 28px; height: 30px; font-size: 15px; cursor: pointer; color: var(--text-heading); }
.co-qty-ctrl span { width: 32px; text-align: center; font-size: 13px; }
.ci-remove { font-size: 11.5px; color: var(--error); cursor: pointer; margin-top: 8px; background: none; border: none; padding: 0; }
.ci-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; align-self: start; position: sticky; top: 20px; }
.summary h4 { margin: 0 0 14px; font-size: 15px; color: var(--text-heading); }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-body); padding: 7px 0; }
.sum-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; font-size: 17px; font-weight: 800; color: var(--text-heading); }
.checkout-btn { width: 100%; background: var(--secondary); color: #fff; border: none; padding: 14px; border-radius: var(--radius-md); font-weight: 700; font-size: 14.5px; margin-top: 16px; cursor: pointer; }
.checkout-btn:disabled { opacity: .5; cursor: not-allowed; }
.trust-mini { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.trust-mini span { background: var(--surface-2); border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px; font-size: 11px; color: var(--text-muted); }
.coupon-row { display: flex; gap: 8px; margin: 12px 0; }
.coupon-row input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-body); font-size: 12.5px; }
.coupon-row button { border: none; background: var(--primary); color: #fff; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 700; }
.coupon-row button:disabled { opacity: .6; cursor: not-allowed; }
.applied-coupon { display: flex; align-items: center; gap: 8px; background: var(--success-subtle); color: var(--success); padding: 9px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; }
.sum-row .disc { color: var(--success); }
.cart-item input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.empty-cart { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 60px; text-align: center; }
.empty-cart .ic { font-size: 40px; margin-bottom: 12px; }
.empty-cart h3 { margin: 0 0 8px; color: var(--text-heading); }
.empty-cart p { margin: 0 0 18px; color: var(--text-muted); font-size: 13.5px; }
.empty-cart .btn-primary { display: inline-flex; }
/* checkout form */
.co-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.co-section h4 { margin: 0 0 14px; font-size: 15px; color: var(--text-heading); }
.co-field { margin-bottom: 14px; }
.co-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 6px; }
.co-field input, .co-field select, .co-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13.5px; background: var(--surface); color: var(--text-body); font-family: inherit; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-fields-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 12px; }
.co-fields-grid .co-field { min-width: 0; }
@media (max-width: 560px) { .co-fields-grid > .co-field { grid-column: span 6 !important; } }
.min-order-notice { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); }
.min-order-notice .mon-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-heading); }
.min-order-notice .mon-track { height: 5px; border-radius: 999px; background: var(--border); margin: 8px 0 6px; overflow: hidden; }
.min-order-notice .mon-fill { height: 100%; background: var(--warning, #b0791f); border-radius: 999px; transition: width .3s ease; }
.min-order-notice .mon-sub { font-size: 11px; color: var(--text-muted); }
.sb-locked { opacity: .6; pointer-events: none; text-align: center; display: flex; align-items: center; justify-content: center; }
.haat-auth-pw-wrap { position: relative; }
.haat-auth-pw-wrap input { padding-right: 38px !important; }
.haat-auth-pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--text-muted); display: flex; align-items: center; padding: 4px; }
.haat-auth-pw-toggle:hover { color: var(--text-body); }
.pay-opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border-strong); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; font-size: 13.5px; cursor: pointer; }
.pay-opt.active { border-color: var(--primary); background: var(--primary-subtle); }
.pay-choice { width: 100%; background: var(--surface); color: var(--text-body); text-align: left; font-family: inherit; }
.pay-choice svg { color: var(--primary); flex-shrink: 0; }
.pay-choice span { line-height: 1.45; }
.place-btn { width: 100%; background: var(--secondary); color: #fff; border: none; padding: 14px; border-radius: var(--radius-md); font-weight: 700; font-size: 14.5px; margin-top: 8px; cursor: pointer; }
.place-btn:disabled { opacity: .5; cursor: not-allowed; }
.confirm-shell { max-width: 880px; margin: 0 auto; padding: 56px 0 72px; text-align: center; }
.confirm-shell h1 { margin: 0 0 8px; font-size: 24px; color: var(--text-heading); }
.confirm-shell > p { margin: 0 0 24px; color: var(--text-muted); }
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.confirm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.confirm-card h4 { margin: 0 0 14px; color: var(--text-heading); font-size: 14.5px; }
.timeline { display: grid; gap: 10px; }
.tl-row { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; }
.tl-row.done { color: var(--success); font-weight: 700; }
.confirm-card p { display: flex; gap: 8px; align-items: flex-start; color: var(--text-body); line-height: 1.6; margin: 0 0 14px; }
@media (max-width: 760px) { .confirm-grid { grid-template-columns: 1fr; } }
/* ===== Account page (ported from Design/09-Customer-Account.html) ===== */
.acc-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; padding: 24px 0 60px; }
@media (max-width: 900px) { .acc-layout { grid-template-columns: 1fr; } .sidebar { display: none; } }
.sidebar { align-self: start; position: sticky; top: 20px; }
.profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; text-align: center; }
.profile-card .av { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.profile-card .name { font-weight: 700; font-size: 14px; color: var(--text-heading); }
.profile-card .email { font-size: 11.5px; color: var(--text-muted); }
.nav-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.nav-menu a, .nav-menu button { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13.5px; color: var(--text-body); border-bottom: 1px solid var(--border); cursor: pointer; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; }
.nav-menu a:last-child, .nav-menu button:last-child { border-bottom: none; }
.nav-menu a.active, .nav-menu button.active { background: var(--primary-subtle); color: var(--primary); font-weight: 700; border-left: 3px solid var(--primary); }
h2.ptitle { font-size: 20px; margin: 0 0 18px; color: var(--text-heading); }
.acc-main { min-width: 0; }
.acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.acc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; }
.acc-card h4 { margin: 0 0 12px; font-size: 14.5px; color: var(--text-heading); }
.muted { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.mobile-acc-tabs { display: none; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.mobile-acc-tabs button { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; }
.mobile-acc-tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 900px) { .mobile-acc-tabs { display: flex; } }
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.acc-stats div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.acc-stats span { display: block; color: var(--text-muted); font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
.acc-stats b { color: var(--text-heading); font-size: 20px; font-variant-numeric: tabular-nums; }
.acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .acc-stats { grid-template-columns: repeat(2, 1fr); } .acc-grid2 { grid-template-columns: 1fr; } }
.order-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.order-row:last-child { border-bottom: none; }
.order-row .th { width: 56px; height: 56px; border-radius: 10px; background: var(--primary-subtle); color: var(--primary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.order-row .info { flex: 1; }
.order-row .id { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.order-row .meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.badge-info { background: var(--info-subtle); color: var(--info); }
.badge-warning { background: var(--warning-subtle); color: var(--warning); }
.badge-error { background: var(--error-subtle); color: var(--error); }
.order-row .amt { font-size: 13.5px; font-weight: 700; color: var(--text-heading); }
.auth-box { max-width: 400px; margin: 60px auto; }
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 36px; align-items: stretch; padding: 42px 0 72px; }
.auth-brand { border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); padding: 40px; display: flex; flex-direction: column; justify-content: center; min-height: 430px; }
.auth-brand h1 { margin: 16px 0 22px; max-width: 520px; font-size: 30px; line-height: 1.25; color: var(--text-heading); }
.auth-perks { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-perks span { background: var(--surface); border: 1px solid var(--border); color: var(--text-body); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; }
.auth-split .auth-box { margin: 0; max-width: none; align-self: center; }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; padding-top: 24px; } .auth-brand { min-height: 260px; padding: 28px; } .auth-brand h1 { font-size: 24px; } }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; padding: 10px; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.auth-tabs button.active { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); }
.form-msg { font-size: 12.5px; margin: 0 0 12px; }
.form-msg.error { color: var(--error); }
.form-msg.success { color: var(--success); }
.small-link { display: inline-block; margin: -4px 0 12px; color: var(--primary); font-size: 12.5px; font-weight: 700; }
.wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wish-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.wish-card:hover { box-shadow: var(--shadow-md); }
.wish-img { display: block; position: relative; height: 170px; overflow: hidden; background: linear-gradient(135deg, var(--primary-subtle), var(--accent-subtle)); }
.wish-body { padding: 13px; }
.wish-body .vendor { font-size: 10.5px; color: var(--text-muted); margin-bottom: 3px; }
.wish-body .name { display: block; height: 38px; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--text-heading); font-weight: 700; margin-bottom: 7px; }
.wish-body .rating { color: var(--text-muted); font-size: 11.5px; margin-bottom: 7px; }
.wish-body .rating b { color: var(--warning); }
.wish-body .price-row { display: flex; gap: 7px; align-items: baseline; }
.wish-body .price { font-size: 15px; color: var(--text-heading); font-weight: 800; }
.wish-body .old { font-size: 11px; color: var(--text-muted); text-decoration: line-through; }
.wish-card .quick-add { opacity: 1; transform: none; }
.icon-action { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.92); color: var(--error); display: flex; align-items: center; justify-content: center; cursor: pointer; }
html.dark .icon-action { background: rgba(22,30,27,.92); }
@media (max-width: 1100px) { .wish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .wish-grid { grid-template-columns: 1fr; } }
.address-list { display: grid; gap: 12px; }
.address-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-md); padding: 14px; }
.addr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.addr-top b { color: var(--text-heading); font-size: 13.5px; }
.addr-top span { display: inline-flex; align-items: center; gap: 8px; }
.addr-top em { font-style: normal; font-size: 11px; color: var(--success); font-weight: 800; }
.addr-top button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--error); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.address-card p { margin: 0 0 5px; color: var(--text-body); font-size: 12.8px; line-height: 1.5; }
.address-card p:last-child { margin-bottom: 0; color: var(--text-muted); }
.acc-form { max-width: 720px; }
.empty-mini { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 28px; text-align: center; background: var(--surface-2); }
.empty-mini b { display: block; margin-bottom: 6px; color: var(--text-heading); font-size: 13.5px; }
.empty-mini span { color: var(--text-muted); font-size: 12.8px; }
.review-task { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.review-task:last-child { border-bottom: none; }
.review-task b { display: block; color: var(--text-heading); font-size: 13.5px; }
.review-task span { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
/* ===== Static / Legal / Blog pages ===== */
.static-main { min-height: 60vh; }
.static-hero { background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); padding: 52px 0 44px; border-bottom: 1px solid var(--border); }
.static-hero h1 { margin: 16px 0 10px; color: var(--text-heading); font-size: 34px; line-height: 1.18; max-width: 740px; }
.static-hero p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; max-width: 680px; }
.static-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; padding-top: 34px; padding-bottom: 70px; }
.static-wrap:not(:has(.static-toc)) { display: block; max-width: 920px; }
.static-toc { position: sticky; top: 96px; align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.static-toc h4 { margin: 0 0 10px; color: var(--text-heading); font-size: 13.5px; }
.static-toc a { display: block; color: var(--text-muted); font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.static-toc a:last-child { border-bottom: none; }
.static-toc a:hover { color: var(--primary); }
.static-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; color: var(--text-body); }
.static-article p { margin: 0 0 16px; line-height: 1.8; font-size: 14px; }
.static-article p:last-child { margin-bottom: 0; }
.static-section { margin-bottom: 28px; }
.static-section:last-child { margin-bottom: 0; }
.static-section h2 { color: var(--text-heading); font-size: 18px; margin: 0 0 12px; }
.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.stats-band div, .value-grid div, .contact-grid div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.stats-band b { display: block; color: var(--primary); font-size: 24px; margin-bottom: 4px; }
.stats-band span, .value-grid span, .contact-grid span { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.value-grid b, .contact-grid b { display: block; color: var(--text-heading); margin-bottom: 6px; font-size: 13.5px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.contact-grid svg { color: var(--primary); margin-bottom: 10px; }
.contact-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.faq-list summary { cursor: pointer; color: var(--text-heading); font-weight: 700; font-size: 13.5px; }
.faq-list p { margin: 10px 0 0; color: var(--text-muted); }
.blog-listing { padding-top: 34px; padding-bottom: 72px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.blog-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-tile .img { height: 180px; background: linear-gradient(135deg, var(--primary-subtle), var(--accent-subtle)); position: relative; overflow: hidden; }
.blog-tile .body { padding: 18px; }
.blog-tile span { color: var(--primary); font-size: 11.5px; font-weight: 800; text-transform: uppercase; }
.blog-tile h2 { color: var(--text-heading); font-size: 17px; line-height: 1.35; margin: 8px 0; }
.blog-tile p { color: var(--text-muted); line-height: 1.7; font-size: 13px; margin: 0; }
.page-link { min-width: 34px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; }
.page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.blog-detail { padding: 46px 0 72px; }
.blog-detail h1 { color: var(--text-heading); font-size: 34px; line-height: 1.2; max-width: 820px; margin: 16px 0 8px; }
.blog-meta { color: var(--text-muted); font-size: 13px; margin: 0 0 22px; }
.blog-cover { height: 390px; border-radius: var(--radius-lg); background-color: var(--surface-2); border: 1px solid var(--border); margin-bottom: 24px; position: relative; overflow: hidden; }
.blog-copy { max-width: 820px; }
@media (max-width: 900px) {
.static-hero { padding: 38px 0 32px; }
.static-hero h1, .blog-detail h1 { font-size: 27px; }
.static-wrap { grid-template-columns: 1fr; }
.static-toc { position: static; }
.stats-band, .value-grid, .contact-grid, .blog-grid { grid-template-columns: 1fr; }
.static-article { padding: 20px; }
.blog-cover { height: 240px; }
}
/* ===== Auth / Vendor / 404 pages ===== */
.auth-page { min-height: 560px; }
.notfound-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); }
.nf-card { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; text-align: center; box-shadow: var(--shadow-lg); }
.nf-code { color: var(--primary); font-size: 48px; font-weight: 900; line-height: 1; }
.nf-card h1 { margin: 10px 0 8px; color: var(--text-heading); font-size: 28px; }
.nf-card p { margin: 0 0 20px; color: var(--text-muted); }
.nf-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 7px 7px 14px; margin-bottom: 18px; }
.nf-search svg { color: var(--text-muted); flex-shrink: 0; }
.nf-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--text-body); font-size: 14px; min-width: 0; }
.nf-search button { border: none; border-radius: 999px; background: var(--primary); color: #fff; padding: 9px 16px; font-weight: 700; }
.nf-links { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.nf-links a { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-body); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; }
.vendor-hero { background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); border-bottom: 1px solid var(--border); padding: 46px 0; }
.vendor-head { display: flex; align-items: center; gap: 20px; }
.vendor-mark { width: 76px; height: 76px; border-radius: 18px; background: var(--surface); color: var(--primary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.vendor-head h1 { color: var(--text-heading); margin: 12px 0 8px; font-size: 32px; }
.vendor-head p { color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; max-width: 720px; }
.vendor-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.vendor-meta span { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-body); font-size: 12.5px; font-weight: 700; padding: 7px 12px; }
.vendor-onboard { background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); padding: 44px 0 70px; }
.vendor-onboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 34px; align-items: start; }
.vendor-copy { padding-top: 20px; }
.vendor-copy h1 { color: var(--text-heading); font-size: 34px; line-height: 1.22; margin: 16px 0 12px; max-width: 640px; }
.vendor-copy p { color: var(--text-muted); line-height: 1.75; max-width: 620px; margin: 0 0 24px; }
.seller-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seller-benefits div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; }
.seller-benefits svg { color: var(--primary); margin-bottom: 8px; }
.seller-benefits b { display: block; color: var(--text-heading); margin-bottom: 5px; font-size: 13.5px; }
.seller-benefits span { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.vendor-form h4 { display: flex; align-items: center; gap: 8px; }
/* ===== Compare products ===== */
.compare-page { padding: 42px 0 74px; background: var(--bg); min-height: 560px; }
.compare-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.compare-head h1 { color: var(--text-heading); margin: 8px 0 8px; font-size: 32px; line-height: 1.18; }
.compare-head p { color: var(--text-muted); margin: 0; max-width: 620px; line-height: 1.7; }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 14px; vertical-align: top; text-align: left; min-width: 170px; color: var(--text-body); font-size: 13px; }
.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 156px; background: var(--surface-2); color: var(--text-heading); font-weight: 800; }
.compare-table th { background: var(--surface-2); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table th:last-child, .compare-table td:last-child { border-right: none; }
.compare-product { position: relative; min-height: 196px; }
.compare-product button { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.compare-product button:hover { color: #fff; background: var(--secondary); border-color: var(--secondary); }
.compare-product a { color: inherit; display: block; padding-right: 30px; }
.compare-thumb { width: 104px; height: 104px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary-subtle), var(--accent-subtle)); margin-bottom: 12px; border: 1px solid var(--border); position: relative; overflow: hidden; }
.compare-product b { display: block; color: var(--text-heading); font-size: 13.5px; line-height: 1.35; margin-bottom: 6px; }
.compare-product span { display: block; color: var(--text-muted); font-size: 11.5px; }
/* ===== Order tracking ===== */
.track-page { padding: 34px 0 74px; background: var(--bg); min-height: 620px; }
.track-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: end; background: linear-gradient(120deg, var(--primary-subtle), var(--accent-subtle)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 22px; }
.track-hero h1 { color: var(--text-heading); font-size: 32px; line-height: 1.18; margin: 8px 0 10px; }
.track-hero p { color: var(--text-muted); margin: 0; max-width: 620px; line-height: 1.7; }
.track-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow-sm); }
.track-form label { display: grid; gap: 6px; color: var(--text-heading); font-size: 12.5px; font-weight: 800; }
.track-form input { border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-2); color: var(--text-body); outline: none; }
.track-form input:focus { border-color: var(--primary); background: var(--surface); }
.track-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; }
.track-alert { display: flex; align-items: center; gap: 8px; background: #fff3f0; color: var(--secondary); border: 1px solid rgba(242,93,70,.2); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 18px; font-size: 13px; font-weight: 700; }
.track-result { display: grid; gap: 18px; }
.track-summary { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.track-summary .muted, .track-card .muted { color: var(--text-muted); font-size: 12.5px; }
.track-summary h2 { margin: 4px 0 5px; color: var(--text-heading); font-size: 22px; }
.track-summary p { margin: 0; color: var(--text-muted); }
.track-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.track-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.track-card h4 { margin: 0 0 14px; color: var(--text-heading); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.track-steps { display: grid; gap: 10px; }
.track-step { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.track-step span { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.track-step.done { color: var(--text-heading); border-color: rgba(31,75,58,.22); background: var(--primary-subtle); }
.track-step.done span { background: var(--primary); color: #fff; border-color: var(--primary); }
.shipment-row { display: grid; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 0 12px; margin-bottom: 12px; }
.shipment-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.shipment-row b { color: var(--text-heading); }
.shipment-row span { color: var(--text-muted); font-size: 12.5px; }
@media (max-width: 900px) {
.vendor-head { align-items: flex-start; }
.vendor-head h1, .vendor-copy h1 { font-size: 26px; }
.vendor-onboard-grid { grid-template-columns: 1fr; }
.seller-benefits { grid-template-columns: 1fr; }
.flash-hero-inner { align-items: flex-start; flex-direction: column; }
.flash-landing h1 { font-size: 27px; }
.compare-head { align-items: flex-start; flex-direction: column; }
.compare-head h1 { font-size: 26px; }
.track-hero, .track-grid { grid-template-columns: 1fr; }
.track-summary { flex-direction: column; }
.track-badges { justify-content: flex-start; }
}
@media (max-width: 560px) {
.vendor-head { flex-direction: column; }
.nf-card { padding: 24px; }
.nf-search { border-radius: var(--radius-md); align-items: stretch; }
.compare-page { padding-top: 28px; }
}
/* ===== campaign banner (ported from Design/03-Customer-Homepage.html) ===== */
.campaign { border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary), var(--secondary)); color: #fff; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.campaign h3 { margin: 0 0 6px; font-size: 24px; color: #fff; }
.campaign p { margin: 0; opacity: .85; font-size: 14px; max-width: 420px; color: #fff; }
.campaign .btn { background: #fff; color: var(--primary); font-weight: 700; padding: 11px 22px; border-radius: var(--radius-pill); border: none; font-size: 14px; flex-shrink: 0; }
@media (max-width: 700px) { .campaign { flex-direction: column; text-align: center; } }
/* ===== accordion / FAQ widget ===== */
.accordion-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.accordion-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-weight: 700; color: var(--text-heading); font-size: 14.5px; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary svg { flex-shrink: 0; transition: transform .15s ease; color: var(--text-muted); }
.accordion-item[open] summary svg { transform: rotate(180deg); }
.accordion-item p { margin: 10px 0 0; color: var(--text-body); font-size: 13.5px; line-height: 1.6; }
/* ===== recently viewed (client-side, localStorage) ===== */
.recently-viewed-empty { display: none; }
/* ===== হাট (Haat) header/footer identity — ported line-for-line against
salonix.css's .site-header/.header-main/.search/.icon-btn: a WHITE sticky
header (var(--surface), not a solid-green bar) below a dark-green
contact-info utility strip. (An earlier pass here made the whole header
solid --primary green to "look different from the default theme" — that
was the wrong goal; the mandate is to match the salonix reference, and
the reference's header is white. Fixed.) ===== */
/* Both bars are FIXED (not sticky/in-flow) — ports salonix.css's app-shell
rules (~1449-1461): `.util-bar { position:fixed; top:0 }` and
`.site-header { position:fixed; top:var(--util-h) }`, with the header
sliding up to `top:0` once `.chrome-min` hides the utility strip on
scroll (wireChrome()'s `y > 70` check, ported in Shell.tsx). The real
heights are measured in JS (Shell.tsx's syncChrome effect) into
--haat-util-h/--haat-header-h/--haat-chrome-h, same as salonix.js's own
syncChrome() — not guessed pixel constants. */
/* The fixed chrome bars go edge-to-edge — ports salonix.css's
`.app-shell .site-header > .container, .app-shell .util-bar > .container
{ max-width:none }` (their INNER content still hugs the same padding as
every other `.container`, just without the shared 1320px reading-width
cap that page content uses). */
.haat-utility-bar > .container,
.site-header > .container {
max-width: none;
}
.haat-utility-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 52; transition: transform .25s ease; }
body.haat-chrome-min .haat-utility-bar { transform: translateY(-101%); }
.site-header { position: fixed; top: var(--haat-util-h, 30px); left: 0; right: 0; z-index: 51; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: top .25s ease; }
body.haat-chrome-min .site-header { top: 0; box-shadow: var(--shadow-md); }
html.dark .site-header { background: var(--surface); }
.site-header .logo .mark { background: var(--primary); color: #fff; }
/* Both bars are now fixed/out-of-flow, so the app-shell needs top padding
equal to their real combined height (ports salonix.css's
`.shell-main { padding-top:calc(var(--chrome-h) + 14px) }` /
`.chrome-min .shell-main { padding-top:calc(var(--header-h) + 14px) }`). */
.haat-shell-chrome { height: 0; }
.haat-appwrap { padding-top: calc(var(--haat-chrome-h, 100px) + 14px); transition: padding-top .25s ease; }
body.haat-chrome-min .haat-appwrap { padding-top: calc(var(--haat-header-h, 66px) + 14px); }
/* Full-bleed hero/colour-band sections (flash-sale, vendor-onboarding, the
static-page hero used by About/Contact/Terms/etc.) are meant to start
flush against the header, not float below a strip of plain page
background — cancel `.haat-appwrap`'s breathing-room padding exactly
when one of these is the very first thing on the page (their own
vertical padding already gives the heading/text room to breathe). */
.haat-shell-main .flash-landing:first-child,
.haat-shell-main .static-hero:first-child,
.haat-shell-main .vendor-onboard:first-child {
margin-top: -14px;
}
/* A flat negative margin only cancels the known "+14px" breathing-room
term — it's still trusting that `.haat-appwrap`'s OTHER term
(var(--haat-chrome-h)) exactly equals the fixed header's real height,
which is set by JS (Shell.tsx) after mount and can be briefly stale or
off by a pixel. This removes that dependency entirely: when the very
first thing on the page is one of these hero bands, `.haat-appwrap`
stops reserving ANY top space at all (padding-top: 0) and the hero
section positions itself using the exact same `--haat-chrome-h`
variable the fixed header/rail already use — so it is *structurally*
impossible for the two to disagree, regardless of what that variable
resolves to. */
.haat-appwrap:has(.haat-shell-main .flash-landing:first-child),
.haat-appwrap:has(.haat-shell-main .static-hero:first-child),
.haat-appwrap:has(.haat-shell-main .vendor-onboard:first-child) {
padding-top: 0 !important;
}
.haat-appwrap:has(.haat-shell-main .flash-landing:first-child) .flash-landing:first-child,
.haat-appwrap:has(.haat-shell-main .static-hero:first-child) .static-hero:first-child,
.haat-appwrap:has(.haat-shell-main .vendor-onboard:first-child) .vendor-onboard:first-child {
margin-top: 0 !important;
padding-top: calc(var(--haat-chrome-h, 100px) + 42px) !important;
}
body.haat-chrome-min .haat-appwrap:has(.haat-shell-main .flash-landing:first-child) .flash-landing:first-child,
body.haat-chrome-min .haat-appwrap:has(.haat-shell-main .static-hero:first-child) .static-hero:first-child,
body.haat-chrome-min .haat-appwrap:has(.haat-shell-main .vendor-onboard:first-child) .vendor-onboard:first-child {
padding-top: calc(var(--haat-header-h, 66px) + 42px) !important;
}
.header-actions { display: flex; align-items: center; gap: 4px; }
.site-header .hact {
position: relative;
flex-direction: row;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--radius-md);
color: var(--text-muted);
}
.site-header .hact .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header .hact:hover { background: var(--primary-subtle); color: var(--primary); }
.site-header .hact .cnt { top: 4px; right: 4px; background: var(--secondary); color: var(--text-heading); }
.haat-lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.haat-lang-switch:hover { border-color: var(--primary-subtle); }
.haat-lang-switch button { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 6px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: var(--text-muted); opacity: .62; transition: background .15s, color .15s, opacity .15s; }
.haat-lang-switch button:hover { opacity: 1; color: var(--primary); }
.haat-lang-switch button.on { background: var(--primary); color: #fff; opacity: 1; }
.haat-lang-switch .flag { width: 18px; height: 12.6px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(20,53,40,.12); display: block; }
@media (max-width: 1100px) { .haat-lang-switch button span { display: none; } .haat-lang-switch button { padding: 6px; } }
/* হাট's own search bar — an input + a distinct submit button (salonix's
green "খুঁজুন" button), replacing the default theme's icon-inside-input
pill (.search-wrap), which হাট no longer uses at all. */
.haat-search-wrap { flex: 0 1 560px; margin: 0 auto; display: flex; align-items: center; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface-2); transition: border-color .15s, background .15s; }
/* The pill's rounded-corner clip used to live on this whole wrap, but this
wrap also hosts LiveSearchBox's absolutely-positioned `.live-search-dropdown`
sibling — `overflow: hidden` here clipped the dropdown into invisibility
(0-height outside the pill's own box) even though its computed position/
z-index were all correct. Scoping the clip to just the inner `.search-wrap`
form (input+icon row) keeps the pill look without hiding the dropdown. */
.haat-search-wrap > form,
.haat-search-wrap > button,
.haat-search-wrap > .search-wrap { border-radius: inherit; overflow: hidden; }
.haat-search-wrap:focus-within { border-color: var(--primary-hover); background: var(--surface); }
.haat-search-wrap input { flex: 1; min-width: 0; border: none; padding: 11px 18px; font-size: 14px; color: var(--text-body); outline: none; background: transparent; }
.haat-search-wrap button {
display: flex;
align-items: center;
gap: 6px;
padding: 0 18px;
align-self: stretch;
border: none;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.haat-search-wrap button:hover { background: var(--primary-hover); }
@media (max-width: 900px) { .haat-search-wrap { order: 3; flex-basis: 100%; } }
/* LiveSearchBox nests a .search-wrap form (icon + input) inside this pill
container instead of হাট's old bare input+button — override the generic
icon offset/padding so it still lines up inside the pill. */
.haat-search-wrap .search-wrap { width: 100%; position: relative; }
.haat-search-wrap .search-wrap .icon { left: 16px; }
.haat-search-wrap .search-wrap input { padding: 11px 16px 11px 42px; border: none; background: transparent; }
/* LiveSearchBox's own `.live-search-wrap { flex: 1; }` (further down this
file) is declared after this block and would otherwise win by source
order and stretch the pill to fill the header — pin it back to হাট's
original fixed-width pill via the two-class combo. */
.haat-search-wrap.live-search-wrap { flex: 0 1 560px; }
.haat-utility-bar { background: var(--text-heading); color: var(--bg); font-size: 11.5px; }
.haat-utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.haat-utility-inner span { display: inline-flex; align-items: center; gap: 5px; }
.haat-utility-links { display: flex; align-items: center; gap: 18px; }
.haat-utility-links a { color: var(--bg); opacity: .85; }
.haat-utility-links a:hover { opacity: 1; color: var(--secondary); }
.haat-utility-pro { color: var(--secondary) !important; font-weight: 600; opacity: 1 !important; }
@media (max-width: 700px) { .haat-utility-links { display: none; } .haat-utility-inner { justify-content: center; } }
/* ===== হাট (Haat) app-shell — persistent sidebar rail =====
Ported from salonix/assets/css/salonix.css's .shell-rail (Chaldal-style
app shell), rebuilt as a `position: sticky` sidebar rather than Salonix's
`position: fixed` + JS-measured `--chrome-h` offset — sticky achieves the
same "pins below the header once you scroll" behaviour for free, using
the browser's own layout instead of a ResizeObserver syncing a CSS var. */
.haat-rail-toggle {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
border: none;
background: transparent;
color: var(--text-heading);
flex-shrink: 0;
}
.haat-rail-toggle:hover { background: var(--primary-subtle); }
/* header-lead: toggle + logo grouped together, matching salonix's
.header-lead (salonix.css ~199-205) which wraps #railToggle + .logo. */
.haat-header-lead { display: flex; align-items: center; gap: 6px; }
/* Desktop rail-collapse toggle — salonix's .rail-toggle is VISIBLE by
default (>=1024px) and only hidden below 1024px (salonix.css line
~205: `@media (max-width:1024px){ .rail-toggle { display:none; } }`).
Setu's mobile drawer toggle (.haat-rail-toggle above) is the opposite
(hidden by default, shown <1024px), so this is a separate button. */
.haat-rail-toggle-desktop {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
border: none;
background: transparent;
color: var(--text-heading);
flex-shrink: 0;
}
.haat-rail-toggle-desktop:hover { background: var(--primary-subtle); }
@media (max-width: 1024px) { .haat-rail-toggle-desktop { display: none; } }
/* Desktop chrome sizing — ports salonix.css's `:root{ --rail-w:240px;
--util-h:36px; --header-h:66px; --chrome-h:102px; }` (line ~1438) and its
`.shell-rail { position:fixed; top:var(--chrome-h); ... }` /
`.shell-main, .site-footer { margin-left:var(--rail-w) }` pattern (line
~1465-1524): a genuinely FIXED rail (not sticky) pinned below the chrome,
with the main column and footer both pushed right by the rail's width so
neither one ever renders underneath it. */
.haat-shell { --haat-rail-w: 240px; display: flex; flex-direction: column; min-height: 100vh; }
/* Pins the footer to the viewport bottom on short-content pages instead of
leaving a bare gap under it — `.haat-appwrap` grows to fill the leftover
height in the `.haat-shell` flex column, pushing `` (its sibling,
rendered after it at Shell.tsx line ~625) down to the bottom edge. */
.haat-appwrap { display: flex; align-items: flex-start; gap: 0; flex: 1 0 auto; }
.haat-shell-rail {
position: fixed;
left: 0;
top: var(--haat-chrome-h, 100px);
bottom: 0;
width: var(--haat-rail-w);
overflow-y: auto;
background: var(--surface);
border-right: 1px solid var(--border);
z-index: 40;
transition: top .25s ease, transform .28s cubic-bezier(.3,.7,.3,1), border-color .28s;
/* stops the rail's own scroll from "chaining" into the page scroll once
it hits its top/bottom edge — ports salonix.css's `.rail-scroll {
overscroll-behavior:contain }` (line ~1470). Setu's scrollable box is
the `.haat-shell-rail` itself (not a separate inner `.rail-scroll`
div), so it's applied here instead. Independent of this, the rail
(fixed, its own overflow box) and the page/main column (normal document
scroll) were already two separate scroll containers — scrolling over
the main column never touched the rail's scroll position either way. */
overscroll-behavior: contain;
}
/* on-brand thin scrollbar — ports salonix.css's "left rail: extra-thin,
near-invisible until you hover" rule (line ~1512-1518): transparent/
invisible at rest, a faint translucent green thumb appears on hover,
slightly darker while actively hovering the scrollbar track itself. */
.haat-shell-rail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.haat-shell-rail::-webkit-scrollbar { width: 4px; }
.haat-shell-rail::-webkit-scrollbar-track { background: transparent; }
.haat-shell-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; transition: background .2s; }
.haat-shell-rail:hover { scrollbar-color: rgba(31,75,58,.22) transparent; }
.haat-shell-rail:hover::-webkit-scrollbar-thumb { background: rgba(31,75,58,.22); }
.haat-shell-rail:hover::-webkit-scrollbar-thumb:hover { background: rgba(31,75,58,.4); }
html.dark .haat-shell-rail:hover { scrollbar-color: rgba(241,232,215,.22) transparent; }
html.dark .haat-shell-rail:hover::-webkit-scrollbar-thumb { background: rgba(241,232,215,.22); }
@media (min-width: 1025px) {
body.haat-chrome-min .haat-shell-rail { top: var(--haat-header-h, 66px); }
}
.haat-shell-main {
margin-left: var(--haat-rail-w);
transition: margin-left .28s cubic-bezier(.3,.7,.3,1);
/* No side padding here on purpose — full-width hero/colored-band
sections (e.g. `.flash-landing`, `.vendor-onboard`) live directly
inside `.haat-shell-main` and must bleed edge-to-edge. The gutter
belongs on the *content* inside those sections, not the shell itself
(see the nested `.container` padding fix below). */
}
/* Body content fills the remaining width, edge-to-edge past the rail — ports
salonix.css's own app-shell content pages: sections inside `.shell-main`
are never wrapped in the shared `.container` (max-width:1240px) at all,
they just take `.shell-main`'s own responsive side-padding
(`padding:... clamp(14px,2.4vw,32px) ...`, line ~1521-1522). Every হাট
block still renders its own `.container` div (shared JSX from
default/components/blocks.tsx), so instead of stripping that markup this
drops the global 1320px cap specifically for containers inside
`.haat-shell-main` — the rest of the app (outside the app-shell) keeps
the normal reading-width cap. */
.haat-shell-main .container,
.site-footer .container { max-width: none; }
/* The shell itself has no side padding (full-bleed backgrounds, see
above) — so `.container`'s own `padding: 0 24px` (globals.css) is what
actually gutters the content, and needs to stay in place rather than
being zeroed. Widened slightly to match the reference's own
`clamp(14px,2.4vw,32px)` gutter instead of a flat 24px. */
.haat-shell-main .container { padding-left: clamp(14px, 2.4vw, 32px); padding-right: clamp(14px, 2.4vw, 32px); }
.site-footer { margin-left: var(--haat-rail-w); transition: margin-left .28s cubic-bezier(.3,.7,.3,1); }
/* Desktop rail-collapse (ports salonix.css ~1473-1477's
`.app-shell.rail-collapsed .shell-rail { transform:translateX(-101%) }`
+ `.shell-main/.site-footer { margin-left:0 }`). The collapsed class lives
on the outer `.haat-shell` (not `.haat-appwrap`) so it can reach
`.site-footer`, which is a SIBLING of `.haat-appwrap`, not a descendant. */
@media (min-width: 1025px) {
.haat-rail-collapsed .haat-shell-rail {
transform: translateX(-101%);
border-right-color: transparent;
}
.haat-rail-collapsed .haat-shell-main,
.haat-rail-collapsed .site-footer {
margin-left: 0;
}
}
.haat-rail-scroll { padding: 14px 0 30px; }
.haat-rail-quick { display: flex; flex-direction: column; padding: 0 8px 8px; }
.haat-rail-quick a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.haat-rail-quick a svg { color: var(--secondary); flex-shrink: 0; }
.haat-rail-quick a:hover { background: var(--primary-subtle); color: var(--primary); }
.haat-rail-pro {
display: flex;
align-items: center;
gap: 9px;
margin: 4px 10px 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--secondary-subtle);
color: var(--gold-600, var(--secondary));
font-size: 12.5px;
font-weight: 700;
line-height: 1.4;
}
.haat-rail-pro svg { flex-shrink: 0; }
.haat-rail-sep { height: 1px; background: var(--border); margin: 8px 12px; }
/* হোম / ফ্ল্যাশ ডিল / বেস্টসেলার + ক্যাটাগরিসমূহ — salonix.css (.rail-cats,
line ~1533) treats these as ONE continuous list with ONE active-state
rule: a subtle tint background + a rounded 3px left accent bar, NOT a
solid fill (solid fill in salonix is reserved for the language-toggle
buttons only, .rail-lang button.on). */
.haat-rail-cats { display: flex; flex-direction: column; padding: 0 8px; }
.haat-rail-cats a {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 500;
color: var(--text-body);
}
.haat-rail-cats a span { flex: 1; }
.haat-rail-cats a em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.haat-rail-cats a svg { color: var(--primary); flex-shrink: 0; }
.haat-rail-cats a:hover { background: var(--primary-subtle); color: var(--primary); }
.haat-rail-cats a.on {
background: var(--primary-subtle);
color: var(--primary);
font-weight: 700;
}
.haat-rail-cats a.on::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 3px;
background: var(--primary);
}
.haat-rail-cat-icon-img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
/* Chaldal-style expandable category tree — the row itself still navigates
(Link), a separate chevron button only expands/collapses the inline
sub-list, so both stay independently clickable. */
.haat-rail-cat-node { display: flex; flex-direction: column; }
.haat-rail-cat-row { display: flex; align-items: stretch; }
.haat-rail-cat-row a { flex: 1; min-width: 0; }
.haat-rail-cat-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
flex-shrink: 0;
border: none;
background: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
}
/* The row's hover/active highlight is set on the ROW itself (not just the
link inside it) so it visually covers the chevron too — otherwise the
link's own background stopped short of the arrow and the two looked like
separate, disconnected pieces instead of one row. */
.haat-rail-cat-row:hover,
.haat-rail-cat-row:has(> a.on) {
background: var(--primary-subtle);
border-radius: var(--radius-sm);
}
.haat-rail-cat-row:hover > a,
.haat-rail-cat-row:has(> a.on) > a { background: none; color: var(--primary); }
.haat-rail-cat-row:hover .haat-rail-cat-toggle,
.haat-rail-cat-row:has(> a.on) .haat-rail-cat-toggle { color: var(--primary); }
/* Premium tree-line: a single vertical guide running down the sub-list
with a small horizontal tick reaching into each row, like a file-tree —
rendered with pseudo-elements so no extra markup is needed, and it
nests naturally (each deeper `.haat-rail-subtree` gets its own line at
its own indent). */
.haat-rail-subtree {
display: flex;
flex-direction: column;
position: relative;
margin-left: 15px;
padding-left: 14px;
border-left: 1px solid var(--border);
}
.haat-rail-subtree .haat-rail-cat-node { position: relative; }
.haat-rail-subtree .haat-rail-cat-node::before {
content: "";
position: absolute;
left: -14px;
top: 16px;
width: 10px;
height: 1px;
background: var(--border);
}
.haat-rail-subtree .haat-rail-cat-row--sub a {
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.haat-rail-subtree .haat-rail-cat-row--sub a:hover { background: var(--primary-subtle); color: var(--primary); }
.haat-rail-subtree .haat-rail-cat-row--sub a.on { background: var(--primary-subtle); color: var(--primary); font-weight: 700; }
.haat-rail-subtree .haat-rail-subtree { margin-left: 8px; }
.haat-rail-lang {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin: 14px 12px 4px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.haat-rail-lang button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
font-size: 12.5px;
font-weight: 600;
color: var(--text-body);
}
.haat-rail-lang button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.haat-rail-lang .flag { width: 18px; height: 12.6px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(20,53,40,.12); display: block; }
/* Dark/light toggle — pinned at the very bottom of the left rail, below
the language switch (previously a separate floating button in the
page's bottom-right corner, where it visually collided with the chat
FAB). */
.haat-rail-theme { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 12px 14px; }
.haat-rail-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.haat-rail-theme button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Edge cart tab — vertically centred, stuck to the right edge, ported
exactly against salonix.css's .float-cart (~line 1259): a glassmorphic
pill sliding in from the right, icon+count above, subtotal text below.
Always visible in the app-shell (reference: qs("#floatCart")?.classList
.add("show") unconditionally once the shell mounts). */
.haat-float-cart {
position: fixed;
right: 0;
top: 50%;
z-index: 54;
transform: translateY(-50%) translateX(calc(100% + 12px));
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 14px 12px 12px;
border-radius: 16px 0 0 16px;
background: linear-gradient(150deg, rgba(31,75,58,.82), rgba(20,53,40,.82));
backdrop-filter: saturate(1.8) blur(20px);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
border: 1px solid rgba(255,255,255,.28);
border-right: 0;
box-shadow: -10px 14px 44px rgba(20,53,40,.30);
color: #fff;
cursor: pointer;
transition: transform .4s cubic-bezier(.2,.75,.3,1), box-shadow .2s ease;
}
.haat-float-cart.show { transform: translateY(-50%) translateX(0); }
.haat-float-cart:hover { box-shadow: -14px 18px 54px rgba(20,53,40,.40); }
.haat-float-cart .fc-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.haat-float-cart .fc-count {
position: absolute;
top: -6px;
right: -8px;
min-width: 19px;
height: 19px;
padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--secondary);
color: var(--primary);
font-size: 10.5px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--primary);
}
.haat-float-cart .fc-total { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.haat-float-cart.empty .fc-count { display: none; }
.haat-float-cart.empty .fc-total { opacity: .6; }
@media (max-width: 600px) {
.haat-float-cart { padding: 11px 9px; border-radius: 14px 0 0 14px; }
.haat-float-cart .fc-total { font-size: 10.5px; }
}
@media (max-width: 1024px) {
/* the mobile bottom-nav already carries a cart entry (raised centre
bubble) — reference hides the edge tab once the bottom-nav takes over
(getCartAffordance() picks bottom-nav → float-cart → header, in that
priority order; the edge tab has no reason to show alongside it). */
.haat-float-cart { display: none; }
}
/* Mobile-only bottom app nav — ported against salonix.css's .bottom-nav
(~line 1575) + salonix.js's buildBottomNav(): a floating glass pill bar
with Home/Categories/Cart(raised centre bubble)/Search/Account. Setu's
"Categories" button opens our own rail drawer (the real, current category
nav) rather than reference's retired top-nav toggle, which the reference
itself notes is dead code (see Shell.tsx's renderNav() comment); "Search"
navigates to /search rather than opening a live-typeahead overlay panel
(a separate, larger feature not yet built for Setu). */
.haat-bottom-nav { display: none; }
/* belt-and-suspenders alongside the React-level `!isHaat` guard in
cart-context.tsx: CartProvider's generic English `.bottom-nav` is
default-theme-only content, never হাট's — force it off here too so it
can't reappear (e.g. a future edit that drops the JS guard) stacked on
top of `.haat-bottom-nav` above. */
body[data-theme="haat"] .bottom-nav { display: none !important; }
@media (max-width: 1024px) {
.haat-bottom-nav {
display: flex;
position: fixed;
left: 10px;
right: 10px;
bottom: calc(8px + env(safe-area-inset-bottom));
z-index: 60;
height: 58px;
border-radius: 20px;
padding: 0 4px;
background: rgba(255,255,255,.72);
backdrop-filter: saturate(1.8) blur(22px);
-webkit-backdrop-filter: saturate(1.8) blur(22px);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 12px 36px rgba(20,53,40,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.haat-bottom-nav a, .haat-bottom-nav button {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
position: relative;
background: none;
border: none;
}
.haat-bottom-nav a:active, .haat-bottom-nav button:active { transform: scale(.92); }
.haat-bottom-nav .on { color: var(--primary); }
.haat-bottom-nav .on::after {
content: "";
position: absolute;
bottom: 6px;
width: 5px;
height: 5px;
border-radius: var(--radius-pill);
background: var(--primary);
}
.haat-bottom-nav .haat-bn-cart { overflow: visible; }
.haat-bottom-nav .bn-cart-ic {
position: relative;
width: 50px;
height: 50px;
margin: -24px auto 1px;
border-radius: var(--radius-pill);
background: radial-gradient(120% 120% at 30% 25%, var(--primary-hover), var(--primary) 70%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(31,75,58,.42), 0 0 0 5px rgba(255,255,255,.55);
}
.haat-bottom-nav .bn-count {
position: absolute;
top: -3px;
right: -5px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--secondary);
color: var(--primary);
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.bn-cart-warn { color: var(--warning); font-size: 9px; }
/* On checkout, the floating pill nav slides fully below the viewport and
a slim pull-handle takes its place — dragging/tapping it back up
brings the real nav back, same interaction as the default theme's
.bottom-nav-sheet (see storefront.css/default for that version). */
.haat-bottom-nav { transition: transform .32s cubic-bezier(.32,.72,0,1); }
.bottom-nav-sheet.checkout .haat-bottom-nav { transform: translateY(140%); }
.bottom-nav-sheet.checkout.open .haat-bottom-nav { transform: translateY(0); }
.bn-sheet-handle { display: none; }
.bottom-nav-sheet.checkout:not(.open) .bn-sheet-handle {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 61;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.85);
backdrop-filter: saturate(1.8) blur(16px);
-webkit-backdrop-filter: saturate(1.8) blur(16px);
border-top: 1px solid rgba(0,0,0,.06);
color: var(--text-muted);
}
.bn-sheet-grip { width: 36px; height: 4px; border-radius: 999px; background: var(--border-strong); }
}
.haat-shell-main { flex: 1 1 0%; min-width: 0; max-width: 100%; overflow-x: hidden; }
.haat-rail-scrim { display: none; }
@media (max-width: 1024px) {
.haat-rail-toggle { display: flex; }
.haat-shell-rail {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 70;
max-height: none;
transform: translateX(-101%);
transition: transform .22s cubic-bezier(.2,.7,.3,1);
box-shadow: 0 16px 40px rgba(20,32,28,.24);
}
.haat-shell-rail.open { transform: translateX(0); }
/* The rail becomes an off-canvas drawer at this width (hidden by the
transform above, opened only via `.open`) — but `.haat-shell-main`/
`.site-footer`'s `margin-left: var(--haat-rail-w)` (240px) was never
reset here, so every page kept a 240px blank gutter on the left and
everything else got pushed 240px past the viewport edge, causing
horizontal overflow on every phone/tablet width. */
.haat-shell-main, .site-footer { margin-left: 0; }
.haat-rail-scrim {
display: block;
position: fixed;
inset: 0;
background: rgba(20,32,28,.45);
z-index: 65;
}
}
/* ===== হাট section widgets ported from salonix — no equivalent block
exists in the default theme at all (promo-split, trust band, brand strip,
combo offers), so these are genuinely new widget types (see block-types.ts
/ builder-types.ts), not a reskin of shared markup. ===== */
.haat-promo-split { display: grid; gap: 16px; }
.haat-promo-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background-color: var(--surface-2);
display: flex;
align-items: flex-end;
padding: 20px;
box-shadow: var(--shadow-sm);
isolation: isolate;
}
.promo-panel-img { position: absolute; inset: 0; z-index: 0; }
.promo-panel-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(20,64,49,.05), rgba(20,64,49,.55)); }
.haat-promo-card.promo-hover-zoom .promo-panel-img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.haat-promo-card.promo-hover-zoom:hover .promo-panel-img { transform: scale(1.06); }
@media (max-width: 640px) {
.haat-promo-split {
grid-auto-flow: column;
grid-auto-columns: 82%;
grid-template-columns: none !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.haat-promo-split::-webkit-scrollbar { display: none; }
.haat-promo-card { padding: 16px; scroll-snap-align: start; }
}
.haat-promo-card .promo-panel-label {
position: relative;
z-index: 1;
color: #fff;
font-weight: 700;
font-size: 17px;
background: rgba(20,53,40,.35);
padding: 6px 14px;
border-radius: var(--radius-pill);
backdrop-filter: blur(4px);
}
/* ports salonix.css's `.usp` (~L412-417): a 4-up icon+text row grid,
collapsing to 2 columns on mobile — replaces the old borders-between-
centered-text layout, which had no icon and stacked to a single column
(no visual relation to the reference at any width). */
.haat-trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px) { .haat-trust-band { grid-template-columns: repeat(2, 1fr); } }
.haat-trust-item {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
padding: 16px;
background: var(--surface-2);
border-radius: var(--radius-md);
}
.haat-trust-item .ti-ic {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--primary-subtle);
color: var(--primary);
}
.haat-trust-item > div span:first-child { display: block; font-weight: 700; font-size: 13.5px; color: var(--text-heading); }
.haat-trust-item > div span:last-child { display: block; font-size: 12px; color: var(--text-muted); }
/* হাট flash-deal — ports salonix.css's `.deal-band` (gold-gradient header
card) + `.countdown` (boxed h:m:s) + `.grid-products` (wrapping grid, not
a carousel). See blocks.tsx's `Flash` override for why this is haat-only. */
.haat-deal-band {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
padding: 20px clamp(16px, 4vw, 28px);
background: linear-gradient(120deg, var(--secondary-subtle), var(--surface));
border: 1px solid var(--secondary);
border-radius: var(--radius-lg);
}
.haat-deal-band .sec-title { font-size: 20px; color: var(--primary); margin: 0; }
.haat-deal-ends { font-size: 13px; color: var(--text-muted); }
.haat-deal-viewall { margin-inline-start: auto; }
.haat-countdown { display: flex; align-items: center; gap: 8px; }
.haat-countdown span { background: var(--text-heading); color: #fff; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
.haat-countdown i { color: var(--primary); font-weight: 700; font-style: normal; }
/* `.pcard`'s own base rule (near the top of this file) sets a fixed
`width: 212px` for its normal habitat, the horizontal `.scroller` — a
grid item's intrinsic width isn't shrunk by its grid cell's `minmax()`
track just because the track is narrower, so on a ~375px phone two
212px-wide cards in a 2-column grid genuinely overflowed the viewport
and got clipped at the screen edge. `width: auto` here (same fix already
applied to `.pgrid .pcard` for category-listing grids) lets the card
actually shrink to fit its grid cell. */
.haat-grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 42vw, 208px), 1fr)); gap: clamp(10px, 1.6vw, 16px); margin-top: 20px; }
.haat-grid-products .pcard { width: auto; }
.haat-brand-strip { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.haat-brand-strip::-webkit-scrollbar { display: none; }
.haat-brand-strip-grid { flex-wrap: wrap; overflow-x: visible; }
.haat-brand-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 20px 8px 8px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border);
color: var(--text-heading);
font-weight: 700;
font-size: 13px;
background: var(--surface);
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.haat-brand-pill:hover { border-color: var(--secondary); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.haat-brand-strip-grid .haat-brand-pill { flex-shrink: 1; }
.haat-combo-grid { display: flex; gap: 18px; flex-wrap: wrap; }
.haat-combo {
flex: 1 1 260px;
max-width: 320px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .25s ease, transform .25s ease;
}
.haat-combo:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.haat-combo-media {
position: relative;
display: flex;
align-items: center;
padding: 20px 18px 6px;
background: linear-gradient(160deg, var(--primary-subtle), var(--surface) 70%);
}
.haat-combo-stack { display: flex; align-items: center; }
.haat-combo-ci {
width: 54px;
height: 54px;
border-radius: 50%;
border: 3px solid var(--surface);
background-color: var(--surface-2);
margin-left: -14px;
position: relative;
overflow: hidden;
display: block;
box-shadow: 0 4px 10px rgba(20,64,49,.12);
}
.haat-combo-ci:first-child { margin-left: 0; }
.haat-combo-save {
position: absolute;
top: 12px;
right: 12px;
background: var(--secondary);
color: var(--primary);
font-weight: 800;
font-size: 11px;
padding: 5px 11px;
border-radius: var(--radius-pill);
box-shadow: 0 6px 14px rgba(20,64,49,.2);
}
.haat-combo-body { padding: 14px 18px 18px; }
.haat-combo-body h4 { margin: 0 0 4px; color: var(--text-heading); font-size: 15.5px; }
.haat-combo-desc { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; line-height: 1.4; }
.haat-combo-items { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haat-combo-items-full { list-style: none; padding: 0; margin: 0 0 8px; font-size: 12px; color: var(--text-body); display: flex; flex-direction: column; gap: 4px; }
.haat-combo-items-full li { display: flex; justify-content: space-between; gap: 8px; }
.haat-combo-items-full li b { color: var(--text-muted); font-weight: 600; }
.haat-combo-details-toggle {
display: flex; align-items: center; gap: 4px; background: none; border: none; padding: 0;
margin: 0 0 12px; color: var(--primary); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.haat-combo-details-toggle svg { transition: transform .2s ease; }
.haat-combo-details-toggle svg.flip { transform: rotate(180deg); }
.haat-combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.haat-combo-price { display: flex; flex-direction: column; }
.haat-combo-price b { font-size: 18px; color: var(--primary); line-height: 1.2; }
.haat-combo-price s { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.haat-combo-add {
display: flex; align-items: center; gap: 6px; border: none; border-radius: var(--radius-pill);
background: var(--primary); color: #fff; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
cursor: pointer; transition: background .2s ease;
}
.haat-combo-add:hover { background: var(--primary-hover); }
@media (max-width: 760px) {
/* No negative-margin edge-bleed here — the container's own gutter is a
fluid clamp(), not a fixed px value, so a hardcoded negative margin
drifted out of sync with it and made cards look like they were
jammed flush against the screen edge instead of gently peeking past
it. Scrolling stays within the container's existing padding instead. */
.haat-combo-grid {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.haat-combo-grid::-webkit-scrollbar { display: none; }
.haat-combo { flex: 0 0 76vw; max-width: 76vw; scroll-snap-align: start; }
.haat-combo:last-child { margin-right: 8px; }
}
/* ===== হাট hero slider (full-bleed, salonix .hero-slider) ===== */
.haat-hero-slider {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 6;
background: var(--surface-2);
}
@media (max-width: 900px) { .haat-hero-slider { aspect-ratio: 16 / 8; } }
@media (max-width: 560px) { .haat-hero-slider { aspect-ratio: 16 / 10; border-radius: var(--radius-md); } }
.haat-hero-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
color: var(--text-muted);
font-size: 13px;
}
/* ===== হাট category grid (salonix #catGrid / .cat-tile) — a rectangular
product-photo card with the name+count in a caption strip along the
bottom, not a small circular icon-and-label like the default theme's
.cat-item. A category with no image_url set (Setu's seed data doesn't
upload one for every category) falls back to a plain tinted tile with
just the caption — no broken image, no icon needed. ===== */
/* ছাট (Haat) category tile — ported against salonix.css's .cat-grid/
.cat-tile: a bordered, text-centered card (not a photo-cover tile with a
gradient scrim); a SQUARE media box that CONTAINS the image (so a circular
icon-badge upload reads as a circle on a plain card, not a cropped
rectangle), and the caption sitting below the media, not overlaid on it.
(An earlier pass here rendered these as 4:3 photo tiles with white text on
a dark gradient — that doesn't exist in the reference at all; fixed.) */
.haat-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.haat-cat-tile {
display: block;
text-align: center;
padding: 12px 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.haat-cat-tile:hover { border-color: var(--secondary); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.haat-cat-tile .ct-media, .haat-cat-tile .media {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--primary-subtle);
}
.haat-cat-tile .ct-media img, .haat-cat-tile .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.haat-cat-tile:hover .ct-media img, .haat-cat-tile:hover .media img { transform: scale(1.06); }
.haat-cat-tile .ct-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--primary); }
.haat-cat-tile b, .haat-cat-tile span {
display: block;
width: 100%;
padding: 0;
color: var(--text-heading);
}
.haat-cat-tile b { font-size: 13.5px; margin-top: 10px; line-height: 1.3; }
.haat-cat-tile span { font-size: 11.5px; color: var(--text-muted); }
/* ===== হাট product card — salonix's cards show the wishlist heart,
compare icon, and quick-add "+" button AT ALL TIMES (no hover-to-reveal);
the default theme's own .pcard/.quick-add/.wish-btn/.compare-btn rules
(public/themes/default/storefront.css) hide these until :hover, which
this theme never wants. Same classes, same components — only the
always-vs-on-hover visibility differs. */
.quick-add,
.wish-btn.compact,
.compare-action.compact .compare-btn {
opacity: 1 !important;
transform: none !important;
}
/* ===== হাট category page (salonix category.html) — no banner block at
all (just breadcrumb + plain title), and a single filter-bar row (a
"ফিল্টার" toggle revealing the price range, plus a sort dropdown) instead
of the default theme's dedicated sidebar filters column. ===== */
.haat-cat-title { font-size: 24px; font-weight: 800; color: var(--text-heading); margin: 4px 0 16px; }
/* Category filter bar — ported against salonix.css's .filter-bar: a
ফিল্টার toggle (+ active-count badge) and dismissable active-filter
chips on the left, result count + inline sort