/* =========================================================
   Design tokens
   Palette: white canvas, deep indigo headings, soft violet body
   text, fresh green primary, warm amber for price/offer accents.
   ========================================================= */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  /* Tinted fill that separates panels/inputs from the white page */
  --color-surface-alt: #EFEFFD;
  --color-ink: #1F0757;      /* headings + emphasised text */
  /* Same violet hue as the brief's #8480AE, darkened to clear WCAG AA
     (5.1:1 on white — #8480AE itself only reaches 3.7:1). */
  --color-body: #6B6795;     /* paragraphs and default body copy */
  --color-muted: #8480AE;    /* captions, meta, placeholder text */
  --color-primary: #22A74E;
  --color-primary-dark: #17803B;
  --color-nav: #1F0757;
  --color-accent: #E0952B;
  --color-danger: #C0432F;
  --color-border: #EBEBEB;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  /* Indigo-tinted shadows read softer on a white page than neutral grey */
  --shadow-soft: 0 2px 10px rgba(31, 7, 87, 0.05), 0 1px 2px rgba(31, 7, 87, 0.04);
  --shadow-lift: 0 14px 34px rgba(31, 7, 87, 0.10);
  --shadow-press: 0 1px 3px rgba(31, 7, 87, 0.09);

  /* Vertical rhythm between homepage sections */
  --section-gap: 100px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Poppins', 'Hind Siliguri', sans-serif;
  --font-body: 'Inter', 'Hind Siliguri', sans-serif;
}

@media (max-width: 767px) {
  :root {
    --section-gap: 50px;
  }
}

/* Lenis drives the scroll itself; native smooth scrolling fights it.
   Bootstrap's reboot turns scroll-behavior on, so switch it back off. */
html.lenis-on {
  scroll-behavior: auto;
}

html.lenis-on,
html.lenis-on body {
  height: auto;
}

.lenis-on.lenis-stopped {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tabler icons sit on the text baseline by default */
.ti {
  line-height: 1;
  vertical-align: -0.125em;
}

/* ---------- Preloader (watering a growing seedling) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-box {
  text-align: center;
}

.preloader-svg {
  width: 170px;
  height: auto;
  overflow: visible;
}

.preloader-label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
}

.preloader-dots {
  display: inline-flex;
  gap: 5px;
  margin-top: 8px;
}

.preloader-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pl-blink 1.2s infinite ease-in-out;
}

.preloader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.preloader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pl-blink {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

/* Seedling grows up out of the pot */
.pl-plant {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pl-grow 2.8s ease-in-out infinite;
}

@keyframes pl-grow {

  0%,
  100% {
    transform: scale(0.3);
  }

  45%,
  80% {
    transform: scale(1);
  }
}

/* Watering can tips forward to pour */
.pl-can {
  transform-box: fill-box;
  transform-origin: 72% 82%;
  animation: pl-tilt 2.8s ease-in-out infinite;
}

@keyframes pl-tilt {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25%,
  60% {
    transform: rotate(13deg);
  }
}

/* Water drops fall from the spout */
.pl-drop {
  opacity: 0;
  animation: pl-fall 2.8s ease-in infinite;
}

.pl-drop2 {
  animation-delay: 0.22s;
}

.pl-drop3 {
  animation-delay: 0.44s;
}

@keyframes pl-fall {

  0%,
  14% {
    transform: translateY(0);
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  55% {
    transform: translateY(18px);
    opacity: 1;
  }

  66%,
  100% {
    transform: translateY(22px);
    opacity: 0;
  }
}

/* Reduced motion: show a fully grown, still seedling */
@media (prefers-reduced-motion: reduce) {

  .pl-plant,
  .pl-can,
  .pl-drop,
  .preloader-dots span {
    animation: none;
  }

  .pl-plant {
    transform: scale(1);
  }

  .pl-drop {
    opacity: 0;
  }
}

body {
  background: var(--color-surface);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-font {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}

a {
  text-decoration: none;
}

/* ---------- Navbar ---------- */
/* On desktop this scrolls away and the category bar below is what sticks.
   Below 1200px the category bar is hidden (the drawer replaces it), so this
   bar sticks instead — exactly one sticky header at any width, never two
   stacked ones eating the screen.
   z-index sits ABOVE the sticky .nav-menu (1030) so the search dropdown,
   which lives in this bar's stacking context, isn't clipped behind it. */
.navbar-shop {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
  position: relative;
  z-index: 1031;
}

@media (max-width: 1199px) {
  .navbar-shop {
    position: sticky;
    top: 0;
    /* Tighter than the desktop 20px: a bar that is always on screen has to
       give the page back some height. */
    padding: 10px 0;
    box-shadow: var(--shadow-soft);
  }
}

.navbar-shop .logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Uploaded logo: height-capped so any aspect ratio fits the bar */
.navbar-shop .logo img {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.navbar-shop .logo .logo-back {
  line-height: 1;
  color: var(--color-primary-dark);
  font-size: 1.5rem;
}

.success-icon {
  font-size: 3.4rem;
  color: var(--color-primary);
  line-height: 1;
}

@media (max-width: 575px) {
  .navbar-shop .logo img {
    height: 34px;
    max-width: 110px;
  }
}

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.search-wrap input {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  padding: 9px 16px 9px 40px;
  background: var(--color-surface-alt);
  width: 100%;
}

.search-wrap input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(34, 167, 78, 0.15);
}

.search-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchored right so the 280px minimum grows leftward instead of off-screen
     when the input is squeezed on mobile. */
  right: 0;
  width: 100%;
  min-width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  max-height: 360px;
  overflow-y: auto;
  z-index: 1040;
  display: none;
}

.search-results.show {
  display: block;
}

/* The input is squeezed between the menu, logo and cart buttons here, so the
   dropdown is centred under it rather than anchored to its narrow right edge. */
@media (max-width: 575px) {
  .search-results {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--color-surface-alt);
}

.search-result-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-primary);
  border-radius: 50%;
  border: none;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.compare {
  text-decoration: line-through;
  color: var(--color-muted);
  font-size: 16px;
}

.quickViewModal-header .btn-close {
  position: absolute;
  top: 10px;
  right: 2px;
  padding: 0;
  line-height: 1;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99999999;
  opacity: 1;
  border: 1px solid var(--color-border);
}

/* ---------- Mobile menu: hamburger + slide-in drawer ----------
   Desktop keeps the dark category bar; below 768px that bar is replaced by
   this drawer so the menu never wraps or clips, however many categories. */
.menu-toggle {
  display: none;
  /* desktop: hidden */
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-size: 1.7rem;
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 6px;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 7, 87, 0.45);
  z-index: 1090;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.drawer-backdrop.show {
  opacity: 1;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--color-surface);
  z-index: 1095;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s var(--ease-out);
  box-shadow: var(--shadow-lift);
  visibility: hidden;
}

.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}

.drawer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.drawer-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px;
  min-height: 0;
}

.drawer-links {
  overflow-y: auto;
  /* long category lists still scroll */
  padding: 8px 0;
  flex: 1;
}

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}

.drawer-link:last-child {
  border-bottom: none;
}

.drawer-link .ti {
  color: var(--color-muted);
  font-size: 1.05rem;
}

.drawer-link:hover {
  background: var(--color-surface-alt);
}

.drawer-link.active {
  color: var(--color-primary-dark);
  font-weight: 700;
  background: rgba(34, 167, 78, 0.08);
}

.drawer-link.active .ti {
  color: var(--color-primary);
}

@media (max-width: 1199px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-menu {
    display: none;
  }

  /* the drawer replaces the dark bar */
}

/* ---------- Category nav bar (dark, with dropdowns) ---------- */
.nav-menu {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* No overflow here on purpose: a scroll container clips the dropdowns
   (overflow-x:auto silently makes overflow-y:auto too). Wrap instead. */
.nav-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.nav-item.open>.nav-link {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.nav-item.active>.nav-link {
  background: var(--color-primary-dark);
  color: #fff;
}

.nav-caret {
  border: none;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 2px;
  min-height: 0;
  transition: transform 0.15s;
}

.nav-item.open .nav-caret {
  transform: rotate(180deg);
}

.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  display: none;
  z-index: 1035;
}

/* Click-toggled only — same on desktop and touch (no hover-to-open) */
.nav-item.open .nav-drop {
  display: block;
}

/* Right-most dropdowns open leftward so they stay on screen */
.nav-item:last-child .nav-drop {
  left: auto;
  right: 0;
}

.drop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: 700;
}

.drop-item:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary-dark);
}

.drop-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.drop-item .drop-price {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.drop-all {
  display: block;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding: 8px 9px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Hero slider ---------- */
.hero-slider {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--section-gap) 0;
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-soft);
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-slide {
  flex: 0 0 100%;
}

.slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-nav);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: opacity 0.2s, background 0.15s;
  z-index: 2;
}

/* Hiding the arrows until hover only works where a pointer can hover. On touch
   there is no hover state, so they would never be reachable — hence they stay
   visible by default and the reveal is gated behind the media query. */
@media (hover: hover) {
  .slider-arrow {
    opacity: 0;
  }

  .hero-slider:hover .slider-arrow,
  .slider-arrow:focus-visible {
    opacity: 1;
  }
}

.slider-arrow:hover {
  background: #fff;
}

.slider-arrow.prev {
  left: 14px;
}

.slider-arrow.next {
  right: 14px;
}

.slider-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}

.slider-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.2s, background 0.2s;
}

.slider-dot.active {
  background: #fff;
  width: 22px;
}

@media (max-width: 575px) {
  .slider-arrow {
    opacity: 1;
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 1rem;
  }

  .slider-arrow.prev {
    left: 8px;
  }

  .slider-arrow.next {
    right: 8px;
  }
}

/* ---------- Hero (fallback slide when no banners exist) ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 36px 24px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
}

.hero h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.hero p {
  opacity: 0.9;
  margin-bottom: 16px;
}

.hero .btn-shop {
  background: var(--color-accent);
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  border: none;
}

.offer-banner {
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

/* ---------- Featured categories ---------- */
.fc-wrap {
  position: relative;
}

.fc-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}

.fc-track::-webkit-scrollbar {
  display: none;
}

.cat-card {
  flex: 0 0 auto;
  width: 150px;
  cursor: pointer;
  text-align: center;
}

@media (max-width: 767px) {
  .cat-card {
    width: 100px;
  }

  .fc-track {
    gap: 16px;
  }
}

.cat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.cat-card:hover .cat-tile {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.cat-card.active .cat-tile {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(34, 167, 78, 0.25);
}

.cat-tile img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.cat-name {
  display: block;
  margin-top: 9px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
}

.cat-card.active .cat-name {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.fc-arrow {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  /* centre on the tile, not the label below it */
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}

.fc-arrow:hover {
  background: var(--color-primary-dark);
}

.fc-arrow.left {
  left: -10px;
}

.fc-arrow.right {
  right: -10px;
}

.fc-arrow[hidden] {
  display: none;
}

/* ---------- Popular products ---------- */
.popular-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  height: 100%;
  transition: box-shadow 0.15s, transform 0.15s;
}

.popular-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.popular-card .pop-img {
  flex: 0 0 128px;
  width: 128px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  overflow: hidden;
}

.popular-card .pop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-card .pop-body {
  flex: 1;
  min-width: 0;
}

.popular-card .pop-name {
  color: var(--color-ink);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 6px;
}

.popular-card .pop-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
}

.popular-card .pop-price .compare {
  text-decoration: line-through;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 1rem;
  margin-left: 6px;
}

.badge-best {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-accent);
  color: var(--color-nav);
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: rgba(34, 167, 78, 0.12);
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.pop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pop-actions .qty-stepper {
  flex-shrink: 0;
}

.btn-cart-outline {
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  padding: 7px 12px;
  border: 1px solid var(--color-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--color-primary-dark);
}

.btn-cart-outline:hover {
  background: rgba(34, 167, 78, 0.08);
}

.btn-cart-outline.added {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Offer banner (image only) ---------- */
.offer-banner-img {
  margin-top: var(--section-gap);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

.offer-banner-img img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s var(--ease-out);
  border: 1px solid var(--color-border);
}

.offer-banner-img a:hover img {
  transform: scale(1.02);
}

/* ---------- Testimonials ---------- */
.tst-viewport {
  overflow: hidden;
}

.tst-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s ease;
}

.tst-card {
  position: relative;
  flex: 0 0 calc((100% - 32px) / 3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.tst-quote {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 4rem;
  color: var(--color-primary);
  opacity: 0.16;
}

.tst-review {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-ink);
  flex: 1;
}

.tst-stars {
  color: var(--color-accent);
  font-size: 1rem;
  display: flex;
  gap: 2px;
}

.tst-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tst-person img,
.tst-initial {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tst-initial {
  background: rgba(34, 167, 78, 0.14);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.tst-name {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
}

.tst-role {
  font-size: 1rem;
  color: var(--color-muted);
}

.tst-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.tst-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--color-border);
  transition: width 0.2s, background 0.2s;
}

.tst-dot.active {
  background: var(--color-primary);
  width: 22px;
}

@media (max-width: 991px) {
  .tst-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

@media (max-width: 575px) {
  .tst-card {
    flex: 0 0 100%;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #1A1A1A;
  color: rgba(255, 255, 255, 0.75);
  padding: 80px 0 0;
  margin-top: var(--section-gap);
}

.foot-brand img {
  height: 54px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.foot-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}

.foot-about {
  margin: 20px 0 16px;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 340px;
}

.foot-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.foot-contact li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  margin-bottom: 8px;
}

.foot-contact .ti {
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.foot-contact a {
  color: rgba(255, 255, 255, 0.75);
}

.foot-contact a:hover {
  color: #fff;
}

.foot-social {
  display: flex;
  gap: 9px;
}

.foot-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.15s;
}

.foot-social a:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

.foot-social a {
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.foot-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 8px;
}

.foot-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-links li {
  margin-bottom: 9px;
}

.foot-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  transition: color 0.15s;
}

.foot-links a:hover {
  color: var(--color-primary);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 50px;
  padding: 16px 0;
  text-align: center;
  font-size: 1rem;
}

/* ---------- Product grid ---------- */
/* On a white page the shadow alone isn't enough to read as a card, so the
   border carries the edge and the shadow only does the hover lift. */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}

.product-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.product-card .img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.product-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-view-btn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(31, 7, 87, 0.7);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 1rem;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
	backdrop-filter: blur(2px);
	width: 36px !important;
	height: 36px !important;
	justify-content: center;
	min-height: 36px;
}

.quick-view-btn i {
  font-size: 1.25rem;
}

/* Discount flag on the product image */
.badge-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-danger);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 1;
  letter-spacing: 0.01em;
}

/* Out of stock: same corner as the discount badge — a product is never both */
.badge-stock-out {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 1;
}

/* Dimmed, but the name and price stay readable so it still sells the restock */
.product-card.is-out-of-stock .img-wrap img {
  opacity: 0.55;
  filter: grayscale(0.55);
}

.product-card .body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-card .name {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1rem;
}

.product-card .price .compare {
  text-decoration: line-through;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.8rem;
  margin-left: 6px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
  padding: 0 6px;
}

.qty-stepper button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border: none;
  background: var(--color-surface-alt);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}

.qty-stepper input {
  width: 34px;
  border: none;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add-cart {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 10px;
  width: 100%;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-add-cart:disabled {
  background: var(--color-border);
  color: var(--color-muted);
}

/* added / loading are "busy" states, not a real disabled control — keep the
   green fill and white text/spinner instead of the muted disabled look. */
.btn-add-cart.added {
  background: var(--color-primary-dark);
  color: #fff;
}

.btn-add-cart.loading {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Sections & headings ---------- */
.section {
  margin-top: var(--section-gap);
}

.section:first-child {
  margin-top: 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.section-head h2 {
  font-size: 1.5rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 10px;
}

/* Accent rule under the title */
.section-head h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.section-head .section-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--color-muted);
}

.section-head.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head.centered h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  padding: 6px 2px;
  transition: gap 0.2s var(--ease-out), color 0.15s;
}

.see-all:hover {
  color: var(--color-primary-dark);
  gap: 10px;
}

@media (max-width: 575px) {
  .section-head {
    align-items: flex-end;
  }

  .section-head h2 {
    font-size: 1.25rem;
  }

  .section-head.centered {
    align-items: center;
  }
}

/* Legacy heading block (checkout / order pages) */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 12px;
}

.section-heading h2 {
  font-size: 1.15rem;
  margin: 0;
}

.section-heading .eyebrow {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 700;
  display: block;
}

/* ---------- Buttons: shared interaction states ---------- */
button,
.btn-shop,
.page-btn,
.see-all {
  transition: background 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    transform 0.12s var(--ease-out);
}

/* Every interactive control gets a visible keyboard ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-add-cart:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn-add-cart:active:not(:disabled),
.btn-cart-outline:active,
.btn-shop:active {
  transform: translateY(0);
  box-shadow: var(--shadow-press);
}

.btn-add-cart:disabled {
  cursor: not-allowed;
}

.btn-shop:hover {
  filter: brightness(0.94);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.qty-stepper button:hover {
  background: rgba(34, 167, 78, 0.14);
  color: var(--color-primary-dark);
}

.qty-stepper button:active {
  background: rgba(34, 167, 78, 0.22);
}

.quick-view-btn:hover {
  background: var(--color-primary);
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

.tst-dot:hover {
  background: var(--color-primary);
  opacity: 0.6;
}

/* ---------- Back to top ---------- */
/* ---------- WhatsApp chat button ---------- */
/* Always visible, so it owns the bottom-right corner and .scroll-top stacks
   above it. */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  z-index: 1050;
  transition: transform 0.2s var(--ease-out), background 0.15s var(--ease-out);
}

.whatsapp-float:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-2px);
}

.whatsapp-float:active {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 14px;
    right: 14px;
    width: 48px;
    height: 48px;
  }
}

/* Stacked directly above the WhatsApp button (52px + 12px gap). */
.scroll-top {
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    background 0.15s var(--ease-out);
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.scroll-top:active {
  transform: translateY(0);
}

/* Above the (smaller) mobile WhatsApp button: 48px + 12px gap */
@media (max-width: 767px) {
  .scroll-top {
    bottom: 74px;
    right: 14px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- Button spinner (add-to-cart loading) ---------- */
.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  /* follows the button's text colour */
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-add-cart.loading,
.btn-cart-outline.loading {
  pointer-events: none;
}

/* ---------- Toast notifications ---------- */
.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1080;
  /* above the sticky nav (1030) and cart bar (1040) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 12px 12px 12px 14px;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--color-ink);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.toast-item.shown {
  opacity: 1;
  transform: translateX(0);
}

.toast-item.leaving {
  opacity: 0;
  transform: translateX(24px);
}

.toast-icon {
  font-size: 1.15rem;
  margin-top: 1px;
}

.toast-msg {
  flex: 1;
  line-height: 1.45;
}

.toast-close {
  border: none;
  background: none;
  color: var(--color-muted);
  padding: 2px;
  min-height: 0;
  line-height: 1;
  border-radius: var(--radius-sm);
}

.toast-close:hover {
  color: var(--color-ink);
  background: var(--color-surface-alt);
}

.toast-success {
  border-left-color: var(--color-primary);
}

.toast-success .toast-icon {
  color: var(--color-primary);
}

.toast-error {
  border-left-color: var(--color-danger);
}

.toast-error .toast-icon {
  color: var(--color-danger);
}

.toast-info {
  border-left-color: var(--color-accent);
}

.toast-info .toast-icon {
  color: var(--color-accent);
}

@media (max-width: 575px) {
  .toast-stack {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--color-muted);
  padding: 40px 0 4px;
}

.breadcrumb-bar a {
  color: var(--color-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.breadcrumb-bar a:hover {
  text-decoration: underline;
}

.breadcrumb-bar .current {
  color: var(--color-ink);
  font-weight: 700;
}

.breadcrumb-bar .sep {
  opacity: 0.5;
  font-size: 1rem;
}

/* ---------- Pagination ---------- */
.product-count {
  font-size: 1rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 6px;
}

.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

a.page-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: rgba(34, 167, 78, 0.06);
  transform: translateY(-1px);
}

.page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.page-btn.disabled {
  color: var(--color-muted);
  background: var(--color-surface-alt);
  opacity: 0.6;
}

.page-gap {
  color: var(--color-muted);
  padding: 0 2px;
}

@media (max-width: 575px) {
  .page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 1rem;
  }
}

/* ---------- Order tracking ---------- */
/* "Track" shortcut in the top bar */
.track-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.track-link .ti {
  font-size: 1.5rem;
}

.track-link:hover {
  color: var(--color-primary);
}

@media (max-width: 575px) {
  .track-link {
    flex-direction: column;
    gap: 0;
  }

  .track-link span {
    font-size: 12px;
  }

  /* icon only on small phones */
  .track-link .ti {
    font-size: 1.5rem;
  }
}

.track-form {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.track-form .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

.track-form input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 11px 16px 11px 40px;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.track-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(34, 167, 78, 0.15);
}

.btn-track {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-track:hover {
  background: var(--color-primary-dark);
}

.track-error,
.track-hint,
.track-cancelled,
.track-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 1rem;
}

.track-error {
  background: rgba(192, 67, 47, 0.08);
  border: 1px solid rgba(192, 67, 47, 0.25);
  color: var(--color-danger);
}

.track-hint {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
}

.track-cancelled {
  background: rgba(192, 67, 47, 0.08);
  border: 1px solid rgba(192, 67, 47, 0.25);
  color: var(--color-danger);
  margin-top: 14px;
}

.track-pay {
  background: var(--color-surface-alt);
  margin-top: 14px;
  color: var(--color-ink);
}

.track-pay .ti,
.track-hint .ti {
  color: var(--color-primary);
  flex-shrink: 0;
}

.track-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.track-label {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.track-order-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}

.track-status {
  background: rgba(34, 167, 78, 0.12);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
}

.track-status.cancelled {
  background: rgba(192, 67, 47, 0.1);
  color: var(--color-danger);
}

.track-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.track-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.track-meta .ti {
  color: var(--color-primary);
}

/* 4-step progress */
.track-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px 0 4px;
}

.track-steps li {
  flex: 1;
  text-align: center;
  position: relative;
  color: var(--color-muted);
}

/* connecting line between dots */
.track-steps li::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--color-border);
  z-index: 0;
}

.track-steps li:first-child::before {
  display: none;
}

.track-steps li.done::before,
.track-steps li.current::before {
  background: var(--color-primary);
}

.track-dot {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-muted);
}

.track-steps li.done .track-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.track-steps li.current .track-dot {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(34, 167, 78, 0.18);
}

.track-steps li.done .track-step-label,
.track-steps li.current .track-step-label {
  color: var(--color-primary-dark);
  font-weight: 700;
}

@media (max-width: 480px) {
  .track-steps li {
    font-size: 0.68rem;
  }

  .track-dot {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .track-steps li::before {
    top: 15px;
  }

  .btn-track {
    padding: 0 14px;
  }
}

/* ---------- Quick view modal ---------- */
/* Stacked on the narrowest phones, side by side from 421px up. Bootstrap's own
   grid only splits at 768px (col-md), which left a lot of usable width unused. */
.qv-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 421px) {
  .qv-layout {
    flex-direction: row;
  }

  /* min-width:0 stops a long product name from forcing the column wider than
     its half — flex items default to min-width:auto and refuse to shrink. */
  .qv-media,
  .qv-info {
    flex: 1 1 0;
    min-width: 0;
  }
}

.qv-image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
  aspect-ratio: 1/1;
  cursor: zoom-in;
}

.qv-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.qv-image-wrap.zoomed img {
  transform: scale(1.8);
}

.qv-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--color-border);
  transition: border-color 0.15s;
}

.qv-thumb.active {
  border-color: var(--color-primary);
}

/* Bootstrap pulls .btn-close out with a negative margin, which pushes it past
   the modal's right edge and causes sideways overflow on narrow screens. */
#quickViewModal .modal-header .btn-close {
  margin-right: 0;
}

/* Small screens: the modal was overflowing the top of the viewport (close
   button unreachable). Keep it inside the screen, let the body scroll, and
   stop the square image from eating half the screen. */
@media (max-width: 575px) {
  #quickViewModal .modal-dialog {
    margin: 0.5rem;
    max-width: none;
  }

  #quickViewModal .modal-content {
    max-height: calc(100vh - 1rem);
    border-radius: 14px;
  }

  #quickViewModal .modal-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  #quickViewBody h3 {
    font-size: 1.1rem;
  }

  /* Keep the close button clear of the image */
  #quickViewModal .modal-header {
    padding-bottom: 0;
  }
}

/* ---------- Floating cart dock (checkout shortcut) ---------- */
/* Docked to the right edge at mid-height instead of a full-width bottom bar,
   so it never covers the footer or the page's own content. */
.cart-dock {
  position: fixed;
  right: 14px;
  top: 40%;
  translate: 0 -50%;
  z-index: 1040;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 78px;
  padding: 6px;
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  transition: transform 0.18s var(--ease-out);
  border: 1px solid var(--color-border);
}

.cart-dock.show {
  display: flex;
}

.cart-dock:hover {
  transform: translateX(-3px);
}

.cart-dock-badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  padding: 9px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.cart-dock-badge .ti {
  font-size: 1.45rem;
}

.cart-dock-count {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.cart-dock-total {
  color: var(--color-ink);
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 2px 2px 3px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .cart-dock {
    right: 10px;
    width: 68px;
    padding: 5px;
  }

  .cart-dock-badge .ti {
    font-size: 1.3rem;
  }

  .cart-dock-count {
    font-size: 0.72rem;
  }

  .cart-dock-total {
    font-size: 0.82rem;
  }
}

/* Periodic nudge so the dock catches the eye. main.js adds the class for one
   cycle every 10s; the animationend handler strips it again. */
.cart-dock.nudge {
  animation: checkout-nudge 0.8s var(--ease-out);
}

@keyframes checkout-nudge {

  0%,
  100% {
    transform: translateX(0);
  }

  12% {
    transform: translateX(-5px) rotate(-2deg);
  }

  28% {
    transform: translateX(5px) rotate(2deg);
  }

  44% {
    transform: translateX(-4px) rotate(-1.5deg);
  }

  60% {
    transform: translateX(4px) rotate(1.5deg);
  }

  76% {
    transform: translateX(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-dock.nudge {
    animation: none;
  }
}

/* ---------- Category page header ---------- */
.category-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, var(--color-nav), var(--color-primary-dark));
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  color: #fff;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}

/* soft light bloom, mirrors the hero slides */
.category-hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

.cat-hero-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.cat-hero-icon img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.cat-hero-text h1 {
  font-size: 1.6rem;
  margin: 0 0 4px;
  color: #fff;
}

.cat-hero-text p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.85;
}

@media (max-width: 575px) {
  .category-hero {
    padding: 20px 16px;
    gap: 14px;
  }

  .cat-hero-icon {
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
  }

  .cat-hero-text h1 {
    font-size: 1.25rem;
  }
}

/* Category cards are links on the category page */
a.cat-card {
  color: inherit;
  text-decoration: none;
}

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.empty-state>.ti {
  font-size: 3rem;
  color: var(--color-muted);
  opacity: 0.5;
  margin-bottom: 12px;
}

.empty-state h2 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.empty-state p {
  color: var(--color-muted);
  font-size: 1rem;
  margin-bottom: 18px;
}

/* ---------- Checkout page ---------- */
.checkout-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  margin-bottom: 16px;
}

.checkout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.checkout-title .ti {
  color: var(--color-primary);
  font-size: 1.5rem;
}

.order-line .line-name {
  line-height: 1.35;
}

.btn-remove {
  border: none;
  background: none;
  color: var(--color-danger);
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 6px;
  min-height: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.btn-remove:hover {
  background: rgba(192, 67, 47, 0.1);
}

.pay-icon {
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.payment-option {
  position: relative;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
  color: var(--color-nav);
}

.payment-option:hover {
  border-color: var(--color-primary);
}

.pay-note {
  font-size: 1rem;
  color: var(--color-primary-dark);
}

/* "ফ্রি ডেলিভারি" flag on the prepaid option */
.pay-flag {
  position: absolute;
  top: -14px;
  right: 12px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}

/* Wallet picker — radio tiles, same visual language as .payment-option */
.pay-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.pay-channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.pay-channel:hover {
  border-color: var(--color-primary);
}

.pay-channel input {
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.pay-channel-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.pay-channel-name {
  font-weight: 700;
  font-size: 1rem;
}

.pay-channel-num {
  font-size: 0.9rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tick only shows on the chosen wallet */
.pay-channel-tick {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}

.pay-channel.selected {
  border-color: var(--color-primary);
  background: rgba(34, 167, 78, 0.06);
}

.pay-channel.selected .pay-channel-name,
.pay-channel.selected .pay-channel-num {
  color: var(--color-primary-dark);
}

.pay-channel.selected .pay-channel-tick {
  opacity: 1;
}

/* On phones, stack them like the method cards above — three across leaves
   an orphan tile on its own row. */
@media (max-width: 575px) {
  .pay-channels {
    grid-template-columns: 1fr;
  }
}

.free-delivery-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(34, 167, 78, 0.09);
  border: 1px solid rgba(34, 167, 78, 0.28);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  display: none !important;
}

.free-delivery-banner .ti {
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-top: 1px;
}

.free-delivery-banner strong {
  display: block;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.free-delivery-banner span {
  font-size: 1rem;
  color: var(--color-muted);
}

/* Free-delivery progress under the totals */
.free-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: rgba(224, 149, 43, 0.10);
  border: 1px solid rgba(224, 149, 43, 0.30);
  font-size: 1rem;
  color: var(--color-ink);
}

.free-progress .ti {
  color: var(--color-accent);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.free-progress.reached {
  background: rgba(34, 167, 78, 0.10);
  border-color: rgba(34, 167, 78, 0.30);
}

.free-progress.reached .ti {
  color: var(--color-primary);
}

.free-progress strong {
  color: var(--color-primary-dark);
}

/* Shown once a returning customer's details are filled in */
.returning-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: rgba(34, 167, 78, 0.09);
  border: 1px solid rgba(34, 167, 78, 0.26);
  font-size: 1rem;
  color: var(--color-primary-dark);
  display: none !important;
}

.returning-note .ti {
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Wallet number the customer sends money to */
.pay-number-box {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.pay-number-head {
  font-size: 1rem;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.pay-number-head strong {
  color: var(--color-primary-dark);
}

.pay-number-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pay-number {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  user-select: all;
  /* one tap selects the whole number */
}

.btn-copy {
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 10px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.btn-copy:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Universal QR the customer scans to pay — sits just above Transaction ID */
.pay-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.pay-qr-img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px;
}

.pay-qr-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.pay-qr-caption .ti {
  font-size: 1.05rem;
}

/* Per-wallet "how to pay" steps under the number */
.pay-steps {
  margin: 10px 0 0;
  padding-left: 1.35rem;
  font-size: 1rem;
  color: var(--color-muted);
}

.pay-steps li {
  padding: 1px 0;
}

.pay-steps li::marker {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.pay-steps strong {
  color: var(--color-primary-dark);
}

.btn-place-order {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-place-order:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn-place-order:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-press);
}

.btn-place-order:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Reassurance strip under the order summary */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  justify-content: center;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
}

.trust-row .ti {
  color: var(--color-primary);
  font-size: 1rem;
}

.order-line {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.order-line img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.order-line:last-child {
  border-bottom: none;
}

.payment-option {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
}

.payment-option.selected {
  border-color: var(--color-primary);
  background: rgba(34, 167, 78, 0.06);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 1rem;
}

.total-row.grand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  border-top: 1px dashed var(--color-border);
  margin-top: 6px;
  padding-top: 10px;
}

/* ---------- Order number + copy button (order-success) ---------- */
.order-number-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* order-success centres its card contents; the track card is left-aligned. */
.order-number-row.centered {
  justify-content: center;
}

.order-number {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  /* The number is the one thing on this page worth selecting by hand, and
     tabular figures keep it from reflowing when the icon swaps to a tick. */
  font-variant-numeric: tabular-nums;
  user-select: all;
  word-break: break-all;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.copy-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.copy-btn.copied {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.copy-feedback {
  font-size: 0.85rem;
  color: var(--color-primary);
  /* Reserved height so confirming the copy doesn't shift the card's totals. */
  min-height: 1.2em;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.copy-feedback.show {
  opacity: 1;
}

/* Touch targets */
button,
.btn,
input,
select {
  min-height: 38px;
}

/* Honeypot: parked off-screen instead of display:none, which some bots skip.
   Never remove — api/order.php rejects any submission that fills it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}