/*
 * Shubhra Bindu — storefront theme (site/themes/shubhrabindu), from the owner's three mockups, 17 Oct 2026.
 * Warm ivory page, charcoal actions, serif display type, soft rose for savings; built for handmade jute décor.
 * Every class here is "sb-" so nothing is shared with the central Nishchit look.
 *
 * Contrast (measured): ink #2a221d on ivory #fbf8f3 15.1:1 · muted #6b6058 on ivory 5.7:1 · white on
 * charcoal #1f1a17 16.9:1 · rose text #9c4334 on blush #f7e4de 5.2:1 · olive #4f5b2e on ivory 7.1:1.
 */

:root {
    --sb-page: #fbf8f3;
    --sb-surface: #ffffff;
    --sb-sand: #f3ebe0;
    --sb-sand-2: #eadfce;
    --sb-ink: #2a221d;
    --sb-muted: #6b6058;
    --sb-line: #e9e1d6;
    --sb-charcoal: #1f1a17;
    --sb-charcoal-2: #3a322d;
    --sb-rose: #9c4334;
    --sb-blush: #f7e4de;
    --sb-olive: #4f5b2e;
    --sb-gold: #b08a5a;
    --sb-radius: 14px;
    --sb-radius-sm: 10px;
    --sb-shadow: 0 1px 2px rgb(42 34 29 / 0.04), 0 8px 24px rgb(42 34 29 / 0.06);
    --sb-serif: 'Cormorant Garamond', 'Noto Serif Bengali', Georgia, serif;
    --sb-sans: 'Jost', 'Hind Siliguri', system-ui, sans-serif;

    /* The pages this theme does not redraw (cart, checkout, account …) take its colours too. */
    --color-brand-50: #f7efe6;
    --color-brand-100: #eadfce;
    --color-brand-500: #3a322d;
    --color-brand-600: #1f1a17;
    --color-brand-700: #000000;
    --color-night: #1f1a17;
    --color-night-2: #2d2622;
    --color-ink: #2a221d;
    --color-muted: #6b6058;
    --color-line: #e9e1d6;
    --color-page: #fbf8f3;
    --font-sans: 'Jost', 'Hind Siliguri', system-ui, sans-serif;
    --font-latin: 'Jost', 'Hind Siliguri', system-ui, sans-serif;
}

/*
 * Element-level defaults go in Tailwind's "base" layer. Unlayered rules beat every layer whatever their
 * specificity, so an unlayered `a { color: inherit }` turned the central .btn-brand (layer "components",
 * white text) black on black on the cart and checkout pages (found 17 Oct 2026).
 */
@layer base {
    body.sb { background: var(--sb-page); color: var(--sb-ink); font-family: var(--sb-sans); font-size: 16px; line-height: 1.65; }
    .sb h1, .sb h2, .sb h3 { font-family: var(--sb-serif); font-weight: 600; letter-spacing: -0.01em; }
    .sb a { color: inherit; }
    .sb :focus-visible { outline: 2px solid var(--sb-charcoal); outline-offset: 3px; }
}
.sb-wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .sb-wrap { padding-inline: 32px; } }
/* The central parts drawn inside this theme (cart bar, cart, checkout, account) use the same width. */
.sb .container-x { max-width: 1480px; }
@media (min-width: 1024px) { .sb .container-x { padding-inline: 32px; } }
.sb-num { font-family: 'Jost', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons, chips, pills ---------- */
.sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
    border-radius: 8px; font-weight: 500; font-size: 15px; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s; text-decoration: none; white-space: nowrap; }
.sb-btn:active { transform: translateY(1px); }
.sb-btn:disabled { opacity: .45; cursor: not-allowed; }
.sb-btn-dark { background: var(--sb-charcoal); color: #fff; }
.sb-btn-dark:hover { background: #000; }
.sb-btn-line { background: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-ink); }
.sb-btn-line:hover { background: var(--sb-sand); }
.sb-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.sb-btn-block { width: 100%; }
.sb-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 0; color: var(--sb-ink); cursor: pointer; position: relative; }
.sb-icon-btn:hover { background: var(--sb-sand); }
.sb-icon-btn svg { width: 22px; height: 22px; }
.sb-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--sb-charcoal); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.sb-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sb-blush); color: var(--sb-rose); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.sb-tag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #e8efe0; color: var(--sb-olive); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sb-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; text-decoration: none; }
.sb-link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.sb-eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--sb-gold); font-weight: 600; }

/* ---------- top strip + header ---------- */
.sb-strip { background: var(--sb-charcoal); color: #f4eee6; font-size: 13px; }
.sb-strip ul { display: flex; justify-content: space-between; gap: 16px; list-style: none; margin: 0; padding: 9px 0; }
.sb-strip li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sb-strip li:not(:first-child) { display: none; }
@media (min-width: 768px) { .sb-strip li:not(:first-child) { display: flex; } }
.sb-strip svg { width: 16px; height: 16px; opacity: .85; }

.sb-head { background: rgb(251 248 243 / .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sb-line); position: sticky; top: 0; z-index: 40; }
.sb-head-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 72px; }
.sb-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.sb-logo b { font-family: var(--sb-serif); font-weight: 600; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
.sb-logo small { font-family: 'Noto Serif Bengali', serif; font-size: 12px; color: var(--sb-muted); letter-spacing: .08em; margin-top: 5px; }
.sb-logo img { height: 44px; width: auto; }
.sb-logo-row { flex-direction: row; align-items: center; gap: 10px; }
.sb-logo-row img { height: 52px; width: auto; flex-shrink: 0; }
.sb-logo-words { display: none; flex-direction: column; line-height: 1; }
@media (min-width: 420px) { .sb-logo-words { display: flex; } }
.sb-logo-words b { font-size: 21px; }
/* Header: the logo alone (the mark already carries শুভ্রবিন্দু); the footer keeps the words. */
.sb-head .sb-logo-words { display: none !important; }
.sb-head .sb-logo-row img { height: 56px; }
.sb-nav { display: none; justify-content: center; }
.sb-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sb-nav a { display: block; padding: 10px 14px; font-size: 15px; text-decoration: none; border-radius: 8px; }
.sb-nav a:hover, .sb-nav a[aria-current] { background: var(--sb-sand); }
.sb-nav li { position: relative; }
.sb-nav .sb-sub { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius-sm); box-shadow: var(--sb-shadow); padding: 6px; visibility: hidden; opacity: 0; transition: opacity .15s; z-index: 50; }
.sb-nav li:hover .sb-sub, .sb-nav li:focus-within .sb-sub { visibility: visible; opacity: 1; }
.sb-tools { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.sb-menu-btn { display: inline-grid; }
@media (min-width: 1024px) { .sb-nav { display: flex; } .sb-menu-btn { display: none; } .sb-head-row { grid-template-columns: 220px 1fr 220px; } }

.sb-search { border-top: 1px solid var(--sb-line); padding: 12px 0; }
.sb-search form { position: relative; display: flex; max-width: 640px; margin-inline: auto; }
.sb-search input { flex: 1; min-height: 48px; border: 1px solid var(--sb-ink); border-right: 0; border-radius: 8px 0 0 8px; padding: 0 16px; background: var(--sb-surface); font: inherit; }
.sb-search button { border-radius: 0 8px 8px 0; }
.sb-mnav { border-top: 1px solid var(--sb-line); background: var(--sb-page); }
.sb-mnav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--sb-line); text-decoration: none; font-size: 16px; }
.sb-mnav a.sb-child { padding-left: 16px; color: var(--sb-muted); }

/* ---------- hero ---------- */
.sb-hero { margin-top: 20px; position: relative; border-radius: var(--sb-radius); overflow: hidden; background: linear-gradient(110deg, #f3ebe0 0%, #efe3d3 55%, #e6d5bf 100%); }
.sb-hero-slide { display: grid; align-items: center; min-height: 420px; }
.sb-hero-slide[hidden] { display: none; }
.sb-hero-copy { position: relative; z-index: 2; padding: 36px 24px 28px; max-width: 560px; }
.sb-hero-copy h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; margin: 10px 0 6px; }
.sb-hero-copy .sb-sub { font-family: var(--sb-serif); font-size: clamp(22px, 2.6vw, 30px); color: var(--sb-charcoal-2); margin: 0 0 14px; }
.sb-hero-copy p { color: var(--sb-muted); max-width: 42ch; margin: 0 0 22px; }
.sb-hero-media { position: relative; min-height: 300px; }
.sb-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-hero-quote { display: none; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2; font-family: var(--sb-serif); font-size: 26px; line-height: 1.2; color: #fff; max-width: 230px; background: rgb(31 26 23 / .55); padding: 16px 20px; border-radius: 12px; backdrop-filter: blur(2px); }
.sb-hero-quote::after { content: ""; display: block; width: 36px; height: 1px; background: currentColor; margin-top: 18px; opacity: .8; }
.sb-hero-nav { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; gap: 10px; }
.sb-hero-nav button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sb-shadow); }
.sb-hero-dots { position: absolute; left: 24px; bottom: 22px; z-index: 3; display: flex; gap: 6px; }
.sb-hero-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgb(42 34 29 / .25); }
.sb-hero-dots span[aria-current] { width: 18px; background: var(--sb-charcoal); }
@media (min-width: 900px) {
    .sb-hero-slide { grid-template-columns: 1fr 1fr; min-height: 460px; }
    .sb-hero-copy { padding: 56px 40px 56px 72px; }
    .sb-hero-media { min-height: 460px; }
    .sb-hero-quote { display: block; }
}

/* ---------- category circles ---------- */
.sb-circles { display: flex; gap: 22px; overflow-x: auto; padding: 26px 4px 10px; scrollbar-width: none; justify-content: flex-start; }
.sb-circles::-webkit-scrollbar { display: none; }
.sb-circle { flex: 0 0 auto; width: 92px; text-align: center; text-decoration: none; }
.sb-circle span { display: block; width: 88px; height: 88px; border-radius: 999px; overflow: hidden; background: var(--sb-sand); margin: 0 auto 10px; outline: 1px solid var(--sb-line); outline-offset: 3px; transition: outline-color .15s; }
.sb-circle:hover span, .sb-circle[aria-current] span { outline: 2px solid var(--sb-charcoal); }
.sb-circle img { width: 100%; height: 100%; object-fit: cover; }
.sb-circle em { font-style: normal; font-size: 14px; line-height: 1.3; display: block; }
@media (min-width: 1024px) { .sb-circles { justify-content: center; } }

/* ---------- trust row ---------- */
.sb-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 20px; margin-top: 18px; }
.sb-trust div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-trust svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--sb-charcoal); stroke-width: 1.5; }
.sb-trust b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.sb-trust small { color: var(--sb-muted); font-size: 13px; }
@media (min-width: 900px) { .sb-trust { grid-template-columns: repeat(4, 1fr); padding: 22px 28px; } .sb-trust div + div { border-left: 1px solid var(--sb-line); padding-left: 24px; } }

/* ---------- sections + grids ---------- */
.sb-section { margin-top: 48px; }
.sb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sb-section-head h2 { font-size: clamp(28px, 3vw, 36px); margin: 0; }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sb-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- product card ---------- */
.sb-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sb-card-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--sb-radius-sm); overflow: hidden; background: var(--sb-sand); }
.sb-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sb-card:hover .sb-card-media img { transform: scale(1.04); }
.sb-card-media .sb-card-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.sb-card:hover .sb-card-alt { opacity: 1; }
.sb-heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .92); display: grid; place-items: center; cursor: pointer; color: var(--sb-ink); }
.sb-heart svg { width: 18px; height: 18px; }
.sb-heart[aria-pressed="true"] svg { fill: var(--sb-rose); color: var(--sb-rose); }
.sb-flag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--sb-olive); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; }
.sb-card-body { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sb-card-title { font-size: 15px; font-weight: 400; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.sb-card-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sb-stars { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sb-muted); }
.sb-stars b { color: var(--sb-gold); font-weight: 600; }
.sb-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sb-price-now { font-weight: 600; font-size: 17px; }
.sb-price-was { color: var(--sb-muted); text-decoration: line-through; font-size: 13px; }
.sb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sb-opts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sb-opts span { font-size: 11px; color: var(--sb-muted); border: 1px solid var(--sb-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sb-cart-mini { width: 36px; height: 36px; border-radius: 8px; background: var(--sb-charcoal); color: #fff; display: grid; place-items: center; flex-shrink: 0; text-decoration: none; }
.sb-cart-mini svg { width: 18px; height: 18px; }

/* ---------- lookbook + category tiles + promo pair ---------- */
.sb-look { position: relative; display: grid; align-items: center; min-height: 240px; border-radius: var(--sb-radius); overflow: hidden; background: var(--sb-sand); text-decoration: none; }
.sb-look img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-look::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(243 235 224 / .97) 0%, rgb(243 235 224 / .85) 38%, rgb(243 235 224 / 0) 70%); z-index: 1; }
.sb-look-copy { position: relative; z-index: 2; padding: 28px 24px; max-width: 460px; }
.sb-look-copy h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; margin: 0 0 10px; }
.sb-look-copy p { color: var(--sb-muted); margin: 0 0 18px; }
@media (min-width: 900px) { .sb-look-copy { padding: 36px 72px; } }

.sb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .sb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.sb-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sb-radius-sm); overflow: hidden; background: var(--sb-sand); text-decoration: none; }
.sb-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sb-tile:hover img { transform: scale(1.05); }
.sb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(31 26 23 / .62)); }
.sb-tile b { position: absolute; left: 16px; bottom: 12px; z-index: 2; color: #fff; font-family: var(--sb-serif); font-size: 24px; font-weight: 600; }

.sb-pair { display: grid; gap: 16px; }
@media (min-width: 900px) { .sb-pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.sb-promo { position: relative; min-height: 220px; border-radius: var(--sb-radius); overflow: hidden; display: flex; align-items: center; text-decoration: none; }
.sb-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-promo-dark { background: #5b4335; color: #fff; }
.sb-promo-dark::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(74 52 40 / .95) 0%, rgb(74 52 40 / .7) 45%, rgb(74 52 40 / .05) 80%); }
.sb-promo-light { background: #f6e9df; color: var(--sb-ink); }
.sb-promo-light::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(246 233 223 / .97) 0%, rgb(246 233 223 / .82) 45%, rgb(246 233 223 / 0) 80%); }
.sb-promo-copy { position: relative; z-index: 2; padding: 28px; max-width: 330px; }
.sb-promo-copy h3 { font-size: 34px; line-height: 1.05; margin: 0 0 8px; color: inherit; }
.sb-promo-dark h3 { color: #fff; }
.sb-promo-light h3 { color: var(--sb-rose); }
.sb-promo-copy p { margin: 0 0 14px; opacity: .9; }
.sb-promo-copy .sb-link-arrow { color: inherit; }

/* ---------- services + footer ---------- */
.sb-services { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; padding: 26px 0; border-top: 1px solid var(--sb-line); }
.sb-services div { display: flex; align-items: center; gap: 12px; }
.sb-services span { width: 48px; height: 48px; border-radius: 999px; background: var(--sb-surface); border: 1px solid var(--sb-line); display: grid; place-items: center; flex-shrink: 0; }
.sb-services svg { width: 22px; height: 22px; }
.sb-services b { display: block; font-weight: 500; font-size: 15px; }
.sb-services small { color: var(--sb-muted); }
@media (min-width: 900px) { .sb-services { grid-template-columns: repeat(4, 1fr); } }

.sb-foot { background: var(--sb-charcoal); color: #d9cfc4; margin-top: 40px; font-size: 15px; }
.sb-foot a { text-decoration: none; }
.sb-foot a:hover { color: #fff; }
.sb-foot-grid { display: grid; gap: 28px; padding: 48px 0 32px; }
@media (min-width: 900px) { .sb-foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.sb-foot h4 { font-family: var(--sb-serif); color: #fff; font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.sb-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-foot .sb-logo b { color: #fff; }
.sb-foot .sb-logo small { color: #b9ab9d; }
.sb-social { display: flex; gap: 8px; margin-top: 16px; }
.sb-social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid #4a403a; display: grid; place-items: center; }
.sb-social svg { width: 18px; height: 18px; }
.sb-foot-bottom { border-top: 1px solid #3a322d; padding: 16px 0; font-size: 13px; color: #b9ab9d; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* ---------- breadcrumb ---------- */
.sb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--sb-muted); }
.sb-crumbs a { text-decoration: none; }
.sb-crumbs a:hover { color: var(--sb-ink); }
.sb-crumbs li + li::before { content: "›"; margin-right: 8px; color: #b5a99d; }
.sb-crumbs li:last-child { color: var(--sb-ink); }

/* ---------- category page ---------- */
.sb-cat-hero { position: relative; margin-top: 14px; border-radius: var(--sb-radius); overflow: hidden; background: linear-gradient(110deg, #f3ebe0, #e8d9c4); min-height: 240px; display: grid; align-items: center; }
.sb-cat-hero img { position: absolute; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.sb-cat-hero-copy { position: relative; z-index: 2; padding: 30px 24px; max-width: 600px; }
.sb-cat-hero-copy h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; margin: 0 0 8px; }
.sb-cat-hero-copy p { color: var(--sb-muted); margin: 0; max-width: 46ch; }
.sb-cat-points { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.sb-cat-points div { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; font-size: 12px; line-height: 1.3; }
.sb-cat-points span { width: 44px; height: 44px; border-radius: 999px; background: rgb(255 255 255 / .7); display: grid; place-items: center; }
.sb-cat-points svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .sb-cat-hero-copy { padding: 44px 60px; } .sb-cat-hero { min-height: 300px; } }

.sb-shop { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
@media (min-width: 1024px) { .sb-shop { grid-template-columns: 250px minmax(0, 1fr); } }
.sb-filter { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 18px; display: none; }
.sb-filter.is-open { display: block; }
@media (min-width: 1024px) { .sb-filter { display: block; position: sticky; top: 96px; } }
.sb-filter-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--sb-line); }
.sb-filter-head h2 { font-family: var(--sb-sans); font-size: 17px; font-weight: 600; margin: 0; }
.sb-filter-head a { font-size: 13px; color: var(--sb-rose); text-decoration: none; }
.sb-filter fieldset { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--sb-line); }
.sb-filter legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; padding: 0; }
.sb-filter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sb-filter label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.sb-filter label .sb-count { margin-left: auto; color: var(--sb-muted); font-size: 12px; }
.sb-filter input[type=checkbox], .sb-filter input[type=radio] { width: 17px; height: 17px; accent-color: var(--sb-charcoal); }
.sb-filter .sb-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-field { width: 100%; min-height: 44px; border: 1px solid var(--sb-line); border-radius: 8px; padding: 0 12px; background: var(--sb-surface); font: inherit; color: inherit; }
.sb-field:focus { border-color: var(--sb-ink); outline: none; }
.sb-swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--sb-line); display: inline-block; }
.sb-shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sb-shop-head h2 { font-size: 32px; margin: 0; line-height: 1.1; }
.sb-shop-head p { margin: 4px 0 0; color: var(--sb-muted); font-size: 14px; }
.sb-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sb-muted); }
.sb-sort select { min-height: 42px; border: 1px solid var(--sb-line); border-radius: 8px; background: var(--sb-surface); padding: 0 12px; font: inherit; color: var(--sb-ink); }
.sb-empty { background: var(--sb-surface); border: 1px dashed var(--sb-sand-2); border-radius: var(--sb-radius); padding: 48px 20px; text-align: center; }
.sb-pager { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.sb-pager a, .sb-pager span { min-width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--sb-line); background: var(--sb-surface); text-decoration: none; font-size: 14px; padding: 0 8px; }
.sb-pager [aria-current] { background: var(--sb-charcoal); color: #fff; border-color: var(--sb-charcoal); }

/* ---------- product page ---------- */
.sb-pdp { display: grid; gap: 28px; margin-top: 18px; align-items: start; }
@media (min-width: 1024px) { .sb-pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; } }
.sb-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .sb-gallery { grid-template-columns: 84px minmax(0, 1fr); } }
.sb-thumbs { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; overflow-x: auto; order: 2; }
@media (min-width: 640px) { .sb-thumbs { flex-direction: column; order: 1; overflow: visible; } }
.sb-thumb { display: block; width: 76px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; border: 1px solid var(--sb-line); padding: 0; background: var(--sb-sand); cursor: pointer; flex-shrink: 0; }
.sb-thumb.border-brand-600 { border: 2px solid var(--sb-charcoal); }
.sb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-main-img { position: relative; order: 1; border-radius: var(--sb-radius); overflow: hidden; background: var(--sb-sand); aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .sb-main-img { order: 2; } }
.sb-main-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.sb-zoom { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 999px; background: #fff; display: grid; place-items: center; box-shadow: var(--sb-shadow); }
.sb-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sb-info h1 { font-size: clamp(34px, 4vw, 46px); line-height: 1.05; margin: 0; }
.sb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--sb-muted); }
.sb-meta .sb-sep { width: 1px; height: 14px; background: var(--sb-line); }
.sb-pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sb-pdp-price .sb-price-now { font-size: 30px; }
.sb-pdp-price .sb-price-was { font-size: 17px; }
.sb-lead { color: var(--sb-muted); margin: 0; }
.sb-opt-group legend { font-weight: 500; font-size: 15px; margin-bottom: 10px; padding: 0; }
.sb-opt-group { border: 0; margin: 0; padding: 0; }
.sb-opt-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-opt { position: relative; }
.sb-opt input { position: absolute; opacity: 0; inset: 0; }
.sb-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--sb-line); border-radius: 8px; background: var(--sb-surface); font-size: 14px; cursor: pointer; transition: border-color .15s; }
.sb-opt input:checked + span { border: 1.5px solid var(--sb-charcoal); font-weight: 500; }
.sb-opt input:focus-visible + span { outline: 2px solid var(--sb-charcoal); outline-offset: 2px; }
.sb-buyrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sb-qty { display: inline-flex; align-items: center; border: 1px solid var(--sb-line); border-radius: 8px; background: var(--sb-surface); }
.sb-qty button { width: 46px; height: 48px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.sb-qty input { width: 48px; height: 48px; border: 0; border-inline: 1px solid var(--sb-line); text-align: center; font: inherit; background: transparent; -moz-appearance: textfield; }
.sb-qty input::-webkit-outer-spin-button, .sb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sb-stock { font-size: 14px; font-weight: 500; color: var(--sb-olive); }
.sb-stock.text-red-700 { color: #b42318; }
.sb-ctas { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.sb-ctas .sb-btn-dark { min-height: 54px; font-size: 16px; }
.sb-wish { width: 54px; height: 54px; border: 1px solid var(--sb-line); border-radius: 8px; background: var(--sb-surface); display: grid; place-items: center; cursor: pointer; }
.sb-cod { display: flex; align-items: center; gap: 14px; background: #f1f4ea; border-radius: var(--sb-radius-sm); padding: 14px 16px; }
.sb-cod svg { width: 28px; height: 28px; color: var(--sb-olive); flex-shrink: 0; }
.sb-cod b { display: block; font-weight: 500; color: var(--sb-olive); }
.sb-cod small { color: var(--sb-muted); }
.sb-assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; font-size: 12px; line-height: 1.3; }
.sb-assure svg { width: 26px; height: 26px; margin: 0 auto 6px; display: block; stroke-width: 1.5; }
.sb-assure b { display: block; font-weight: 500; font-size: 13px; }
.sb-assure small { color: var(--sb-muted); }

.sb-tabs { margin-top: 48px; border-bottom: 1px solid var(--sb-line); display: flex; gap: 28px; overflow-x: auto; }
.sb-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 0; font: inherit; font-size: 16px; color: var(--sb-muted); cursor: pointer; white-space: nowrap; }
.sb-tabs button[aria-selected="true"] { color: var(--sb-ink); border-bottom-color: var(--sb-charcoal); font-weight: 500; }
.sb-panel { padding: 28px 0 8px; }
.sb-detail { display: grid; gap: 28px; }
@media (min-width: 900px) { .sb-detail { grid-template-columns: 1fr 1fr; gap: 48px; } }
.sb-detail h3 { font-size: 28px; margin: 0 0 10px; }
.sb-prose { color: #4a3f38; }
.sb-prose p { margin: 0 0 12px; }
.sb-prose ul { padding-left: 20px; }
.sb-spec { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.sb-spec th, .sb-spec td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--sb-line); vertical-align: top; }
.sb-spec th { width: 36%; font-weight: 400; color: var(--sb-muted); }
.sb-detail-img { border-radius: var(--sb-radius); overflow: hidden; background: var(--sb-sand); aspect-ratio: 5 / 4; }
.sb-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.sb-review { padding: 14px 0; border-bottom: 1px solid var(--sb-line); }

/* sticky phone buy bar */
.sb-stickybuy { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--sb-surface); border-top: 1px solid var(--sb-line); box-shadow: 0 -6px 18px rgb(42 34 29 / .06); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sb-stickybuy > div { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
@media (min-width: 1024px) { .sb-stickybuy.sb-phone-only { display: none; } }

/* core add-on boxes that sit inside the theme's buy box */
.sb-info .card { background: var(--sb-surface); border-color: var(--sb-line); }