/* =========================================================
   Nitto Bazar — main stylesheet
   1.  Tokens & reset
   2.  Buttons, forms, helpers
   3.  Top bar / header / navigation
   4.  Mobile drawer + cart drawer
   5.  Hero, features, categories
   6.  Product card + rails
   7.  Combos, brands, testimonials, newsletter
   8.  Footer + mobile bottom bar
   9.  Inner pages (shop, product, cart, checkout, static)
   10. Toast, loaders, misc
   11. Responsive
   ========================================================= */

/* ---------- 1. Tokens & reset ---------- */
:root {
  --primary: #f48721;
  --primary-dark: #dc7415;
  --primary-soft: #fef3e8;
  --secondary: #041f1e;
  --secondary-light: #0b3230;
  --title: #16221f;
  --body: #5d6b68;
  --muted: #8a9794;
  --border: #e6eae9;
  --border-strong: #d3dad8;
  --border-dark: #aab5b2;   /* checkbox / radio outlines — needs real contrast */
  --bg: #ffffff;
  --bg-soft: #f6f8f7;
  --bg-mint: #f1f7f4;
  --success: #1f9d55;
  --danger: #e02424;
  --star: #ffb020;

  /* Sharp, low-radius corners across every card, button and input */
  /* Space between product cards. The dashboard's Appearance screen sets
     this; 18px is the theme's own spacing when nothing has been chosen. */
  --grid-gap: 18px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(4, 31, 30, .06);
  --shadow: 0 6px 20px rgba(4, 31, 30, .07);
  --shadow-lg: 0 18px 44px rgba(4, 31, 30, .13);

  --font: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-bn: "Hind Siliguri", "Inter", sans-serif;

  --header-h: 68px;
  --container: 1680px;   /* Full HD: fills a 1920px screen with a clean margin */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #fff; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

/* ---------- first paint ----------
   The page is drawn by JavaScript once the shop has loaded, so between the
   HTML arriving and that happening there is a shell: headings with nothing
   under them and no header above them. It used to be on screen for about a
   second and a half on a cold load, which read as a broken page rather than
   a loading one.

   So the shell is covered until it has something in it. `nb-loading` is set
   on <html> in the markup — not from a script — so it is in force before the
   first pixel, and app.js removes it when the page is ready. */
html.nb-loading body { opacity: 0; }
body {
  opacity: 1;
  transition: opacity .22s ease;
}
/* The cover, and the shop's mark drawn on it.
   Two pseudo-elements and no image: the loader must not itself be something
   that has to load. The ring is the brand colour turning against a faint
   track, with the initial sitting still in the middle of it. */
/* The cover, carrying the shop's mark in the middle of it.
   Both layers hang off <html>, not <body> — the body is what is being faded
   in, so anything drawn on it would be invisible exactly when it is needed. */
html.nb-loading::before {
  content: "নি";
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: var(--font-bn);
  font-size: 23px;
  font-weight: 700;
  color: var(--primary-dark);
  z-index: 9998;
}
/* One bright quarter turning against a faint track, around the mark. No
   image and no library: a loading indicator that has to load is a
   contradiction. */
html.nb-loading::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg 100deg, rgba(0, 0, 0, .06) 100deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 33px, #000 34px);
  mask: radial-gradient(circle at 50% 50%, transparent 0 33px, #000 34px);
  animation: nb-spin .85s linear infinite;
  z-index: 9999;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }
/* If the script never runs at all, the page must not stay blank for ever. */
html.nb-loading body { animation: nb-reveal 0s linear 8s forwards; }
@keyframes nb-reveal { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  html.nb-loading::after { animation: none; background-position: 30% 0; }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--title);
  font-weight: 700;
  line-height: 1.3;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); }

img { max-width: 100%; height: auto; display: block; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
svg { flex-shrink: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 900px; }

.section { padding: 54px 0; }
.section-sm { padding: 34px 0; }
.section-soft { background: var(--bg-soft); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-head .title { margin: 0; font-size: 24px; letter-spacing: -.2px; }
.section-head .subtitle { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.section-head .sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.section-head .sec-btn:hover { gap: 10px; }

.section-title-center { text-align: center; margin-bottom: 30px; }
.section-title-center .title { font-size: 26px; }
.section-title-center p { color: var(--muted); max-width: 620px; margin: 6px auto 0; }

/* ---------- 2. Buttons, forms, helpers ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-dark { background: var(--secondary); color: #fff; }
.btn-dark:hover { background: var(--secondary-light); color: #fff; }
.btn-outline { background: #fff; color: var(--title); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
/* Add to Cart: outlined at rest, fills with the brand colour on hover */
.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 400;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.form-control {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--title);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(244, 135, 33, .14);
}
textarea.form-control { min-height: 110px; resize: vertical; }
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--title);
}
.form-label .req { color: var(--danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; display: none; }
.form-control.is-invalid { border-color: var(--danger); }
.form-control.is-invalid + .field-error { display: block; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
.badge-primary { background: var(--primary); color: #fff; }
.badge-dark { background: var(--secondary); color: #fff; }
.badge-success { background: var(--success); color: #fff; }
.badge-soft { background: var(--primary-soft); color: var(--primary-dark); }

.text-muted { color: var(--muted); }
.mt-3 { margin-top: 18px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stars { display: inline-flex; gap: 1px; color: var(--star); }
.stars svg { width: 13px; height: 13px; }
.stars .off { color: #dfe4e3; }

/* ---------- 3. Top bar / header ---------- */
.topbar {
  background: var(--secondary);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: var(--primary); }
.topbar-left { display: flex; align-items: center; gap: 8px; }
.topbar-left svg { width: 15px; height: 15px; color: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right span.dot { opacity: .3; }

.site-header { position: relative; z-index: 60; background: #fff; }

.header-middle { border-bottom: 1px solid var(--border); }
.header-middle .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  min-height: 84px;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: -8px;
  border: 0;
  background: transparent;
  color: var(--title);
  border-radius: var(--radius-sm);
}
.menu-toggle:hover { background: var(--bg-soft); }
.menu-toggle svg { width: 22px; height: 22px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #ffb163);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 19px;
  box-shadow: 0 4px 12px rgba(244, 135, 33, .32);
}
.logo-text { line-height: 1.05; }
.logo-text b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--secondary);
  letter-spacing: -.4px;
}
.logo-text small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* search */
.header-search { position: relative; flex: 1 1 240px; min-width: 0; max-width: 620px; }
.search-box { display: flex; align-items: center; min-width: 0; }
.search-box .form-control {
  min-width: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: 0;
  padding-left: 16px;
  height: 46px;
  background: var(--bg-soft);
}
.search-box .btn-search {
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.search-box .btn-search:hover { background: var(--primary-dark); }
.search-box .btn-search svg { width: 18px; height: 18px; }

.live-search {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: 80;
}
.live-search:empty { display: none; }
.live-search a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg-soft);
}
.live-search a:last-child { border-bottom: 0; }
.live-search a:hover { background: var(--bg-soft); }
.live-search img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }
.live-search .ls-name { font-size: 13.5px; font-weight: 600; color: var(--title); }
.live-search .ls-price { font-size: 13px; font-weight: 700; color: var(--primary); }
.live-search .ls-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* header actions */
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.header-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--title);
  font-size: 11.5px;
  font-weight: 600;
}
.header-action:hover { background: var(--bg-soft); color: var(--primary); }
.header-action svg { width: 21px; height: 21px; }
.header-action .count {
  position: absolute;
  top: 2px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* main nav */
.header-bottom {
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
.header-bottom.is-stuck {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  box-shadow: 0 4px 18px rgba(4, 31, 30, .08);
}
.header-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 52px;
}
.main-nav { min-width: 0; }
.main-nav > ul {
  display: flex;
  align-items: center;
  /* Wraps rather than scrolls.
     `overflow-x: auto` was here so a long menu could scroll sideways, but
     overflow on one axis forces a scroll container on both — and that
     container clipped the category panel dead on its bottom edge. The panel
     opened correctly and was then cut off, so hovering appeared to do
     nothing. A menu with more items than fit now takes a second line, which
     nothing has to clip. */
  flex-wrap: wrap;
  gap: 2px;
}
.main-nav > ul > li { position: relative; flex-shrink: 0; }
.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--title);
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a { color: var(--primary); }
.main-nav .caret { width: 12px; height: 12px; opacity: .55; }
.main-nav .hot { color: var(--danger) !important; }

.main-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s ease;
  z-index: 90;
}
.main-nav li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--body);
}
.main-nav .dropdown a:hover { background: var(--bg-soft); color: var(--primary); }

/* ---- category panel ----
   A contained two-pane dropdown, not a band across the window. The
   categories stack down the left; the right shows the first product in
   whichever one the pointer is on, so a shopper sees the goods rather than
   an icon. Anchored to its own menu item, and flipped back on screen by
   .flip when it would hang off the right edge. */
.main-nav > ul > li.has-mega { position: relative; }
.main-nav .mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 232px 224px;
  width: 456px;
  /* the preview needs room even when a menu holds only two categories */
  min-height: 216px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-nav .mega.flip { left: auto; right: 0; }
.main-nav > ul > li.has-mega:hover > .mega,
.main-nav > ul > li.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* left: the categories, one under another */
.main-nav .mega-list { display: flex; flex-direction: column; gap: 2px; }
.main-nav .mega-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--body);
  transition: background .18s ease, color .18s ease;
}
.main-nav .mega-link svg { width: 13px; height: 13px; opacity: 0; transition: opacity .18s ease; }
.main-nav .mega-link.active,
.main-nav .mega-link:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.main-nav .mega-link.active svg,
.main-nav .mega-link:hover svg { opacity: 1; }
.main-nav .mega-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-nav .mega-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.main-nav .mega-link.active .mega-count,
.main-nav .mega-link:hover .mega-count { background: #fff; color: var(--primary-dark); }

/* right: a picture of what is in the category the pointer is on */
/* White, with a hairline instead of a fill.
   It was a grey card sitting inside a white panel, and at the bottom corner
   the grey square met the panel's rounded corner in a way that read as the
   card spilling out of it. White on white with one thin border keeps the
   card without the collision. */
.main-nav .mega-preview {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.main-nav .mega-shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.main-nav .mega-shot.active { opacity: 1; visibility: visible; }
.main-nav .mega-shot-img {
  display: grid;
  place-items: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  color: var(--border-strong);
}
.main-nav .mega-shot-img img {
  max-width: 100%;
  max-height: 118px;
  object-fit: contain;
  transition: transform .25s ease;
}
.main-nav .mega-shot:hover .mega-shot-img img { transform: scale(1.05); }
.main-nav .mega-shot b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--title);
}
.main-nav .mega-shot:hover b { color: var(--primary); }
.main-nav .mega-shot span { font-size: 11.5px; color: var(--muted); }

.main-nav .has-mega > a svg { transition: transform .2s ease; }
.main-nav .has-mega:hover > a svg { transform: rotate(180deg); }

.header-hotline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  color: var(--body);
}
.header-hotline svg { width: 30px; height: 30px; color: var(--primary); }
.header-hotline b { display: block; color: var(--title); font-size: 14.5px; }

/* ---------- 4. Drawers ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 31, 30, .5);
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  z-index: 95;
}
.overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  height: 100%;
  width: 340px;
  max-width: 88vw;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.drawer-left { left: 0; transform: translateX(-102%); }
.drawer-right { right: 0; transform: translateX(102%); width: 400px; }
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-head h4 { margin: 0; font-size: 16px; }
.drawer-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--bg-soft);
  color: var(--title);
}
.drawer-close:hover { background: var(--primary); color: #fff; }
.drawer-close svg { width: 16px; height: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 0; }
.drawer-foot { border-top: 1px solid var(--border); padding: 16px 18px; flex-shrink: 0; }

/* mobile menu — flat category list, regular weight, chevron where there is more */
.mobile-nav > li + li { border-top: 1px solid var(--border); }
.mobile-nav > li > a,
.mobile-nav > li > .m-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--title);
  text-align: left;
}
.mobile-nav > li > a:hover,
.mobile-nav > li > .m-toggle:hover { color: var(--primary); }
.mobile-nav .m-caret {
  display: inline-flex;
  color: var(--muted);
  transition: transform .2s ease;
}
.mobile-nav .m-caret svg { width: 14px; height: 14px; }
.mobile-nav li.open > .m-toggle { color: var(--primary); }
.mobile-nav li.open .m-caret { transform: rotate(90deg); color: var(--primary); }
.mobile-nav .sub { display: none; padding: 4px 0 8px; background: var(--bg-soft); }
.mobile-nav li.open .sub { display: block; }
.mobile-nav .sub a {
  display: block;
  padding: 9px 18px 9px 34px;
  font-size: 14px;
  font-weight: 400;
  color: var(--body);
}
.mobile-nav .sub a:hover { color: var(--primary); }

/* cart drawer */
.cart-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bg-soft);
}
.cart-item img {
  width: 68px; height: 68px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item-price { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-remove { border: 0; background: transparent; color: var(--muted); padding: 4px; }
.cart-remove:hover { color: var(--danger); }
.cart-remove svg { width: 15px; height: 15px; }

.cart-empty { text-align: center; padding: 60px 24px; }
.cart-empty svg { width: 68px; height: 68px; color: var(--border-strong); margin: 0 auto 14px; }
.cart-empty p { color: var(--muted); }

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}
.cart-total-row.grand {
  font-size: 17px;
  font-weight: 800;
  color: var(--title);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed var(--border-strong);
}
.cart-total-row.grand span:last-child { color: var(--primary); }
.drawer-foot .btn + .btn { margin-top: 8px; }

/* qty stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 34px;
  background: #fff;
}
.qty button {
  width: 32px; height: 100%;
  border: 0;
  background: transparent;
  color: var(--title);
  display: grid; place-items: center;
  font-size: 16px;
  line-height: 1;
}
.qty button:hover { background: var(--primary); color: #fff; }
.qty span {
  min-width: 30px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--title);
}
.qty svg { width: 12px; height: 12px; }

/* ---------- 5. Hero, features, categories ---------- */
/* Two-panel banner system: a wide 2.5:1 slider on the left and a single
   1.22:1 banner on the right. The fr ratios match the artwork ratios, so
   both panels end up exactly the same height with no cropping. */
.hero { padding: 22px 0 8px; }
.hero-grid {
  display: grid;
  grid-template-columns: 2.5fr 1.22fr;
  gap: 20px;
  align-items: stretch;
}

.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 2.5 / 1;
  background: var(--bg-soft);
}
.hero-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.hero-slide {
  min-width: 100%;
  height: 100%;
  display: block;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--title);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  z-index: 5;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.hero-slider:hover .hero-nav { opacity: 1; }
.hero-nav:hover { background: var(--primary); color: #fff; }
.hero-nav.prev { left: 14px; }
.hero-nav.next { right: 14px; }
.hero-nav svg { width: 17px; height: 17px; }

.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 46px;
  display: flex;
  gap: 7px;
  z-index: 5;
}
.hero-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: all .25s ease;
}
.hero-dots button.active { width: 24px; background: #fff; }

.hero-side { display: block; }
.side-banner {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
}
.side-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* feature strip */
.features { padding: 26px 0; border-bottom: 1px solid var(--border); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.feature-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--primary);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.feature-icon svg { width: 21px; height: 21px; }
.feature b { display: block; font-size: 14px; color: var(--title); }
.feature span { font-size: 12.5px; color: var(--muted); }

/* categories */
.rail.cat-rail {
  display: grid;
  grid-auto-flow: column;
  /* A normal finite rail: eight complete cards on desktop. */
  grid-auto-columns: calc((100% - 112px) / 8);
  gap: 16px;
  overflow-x: auto;
  /* The carousel rests half-way through the edge cards; start-aligned native
     snapping would pull that deliberate peek back to a full card. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.cat-card {
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  transition: all .25s ease;
}
.cat-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.cat-card .cat-img {
  min-height: 0;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.cat-card img { width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: transform .3s ease; }
.cat-card:hover img { transform: scale(1.07); }
.cat-card b { display: block; font-size: 13.5px; color: var(--title); }
.cat-card span { font-size: 12px; color: var(--muted); }

.category-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.category-all-grid .cat-card { width: 100%; }

/* ---------- 6. Product card + rails ---------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: all .25s ease;
}
.product-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.product-media {
  position: relative;
  display: block;
  padding: 14px;
  background: #fff;
}
.product-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform .35s ease;
}
.product-card:hover .product-media img { transform: scale(1.05); }
.product-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
}
.product-wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateX(6px);
  transition: all .22s ease;
  z-index: 2;
}
.product-card:hover .product-wish { opacity: 1; transform: translateX(0); }
.product-wish:hover, .product-wish.active { background: var(--primary); color: #fff; }
.product-wish svg { width: 15px; height: 15px; }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 14px 14px;
}
.product-cat { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.product-name {
  margin: 3px 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 39px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-name a { color: var(--title); }
.product-name a:hover { color: var(--primary); }
.product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
/* scoped to the count only — a bare `span` here would also repaint the stars */
.product-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.product-price ins { text-decoration: none; font-size: 17px; font-weight: 800; color: var(--title); }
.product-price del { font-size: 13px; color: var(--muted); }
.product-foot { margin-top: auto; }
.product-foot .btn { width: 100%; }
.product-foot .qty { width: 100%; justify-content: space-between; height: 38px; }

/* rails */
.rail-wrap { position: relative; }
.rail {
  /* How many cards fill the rail. Everything else about its width follows
     from this, so the breakpoints below only ever change the number.

     Fractions are deliberate on small screens: 2.2 means two cards and a
     slice of a third, which is how a phone shows there is more to the right
     without an arrow to press. */
  --rail-cols: 4;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--grid-gap)) / var(--rail-cols));
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.rail-btn {
  position: absolute;
  top: 40%;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--title);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  z-index: 4;
  transition: all .2s ease;
}
.rail-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.rail-btn.prev { left: -18px; }
.rail-btn.next { right: -18px; }
.rail-btn svg { width: 16px; height: 16px; }
.rail-btn[hidden] { display: none; }

/* Fixed column counts keep every grid ending on a full row */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ---------- 7. Combos, brands, testimonials ---------- */
.combo-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: all .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.combo-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--primary); }
.combo-top { position: relative; display: block; background: var(--bg-mint); padding: 18px; }
.combo-top img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.combo-save {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
}
.combo-label {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--secondary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
}
.combo-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.combo-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--title);
  line-height: 1.4;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.combo-price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.combo-price b { font-size: 18px; color: var(--primary); }
.combo-price del { font-size: 13px; color: var(--muted); }

/* ---- promo grid ----
   Pictures on a grid, each claiming as many squares as the shop gave it in
   the dashboard. The span and the corner radius come through as inline
   styles, because they are per-cell decisions the stylesheet cannot know. */
.promo-grid {
  display: grid;
  gap: 12px;
}
.promo-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
  min-height: 0;
}
.promo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
a.promo-cell:hover img { transform: scale(1.04); }
.promo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 16px 14px;
  background: linear-gradient(transparent, rgba(4, 31, 30, .72));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .promo-grid { gap: 8px; }
  .promo-caption { padding: 16px 10px 10px; font-size: 12.5px; }
}

.brand-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.brand-rail::-webkit-scrollbar { display: none; }
.brand-item {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: all .25s ease;
}
.brand-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.brand-item img { max-height: 62px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: all .25s ease; }
.brand-item:hover img { filter: none; opacity: 1; }

.testi-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.testi-rail::-webkit-scrollbar { display: none; }
.testi-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.testi-card .quote { width: 26px; height: 26px; color: var(--primary); opacity: .3; margin-bottom: 8px; }
.testi-text { font-size: 14px; color: var(--body); flex: 1; margin-bottom: 16px; }
.testi-user { display: flex; align-items: center; gap: 11px; }
.testi-user img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi-user b { display: block; font-size: 14px; color: var(--title); }
.testi-user span { font-size: 12.5px; color: var(--muted); }

/* newsletter */
.newsletter {
  background: linear-gradient(120deg, var(--secondary), var(--secondary-light));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 28px;
}
.newsletter h3 { color: #fff; font-size: 25px; margin-bottom: 6px; }
.newsletter p { color: rgba(255, 255, 255, .74); margin: 0; }
.newsletter form { display: flex; gap: 10px; }
.newsletter .form-control { height: 48px; border: 0; }
.newsletter .btn { height: 48px; }

/* ---------- 8. Footer + mobile bar ---------- */
.site-footer { background: var(--secondary); color: rgba(255, 255, 255, .68); margin-top: 54px; }
.footer-top { padding: 52px 0 34px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 30px;
}
.footer-about p { font-size: 13.5px; margin-bottom: 16px; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  margin-bottom: 9px;
}
.footer-contact svg { width: 16px; height: 16px; color: var(--primary); margin-top: 3px; }
.footer-contact a:hover { color: var(--primary); }

.footer-widget h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-widget li { margin-bottom: 9px; }
.footer-widget a { font-size: 13.5px; color: rgba(255, 255, 255, .68); }
.footer-widget a:hover { color: var(--primary); padding-left: 3px; }

.socials { display: flex; gap: 9px; margin-top: 16px; }
.socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  display: grid; place-items: center;
  color: #fff;
  transition: all .2s ease;
}
.socials a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 18px 0;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.pay-methods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-methods span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .09);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}

.mobile-bar {
  display: none;
  position: fixed;
  /* Extend through the phone's bottom safe area and one physical pixel past
     the viewport so no white compositing seam can appear below the orange. */
  bottom: -1px; left: 0; right: 0;
  background: var(--primary);
  background-clip: border-box;
  box-shadow: 0 -3px 14px rgba(4, 31, 30, .16);
  z-index: 65;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1px);

  /* Slides out of the way while the shopper reads down a page, and back the
     moment they turn round. The transform is on the bar rather than on its
     position so the browser can move it without laying the page out again. */
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Tucked below the fold. translateY(100%) rather than display:none so it
   slides rather than blinks, and the safe-area padding goes with it. */
.mobile-bar.is-tucked { transform: translateY(100%); }

/* The floating WhatsApp button rides down with it — left where it was, it
   would hang over an empty strip with nothing beneath it. */

@media (prefers-reduced-motion: reduce) {
  /* Movement that is not asked for is movement somebody may not want. The
     bar still hides and shows; it simply does it without the slide. */
  .mobile-bar, .msg-float { transition: none; }
}
/* Five across. Each is about 78px on a 390px phone, which still holds
   "Account" at 11px without truncating. */
.mobile-bar ul { display: grid; grid-template-columns: repeat(5, 1fr); }
.mobile-bar a, .mobile-bar button {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  /* The label's line box is the label. Left at the inherited line height it
     carries invisible leading underneath, so equal padding measured equal and
     still looked bottom-heavy — the gap the eye sees is the glyph to the edge,
     not the box to the edge. */
  line-height: 1;
  color: #fff;
}
/* the bar itself is orange, so the active item reads as fully opaque white */
.mobile-bar a, .mobile-bar button { color: rgba(255, 255, 255, .82); }
.mobile-bar a.active, .mobile-bar a:hover, .mobile-bar button:hover { color: #fff; }
.mobile-bar svg { width: 20px; height: 20px; }
.mobile-bar .count {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  /* inverted: an orange badge would vanish on the orange bar */
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 9.5px;
  line-height: 16px;
  text-align: center;
}

/* floating whatsapp */

/* ---------- 9. Inner pages ---------- */
.page-head {
  background: var(--bg-mint);
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: 27px; margin-bottom: 4px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--body); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb svg { width: 11px; height: 11px; opacity: .55; }

/* shop layout */
.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.shop-side {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: 88px;
}
/* only used when the sidebar becomes an off-canvas panel on small screens */
.shop-side .side-close { display: none; }
.filter-block + .filter-block { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.filter-block h5 { font-size: 14px; margin-bottom: 12px; }
.filter-list li { margin-bottom: 3px; }
.filter-list a, .filter-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--body);
  text-align: left;
}
.filter-list a:hover, .filter-list button:hover { background: var(--bg-soft); color: var(--primary); }
.filter-list .active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.filter-list .n { font-size: 11.5px; color: var(--muted); }
.category-check {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
}
.category-check:hover { background: var(--bg-soft); }
.category-check input { position: absolute; opacity: 0; pointer-events: none; }
.check-mark {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-dark);
  border-radius: 3px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.category-check:hover .check-mark { border-color: var(--primary); }
.category-check input:checked + .check-mark { background: var(--primary); border-color: var(--primary); }
.category-check input:checked + .check-mark::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.category-check input:focus-visible + .check-mark { outline: 2px solid var(--primary); outline-offset: 2px; }
.category-check .check-name { flex: 1; color: var(--body); }

.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs .form-control { padding: 8px 10px; font-size: 13px; }

/* Full-width white toolbar above the listing */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.shop-toolbar .count { font-size: 13.5px; color: var(--muted); }
.tb-per { margin-left: auto; }
.tb-sort { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tb-sort > span { color: var(--title); font-weight: 500; white-space: nowrap; }

.shop-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 34px 9px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--title);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 13px;
  cursor: pointer;
}
.shop-toolbar select:focus { outline: none; border-color: var(--primary); }

/* right-hand selector, tinted with the brand colour */
.shop-toolbar select.select-accent {
  color: var(--primary);
  border-color: var(--border-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f48721' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.shop-toolbar select.select-accent:hover { border-color: var(--primary); }

.filter-toggle { display: none; }

/* Plain breadcrumb strip that replaces the old page-head banner */
.crumb-bar { padding: 18px 0 4px; }
.crumb-bar .breadcrumb { font-size: 14px; }
.breadcrumb .current { color: var(--primary); font-weight: 500; }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state svg { width: 60px; height: 60px; color: var(--border-strong); margin: 0 auto 14px; }

/* product detail */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.pd-gallery {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  background: #fff;
  position: relative;
}
/* Locked 1:1 canvas — every product photo gets the same square frame and is
   fitted inside it, so no image is ever stretched or cropped. */
.pd-stage { overflow: hidden; }
.pd-track { display: flex; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.pd-frame {
  min-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.pd-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pd-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--title);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
  z-index: 3;
}
.pd-gallery:hover .pd-nav { opacity: 1; }
.pd-nav:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.pd-nav.prev { left: 14px; }
.pd-nav.next { right: 14px; }

.pd-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pd-thumbs button {
  width: 72px; height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 6px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.pd-thumbs button.active, .pd-thumbs button:hover { border-color: var(--primary); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pd-title { font-size: 27px; margin-bottom: 8px; }
.pd-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.pd-price { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pd-price ins { text-decoration: none; font-size: 30px; font-weight: 800; color: var(--primary); }
.pd-price del { font-size: 17px; color: var(--muted); }
.pd-desc { padding: 18px 0; }
.pd-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-actions .qty { height: 46px; }
.pd-actions .qty button { width: 42px; }
.pd-actions .btn { height: 46px; }
.pd-info-tabs { margin-top: 22px; }
.pd-info-tabs .tabs { margin-bottom: 16px; }
.pd-info-tabs .tabs button { padding-inline: 14px; }
.pd-info-tabs .prose > :first-child { margin-top: 0; }
.pd-info-tabs .prose > :last-child { margin-bottom: 0; }
/* Order by message or by phone, under the cart buttons. */
/* Ordering without a checkout: WhatsApp and the phone.

   A second row under Add to Cart and Buy Now, and it should read as one. Four
   filled buttons stacked together give the eye nowhere to land, so these two
   are outlined at rest and fill on hover — the same gesture Add to Cart makes,
   each in its own colour. */
.pd-contact {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pd-contact .btn {
  flex: 1 1 210px;
  background: transparent;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}

/* The icon follows the label, so the whole button changes together rather
   than leaving a coloured mark behind on the filled state. */
.pd-contact .btn svg { color: currentColor; }

/* A little lift on hover, and none of it on a press: a button that stays
   raised while being clicked feels unresponsive. */
.pd-contact .btn:hover { transform: translateY(-1px); }
.pd-contact .btn:active { transform: none; }

/* WhatsApp keeps WhatsApp's own green — people recognise it before they read
   the label. The resting text is a darker shade of it, because #25d366 on
   white is too pale to read comfortably. */
.btn-wa {
  color: #128c4a;
  border-color: #25d366;
}
.btn-wa:hover,
.btn-wa:focus-visible {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* Call takes the shop's own dark, so the pair is one brand colour and one
   borrowed one rather than two borrowed ones. */
.btn-call {
  color: var(--secondary);
  border-color: var(--border-strong);
}
.btn-call:hover,
.btn-call:focus-visible {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

@media (max-width: 420px) {
  /* Below this the two sit side by side at about a hundred pixels each, which
     is narrower than their own labels. One each per row instead. */
  .pd-contact .btn { flex: 1 1 100%; }
}

.pd-points { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--border-strong); display: grid; gap: 12px; }
.pd-point { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; }
.pd-point svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

.tabs { border-bottom: 1px solid var(--border); display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; }
.tabs button {
  border: 0;
  background: transparent;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 11px 14px; border: 1px solid var(--border); text-align: left; }
.spec-table th { background: var(--bg-soft); color: var(--title); width: 200px; font-weight: 700; }

/* cart page */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--title);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cart-table td { padding: 16px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-table .ct-prod { display: flex; align-items: center; gap: 14px; }
.cart-table .ct-prod img { width: 74px; height: 74px; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius-sm); }
.cart-table .ct-name { font-size: 14px; font-weight: 600; color: var(--title); }
.cart-table .ct-cat { font-size: 12px; color: var(--muted); }

.summary-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 88px;
  background: #fff;
}
.summary-box h4 { font-size: 17px; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.summary-row.total {
  font-size: 18px;
  font-weight: 800;
  color: var(--title);
  border-top: 1px dashed var(--border-strong);
  padding-top: 14px;
  margin-top: 14px;
}
.summary-row.total span:last-child { color: var(--primary); }
.free-ship-note {
  background: var(--bg-mint);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
  color: var(--secondary);
}
.progress { height: 5px; border-radius: 999px; background: #dfe9e4; margin-top: 8px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--success); border-radius: 999px; transition: width .4s ease; }

/* checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.checkout-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.checkout-box h4 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.checkout-box h4 i {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .2s ease;
}
.radio-card:hover { border-color: var(--primary); }
.radio-card input { margin-top: 3px; accent-color: var(--primary); }
.radio-card b { display: block; font-size: 14px; color: var(--title); }
.radio-card span { font-size: 12.5px; color: var(--muted); }
.radio-card.checked { border-color: var(--primary); background: var(--primary-soft); }

.mini-item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--bg-soft); }
.mini-item img { width: 52px; height: 52px; object-fit: contain; background: var(--bg-soft); border-radius: 6px; }
.mini-item .mi-name { font-size: 13px; font-weight: 600; color: var(--title); }
.mini-item .mi-qty { font-size: 12px; color: var(--muted); }
.mini-item .mi-price { font-size: 13.5px; font-weight: 700; color: var(--title); margin-left: auto; white-space: nowrap; }

.order-success { text-align: center; padding: 50px 20px; max-width: 560px; margin: 0 auto; }
.order-success .tick {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.order-success .tick svg { width: 40px; height: 40px; }
.order-id {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: 1px;
  margin: 6px 0 20px;
}

/* static pages */
.prose h2 { font-size: 22px; margin-top: 30px; }
.prose h3 { font-size: 18px; margin-top: 24px; }
.prose ul { list-style: disc; padding-left: 20px; margin-bottom: 1em; }
.prose li { margin-bottom: 6px; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.info-card .ic {
  width: 50px; height: 50px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
}
.info-card .ic svg { width: 24px; height: 24px; }
.info-card h4 { margin-bottom: 4px; }
.info-card p { font-size: 13.5px; margin: 0; }

.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.accordion-head {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--title);
  text-align: left;
}
.accordion-head svg { width: 14px; height: 14px; transition: transform .2s ease; color: var(--primary); }
.accordion-item.open .accordion-head svg { transform: rotate(180deg); }
.accordion-body { display: none; padding: 0 18px 16px; font-size: 14px; }
.accordion-item.open .accordion-body { display: block; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 22px; border-radius: var(--radius); background: var(--bg-soft); }
.stat b { display: block; font-size: 30px; color: var(--primary); line-height: 1.2; }
.stat span { font-size: 13px; color: var(--body); }

.track-steps { display: grid; gap: 0; margin-top: 20px; }
.track-step { display: flex; gap: 14px; }
.track-step .ts-dot { display: flex; flex-direction: column; align-items: center; }
.track-step .ts-dot i {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--border-strong);
  color: #fff;
  display: grid; place-items: center;
  font-style: normal;
}
.track-step .ts-dot i svg { width: 13px; height: 13px; }
.track-step .ts-dot span { flex: 1; width: 2px; background: var(--border-strong); margin: 4px 0; }
.track-step:last-child .ts-dot span { display: none; }
.track-step.done .ts-dot i { background: var(--success); }
.track-step.done .ts-dot span { background: var(--success); }
.track-step .ts-body { padding-bottom: 24px; }
.track-step b { display: block; color: var(--title); font-size: 14.5px; }
.track-step small { color: var(--muted); }

/* ---------- 10. Toast ---------- */
.toast-wrap {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 250px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 12px 15px;
  font-size: 13.5px;
  color: var(--title);
  animation: toastIn .3s cubic-bezier(.16, 1, .3, 1);
}
.toast.err { border-left-color: var(--danger); }
.toast svg { width: 18px; height: 18px; color: var(--success); }
.toast.err svg { color: var(--danger); }
.toast.hide { animation: toastOut .25s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(28px); } }

/* A word at the top of the checkout about who is ordering. */
.co-signin {
  margin: -4px 0 16px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
}
.co-signin.is-in { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--title); }
.co-signin b { color: var(--title); }

/* ---------- Sign in and sign up ---------- */

.auth-page {
  padding: 44px 0 64px;
  background: var(--bg-soft);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Two panels: the shop on the left, the form on the right. The form column is
   fixed-ish so it never stretches into a line of input boxes a metre wide. */
.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(4, 31, 30, .08);
}

.auth-aside {
  position: relative;
  padding: 40px 36px;
  background: var(--secondary) center / cover no-repeat;
  color: #fff;
  display: flex;
}

/* A scrim, so white text stays readable over whatever photograph the shop
   has put in the hero this week. */
.auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(4, 31, 30, .92), rgba(4, 31, 30, .74));
}

.auth-aside-in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.auth-logo {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.01em;
}
.auth-logo:hover { color: var(--primary); }

.auth-promise h2 {
  font-size: 25px;
  line-height: 1.28;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
}

.auth-promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.auth-promise li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: rgba(255, 255, 255, .86);
}
.auth-promise li svg { flex: none; margin-top: 1px; color: var(--primary); }

.auth-main { padding: 40px 38px; }

.auth-head { margin-bottom: 22px; }
.auth-head h1 { font-size: 25px; margin: 0 0 6px; }
.auth-head p { margin: 0; color: var(--muted); font-size: 14px; }

.auth-alt {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.auth-alt a { font-weight: 600; }

/* The one place anything goes wrong, in the colour of the answer. */
.auth-msg {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
}
.auth-msg.is-bad { background: #fdecea; color: #a4271b; border: 1px solid #f5c6c2; }
.auth-msg.is-good { background: #e8f6ee; color: #14663d; border: 1px solid #bfe3cf; }

.auth-pass { position: relative; }
.auth-pass .form-control { padding-right: 62px; }

.auth-peek {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 6px 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.auth-peek:hover { text-decoration: underline; }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -2px 0 18px;
}

.auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--primary); }

.auth-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--primary);
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

/* Advisory, never a gate: it colours a bar and says why. */
.auth-meter { height: 4px; border-radius: 3px; background: var(--bg-soft); margin-top: 8px; overflow: hidden; }
.auth-meter span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s ease, background .2s ease; }
.auth-meter[data-score="0"] span { width: 18%; background: #d64c3f; }
.auth-meter[data-score="1"] span { width: 38%; background: #e08b2f; }
.auth-meter[data-score="2"] span { width: 62%; background: #d9b625; }
.auth-meter[data-score="3"] span { width: 82%; background: #56a860; }
.auth-meter[data-score="4"] span { width: 100%; background: #1a7f4b; }

.auth-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }

.auth-waiting {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 60px 16px;
  color: var(--muted);
}
.auth-waiting svg { opacity: .35; }
.auth-waiting p { margin: 0; font-size: 14px; }

/* ---------- The account area ---------- */

.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.account-head h2 { margin: 0 0 2px; font-size: 22px; }
.account-head p { margin: 0; color: var(--muted); font-size: 13.5px; }

.order-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--bg-soft);
  color: var(--muted);
}
.order-status.is-paid,
.order-status.is-delivered { background: #e8f6ee; color: #14663d; }
.order-status.is-shipped,
.order-status.is-processing { background: #eaf1fb; color: #1c4e8a; }
.order-status.is-cancelled { background: #fdecea; color: #a4271b; }

/* The header's account link, showing who is signed in. */
.header-action .who {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
}

@media (max-width: 860px) {
  /* The picture is decoration; on a phone the form is the whole point. */
  .auth-card { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .auth-aside { display: none; }
  .auth-main { padding: 30px 22px; }
  .auth-page { padding: 24px 0 44px; }
}

/* ---------- 11. Responsive ---------- */

/**
 * How many product cards make a row.
 *
 * Four on a Full HD screen or a laptop, five on a 4K one. The card stays
 * about the same size across both — a 4K monitor earns another card, it does
 * not get the same four blown up or the same width cut into smaller pieces —
 * which is why the container widens at the same breakpoint. Without that, five
 * cards inside a 1680px band would be *smaller* on the bigger monitor.
 */
@media (min-width: 1600px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-side { width: 280px; }
  .shop-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
}

/* 4K, at 100% or 150% scaling. A 4K screen at 200% reports 1920px and is
   correctly treated as Full HD, because that is what it is showing. */
@media (min-width: 2400px) {
  :root { --container: 2160px; }
  .rail { --rail-cols: 5; }
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Between a laptop and a tablet the card would get too narrow to read at
   four across, so a card is dropped rather than squeezed. */
@media (max-width: 1399px) {
  .rail { --rail-cols: 3; }
}

@media (max-width: 1079px) {
  .rail { --rail-cols: 2.4; }
}

/* The category nav needs the whole row before the hotline gets a seat */
@media (max-width: 1750px) {
  .header-hotline { display: none; }
}

@media (max-width: 1200px) {
  .rail-btn.prev { left: -8px; }
  .rail-btn.next { right: -8px; }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-widget.w-last { display: none; }
}

/* Narrow desktops: drop the redundant "All Products" so the category row
   fits without the last item being scroll-clipped. */
@media (max-width: 1200px) {
  .main-nav .nav-all { display: none; }
  .main-nav > ul > li > a { padding: 14px 9px; }
}

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  h1 { font-size: 28px; }
  .section { padding: 40px 0; }
  .topbar-right .hide-md, .topbar-right .dot { display: none; }
  .menu-toggle { display: flex; }
  .header-middle .container { min-height: 68px; gap: 12px; padding-top: 10px; }
  .header-search { order: 3; flex: 1 0 100%; max-width: none; padding-bottom: 12px; }
  .search-box .form-control, .search-box .btn-search { height: 42px; }
  .header-bottom { display: none; }
  .header-action .label { display: none; }
  .header-action { padding: 6px 8px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* stack the two banners; the side one falls back to its own artwork ratio */
  .hero-grid { grid-template-columns: 1fr; }
  .side-banner { aspect-ratio: 500 / 410; height: auto; }
  .hero-dots { left: 50%; transform: translateX(-50%); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-side {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: 300px;
    max-width: 86vw;
    z-index: 100;
    background: #fff;
    border-radius: 0;
    border: 0;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform .3s ease;
    padding-top: 60px;
  }
  .shop-side.open { transform: translateX(0); }
  .shop-side .side-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: var(--bg-soft); display: grid; place-items: center;
  }
  .filter-toggle { display: inline-flex; }
  .pd-grid { grid-template-columns: 1fr; gap: 26px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary-box { position: static; }
  .newsletter { grid-template-columns: 1fr; padding: 30px; }
  /* about block full width, then the 4 link columns as 2 x 2 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-widget.w-last { display: block; }
  .mobile-bar { display: block; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  body { font-size: 14.5px; }
  h1 { font-size: 24px; }
  .section { padding: 32px 0; }
  .section-head { margin-bottom: 18px; }
  .section-head .title { font-size: 20px; }
  .logo-mark { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  .logo-text b { font-size: 18px; }
  .logo-text small { font-size: 9.5px; }
  /* phones: one hero banner only, and drop the promise strip to save a screen */
  .hero-side { display: none; }
  .features { display: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Track + Account live in the bottom bar and the drawer on phones */
  .header-actions .header-action.secondary { display: none; }
  .rail { --rail-cols: 2.2; gap: 12px; }
  /* A normal finite rail: four complete cards on phones. */
  .rail.cat-rail { grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; }
  .category-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-card { padding: 6px 4px; }
  .cat-card .cat-img { margin-bottom: 4px; }
  .cat-card b {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-card > span:last-child { font-size: 9px; line-height: 1.2; }
  .product-name { font-size: 13px; min-height: 36px; }
  .product-price ins { font-size: 15px; }
  .product-media { padding: 10px; }
  .product-body { padding: 0 10px 10px; }
  .rail-btn { display: none; }
  .pd-title { font-size: 21px; }
  .pd-price ins { font-size: 25px; }
  .pd-gallery { padding: 16px; }
  .pd-thumbs button { width: 60px; height: 60px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  /* toolbar: [Filters] … [Default] / Sort By row / count row */
  .shop-toolbar { gap: 10px 12px; padding: 12px; }
  .filter-toggle { order: 1; }
  .tb-per { order: 2; margin-left: auto; }
  .tb-sort { order: 3; flex: 1 0 100%; }
  .tb-sort select { flex: 1; min-width: 0; }
  .shop-toolbar .count { order: 4; flex: 1 0 100%; }
  .newsletter form { flex-direction: column; }
  .footer-top { padding: 36px 0 26px; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; padding: 6px; }
  .cart-table td { border: 0; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .cart-table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
  }
  .cart-table td.ct-cell-prod { display: block; }
  .cart-table td.ct-cell-prod::before { display: none; }
  .testi-rail { grid-auto-columns: minmax(252px, 1fr); }
  .toast-wrap { top: auto; bottom: 74px; right: 12px; left: 12px; }
  .toast { max-width: none; }
}

@media (max-width: 560px) {
  .topbar .container { justify-content: center; }
  .topbar-left { display: none; }
}

@media (max-width: 479px) {
  .rail { --rail-cols: 1.45; }
  .topbar { font-size: 11.5px; }
  .features-grid { grid-template-columns: 1fr; }
  .info-grid, .stat-grid { grid-template-columns: 1fr; }
  .drawer-right { width: 100%; }
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-actions .qty { width: 100%; justify-content: space-between; }
}

/* An uploaded logo replaces the mark and the wordmark, so the anchor is just
   the picture. The height comes from the Branding screen; the width follows
   the artwork rather than being stretched to a box it was not drawn for. */
.logo.has-image { gap: 0; }
.logo.has-image img {
  display: block;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* The footer falling back to the header logo: turned white for the dark
   panel, which is what the Branding screen promises under the field. A
   filter rather than a second file, because most shops have one logo. */
.logo.has-image img.is-inverted { filter: brightness(0) invert(1); }

@media (max-width: 560px) {
  /* The header is tighter here, and a wide logo would squeeze the icons. */
  .logo.has-image img { max-width: 150px; }
}

/* ---------- Messaging the shop ---------- */

/* Where the WhatsApp button used to float. The shop's own colour rather than
   a borrowed green: this is the shop answering, not another company. */
.msg-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(244, 135, 33, .40);
  cursor: pointer;
  z-index: 62;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.msg-float:hover { transform: scale(1.07); }
/* Lowered out of the way of the bottom bar — which only exists on a phone.
   Scoped to that breakpoint so the class can never move the button on a
   desktop, where there is no bar for it to make room for. */
@media (max-width: 991px) {
  .msg-float.is-lowered { transform: translateY(54px); }
  .msg-float.is-lowered:hover { transform: translateY(54px) scale(1.07); }
}

/* A reply the shopper has not read yet. */
.msg-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.msg-badge[hidden] { display: none; }

.msg-panel {
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: min(360px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 130px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(4, 31, 30, .22);
  z-index: 63;
}
.msg-panel.open { display: flex; }

.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--secondary);
  color: #fff;
}
.msg-head b { display: block; font-size: 14.5px; }
.msg-head span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.msg-close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
}
.msg-close:hover { color: #fff; }

.msg-body { padding: 16px; overflow-y: auto; }
.msg-note { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }

.msg-error {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid #f5c6c2;
  border-radius: var(--radius-sm);
  background: #fdecea;
  color: #a4271b;
  font-size: 12.5px;
}
.msg-error[hidden] { display: none; }

/* The conversation. The shopper's own messages sit right, the shop's left —
   the arrangement every messaging app uses, so nobody has to learn it. */
.msg-log { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 120px; }

.msg-bubble {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
}
.msg-bubble span { display: block; white-space: pre-wrap; }
.msg-bubble time { display: block; margin-top: 3px; font-size: 10.5px; opacity: .62; }

.msg-bubble.from-me {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.msg-bubble.from-shop {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--title);
  border-bottom-left-radius: 3px;
}

.msg-reply { padding: 12px 16px; border-top: 1px solid var(--border); }
.msg-reply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.msg-reply-row .btn { padding: 0 14px; }

@media (max-width: 560px) {
  /* Above the bottom bar, not behind it. */
  .msg-float { bottom: 72px; }
  .msg-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 132px;
    max-height: calc(100vh - 200px);
  }
}

/* ---------- Mobile header ---------- */

@media (max-width: 991px) {
  /* Pinned to the top.

     Sticky is on the wrapper rather than on .site-header itself: sticky sticks
     within its own parent, and .site-header's parent is exactly its own
     height, so it would come unstuck the instant it moved. The wrapper's
     parent is <body>, which is the whole page.

     Sticky rather than fixed, so it keeps its place in the flow and nothing
     underneath needs a matching padding that would have to be kept in step
     with the header's height. */
  #site-header {
    position: sticky;
    top: 0;
    /* Above the page, below the drawers and the bottom bar. */
    z-index: 60;
    background: #fff;
  }

  /* The dark strip is desktop furniture. On a phone it costs a line of the
     screen to repeat what the checkout says anyway, and the shop's number is
     one tap away in the menu. */
  .topbar { display: none; }

  /* The logo, centred.

     The two sides flex from a zero basis, so they take an equal share of
     whatever is left over whatever they contain — one icon on the left, two on
     the right — and the logo lands in the middle of the screen rather than in
     the middle of the space between them. */
  .header-middle .container > .menu-toggle {
    flex: 1 1 0;
    justify-content: flex-start;
  }
  .header-middle .container > .logo {
    flex: 0 0 auto;
    /* The gap either side is the flex gap; without this the logo is pushed off
       centre by the width of the gap itself. */
    margin: 0 -6px;
  }
  .header-middle .container > .header-actions {
    flex: 1 1 0;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  /* On the narrowest screens the wordmark and the search box together are
     taller than they are worth. The Bengali line goes; the mark and the name
     stay, which is what people recognise. */
  .logo-text small { display: none; }
}

@media print {
  .topbar, .site-header, .site-footer, .mobile-bar, .msg-float, .drawer, .overlay { display: none !important; }
}

/* ---------- Checkout: discount code ---------- */

.coupon-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 6px;
}

.coupon-row .form-control { text-transform: uppercase; }
.coupon-row .form-control::placeholder { text-transform: none; }
.coupon-row .btn { padding-inline: 20px; white-space: nowrap; }

/* The verdict on the code, in the colour of the answer: a shopper should be
   able to tell at a glance whether the discount is theirs. */
.coupon-msg {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.coupon-msg.is-good { color: var(--success, #1a7f4b); font-weight: 500; }
.coupon-msg.is-bad  { color: var(--danger, #c0392b); }

.coupon-offers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.coupon-offers:not(:empty) { margin-top: 10px; }

.coupon-offers-label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A code the shop is advertising, as one tap rather than something to
   remember and retype. */
.coupon-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--title);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.coupon-chip b { font-weight: 700; letter-spacing: .03em; }
.coupon-chip span { color: var(--muted); }
.coupon-chip:hover { background: var(--primary); color: #fff; }
.coupon-chip:hover span { color: rgba(255, 255, 255, .85); }

/* The discount line reads as money coming off, not another charge. */
#coDiscountRow span:last-child { color: var(--success, #1a7f4b); font-weight: 600; }

@media (max-width: 480px) {
  .coupon-row { grid-template-columns: 1fr; }
}