/* MSBS Cart storefront theme — mobile-first, light/dark aware */
:root {
  --brand: #0d7a5f;
  --brand-dark: #0a5f4a;
  --brand-tint: #e7f5f0;
  --brand-ink: #ffffff;
  --brand-dark-ink: #ffffff;
  --accent: #f59f00;
  --accent-ink: #212529;
  --ink: #1f2933;
  --muted: #66727e;
  --surface: #f6f8f9;
  --card-bg: #ffffff;
  --body-bg: #ffffff;
  --line: #e9edf0;
  --line-soft: #f1f4f6;
  --header-bg: rgba(255, 255, 255, .82);
  --radius: 14px;
  --shadow: 0 8px 24px rgba(16, 42, 67, .12);
  --mark-bg: #ffe9b3;
}

html[data-theme="dark"] {
  --brand: #1fae8a;
  --brand-dark: #178f71;
  --brand-tint: #10322a;
  --brand-ink: #212529;
  --brand-dark-ink: #ffffff;
  --accent: #ffb83d;
  --accent-ink: #212529;
  --ink: #e6edf3;
  --muted: #94a3b1;
  --surface: #161e26;
  --card-bg: #101820;
  --body-bg: #0b1117;
  --line: #223040;
  --line-soft: #1b2632;
  --header-bg: rgba(11, 17, 23, .78);
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --mark-bg: #6b5215;
  color-scheme: dark;
}

@font-face {
  font-family: 'SolaimanLipi';
  src: url('../fonts/SolaimanLipi.woff2') format('woff2'),
       url('../fonts/SolaimanLipi.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

/* clip, not hidden: setting overflow-x alone to a non-visible value forces
   the OTHER axis's used value to auto too, which turns body/html into their
   own scroll container and silently breaks every position:sticky header on
   the page (it sticks to that container's — never-actually-scrolled — box
   instead of the real viewport). clip has no such side effect. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip; /* one overflowing element must never scroll the whole page sideways */
  font-family: 'Lexend', 'SolaimanLipi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--body-bg);
  -webkit-tap-highlight-color: transparent;
  /* compact, fluid base size — scales smoothly between phone and desktop */
  font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* polished micro-interactions shared by every storefront theme */
.card, .summary-card, .product-card, .cat-card, .pay-option, .search-suggest, .hero-slide {
  animation: ui-rise .38s ease both;
}
.btn, .chip, .header-icon, .pay-option, .cat-card, .product-card, .wish-btn {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover, .chip:hover, .pay-option:hover { transform: translateY(-1px); }
.btn:active, .chip:active, .header-icon:active { transform: translateY(0) scale(.98); }
.form-control:focus, .form-select:focus, .sr-select .form-select:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent);
}
.site-header { animation: header-drop .32s ease both; }
@keyframes ui-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes header-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575.98px) {
  .card, .summary-card, .product-card, .cat-card, .pay-option, .search-suggest, .hero-slide { animation-duration: .26s; }
  .btn:hover, .chip:hover, .pay-option:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

body.has-bottom-nav { padding-bottom: 66px; }
@media (min-width: 992px) { body.has-bottom-nav { padding-bottom: 0; } }

/* fluid, compact headings */
h1, .fs-3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem) !important; }
h2        { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem); }
.fs-4     { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem) !important; }
.fs-5     { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem) !important; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--brand-ink); }

/* tighter page gutters + section rhythm on small screens */
@media (max-width: 767px) {
  main.py-3 { padding-top: .75rem !important; }
  .mb-5 { margin-bottom: 2.2rem !important; }
  .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
}

/* hide the reCAPTCHA badge everywhere — the attribution note near forms
   (required by Google when hiding the badge) is rendered by Recaptcha::field() */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { font-size: .72rem; opacity: .85; }
.recaptcha-note a { color: var(--muted); }

/* keep bootstrap components readable in dark mode */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-control::-webkit-input-placeholder,
html[data-theme="dark"] .form-control::-moz-placeholder,
html[data-theme="dark"] .form-control:-ms-input-placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); opacity: 1; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
  background: var(--card-bg); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .card-header { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .bg-light { background: var(--surface) !important; }
html[data-theme="dark"] .bg-white { background: var(--card-bg) !important; }
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] hr { border-color: var(--line) !important; }
html[data-theme="dark"] .table { --bs-table-bg: transparent; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .table > :not(caption) > * > * {
  background: transparent; color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .table thead th { color: var(--muted); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > * > * { --bs-table-bg: var(--surface); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .alert-light { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--muted); }

/* ---- modern buttons ------------------------------------------------------ */
.btn {
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .5rem 1.05rem;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease,
              border-color .14s ease, color .14s ease;
}
.btn-sm { padding: .3rem .75rem; border-radius: 9px; }
.btn-lg { padding: .65rem 1.4rem; border-radius: 13px; font-size: 1.02rem; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 30%, transparent); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-active-color: var(--brand-ink);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--brand) 88%, #ffffff), var(--brand) 45%, var(--brand-dark));
  border: 0;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 32%, transparent);
}
.btn-primary:hover, .btn-primary:focus {
  background-image: linear-gradient(160deg, var(--brand), var(--brand-dark));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 42%, transparent);
  transform: translateY(-1px);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  border-width: 1.5px;
}
.btn-outline-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); transform: translateY(-1px); }
.bg-primary { background-color: var(--brand) !important; color: var(--brand-ink) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: var(--brand-ink) !important; }
.bg-brand-tint { background: var(--brand-tint) !important; color: var(--ink) !important; }
.border-brand { border-color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }
.bg-accent { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* ---- modern form controls ------------------------------------------------- */
.form-control, .form-select {
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background-color: var(--card-bg);
  color: var(--ink);
  padding: .5rem .8rem;
  font-size: .92rem;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.form-control-sm, .form-select-sm { border-radius: 9px; padding: .35rem .65rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  background-color: var(--card-bg);
  color: var(--ink);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 16%, transparent);
}
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); opacity: 1; }
.form-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--ink);
  margin-bottom: .3rem;
}
.form-label.required::after { content: ' *'; color: #d64545; }
textarea.form-control { min-height: calc(1.55em * 2 + 1rem); }
.form-check-input { border-color: var(--line); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.input-group-text { border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); }

/* keep grouped controls flush */
.input-group > .form-control, .input-group > .form-select { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.input-group > :last-child { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }

/* ---- custom select (sr-select.js progressively replaces every native
   <select> — trigger button + floating listbox, no browser chrome) --------- */
.sr-select { position: relative; }
.sr-select-native {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; pointer-events: none;
}
.sr-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; min-height: 44px; text-align: left;
  background: var(--card-bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 11px; padding: .5rem .8rem;
  font: inherit; font-size: .92rem; cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.sr-select-trigger-sm { min-height: 34px; padding: .35rem .65rem; font-size: .85rem; border-radius: 9px; }
.sr-select-trigger:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.sr-select-trigger:focus-visible,
.sr-select.open .sr-select-trigger {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 16%, transparent);
}
.sr-select.is-disabled .sr-select-trigger { opacity: .55; cursor: not-allowed; background: var(--surface); }
.sr-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-select-trigger.is-placeholder .sr-select-label { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.sr-select-caret {
  width: 8px; height: 8px; flex-shrink: 0; margin-top: -3px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.sr-select.open .sr-select-caret { transform: rotate(-135deg); margin-top: 3px; }
.sr-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: .3rem; max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.sr-select.open .sr-select-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.sr-select-panel.drop-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.sr-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; border-radius: 8px; font-size: .89rem; color: var(--ink); cursor: pointer;
}
.sr-select-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-select-option:hover, .sr-select-option.is-active { background: var(--surface); }
.sr-select-option.is-selected { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.sr-select-option.is-disabled { opacity: .4; cursor: not-allowed; }
.sr-select-option.is-disabled:hover { background: transparent; }
.sr-select-check {
  width: 14px; height: 8px; flex-shrink: 0;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-top: -3px;
}

/* ---- cards ---------------------------------------------------------------- */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card-bg);
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  padding: .8rem 1rem;
}
.breadcrumb { font-size: .8rem; }
.badge { font-weight: 600; letter-spacing: .01em; }

/* announcement bar */
.announce-bar { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.announce-bar a { color: var(--accent-ink); text-decoration: none; }
.announce-bar a:hover { text-decoration: underline; color: var(--accent-ink); }

/* top bar */
.topbar { background: var(--brand-dark); color: var(--brand-dark-ink); }
.topbar a, .topbar-link { color: var(--brand-dark-ink); text-decoration: none; }
/* the EN|বাংলা toggle inherits its surrounding colour so it always matches the
   neighbouring text/icons — the light topbar text, the header icon cluster
   (.header-icon), etc. Coloured-header themes (market/spark) set it explicitly. */
.lang-switch a { color: inherit; opacity: .8; text-decoration: none; font-weight: 600; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.active { opacity: 1; text-decoration: underline; }

/* header (sticky) */
.site-header {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1030;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 4px 24px rgba(16, 24, 40, .05);
}
.brand-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (min-width: 768px) { .brand-name { font-size: 1.35rem; } }
/* Settings → Store identity → "Show store name text" → Storefront header —
   every theme's header uses .brand-name for the text beside the logo, so
   one rule here covers all of them instead of editing each layout file. */
body.hide-site-name .brand-name { display: none !important; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--brand);
  color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.brand-logo { max-height: 42px; max-width: 150px; object-fit: contain; }
.search-form .form-control {
  border-radius: 12px 0 0 12px; border-color: var(--brand);
  min-height: 42px;
}
.search-form .btn { border-radius: 0 12px 12px 0; min-width: 52px; }
.header-icon {
  font-size: 1.35rem; color: var(--ink); text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: 10px;
  transition: color .14s ease, background-color .14s ease;
}
.header-icon:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
/* on the smallest phones the icon cluster (theme/push/wishlist/account/cart)
   shares a narrow half-width header column with the logo — trim the target
   back down at that width so up to 5 icons never force the header to overflow */
@media (max-width: 400px) { .header-icon { min-width: 36px; min-height: 36px; } }
.cart-badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--accent); color: var(--accent-ink); font-size: .66rem; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; padding: 0 4px;
}
.theme-toggle { cursor: pointer; }
.theme-toggle .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline; }

/* dark & light mode logos and category images switching */
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-dark { display: inline-block !important; }
html[data-theme="light"] .logo-dark { display: none !important; }
html[data-theme="light"] .logo-light { display: inline-block !important; }

html[data-theme="dark"] .cat-img-light { display: none !important; }
html[data-theme="dark"] .cat-img-dark { display: block !important; }
html[data-theme="light"] .cat-img-dark { display: none !important; }
html[data-theme="light"] .cat-img-light { display: block !important; }

.push-bell { cursor: pointer; }
.push-bell.active { color: var(--brand); }
.push-bell.active i::before { content: "\f230"; } /* bi-bell-fill */
.push-bell.denied { color: var(--muted); opacity: .55; }

/* push opt-in banner — icon/text/close share a row; the action button gets
   its own full-width row below instead of squeezing into whatever's left
   of that row, which used to wrap the description into a cramped, narrow
   4-line column on phones */
.push-banner {
  position: fixed; left: 14px; bottom: 80px; z-index: 1042;
  width: min(360px, calc(100vw - 28px));
  background: var(--brand); color: var(--brand-ink);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: .85rem .9rem .9rem; display: flex; flex-direction: column; gap: .65rem;
  animation: push-banner-in .3s ease both;
}
@media (min-width: 992px) { .push-banner { bottom: 24px; } }
.push-banner-row { display: flex; align-items: flex-start; gap: .6rem; }
.push-banner-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .15rem; }
.push-banner-text { flex: 1; min-width: 0; line-height: 1.35; }
.icon-close-btn {
  flex-shrink: 0; border: 0; background: transparent; color: inherit;
  opacity: .75; font-size: 1rem; line-height: 1; padding: .25rem; margin: -.25rem -.25rem 0 0;
}
.icon-close-btn:hover { opacity: 1; }
@keyframes push-banner-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* search autocomplete */
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1040;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.search-suggest .sg-item {
  display: flex; gap: .7rem; align-items: center; padding: .55rem .8rem;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.search-suggest .sg-item:last-child { border-bottom: 0; }
.search-suggest .sg-item:hover, .search-suggest .sg-item.active { background: var(--brand-tint); }
.search-suggest img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.search-suggest .sg-name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.search-suggest .sg-price { color: var(--brand); font-weight: 700; font-size: .85rem; }
.search-suggest .sg-head {
  padding: .4rem .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--surface);
}
.search-suggest mark { background: var(--mark-bg); color: inherit; padding: 0; }

/* =====================================================================
   NAVIGATION — shared by every theme (see views/store/layouts/_nav.php)

   Colour contract: a nav bar is a *brand slab* in light mode and an
   *elevated dark surface* in dark mode. Painting the light brand tint of a
   dark palette across a whole bar and writing on it was the old source of
   unreadable navs — every palette's dark --brand is a light tone chosen to
   glow against a dark page, which leaves nothing legible to write on it.
   Themes that want a brand-coloured bar in dark mode too can opt in with
   .nav-brandwash on the bar element.
   ===================================================================== */
:root {
  --nav-bg: var(--brand);
  --nav-ink: var(--brand-ink);
  --nav-ink-dim: color-mix(in srgb, var(--brand-ink) 78%, transparent);
  --nav-hover-bg: color-mix(in srgb, var(--brand-ink) 16%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--brand-ink) 24%, transparent);
  --nav-active-ink: var(--brand-ink);
  --nav-line: color-mix(in srgb, var(--brand-ink) 20%, transparent);
}
html[data-theme="dark"] {
  --nav-bg: var(--surface);
  --nav-ink: var(--ink);
  --nav-ink-dim: var(--muted);
  --nav-hover-bg: color-mix(in srgb, var(--brand) 18%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--brand) 24%, transparent);
  --nav-active-ink: var(--brand);
  --nav-line: var(--line);
}
/* opt-in: keep the brand wash in dark mode too (used by themes whose whole
   identity is a coloured bar) — ink flips to the palette's contrast ink */
.nav-brandwash { --nav-bg: var(--brand); --nav-ink: var(--brand-ink); --nav-ink-dim: color-mix(in srgb, var(--brand-ink) 78%, transparent); --nav-active-ink: var(--brand-ink); --nav-hover-bg: color-mix(in srgb, var(--brand-ink) 16%, transparent); --nav-active-bg: color-mix(in srgb, var(--brand-ink) 24%, transparent); --nav-line: color-mix(in srgb, var(--brand-ink) 20%, transparent); }

/* ---- the rail: one line, always. Scrolls sideways, never wraps ---- */
.nav-railwrap { position: relative; min-width: 0; }
.nav-rail {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: .12rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding-inline: 1.5rem;
}
.nav-rail::-webkit-scrollbar { display: none; }
.nav-rail > * { flex: 0 0 auto; }
.nav-rail a, .nav-rail button { white-space: nowrap; }
/* a flyout parent is a <button>; make it inherit its theme's link styling so
   themes only ever have to style one class for both kinds of item */
.nav-rail button {
  font: inherit; color: inherit; background: transparent;
  border: 0; cursor: pointer; text-align: left;
}
.nav-rail .nav-ico { margin-inline-end: .35rem; }
.min-w-0 { min-width: 0; }

/* colour contract helpers — a bar paints itself with the nav tokens, and
   .nav-slab-deep is the "darker band" variant (brand-dark in light mode,
   a deep neutral in dark mode) that marketplace-style layouts use */
.nav-slab { background: var(--nav-bg); color: var(--nav-ink); }
.nav-slab-deep {
  --nav-bg: var(--brand-dark);
  --nav-ink: var(--brand-dark-ink);
  --nav-ink-dim: color-mix(in srgb, var(--brand-dark-ink) 80%, transparent);
  --nav-hover-bg: color-mix(in srgb, var(--brand-dark-ink) 16%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--brand-dark-ink) 24%, transparent);
  --nav-active-ink: var(--brand-dark-ink);
  --nav-line: color-mix(in srgb, var(--brand-dark-ink) 18%, transparent);
  background: var(--nav-bg); color: var(--nav-ink);
}
html[data-theme="dark"] .nav-slab-deep {
  --nav-bg: var(--card-bg);
  --nav-ink: var(--ink);
  --nav-ink-dim: var(--muted);
  --nav-hover-bg: color-mix(in srgb, var(--brand) 18%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--brand) 24%, transparent);
  --nav-active-ink: var(--brand);
  --nav-line: var(--line);
}
/* fade the strip's own content out at whichever edge still has more to
   show — a mask, not an overlay, so it works on any background colour */
.nav-railwrap.can-start .nav-rail { mask-image: linear-gradient(to right, transparent 0, #000 2.2rem, #000 100%); }
.nav-railwrap.can-end .nav-rail   { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%); }
.nav-railwrap.can-start.can-end .nav-rail {
  mask-image: linear-gradient(to right, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .nav-rail { scroll-behavior: auto; } }

/* prev/next buttons — pointer devices only, and only when there is more to see */
.nav-rail-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card-bg); color: var(--ink);
  display: none; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: opacity .15s ease, background-color .15s ease;
}
.nav-rail-prev { left: -4px; }
.nav-rail-next { right: -4px; }
.nav-rail-btn:hover { background: var(--nav-hover-bg); }
@media (hover: hover) and (min-width: 992px) {
  .nav-railwrap.can-start .nav-rail-prev,
  .nav-railwrap.can-end .nav-rail-next { display: inline-flex; }
}

/* ---- default rail item look (themes override freely) ---- */
.nav-rail-link {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--nav-ink-dim); background: transparent; border: 0;
  font: inherit; font-weight: 500; text-decoration: none;
  padding: .62rem .85rem; border-radius: 9px;
  transition: color .14s ease, background-color .14s ease;
}
.nav-rail-link:hover, .nav-rail-link:focus-visible { color: var(--nav-ink); background: var(--nav-hover-bg); }
.nav-rail-link.is-current { color: var(--nav-active-ink); background: var(--nav-active-bg); font-weight: 600; }
.nav-caret { font-size: .62em; opacity: .7; margin-left: .1rem; transition: transform .18s ease; }
[aria-expanded="true"] > .nav-caret { transform: rotate(180deg); }

.site-nav { background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); }
.site-nav .nav-rail { justify-content: center; }
/* centring only reads well while everything fits; once it scrolls the first
   item must start at the left edge or it looks arbitrarily clipped */
.site-nav .nav-railwrap.can-end .nav-rail,
.site-nav .nav-railwrap.can-start .nav-rail { justify-content: flex-start; }

/* ---- sub-category flyout (portalled to <body> by store.js, so no scroll
       container can ever clip it) ---- */
.navmenu {
  position: fixed; z-index: 1085; min-width: 210px; max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .18);
  padding: .35rem; animation: navmenu-in .16s ease both;
}
html[data-theme="dark"] .navmenu { box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
@keyframes navmenu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.navmenu-head {
  display: none; font-weight: 700; font-size: .95rem;
  padding: .5rem .7rem .35rem; color: var(--ink);
}
.navmenu-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .52rem .7rem; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: .9rem; line-height: 1.3;
}
.navmenu-item i { color: var(--muted); font-size: .95em; flex-shrink: 0; }
.navmenu-item:hover, .navmenu-item:focus-visible { background: var(--brand-tint); color: var(--brand); }
.navmenu-item:hover i, .navmenu-item:focus-visible i { color: inherit; }
.navmenu-item.is-current { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.navmenu-all { font-weight: 600; border-bottom: 1px solid var(--line-soft); border-radius: 9px 9px 0 0; margin-bottom: .2rem; }

/* phones: the same flyout becomes a bottom sheet */
@media (max-width: 575.98px) {
  .navmenu.as-sheet {
    left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: 100%; max-width: 100%; border-radius: 18px 18px 0 0;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    max-height: 72vh; animation: navsheet-in .2s ease both;
  }
  .navmenu.as-sheet .navmenu-head { display: block; }
  .navmenu.as-sheet .navmenu-item { padding: .7rem .8rem; font-size: .95rem; }
  .navmenu-backdrop {
    position: fixed; inset: 0; z-index: 1084; background: rgba(6, 10, 16, .45);
    animation: ui-fade .18s ease both;
  }
  @keyframes navsheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* mobile category chips */

/* mobile category chips */
.mobile-cats { background: var(--card-bg); border-bottom: 1px solid var(--line); }
.mobile-cats .container { scrollbar-width: none; }
.mobile-cats .container::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-shrink: 0; padding: .32rem .85rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.chip.is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.mobile-cats .nav-rail { gap: .45rem; }

/* shop.php subcategory pill filter (narrows within the selected parent
   category) — reuses .chip, just needs a selected state */
.subcat-filter .chip.active {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.subcat-filter .chip.active:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-ink); }

/* hero / banners */
.hero-slide {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  min-height: 200px;
}
.hero-slide img { width: 100%; height: 340px; object-fit: cover; }
.hero-caption {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; padding: 2.5rem;
  /* a directional gradient alone fades to fully transparent, so text on a
     bright/light-coloured photo becomes unreadable once it's past the fade
     point (worse still for centred/right-aligned captions, which sit
     outside the darkened zone entirely) — keep a darkened floor across the
     WHOLE slide and layer the stronger left-side gradient on top of it */
  background: linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.35) 60%, rgba(0,0,0,.5) 100%);
  color: #fff;
}
.hero-caption h2, .hero-caption p { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-caption h2 { font-weight: 700; font-size: 2rem; }

/* multi-image content blocks (carousel) — a fixed ratio + object-fit:cover
   keeps every slide the same height so the carousel doesn't jump as it
   transitions between images of different original sizes */
.block-carousel .carousel-item { aspect-ratio: 21 / 7; background: var(--surface); }
.block-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 575.98px) { .block-carousel .carousel-item { aspect-ratio: 16 / 9; } }

/* category cards */
.cat-card {
  display: block; text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem .6rem; color: var(--ink); font-weight: 600; font-size: .95rem;
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
  height: 100%;
}
.cat-card i { font-size: 1.6rem; color: var(--brand); display: block; margin-bottom: .4rem; }
.cat-card .cat-img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  display: block; margin: 0 auto .5rem; border: 1px solid var(--line);
}
.cat-card:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.cat-card:hover .cat-img { border-color: var(--brand); }

/* category grid "show more": desktop reveals 8, mobile reveals 6 */
.cat-col-extra { display: none; }
@media (max-width: 767px) {
  .cat-col-mid { display: none; }
}
#catGrid.cats-expanded .cat-col-mid,
#catGrid.cats-expanded .cat-col-extra { display: block; }

/* product cards */
.section-title {
  font-weight: 700; font-size: 1.2rem; margin: 0;
  padding-left: .75rem; border-left: 4px solid var(--brand);
}
@media (min-width: 768px) { .section-title { font-size: 1.35rem; } }
.product-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--card-bg); height: 100%; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
  position: relative;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card .thumb { position: relative; display: block; background: var(--surface); }
.product-card .thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.discount-badge {
  position: absolute; top: 10px; left: -4px; z-index: 2;
  background: linear-gradient(135deg, #ff8a3d, var(--accent));
  color: var(--accent-ink); font-size: .7rem; font-weight: 800; letter-spacing: .01em;
  padding: .22rem .6rem; border-radius: 6px;
  transform: rotate(-6deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
  animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.product-card:hover .discount-badge { transform: rotate(-6deg) scale(1.06); }
@keyframes badge-pop {
  from { transform: rotate(-6deg) scale(.4); opacity: 0; }
  to   { transform: rotate(-6deg) scale(1); opacity: 1; }
}
.stockout-badge {
  position: absolute; top: 10px; right: 10px; background: #d64545;
  color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 6px;
}
.lowstock-badge {
  background: #fff4e0; color: #b26a00; border: 1px solid #ffd695;
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px;
  animation: badge-pulse 1.8s ease-in-out infinite;
}
html[data-theme="dark"] .lowstock-badge { background: #40300f; color: #ffca6e; border-color: #6b5215; }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,159,0,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(255,159,0,0); }
}
.product-card .body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 768px) { .product-card .body { padding: .85rem .95rem 1rem; } }
.product-card .name {
  font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.35;
  font-size: .92rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
.product-card .name:hover { color: var(--brand); }
.price-now { color: var(--brand); font-weight: 700; font-size: 1.02rem; }
.price-was { color: var(--muted); text-decoration: line-through; font-size: .82rem; }
.product-card .btn-add { margin-top: auto; min-height: 38px; }

/* wishlist heart */
.wish-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); color: #d64545;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; padding: 0;
  box-shadow: 0 2px 6px rgba(16,42,67,.14);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  transition: transform .12s ease;
}
.wish-btn i { line-height: 1; display: block; }
.wish-btn i::before { display: block; vertical-align: middle; }
html[data-theme="dark"] .wish-btn { background: rgba(16,24,32,.9); }
.wish-btn:hover { transform: scale(1.1); }
[data-wishlist].active i::before { content: "\f415"; } /* bi-heart-fill */

/* button loading state */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn-spinner {
  display: inline-block; width: 1.1em; height: 1.1em; margin-right: .45em;
  flex: 0 0 auto; box-sizing: border-box; vertical-align: -.15em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 999px;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.product-card .stockout-badge { top: auto; bottom: 10px; left: 10px; right: auto; }

/* ---- confirm modal (e.g. removing a cart item) ----------------------------- */
.sr-confirm-icon {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
#srConfirmMessage { color: var(--ink); font-size: .95rem; }

/* ---- shop: live filters ----------------------------------------------------- */
#shopLive { position: relative; transition: opacity .15s ease; }
#shopLive.shop-loading { opacity: .5; pointer-events: none; }
#shopLive.shop-loading::after {
  content: ""; position: absolute; top: 40px; left: 50%; margin-left: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand);
  animation: btn-spin .7s linear infinite; z-index: 5;
}
/* the sidebar's submit button is a progressive-enhancement fallback: every
   filter change is already live once JS has taken over */
.shop-live-ready .shop-filter-apply { display: none; }
@media (min-width: 992px) {
  /* Bootstrap's base .offcanvas rule (position:fixed / visibility:hidden /
     transform) is required alongside .offcanvas-lg so data-bs-dismiss
     buttons without an explicit target can find this panel via
     this.closest('.offcanvas') — but that base rule is unconditional (not
     gated to the <lg breakpoint), so it has to be force-reset back to a
     normal static sidebar box here. #id beats the base rule's plain-class
     specificity regardless of stylesheet load order. */
  #shopFilterPanel.offcanvas-lg {
    position: static; visibility: visible; transform: none;
    border: 0; background: transparent;
  }
}
@media (max-width: 991.98px) {
  .shop-filter-toggle { min-height: 44px; }
  .shop-filter-drawer-foot {
    display: flex; gap: .6rem; margin-top: 1rem;
    padding-top: 1rem; border-top: 1px solid var(--line);
  }
  .shop-filter-drawer-foot .btn { min-height: 46px; }
}

/* mobile quick-filters row: category + brand up front, "more filters" (sort)
   collapsed into a small icon button next to them */
.shop-quick-filters { align-items: stretch; }
.shop-quick-filters .sr-select,
.shop-quick-filters select { min-width: 0; flex: 1 1 0; }
.shop-quick-filters .shop-filter-toggle {
  width: 44px; padding-left: 0; padding-right: 0;
}
.shop-quick-filters-badge {
  position: absolute; top: -4px; right: -4px; padding: .25em .4em;
  border-radius: 50%; font-size: .55rem; line-height: 1;
}

/* product page gallery + zoom */
.pgallery-main {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); margin-bottom: .6rem;
}
.pgallery-main img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block;
  cursor: zoom-in; background: var(--card-bg);
}
.pg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #222; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: 0; transition: opacity .15s;
}
.pgallery-main:hover .pg-nav { opacity: 1; }
html[data-theme="dark"] .pg-nav { background: rgba(20,28,36,.9); color: #eee; }
.pg-prev { left: 10px; } .pg-next { right: 10px; }
.pg-zoom {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #222; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
html[data-theme="dark"] .pg-zoom { background: rgba(20,28,36,.9); color: #eee; }
.pgallery-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.pg-thumb-wrap { position: relative; width: 64px; height: 64px; flex: 0 0 auto; }
.pgallery-thumbs img,
.pg-thumb-wrap img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--line); cursor: pointer; transition: border-color .12s;
}
.pgallery-thumbs img.active { border-color: var(--brand); }
/* A 64px thumbnail cannot carry "Colour: Midnight Blue" — squeezing the name
   in there rendered 3 illegible characters and an ellipsis. Tagged thumbnails
   get a dot; the name itself is stamped across the full-size photo, where
   there is room to actually read it. */
.pg-thumb-dot {
  position: absolute; top: 4px; right: 4px; z-index: 1; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px var(--card-bg);
}
.pg-variant-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(12, 18, 28, .62); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  padding: .38rem .7rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-variant-badge i { font-size: .72em; opacity: .85; }
@media (max-width: 575.98px) {
  .pg-variant-badge { left: 8px; bottom: 8px; font-size: .72rem; padding: .3rem .6rem; }
}

/* ---- variant option picker ---- */
.vpick-row { margin-bottom: .85rem; }
.vpick-label {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}
.vpick-chosen { font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.vpick-values { display: flex; flex-wrap: wrap; gap: .45rem; }
.vpick-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .4rem .9rem; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.vpick-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.vpick-btn.is-selected {
  border-color: var(--brand); background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 32%, transparent);
}
.vpick-btn.is-soldout { color: var(--muted); border-style: dashed; }
/* still clickable (it may become available once another choice changes), but
   visibly struck through so the shopper knows why */
.vpick-btn.is-soldout::after {
  content: ''; position: absolute;
}
.vpick-btn.is-soldout { position: relative; text-decoration: line-through; text-decoration-thickness: 1px; }
.vpick-btn.is-unavailable { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.vpick-swatch {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  background: var(--swatch, var(--line)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.vpick-status { margin-top: .1rem; min-height: 1.2em; }

/* fullscreen zoom lightbox */
.pg-lightbox {
  position: fixed; inset: 0; z-index: 3000; background: rgba(10,12,16,.94);
  display: none; align-items: center; justify-content: center;
}
.pg-lightbox.open { display: flex; }
.pg-lb-stage { max-width: 100vw; max-height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pg-lb-img {
  max-width: 92vw; max-height: 88vh; object-fit: contain; cursor: zoom-in;
  transition: transform .12s ease; will-change: transform; touch-action: none; user-select: none;
}
.pg-lb-img.zoomed { cursor: grab; }
.pg-lb-img.grabbing { cursor: grabbing; transition: none; }
.pg-lb-close {
  position: fixed; top: 16px; right: 20px; z-index: 3010; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem;
}
.pg-lb-close:hover { background: rgba(255,255,255,.28); }
.pg-lightbox .pg-nav { opacity: 1; width: 46px; height: 46px; background: rgba(255,255,255,.16); color: #fff; }
.pg-lightbox .pg-nav:hover { background: rgba(255,255,255,.3); }
.pg-lb-prev { left: 18px; } .pg-lb-next { right: 18px; }
.pg-lb-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: .8rem; pointer-events: none;
}
.qty-group { max-width: 140px; }
.qty-group .form-control { text-align: center; }
.qty-group .btn { min-width: 40px; }

/* star ratings */
.stars { color: #f5a623; letter-spacing: 1px; }
.review-card { border-bottom: 1px solid var(--line-soft); padding: .9rem 0; }
.review-card:last-child { border-bottom: 0; }

/* cart & checkout */
.cart-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }

/* cart line (responsive, no table) */
.cart-line {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .5rem; border-bottom: 1px solid var(--line-soft);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .cl-info { flex: 1 1 200px; min-width: 0; }
.cart-line .cl-name {
  font-weight: 600; color: var(--ink); text-decoration: none;
  display: block; line-height: 1.3; overflow-wrap: anywhere;
}
.cart-line .cl-name:hover { color: var(--brand); }
.cart-line .cl-controls {
  display: flex; align-items: center; gap: .7rem; margin-left: auto;
  flex-wrap: nowrap;
}
.cart-line .qty-group { width: 116px; flex-shrink: 0; }
.cart-line .cl-total { min-width: 76px; text-align: right; white-space: nowrap; color: var(--brand); }
@media (max-width: 575px) {
  .cart-line { gap: .6rem; }
  .cart-line .cl-controls { flex: 1 0 100%; justify-content: space-between; margin-left: 0; gap: .4rem; }
  .cart-line .qty-group { width: 104px; }
  .cart-line .cl-total { min-width: 0; }
}

/* compact sticky checkout bar */
.sticky-checkout {
  position: fixed; left: 0; right: 0; bottom: 64px; z-index: 1044;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--card-bg); border-top: 1px solid var(--line);
  padding: .45rem .9rem;
  box-shadow: 0 -4px 16px rgba(16,42,67,.10);
}
.sticky-checkout .sc-info { font-size: .88rem; color: var(--ink); }
.sticky-checkout .sc-info i { color: var(--brand); margin-right: .25rem; }
@media (min-width: 992px) {
  .sticky-checkout {
    left: auto; right: 84px; bottom: 24px; border: 1px solid var(--line);
    border-radius: 999px; padding: .4rem .5rem .4rem 1.1rem;
    box-shadow: var(--shadow);
  }
  .sticky-checkout .btn { border-radius: 999px; }
  /* cart-page sticky bar is desktop-hidden (summary card is sticky instead) */
}
/* keep the floating chat button clear of the sticky checkout bar on mobile */
@media (max-width: 991px) {
  body:has(.sticky-checkout:not(.d-none)) .chat-floats,
  body:has(.sticky-checkout:not(.d-none)) .chat-launcher { bottom: 124px; }
  body:has(.sticky-checkout:not(.d-none)) .webchat { bottom: 184px; }
  /* clearance so cart content isn't hidden behind the sticky bar + bottom nav */
  body:has(#cartStickyBar) { padding-bottom: 124px; }
}
/* both bars sit at the same spot — once there's already something in the cart
   and the "continue to cart" bar is showing, the product page's own sticky
   add-to-cart bar would stack right under it, so give the continue bar priority */
body:has(.sticky-checkout:not(.d-none)) .sticky-buy { display: none; }
.summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.summary-card.sticky-lg-top { top: 1rem; z-index: 1; }
.summary-item { display: flex; gap: .5rem; margin-bottom: .55rem; align-items: baseline; }
.summary-item .si-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.summary-item .si-price { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.pay-option {
  border: 1.5px solid var(--line); border-radius: 12px; padding: .75rem 1rem;
  cursor: pointer; display: block; transition: border-color .12s ease, background .12s ease;
  background: var(--card-bg);
}
.pay-option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.pay-option .flex-grow-1 { min-width: 0; overflow-wrap: anywhere; }
.pay-logo { font-weight: 700; }

/* social login buttons */
.btn-google, .btn-facebook {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; border-radius: 10px; padding: .55rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); background: var(--card-bg);
}
.btn-google:hover { border-color: #4285f4; color: #4285f4; }
.btn-facebook:hover { border-color: #1877f2; color: #1877f2; }
.btn-google i { color: #ea4335; }
.btn-facebook i { color: #1877f2; }
.or-divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* newsletter band */
.newsletter-band { background: var(--brand); color: var(--brand-ink); }
.newsletter-band .form-control { border: 0; min-height: 44px; }

/* footer — a deep, near-black surface tinted with the store's own brand hue so
   it harmonises with whatever palette is active (was a fixed green regardless).
   color-mix keeps it mostly the near-black base, so it stays dark and the light
   text below always reads well, on every palette and in dark mode. */
.site-footer { background: color-mix(in srgb, var(--brand) 22%, #0e1512); color: #d7e3df; }
html[data-theme="dark"] .site-footer { background: color-mix(in srgb, var(--brand) 16%, #080d0b); }
.footer-title { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.footer-links a { color: #d7e3df; text-decoration: none; display: inline-block; padding: .15rem 0; }
.footer-links a:hover { color: #fff; }
.footer-links-2col { columns: 2; column-gap: 1.2rem; }
.footer-links-2col li { break-inside: avoid; }
.footer-hr { border-color: rgba(255,255,255,.15); margin: 1.5rem 0 1rem; }
.pay-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: .25rem .6rem; font-size: .8rem; font-weight: 600; color: #fff;
}
.pay-bkash { background: #e2136e; border-color: #e2136e; }
.pay-nagad { background: #ec1c24; border-color: #ec1c24; }
.pay-rocket { background: #8c3494; border-color: #8c3494; }
.social-btn {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.1rem;
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none;
}
.social-btn:hover { background: var(--brand); color: var(--brand-ink); }

/* floating chat buttons */
.chat-floats {
  position: fixed; right: 14px; bottom: 80px; z-index: 1040;
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 992px) { .chat-floats { bottom: 24px; } }
.chat-float {
  width: 50px; height: 50px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; color: #fff;
  text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.chat-float:hover { transform: scale(1.08); color: #fff; }
.chat-whatsapp { background: #25d366; }
.chat-messenger { background: #0084ff; }
.chat-web { background: var(--brand); color: var(--brand-ink); }

/* compact multi-channel chat launcher (WhatsApp + Messenger + live chat combined) */
.chat-launcher {
  position: fixed; right: 14px; bottom: 80px; z-index: 1040;
}
@media (min-width: 992px) { .chat-launcher { bottom: 24px; } }
.chat-launcher-btn {
  width: 50px; height: 50px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.chat-launcher-btn:hover { transform: scale(1.08); }
.chat-launcher-icon {
  position: absolute; top: 50%; left: 50%; line-height: 1; font-size: 1.5rem;
  transform: translate(-50%, -50%);
  transition: opacity .15s ease, transform .15s ease;
}
.chat-launcher-icon-close { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(.6); }
.chat-launcher-btn.is-open .chat-launcher-icon-open { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.6); }
.chat-launcher-btn.is-open .chat-launcher-icon-close { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); font-size: 1.2rem; }
.chat-menu {
  position: absolute; right: 0; bottom: 62px;
  width: 220px; padding: .4rem;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
  animation: chatMenuIn .15s ease;
}
@keyframes chatMenuIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-menu-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .55rem; border-radius: 10px; border: 0; background: transparent;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem;
  width: 100%; text-align: left;
}
.chat-menu-item:hover { background: var(--surface); color: var(--ink); }
.chat-menu-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; color: #fff;
}
.chat-menu-icon.chat-web { color: var(--brand-ink); }

/* website live chat widget */
.webchat {
  position: fixed; right: 14px; bottom: 140px; z-index: 1055;
  width: min(360px, calc(100vw - 28px));
  background: var(--card-bg); border: 1.5px solid var(--webchat-border, rgba(0, 0, 0, .16));
  border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  /* dvh (not vh) so this shrinks with the on-screen keyboard on mobile instead
     of keeping its full height and pushing its top edge off-screen */
  max-height: min(560px, calc(100dvh - 160px));
}
html[data-theme="dark"] .webchat { --webchat-border: rgba(255, 255, 255, .18); }
@media (min-width: 992px) { .webchat { bottom: 86px; } }
.webchat-head {
  background: var(--brand); color: var(--brand-ink); padding: .8rem 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.webchat-body { padding: .9rem; overflow-y: auto; flex: 1; min-height: 120px; }
.webchat-msg {
  padding: .5rem .75rem; border-radius: 12px; margin-bottom: .5rem;
  max-width: 85%; font-size: .9rem; line-height: 1.4;
  overflow-wrap: anywhere; white-space: pre-line;
}
.webchat-msg.bot, .webchat-msg.agent {
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; margin-right: auto;
}
.webchat-msg.me {
  background: var(--brand); color: var(--brand-ink);
  border-bottom-right-radius: 4px; margin-left: auto;
}
.webchat-msg .wc-time { display: block; font-size: .66rem; opacity: .65; margin-top: 2px; }
.webchat-foot {
  display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--line);
  background: var(--card-bg); align-items: flex-end;
}
.webchat-offline {
  background: #fff8e6; border: 1px solid #ffe1a1; color: #8a6100;
  padding: .5rem .7rem; border-radius: 10px; margin-top: .4rem;
}
html[data-theme="dark"] .webchat-offline { background: #40300f; color: #ffca6e; border-color: #6b5215; }

/* --- frictionless chat: quick chips + compose box ------------------------- */
.webchat-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .2rem; }
.wc-chip {
  border: 1px solid var(--brand); background: transparent; color: var(--brand);
  border-radius: 999px; padding: .32rem .7rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, transform .1s; line-height: 1.2;
}
.wc-chip:hover { background: var(--brand); color: var(--brand-ink); }
.wc-chip:active { transform: scale(.96); }
.webchat-name { margin-bottom: .5rem; }
.webchat-compose { display: flex; align-items: flex-end; gap: .4rem; }
.webchat-compose textarea, .webchat-foot textarea {
  resize: none; overflow-y: auto; max-height: 96px; line-height: 1.4;
  flex: 1 1 auto; min-width: 0;
}
.webchat-send-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.webchat-send-btn i { font-size: 1rem; }
.webchat-hint { display: flex; align-items: center; }
.webchat-lead { margin-top: .3rem; }
.webchat-lead .form-control { background: var(--card-bg); }

/* mobile bottom nav */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
  background: var(--card-bg); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(16,42,67,.06);
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--muted); text-decoration: none; font-size: .66rem; font-weight: 600;
  min-width: 52px; padding: 2px 4px;
}
.bn-item i { font-size: 1.25rem; line-height: 1.2; }
.bn-item:hover, .bn-item:focus { color: var(--brand); }
.bn-badge {
  position: absolute; top: -2px; right: 4px;
  background: var(--accent); color: var(--accent-ink); font-size: .6rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 8px; padding: 0 3px;
}

/* my-account order list (cards, not a table — avoids horizontal scroll on mobile) */
.order-card { color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease; }
.order-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.order-card-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--line); }

/* my-account hero band */
.account-hero {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: var(--radius); color: var(--brand-ink); overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.account-hero-inner {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem;
}
.account-hero-who { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.account-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 1.4rem; font-weight: 700;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-hero-name { font-size: 1.25rem; font-weight: 800; }
.account-hero-name .wave { display: inline-block; animation: account-wave 1.8s ease-in-out infinite; transform-origin: 70% 70%; }
@media (prefers-reduced-motion: reduce) { .account-hero-name .wave { animation: none; } }
@keyframes account-wave { 0%, 60%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(10deg); } }
.account-hero-meta { opacity: .88; font-size: .84rem; margin-top: .15rem; }
.account-hero-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-stat {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; padding: .5rem .9rem; text-align: center; min-width: 84px;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: background .15s ease;
}
a.account-stat:hover { background: rgba(255, 255, 255, .24); color: inherit; }
.account-stat-value { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.account-stat-label { font-size: .68rem; opacity: .85; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 575px) { .account-hero-inner { padding: 1.1rem 1.1rem; } .account-stat { min-width: 72px; padding: .45rem .6rem; } }

.account-due-banner {
  display: flex; align-items: flex-start; gap: .7rem; background: #fff6e9; border: 1px solid #ffdca3;
  color: #7a4a00; border-radius: var(--radius); padding: .85rem 1rem; font-size: .88rem;
}
html[data-theme="dark"] .account-due-banner { background: #362408; border-color: #5a3f0f; color: #ffcf7a; }
.account-due-banner i { font-size: 1.1rem; margin-top: .1rem; }

.account-nav .list-group-item { border-color: var(--line); background: var(--card-bg); color: var(--ink); }
.account-nav .list-group-item i { width: 20px; margin-right: .6rem; text-align: center; }
.account-nav .list-group-item.active { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--line); font-weight: 600; }
.account-nav .list-group-item:hover:not(.active) { background: var(--surface); }

/* order tracking timeline */
.timeline { list-style: none; padding-left: 0; }
.timeline li { position: relative; padding: 0 0 1.2rem 1.9rem; border-left: 2px solid var(--line); margin-left: .55rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: ''; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--brand); border: 3px solid var(--brand-tint);
}

/* sticky mobile add-to-cart bar */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 64px; z-index: 1035;
  background: var(--card-bg); border-top: 1px solid var(--line); padding: .5rem .9rem;
  display: flex; gap: .6rem; align-items: center;
  box-shadow: 0 -4px 16px rgba(16,42,67,.08);
}
@media (min-width: 992px) { .sticky-buy { display: none; } }

/* content blocks */
.content-block img { border-radius: var(--radius); }

@media (max-width: 575px) {
  .hero-slide img { height: 190px; }
  .hero-caption { padding: 1.1rem; }
  .hero-caption h2 { font-size: 1.2rem; }
  .brand-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* Content & Product Description Tables & Blocks */
.cms-content .text-primary,
.cms-content .text-success,
.cms-content .text-info,
.content-block .text-primary,
.content-block .text-success,
.content-block .text-info,
.product-description .text-primary,
.product-description .text-success,
.product-description .text-info {
  color: var(--brand) !important;
}
.cms-content .bg-light,
.cms-content .bg-primary,
.cms-content .bg-success,
.cms-content .bg-info,
.content-block .bg-light,
.content-block .bg-primary,
.content-block .bg-success,
.content-block .bg-info,
.product-description .bg-light,
.product-description .bg-primary,
.product-description .bg-success,
.product-description .bg-info {
  background: var(--brand-tint) !important;
  color: var(--ink) !important;
}
.cms-content .border-primary,
.cms-content .border-success,
.cms-content .border-info,
.content-block .border-primary,
.content-block .border-success,
.content-block .border-info,
.product-description .border-primary,
.product-description .border-success,
.product-description .border-info {
  border-color: var(--brand) !important;
}
.cms-content .table-light,
.cms-content .table-light > * > *,
.content-block .table-light,
.content-block .table-light > * > *,
.product-description .table-light,
.product-description .table-light > * > * {
  --bs-table-bg: var(--brand-tint);
  background: var(--brand-tint) !important;
  color: var(--ink) !important;
}
.product-description table,
.cms-content table,
.content-block table,
.note-editable table,
.content-area table {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  border-radius: 8px;
  overflow: hidden;
}
.product-description table th,
.product-description table td,
.cms-content table th,
.cms-content table td,
.content-block table th,
.content-block table td,
.note-editable table th,
.note-editable table td,
.content-area table th,
.content-area table td {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line, #e2e8f0);
  text-align: left;
  vertical-align: middle;
}
.product-description table th,
.cms-content table th,
.content-block table th,
.note-editable table th,
.content-area table th {
  background-color: var(--surface, #f8fafc);
  font-weight: 700;
  color: var(--ink, #1e293b);
  border-bottom: 2px solid var(--line, #cbd5e1);
}
.product-description table tbody tr:nth-child(even),
.cms-content table tbody tr:nth-child(even),
.content-block table tbody tr:nth-child(even),
.note-editable table tbody tr:nth-child(even),
.content-area table tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--brand) 5%, transparent);
}
.product-description h3,
.cms-content h3,
.content-block h3,
.note-editable h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
  color: var(--ink, #1e293b);
  border-bottom: 2px solid var(--brand, #0d7a5f);
  padding-bottom: 0.25rem;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Mobile & Desktop Search Bar Responsive Layout Rules */
@media (max-width: 767.98px) {
  header .search-form:not(.sc-search-panel .search-form):not(.eg-search-panel .search-form) {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-top: .4rem;
    order: 10 !important;
  }
}
@media (min-width: 768px) {
  header .search-form:not(.sc-search-panel .search-form):not(.eg-search-panel .search-form) {
    width: auto !important;
    flex-basis: auto !important;
    max-width: 640px;
    margin-top: 0 !important;
    order: 2 !important;
  }
}

.search-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060;
  background: var(--card-bg, #ffffff); border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  max-height: 340px; overflow-y: auto;
}
.search-suggest .sg-head {
  padding: .5rem .85rem .25rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3, #64748b);
}
.search-suggest .sg-item {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .85rem;
  text-decoration: none; color: var(--ink, #0f172a); font-size: .86rem;
  transition: background .12s ease;
}
.search-suggest .sg-item:hover, .search-suggest .sg-item.active { background: var(--surface, #f8fafc); }
.search-suggest .sg-item img {
  width: 38px; height: 38px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--line-soft, #f1f5f9);
}
.search-suggest .sg-name { font-weight: 600; line-height: 1.25; }
.search-suggest .sg-name mark { background: rgba(13, 138, 106, 0.18); color: var(--brand, #0d7a5f); padding: 0 2px; border-radius: 2px; }
.search-suggest .sg-price { font-size: .78rem; font-weight: 700; color: var(--brand, #0d7a5f); margin-top: .1rem; font-variant-numeric: tabular-nums; }

/* Category rails are all one shared component now (.nav-rail in the
   NAVIGATION section above) — momentum scrolling, hidden scrollbars and
   nowrap live there, so nothing per-theme is needed here. */


/* "From ৳1,200" on cards for variant products priced per combination */
.price-from {
  font-size: .72em; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem;
}

/* ===========================================================================
   DESIGN SYSTEM REFRESH
   ---------------------------------------------------------------------------
   Everything below is the shared layer every theme is built on, so a change
   here lifts all 13 layouts at once while each keeps its own structure and
   accents (layout CSS loads after this file and still wins where it is more
   specific). Deliberately token-driven: no fixed colours, so it holds up in
   both modes and under every palette.
   =========================================================================== */

:root {
  /* elevation ladder — one rung per level of "lift off the page" */
  --elev-1: 0 1px 2px rgba(16, 24, 40, .05);
  --elev-2: 0 4px 14px rgba(16, 24, 40, .07);
  --elev-3: 0 12px 30px rgba(16, 24, 40, .12);
  /* section rhythm, fluid between phone and desktop */
  --section-gap: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --radius-sm: 10px;
  --radius-lg: 20px;
}
html[data-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, .4);
  --elev-2: 0 4px 14px rgba(0, 0, 0, .45);
  --elev-3: 0 14px 34px rgba(0, 0, 0, .6);
}

/* ---- rhythm: give sections room to breathe on bigger screens ---- */
main > .container > section,
main > .container > .mb-5 { margin-bottom: var(--section-gap) !important; }

/* ---- section headings ---- */
.section-title {
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  padding-left: 0;
  border-left: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* the accent moves from a hard 4px rule to a small brand tick — same cue,
   far less visual noise beside a large heading */
.section-title::before {
  content: '';
  width: 6px; height: 1.05em; flex: 0 0 auto;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
}
.section-title.border-0::before { display: none; }
/* "View all →" beside a heading */
.section-more {
  font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.section-more i { transition: transform .16s ease; }
.section-more:hover i { transform: translateX(3px); }

/* ---- product card ---- */
.product-card {
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}
.product-card .thumb { overflow: hidden; }
.product-card .thumb img {
  aspect-ratio: 1 / 1;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.product-card:hover .thumb img { transform: scale(1.045); }
.product-card .name {
  font-size: .95rem; font-weight: 600; letter-spacing: -0.005em;
}
.price-now { font-size: 1.08rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price-was { font-variant-numeric: tabular-nums; }

/* badges: quiet pills instead of a rotated ribbon — they sat at an angle
   over the product itself, which read as a sticker slapped on the photo */
.discount-badge {
  top: 10px; left: 10px;
  transform: none;
  border-radius: 999px;
  padding: .24rem .6rem;
  font-size: .7rem; font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--elev-2);
  animation: none;
}
.product-card:hover .discount-badge { transform: none; }
.stockout-badge {
  border-radius: 999px; padding: .24rem .6rem;
  background: rgba(12, 18, 28, .72); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* the buy button is present on every card, so it should not shout on every
   card — brand-tinted at rest, solid on hover/focus */
.product-card .btn-add.btn-primary,
.product-card .btn-add.btn-outline-primary {
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: var(--brand-tint);
  border-color: transparent;
  color: var(--brand);
  background-image: none;
  box-shadow: none;
}
.product-card .btn-add.btn-primary:hover,
.product-card .btn-add.btn-outline-primary:hover,
.product-card .btn-add.btn-primary:focus-visible {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
html[data-theme="dark"] .product-card .btn-add.btn-primary,
html[data-theme="dark"] .product-card .btn-add.btn-outline-primary {
  background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand);
}

/* ---- category cards ---- */
.cat-card {
  border-radius: var(--radius);
  padding: 1.25rem .75rem;
  background: var(--card-bg);
  box-shadow: var(--elev-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem;
  line-height: 1.3;
}
.cat-card i {
  margin: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  background: var(--brand-tint); color: var(--brand);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.cat-card:hover { box-shadow: var(--elev-2); transform: translateY(-3px); }
.cat-card:hover i { background: var(--brand); color: var(--brand-ink); transform: scale(1.06); }
.cat-card .cat-img { width: 64px; height: 64px; margin: 0 auto; border-radius: 14px; }

/* ---- newsletter band ---- */
.newsletter-band {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent)));
  color: var(--brand-ink);
}
.newsletter-band .form-control { border: 0; border-radius: var(--radius-sm); min-height: 46px; }
.newsletter-band .btn { border-radius: var(--radius-sm); min-height: 46px; font-weight: 600; }

/* ---- forms: comfortable targets, clear focus ---- */
.form-control, .form-select { border-radius: var(--radius-sm); }
.form-control:not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: 44px; }
:focus-visible { outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---- buttons ---- */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn-lg { border-radius: 12px; }
.btn-primary { box-shadow: var(--elev-1); }
.btn-primary:hover { box-shadow: var(--elev-2); }

/* ---- cards / panels ---- */
.card { border-radius: var(--radius); box-shadow: var(--elev-1); }
.summary-card { border-radius: var(--radius); box-shadow: var(--elev-1); }

/* ---- phones: bigger targets, no content under the home indicator ---- */
@media (max-width: 575.98px) {
  .product-card .name { font-size: .9rem; min-height: 2.5em; }
  .product-card .btn-add { min-height: 40px; }
  .cat-card { padding: 1rem .5rem; gap: .45rem; }
  .cat-card i { width: 46px; height: 46px; font-size: 1.25rem; }
  .section-title::before { height: 1em; width: 5px; }
}
body.has-bottom-nav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

/* A banner with no artwork (or one whose file went missing) is a caption on
   the theme's brand gradient — the slide keeps its height instead of
   collapsing behind the absolutely-positioned caption. */
.hero-slide-plain { min-height: 300px; }
.hero-slide-plain .hero-caption { background: linear-gradient(120deg, rgba(0,0,0,.45), rgba(0,0,0,.12)); }
@media (max-width: 575.98px) { .hero-slide-plain { min-height: 220px; } }