/* =========================================================================
   style.css - base theme, components and sections
   Responsive adjustments live in responsive.css
   ========================================================================= */

/* =========================================================================
   FONTS: served from assets/fonts, nothing is loaded from Google.
   Files come from google-webfonts-helper (latin, woff2). If a font is
   updated, keep the file names below in step with the files in the folder.
   Lora (brand name, headings) uses "block": the text waits a moment for its own
   font instead of first showing in a substitute font and then changing.
   The three most used files are also preloaded in each page's <head>.
   ========================================================================= */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../assets/fonts/lora-v37-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../assets/fonts/lora-v37-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url("../assets/fonts/lora-v37-latin-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url("../assets/fonts/lora-v37-latin-600italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-v24-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-v24-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-v24-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-v24-latin-700.woff2") format("woff2");
}

/* Stand-in for Poppins while it loads: Arial resized to Poppins' size, so the text
   hardly changes width or height when Poppins arrives (stops the header jumping) */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Arial Regular");
  size-adjust: 112.16%;
  ascent-override: 93.62%;
  descent-override: 31.21%;
  line-gap-override: 8.92%;
}

/* ---------- Design tokens ---------- */
:root {
  /* Colour */
  --color-primary: #6c4d39;          /* warm spice brown */
  --color-primary-dark: #402e2c;     /* deep cocoa (dark sections, footer) */
  --color-primary-soft: #f3ece6;
  --color-accent: #edb836;           /* turmeric gold */
  --color-accent-dark: #9a6e12;      /* gold dark enough for text on white */
  --color-accent-soft: #fbf1d8;
  --color-olive: #a19c4b;            /* olive: add-to-cart */
  --color-olive-dark: #8a853c;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-tint: #f8f4ed;
  --color-hero: #f7f0e3;             /* warm cream behind the light banner */
  --color-text: #2b211f;
  --color-text-muted: #6f6660;
  --color-border: #ece4da;

  /* Typography */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;          /* headings, nav, wordmark */
  --font-body: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Lora", Georgia, "Times New Roman", serif;   /* italic accent words, wordmark */

  /* Shape & depth */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(74, 51, 37, 0.06);
  --shadow: 0 6px 24px rgba(74, 51, 37, 0.08);
  --shadow-lg: 0 14px 40px rgba(74, 51, 37, 0.12);

  /* Layout */
  --header-height: 76px;
  --section-space: 96px;
  --transition: 0.25s ease;
}

/* ---------- Base ---------- */
html {
  /* Android Chrome can enlarge text on its own ("font boosting"); keep sizes as designed, like Safari */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  /* Phones: two quick taps (for example opening and closing the menu) no longer zoom the page in.
     Pinch to zoom still works. */
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: 0;
  line-height: 1.2;
}
/* Lora (serif) is kept for the brand name and the big page and section headings.
   Small headings and labels, and the headings on the account, checkout and admin pages,
   use the clean body font (Poppins). */
h3, h4,
.product-name,
.detail-name,
.trust-item strong,
.contact-panel-title,
.offcanvas-title,
.modal-title,
.detail-uses h2,
.account-section h2,
.checkout-section h2 { font-family: var(--font-body); color: var(--color-primary); }
/* In Poppins a heavy, near-black label reads as plain black, so these use the brand brown
   at a medium weight. */
h3, h4,
.contact-panel-title,
.offcanvas-title,
.modal-title,
.detail-uses h2,
.account-section h2,
.checkout-section h2 { font-weight: 500; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-dark); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Shared typography ---------- */
.eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.eyebrow-light { color: var(--color-accent); }

.section-title {
  font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.3rem);
  font-weight: 600;
  margin-bottom: 0;
}
/* Left-aligned heading with a short gold rule under it */
.section-title--ruled { position: relative; padding-bottom: 0.7rem; }
.section-title--ruled::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* Gold accent words inside headings: same upright lettering as the rest of the heading */
.title-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: #dea32a;
}
.hero-title .title-accent { color: var(--color-accent); }

.lead-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.72rem;
  --bs-btn-font-size: 0.95rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  letter-spacing: 0.01em;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.btn-sm {
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: 0.85rem;
}

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-active-color: #fff;
}

.btn-outline-brand {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-soft);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary-soft);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-primary);
}

.btn-accent {
  --bs-btn-color: var(--color-primary-dark);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-primary-dark);
  --bs-btn-hover-bg: #f3c65a;
  --bs-btn-hover-border-color: #f3c65a;
  --bs-btn-active-bg: var(--color-accent-dark);
  --bs-btn-active-border-color: var(--color-accent-dark);
  --bs-btn-active-color: #fff;
}

.btn-olive {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-olive);
  --bs-btn-border-color: var(--color-olive);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-olive-dark);
  --bs-btn-hover-border-color: var(--color-olive-dark);
  --bs-btn-active-bg: var(--color-olive-dark);
  --bs-btn-active-border-color: var(--color-olive-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-font-weight: 600;
}

/* Brown pill with light keyline, for use on dark sections */
.btn-view-all {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: rgba(255, 255, 255, 0.7);
  --bs-btn-hover-color: var(--color-primary-dark);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-accent);
  --bs-btn-active-border-color: var(--color-accent);
  --bs-btn-font-weight: 600;
}

.btn-outline-light-soft {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-color: #fff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  white-space: nowrap;
}
.link-arrow i { transition: transform var(--transition); }
.link-arrow:hover i { transform: translateX(3px); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1.2rem;
  transition: background-color var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--color-surface-tint); color: var(--color-primary); }

/* ---------- Missing local image placeholder ---------- */
.media-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-tint);
}
img.is-missing { visibility: hidden; }
.media-frame.has-missing-image::after {
  content: attr(data-missing);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #a39c8f;
  text-align: center;
  word-break: break-all;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(237, 184, 54, 0.06) 14px 15px),
    var(--color-surface-tint);
}

/* =========================================================================
   ANNOUNCEMENT BAR
   ========================================================================= */
.announcement-bar {
  background: var(--color-primary);   /* lighter brown #6c4d39 */
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.announcement-bar[hidden] { display: none; }
.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 38px;
}
.announcement-text {
  flex: 1 1 auto;               /* arrows stay put while the messages rotate */
  margin: 0;
  min-width: 0;
  text-align: center;
  transition: opacity 0.25s ease;
}
.announcement-text.is-changing { opacity: 0; }
.announcement-arrow {
  border: 0;
  background: none;
  padding: 0.25rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  line-height: 1;
}
.announcement-arrow:hover { color: var(--color-accent); }

/* Desktop: all messages side by side with icons. Phones and tablets keep one rotating line. */
.announcement-list {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.announcement-list li {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.6rem;
  line-height: 1.2;
}
.announcement-list li + li { border-left: 1px solid rgba(255, 255, 255, 0.35); }
.announcement-list i { font-size: 1rem; color: var(--color-accent); }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .announcement-list li { padding: 0 0.9rem; font-size: 0.78rem; }       /* three messages still fit on one line */
}
@media (min-width: 992px) {
  .announcement-bar.has-list .announcement-list { display: flex; flex-wrap: nowrap; }
  .announcement-bar.has-list .announcement-text,
  .announcement-bar.has-list .announcement-arrow { display: none; }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); }
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header .navbar {
  min-height: var(--header-height);
  padding-block: 0.75rem;
  transition: padding var(--transition);
}
.site-header.is-scrolled .navbar { padding-block: 0.4rem; }

/* Brand / logo with text fallback */
/* Brand: logo image + "House of Spices" wordmark side by side */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}
.brand-logo { height: 44px; width: auto; }
.brand-text {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* If the logo file is missing, only the text shows */
.brand--text .brand-logo { display: none; }

/* Full-width header: logo (far left) | centred nav | actions (far right) */
.navbar > .header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand nav actions";
  align-items: center;
  padding-inline: clamp(16px, 3vw, 48px);
}
.header-brand { grid-area: brand; justify-self: start; }
.header-nav { grid-area: nav; justify-self: center; }
.header-actions {
  grid-area: actions;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.header-toggle { grid-area: toggle; }

.navbar-nav { gap: 0.25rem; }

.navbar-nav .nav-link {
  position: relative;
  padding: 0.5rem 1rem !important;
  font-family: var(--font-body);             /* same clean font as the rest of the site's labels */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-primary-dark);
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--color-primary); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler { border: 0; box-shadow: none !important; font-size: 1.6rem; }


/* Header action icons: plain outlined circles, one consistent style */
.header-actions { gap: 0.6rem !important; }
.header-actions .icon-btn {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 1.05rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.header-actions .icon-btn:hover,
.header-actions .icon-btn:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  border: 2px solid #fff;
  line-height: 14px;
}

/* Cart entry inside the mobile menu */
.nav-cart-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 0.5rem;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

/* Search panel */
.search-panel {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 1rem 0 1.25rem;
}
.search-panel-form,
.mobile-search {
  position: relative;
  display: flex;
  align-items: center;
}
.search-panel-form > .bi-search,
.mobile-search > .bi-search {
  position: absolute;
  left: 1.1rem;
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-panel-form .form-control,
.mobile-search .form-control {
  height: 50px;
  padding-left: 2.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 0.98rem;
}
.search-panel-form .form-control:focus,
.mobile-search .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(237, 184, 54, 0.15);
}
.search-panel-form .icon-btn { margin-left: 0.5rem; }

.search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-width: calc(100% - 50px);
}
.search-results:empty { display: none; }
.search-results a,
.search-results .search-empty {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.search-results a:hover { background: var(--color-surface-tint); }
.search-results small,
.search-empty { color: var(--color-text-muted); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { background: var(--color-primary-dark); }

/* Banner: the text sits on the left of the photo.
   Dark photo (the default): white text on a soft dark fade, no cream.
   Light photo: dark text on a cream fade. app.js looks at each photo and adds
   .is-light-photo to the slide when the area behind the text is light. */
.hero-slide {
  position: relative;
  /* Desktop banner: at most 500px tall so it doesn't take over the screen */
  aspect-ratio: 2.4 / 1;
  min-height: 430px;
  max-height: 500px;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-primary-dark);
}
.hero-slide.has-missing-image::after { display: none; } /* keep hero clean */

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;  /* keep the photo subject (right side) in view when cropped */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38, 26, 19, 0.72) 0%, rgba(38, 26, 19, 0.5) 38%, rgba(38, 26, 19, 0) 68%);
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
}
.hero-content > * { max-width: 520px; }
.hero-content .hero-text { max-width: 440px; }   /* keep description clear of the photo */
.hero-content .eyebrow { color: var(--color-accent); margin-bottom: 0.6rem; }

.hero-title {
  line-height: 1.1;
  font-size: clamp(2.1rem, 1.25rem + 2.5vw, 3.5rem);
  font-weight: 600;          /* lighter than before (was 700) */
  color: #fff;
  margin-bottom: 1rem;
}
.hero-title .title-accent { display: block; font-weight: 600; }   /* gold phrase on its own line */
.hero-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.6rem;
}
.hero-content .btn i { margin-left: 0.5rem; font-size: 0.8em; }

/* Light photo: cream fade and dark text */
.hero-slide.is-light-photo { background-color: var(--color-hero); }
.hero-slide.is-light-photo .hero-overlay {
  background: linear-gradient(90deg, rgb(247, 240, 227) 0%, rgb(247, 240, 227) 30%, rgba(247, 240, 227, 0.82) 42%, rgba(247, 240, 227, 0) 60%);
}
.hero-slide.is-light-photo .hero-content { color: var(--color-text); }
.hero-slide.is-light-photo .hero-content .eyebrow { color: var(--color-accent-dark); }
.hero-slide.is-light-photo .hero-title { color: var(--color-primary-dark); }
.hero-slide.is-light-photo .hero-title .title-accent { color: #c9962a; }
.hero-slide.is-light-photo .hero-text { color: #5c4d45; }

/* ---------- Hero animation: text rising in (the photo stays still) ----------
   Switched on by the class "hero--animated" on <div id="heroCarousel"> in index.html.
   Remove that class to switch it off. Devices set to "reduce motion" get no movement.
   The slides change by themselves (timing: data-bs-interval in index.html). */
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Photo movement is off: only the text animates. To bring the slow photo movement back,
   uncomment the two rules below.
.hero--animated .hero-img { transform-origin: 75% 50%; will-change: transform; }
.hero--animated .carousel-item.active .hero-img {
  animation: heroZoom 6s ease-out both;
}
*/
.hero--animated .carousel-item.active .hero-content > * {
  animation: heroRise 0.8s ease-out both;
}
.hero--animated .carousel-item.active .hero-content > :nth-child(1) { animation-delay: 0.25s; }
.hero--animated .carousel-item.active .hero-content > :nth-child(2) { animation-delay: 0.4s; }
.hero--animated .carousel-item.active .hero-content > :nth-child(3) { animation-delay: 0.55s; }
.hero--animated .carousel-item.active .hero-content > :nth-child(4) { animation-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
  .hero--animated .carousel-item.active .hero-img,
  .hero--animated .carousel-item.active .hero-content > * { animation: none; }
}

/* Gentle slower fade than Bootstrap's default */
.carousel-fade .carousel-item { transition-duration: 0.9s; }

.carousel-indicators { margin-bottom: 1.25rem; }
.carousel-indicators [data-bs-target] {
  width: 28px;
  height: 2px;
  border: 0;
  margin-inline: 4px;
  background-color: #cdbfb0;                 /* visible on dark and on light photos */
  opacity: 0.75;
}
.carousel-indicators .active { opacity: 1; background-color: var(--color-accent); }

.carousel-control-prev,
.carousel-control-next { width: 5%; opacity: 1; }
.hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  opacity: 0.85;
  transition: opacity var(--transition), background-color var(--transition);
}
.carousel-control-prev:hover .hero-arrow,
.carousel-control-next:hover .hero-arrow { opacity: 1; background: #fff; }

/* =========================================================================
   TRUST BAR
   ========================================================================= */
.trust-bar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.trust-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
}
.trust-item + .trust-item::before {          /* short divider between items */
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: #ddd3c5;
}
.trust-item > i {
  flex-shrink: 0;
  font-size: 2.1rem;
  line-height: 1;
  color: #d9a431;
}
.trust-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
}
.trust-item span {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section { padding-block: var(--section-space); }
.section-tinted { background: var(--color-surface-tint); }

.section-head { margin-bottom: 2.75rem; }
.section-head.text-center { max-width: 640px; margin-inline: auto; }
.section-head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.empty-state { color: var(--color-text-muted); }

/* Dark cocoa section (used for the product showcase) */
.section-dark {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.8);
}
.section-dark .section-title { color: #fff; }
.section-dark .title-accent { color: var(--color-accent); }
.section-dark .eyebrow { color: var(--color-accent); }
.section-dark .category-card { border-color: transparent; }
.section-dark .category-card:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3); }

/* ---------- Category cards: photo on top, name and a round arrow below ---------- */
.section--categories { padding-top: 2.75rem; padding-bottom: 3.5rem; }
.section--categories .section-head { margin-bottom: 1.5rem; align-items: flex-end; }
.section--categories .section-title { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); }
.section-head .link-arrow { white-space: nowrap; font-weight: 500; color: var(--color-primary); }
.section-head .link-arrow:hover { color: var(--color-accent-dark); }

.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  color: var(--color-text);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.category-card:hover {
  color: var(--color-text);
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.category-media { aspect-ratio: 4 / 3; }
.category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.category-card:hover .category-media img { transform: scale(1.04); }

.category-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-grow: 1;
  padding: 0.85rem 0.95rem;
}
.category-body h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-primary);
}
.category-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--color-primary-dark);
  transition: background-color var(--transition), color var(--transition);
}
.category-card:hover .category-arrow { background: var(--color-primary-dark); color: #fff; }

/* ---------- Product cards ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid #dcd6cf;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover { border-color: #cfc6bc; box-shadow: var(--shadow); }

.product-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-media img { transform: scale(1.03); }

.product-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.1rem 0 0;
}
.product-name {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}
.product-name a { color: var(--color-primary); }
.product-name a:hover { color: var(--color-primary-dark); }
.product-local {
  margin: -0.15rem 0 0.35rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-accent-dark);
}
.detail-local {
  margin: -0.25rem 0 0.6rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent-dark);
}
.product-descriptor {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price {
  margin-bottom: 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
}
.product-price.is-on-request { font-size: 0.94rem; }
.product-category {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-text);
}

/* Pack-size selector */
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.size-pill {
  padding: 0.3rem 0.8rem;
  border: 1px solid #e3ded8;
  border-radius: var(--radius-pill);
  background: #f4f2ef;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.size-pill:hover { border-color: var(--color-primary); }
.size-pill.is-active,
.size-pill.is-static {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* Compact size dropdown: used on phone-sized product cards instead of the buttons.
   Same soft look as the size buttons, one tidy row. */
.size-select {
  display: none;
  margin-bottom: 1rem;
  min-height: 42px;
  padding-left: 0.9rem;
  border: 1px solid #e3ded8;
  border-radius: 10px;
  background-color: #f4f2ef;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}
.size-select:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(108, 77, 57, 0.15);
}

/* Size choice + buttons. On wide screens this wrapper is invisible to layout;
   on phones it becomes one compact row (see responsive.css). */
.product-buy { display: contents; }
.btn-add-icon { display: none; }

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: auto;
}
.product-actions .btn {
  --bs-btn-border-radius: 6px;
  --bs-btn-padding-y: 0.6rem;
  white-space: nowrap;
}
.product-actions .btn-outline-brand {
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-color: #fff;
}

/* ---------- Category tabs above the products ---------- */
.product-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: -0.75rem 0 2.5rem;
}
.product-tab {
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: transparent;
  font-size: 0.92rem;
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.product-tab:hover { background: var(--color-primary-soft); }
.product-tab.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Product slider ---------- */
.product-slider { position: relative; }

.slider-track {
  --slide-gap: 24px;
  --per-view: 4;
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  transition: opacity 0.18s ease;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track.is-switching { opacity: 0; }
.slider-track:focus-visible { outline-offset: 6px; }

.slider-item {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  scroll-snap-align: start;
}

.slider-arrow {
  position: absolute;
  top: 38%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e6e1db;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-50%);
  transition: opacity var(--transition), background-color var(--transition), color var(--transition);
}
.slider-arrow:hover { background: var(--color-primary); color: #fff; }
.slider-arrow:disabled { opacity: 0; pointer-events: none; }
.slider-prev { left: -22px; }
.slider-next { right: -22px; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}
.slider-dots[hidden] { display: none; }
.slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #cfc8c1;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: width var(--transition), background-color var(--transition);
}
.slider-dot.is-active {
  width: 24px;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.product-grid { transition: opacity 0.18s ease; }
.product-grid.is-switching { opacity: 0; }

/* ---------- About ---------- */
.about-media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.about-copy .section-title { margin-bottom: 1.25rem; }

.check-list {
  list-style: none;
  margin: 1.75rem 0 2rem;
  padding: 0;
}
.check-list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.check-list li:first-child { border-top: 1px solid var(--color-border); }
.check-list i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1rem;
}
.check-list span { color: var(--color-text-muted); }
.check-list strong { color: var(--color-text); font-weight: 600; }

/* ---------- Why choose us: open layout with colour illustrations ---------- */
.feature-item {
  height: 100%;
  padding: 0 0.5rem;
  text-align: center;
}
.feature-illustration {
  display: flex;                             /* a block box, so no stray line gap is added under the circle */
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: var(--color-surface-tint);
  transition: transform var(--transition), background-color var(--transition);
}
.feature-illustration img { width: 64px; height: 64px; }
.feature-item:hover .feature-illustration {
  transform: translateY(-4px);
  background: var(--color-accent-soft);
}
.feature-item h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}
.feature-item p {
  max-width: 260px;
  margin: 0 auto;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* ---------- FAQ ---------- */
.faq-wrap {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.25rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--color-primary);
  --bs-accordion-btn-focus-box-shadow: none;
  border-top: 1px solid var(--color-border);
}
.faq-wrap .accordion-item { border-left: 0; border-right: 0; border-top: 0; }
.faq-wrap .accordion-button {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}
.faq-wrap .accordion-button:not(.collapsed) { box-shadow: none; color: var(--color-primary); }
.faq-wrap .accordion-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-wrap .accordion-body {
  padding-bottom: 1.4rem;
  max-width: 680px;
  color: var(--color-text-muted);
}

/* ---------- Bulk CTA ---------- */
.bulk-cta { padding-block: var(--section-space); }
.section:not(.section-tinted) + .bulk-cta { padding-top: 0; }  /* avoid double gap after a white section */
.bulk-cta-inner {
  display: flex;
  flex-direction: column;                    /* text and buttons on the left, photo on the right */
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  min-height: 300px;
  padding: 3rem 4rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e6d3a3;                 /* white panel with a gold edge: no brown block, no cream */
  background: #fff;
  box-shadow: 0 14px 40px rgba(64, 46, 44, 0.08);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}
/* Fine gold keyline for a premium finish */
.bulk-cta-inner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 164, 49, 0.45);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
}
/* Spice photo on the right, fading into the white panel. The file is assets/banners/wholesale-banner-2.webp:
   replace that file to change the photo (bowls on the right, plain light background). */
.bulk-cta-inner::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  bottom: 11px;
  width: min(50%, 640px);
  border-radius: 0 calc(var(--radius-lg) - 7px) calc(var(--radius-lg) - 7px) 0;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 38%),
    url("../assets/banners/wholesale-banner-2.webp") right center / cover no-repeat;
  pointer-events: none;
}
.bulk-cta-copy { max-width: 520px; position: relative; z-index: 1; }
.bulk-cta-copy h2 {
  color: var(--color-primary-dark);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem);
  margin-bottom: 0.75rem;
}
.bulk-cta-copy p:last-child { color: #5c4d45; margin: 0; }
.bulk-cta-copy .eyebrow,
.bulk-cta-copy .title-accent { color: var(--color-accent-dark); }
/* Buttons on the light panel: solid brown first, brown outline second */
.bulk-cta-actions .btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-accent-dark);
  --bs-btn-border-color: var(--color-accent-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7d590e;
  --bs-btn-hover-border-color: #7d590e;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7d590e;
  --bs-btn-active-border-color: #7d590e;
  box-shadow: 0 8px 18px rgba(154, 110, 18, 0.25);
}
.bulk-cta-actions .btn { display: inline-flex; align-items: center; gap: 0.55rem; background-color: var(--bs-btn-bg); }
.bulk-cta-actions .btn-outline-light-soft { --bs-btn-bg: #fff; }
.bulk-cta-actions .btn-outline-light-soft {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
}
.bulk-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  padding-top: 4.5rem;
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--color-accent); }

.brand-footer { margin-bottom: 1.1rem; }
.brand-footer .brand-text { color: #fff; font-weight: 600; }   /* white on dark looks heavier, so one step lighter than the header */
.footer-about { max-width: 340px; }

.footer-title {
  margin-bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.footer-links,
.footer-contact,
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li + li { margin-top: 0.55rem; }

.footer-contact li {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.footer-contact i { color: var(--color-accent); margin-top: 0.15rem; }
.footer-contact .is-placeholder { color: rgba(255, 255, 255, 0.42); font-style: italic; }

.social-links { display: flex; gap: 0.5rem; margin-top: 1.4rem; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.social-links a:hover { border-color: var(--color-accent); background: rgba(237, 184, 54, 0.1); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
}
.footer-bottom p { margin: 0; }
.footer-note { color: rgba(255, 255, 255, 0.45); }
/* "Powered by" credit: its own centred line under the copyright row */
.footer-powered { flex: 0 0 100%; text-align: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); }
.footer-powered a { color: rgba(255, 255, 255, 0.7); text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: var(--color-accent); }

/* =========================================================================
   CART DRAWER
   ========================================================================= */
.cart-drawer {
  --bs-offcanvas-width: 420px;
  background: var(--color-bg);
}
.cart-drawer .offcanvas-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer .offcanvas-title { font-size: 1.45rem; margin: 0; }
.cart-drawer .offcanvas-body { padding: 0 1.5rem; }

.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb.has-missing-image::after { content: ""; } /* too small for a path label */

.cart-name { margin: 0 0 0.15rem; font-weight: 500; font-size: 0.95rem; }
.cart-meta { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--color-text-muted); }

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.qty-control button {
  width: 32px;
  height: 30px;
  border: 0;
  background: none;
  color: var(--color-text);
}
.qty-control span { min-width: 24px; text-align: center; font-size: 0.9rem; font-weight: 500; }

.cart-remove {
  border: 0;
  background: none;
  padding: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.cart-remove:hover { color: var(--color-text); }

.cart-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}
.cart-empty[hidden] { display: none; }
.cart-empty > i { font-size: 2.2rem; color: var(--color-accent); }
.cart-empty p { margin: 0.75rem 0 1.25rem; }

.cart-footer {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.cart-summary strong { font-size: 1.1rem; font-weight: 600; color: var(--color-primary); }
.cart-note { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.cart-clear {
  display: block;
  margin: 0.5rem auto 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.cart-clear:hover { color: var(--color-text); }

/* ---------- Toast ---------- */
.site-toast {
  border: 0;
  border-radius: var(--radius);
  background: var(--color-text);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.site-toast .bi-check-circle { color: var(--color-accent); }
.site-toast .btn-close { filter: invert(1); opacity: 0.6; }

/* ---------- Decorative spice illustrations (see initSpiceDecor) ---------- */
.section-decor { position: relative; overflow: hidden; }
.section-decor > .container { position: relative; z-index: 1; }
.spice-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.spice-decor img {
  position: absolute;
  width: var(--decor-size, 60px);
  height: auto;
  opacity: 0.2;
  transform: translate(-50%, -50%) rotate(var(--decor-rotate, 0deg));
}
.spice-decor img.is-missing { display: none; }

/* =========================================================================
   INNER PAGES (products, about, contact)
   ========================================================================= */
/* Light cream page header for inner pages (keeps brown for accents only) */
.page-hero {
  padding: 3.25rem 0 2.75rem;
  background: var(--color-surface-tint);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.page-hero--compact { padding: 1rem 0; }
.page-hero--compact .breadcrumb-trail { margin: 0; }

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.breadcrumb-trail li { color: var(--color-text-muted); }
.breadcrumb-trail li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: #c9c0b6;
}
.breadcrumb-trail a { color: var(--color-text); }
.breadcrumb-trail a:hover { color: var(--color-primary); }
.breadcrumb-trail [aria-current] { color: var(--color-accent-dark); }

.page-title {
  margin-bottom: 0.6rem;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 600;
  color: var(--color-text);
}
.page-intro {
  max-width: 640px;
  margin: 0;
  font-size: 1.02rem;
}

/* ---------- Catalogue ---------- */
.catalogue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}
.catalogue-tabs { margin: 0; justify-content: flex-start; }
.tab-count {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  font-size: 0.75rem;
  color: var(--color-primary);
  text-align: center;
}
.product-tab.is-active .tab-count { background: rgba(255, 255, 255, 0.2); color: #fff; }

.catalogue-controls { display: flex; gap: 0.75rem; }
.catalogue-search { position: relative; }
.catalogue-search > i {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.catalogue-search .form-control { width: 240px; padding-left: 2.4rem; }
.catalogue-sort { width: auto; min-width: 190px; }

.catalogue-controls .form-control,
.catalogue-controls .form-select,
.quote-form .form-control {
  height: 44px;
  border-color: #dcd6cf;
  border-radius: 6px;
  font-size: 0.92rem;
}
.quote-form textarea.form-control { height: auto; }
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(108, 77, 57, 0.15);
}

.catalogue-count {
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.catalogue-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}
.catalogue-empty > i { font-size: 2rem; color: var(--color-accent); }
.catalogue-empty p { margin: 0.75rem 0 1.25rem; }

/* ---------- Product detail ---------- */
.detail-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; }

.detail-category {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.detail-name {
  margin-bottom: 0.5rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-primary);
}
.detail-descriptor { color: var(--color-text-muted); margin-bottom: 1rem; }
.detail-price { font-size: 1.5rem; margin-bottom: 1.5rem; }
.detail-price.is-on-request { font-size: 1.2rem; }

.detail-block { margin-bottom: 1.4rem; }
.detail-block .size-options { margin-bottom: 0; }
.detail-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dcd6cf;
  border-radius: 6px;
  overflow: hidden;
}
.qty-stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--color-surface-tint);
  color: var(--color-text);
  font-size: 1.1rem;
}
.qty-stepper button:hover { background: var(--color-primary-soft); }
.qty-stepper input {
  width: 56px;
  height: 44px;
  border: 0;
  text-align: center;
  font-family: inherit;
  font-weight: 400;
  color: var(--color-text);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
/* Compact buttons: as wide as their label, not stretched across the column */
.detail-actions .btn {
  flex: 0 0 auto;
  min-width: 168px;
  --bs-btn-border-radius: 6px;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-size: 0.9rem;
}
.detail-actions .btn-accent { --bs-btn-font-weight: 600; }

/* WhatsApp button: a quiet outlined button in the brand brown. Only the small
   WhatsApp mark is green, so the page is not dominated by a block of green. */
.btn-whatsapp {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-font-weight: 500;
}
/* The WhatsApp buttons show the green WhatsApp icon from assets/icons/whatsapp.webp
   in place of the line icon. Replace that file to change the icon. */
.btn-whatsapp .bi-whatsapp,
.bulk-cta-actions .bi-whatsapp {
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.1em;
  background: url("../assets/icons/whatsapp.webp") center / contain no-repeat;
  vertical-align: -0.42em;
}
.btn-whatsapp .bi-whatsapp::before,
.bulk-cta-actions .bi-whatsapp::before { content: none; }

.detail-note {
  margin: 0.35rem 0 1.25rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.detail-wholesale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.5rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text);
}
.detail-wholesale i { color: var(--color-accent-dark); }
.product-wholesale-note {
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.cart-line-total {
  display: inline-block;
  margin-left: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  vertical-align: middle;
}

.detail-uses {
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
}
.detail-uses h2 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.35rem; }
.detail-uses p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

.detail-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.detail-points i { color: var(--color-accent-dark); margin-right: 0.3rem; }

.related { margin-top: var(--section-space); }

/* ---------- About page ---------- */
.audience-card {
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  box-shadow: 0 6px 20px rgba(74, 51, 37, 0.06);
}
.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-size: 1.6rem;
}
.audience-card h3 { font-size: 1.05rem; font-weight: 500; color: var(--color-primary); }
.audience-card p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

.approach-list { margin: 0; padding: 0; list-style: none; }
.approach-list li {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.approach-list li:first-child { border-top: 1px solid var(--color-border); }
.approach-num {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: #dea32a;
}
.approach-list h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.25rem; }
.approach-list p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

/* ---------- Contact page ---------- */
.contact-panel {
  /* Only as tall as its content, so no empty block under it next to the longer form */
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  background: var(--color-surface-tint);
}
.contact-panel-title { font-size: 1.15rem; font-weight: 500; margin-bottom: 1.25rem; }
.contact-list { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.contact-list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.contact-list i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
}
.contact-list span { align-self: center; }
.contact-list .is-placeholder { color: var(--color-text-muted); font-style: italic; }
.contact-note {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.contact-note i { color: var(--color-accent-dark); }
.contact-note p { margin: 0; }

.quote-card {
  padding: 2.25rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  scroll-margin-top: calc(var(--header-height) + 20px);
}
.quote-title { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.35rem; }
.quote-intro { color: var(--color-text-muted); margin-bottom: 1.75rem; }
.quote-form .form-label { font-size: 0.88rem; font-weight: 500; margin-bottom: 0.4rem; }
.req { color: #c8362b; }
.opt { font-weight: 400; color: var(--color-text-muted); }

.choice-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; cursor: pointer; margin: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid #dcd6cf;
  border-radius: 6px;
  font-size: 0.88rem;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.choice:hover span { border-color: var(--color-primary); }
.choice input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.choice input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.cart-import { font-size: 0.85rem; color: var(--color-primary); text-decoration: none; }
.form-hint { color: var(--color-text-muted); }

.form-success { padding: 2rem 0 0.5rem; text-align: center; }
.form-success > i { font-size: 2.6rem; color: #25d366; }
.form-success h3 { margin: 0.75rem 0 0.5rem; font-weight: 500; }
.form-success p { max-width: 520px; margin: 0 auto 1.25rem; color: var(--color-text-muted); }
.form-preview {
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
  font-size: 0.82rem;
  text-align: left;
  white-space: pre-wrap;
  color: var(--color-text);
}

/* =========================================================================
   RESTRAINED MOTION
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================================
   CUSTOMER ACCOUNTS: header button, login / sign up popup, My Account page
   ========================================================================= */
/* Desktop account menu under the person icon */
.account-dropdown { position: relative; }
.account-menu {
  --bs-dropdown-min-width: 220px;
  --bs-dropdown-padding-y: 0.4rem;
  --bs-dropdown-border-color: var(--color-border);
  --bs-dropdown-border-radius: var(--radius-sm);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--color-surface-tint);
  --bs-dropdown-link-hover-color: var(--color-primary);
  --bs-dropdown-link-active-bg: var(--color-surface-tint);
  --bs-dropdown-link-active-color: var(--color-primary);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.55rem;
  --bs-dropdown-font-size: 0.9rem;
  box-shadow: 0 14px 34px rgba(64, 46, 44, 0.14);
}
.account-menu-head { display: flex; flex-direction: column; padding: 0.5rem 1rem 0.65rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--color-border); }
.account-menu-head strong { font-size: 0.92rem; font-weight: 500; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head small { font-size: 0.78rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .dropdown-item { display: flex; align-items: center; gap: 0.65rem; }
.account-menu .dropdown-item i { width: 1.1rem; color: var(--color-accent-dark); }
.account-menu .dropdown-divider { margin: 0.3rem 0; border-color: var(--color-border); opacity: 1; }

.header-actions .icon-btn--account.is-signed-in {
  background: var(--color-primary);
  color: #fff;
}
.account-initial {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Popup ---------- */
.auth-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.auth-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
}
.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2.25rem;
  background: var(--color-surface-tint);
  border-right: 1px solid var(--color-border);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.auth-brand .brand-logo { height: 38px; width: auto; }
.auth-aside-title {
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  color: var(--color-primary-dark);
}
.auth-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: var(--color-text);
}
.auth-benefits li { display: flex; gap: 0.6rem; align-items: flex-start; }
.auth-benefits i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 0.85rem;
}
.auth-main {
  position: relative;
  padding: 2.5rem 2.25rem 2rem;
}
.auth-close { position: absolute; top: 1rem; right: 1rem; }
.auth-tabs {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-tint);
}
.auth-tab {
  border: 0;
  background: transparent;
  padding: 0.45rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background-color var(--transition), color var(--transition);
}
.auth-tab.is-active {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.auth-title { font-size: 1.25rem; margin-bottom: 0.35rem; color: var(--color-primary); }
.auth-sub { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 500;
  color: var(--color-text);
}
.auth-google:hover { border-color: var(--color-primary); background: var(--color-surface-tint); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth-field { margin-bottom: 0.9rem; }
.auth-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.auth-field .form-control { min-height: 44px; border-radius: var(--radius-sm); }
.auth-password { position: relative; }
.auth-password .form-control { padding-right: 2.75rem; }
.auth-eye {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}
.auth-hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--color-text-muted); }
.auth-link {
  border: 0;
  padding: 0;
  background: none;
  font-size: inherit;
  font-weight: 500;
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link:hover { color: var(--color-primary); }
.auth-forgot { display: block; margin: 0.4rem 0 0 auto; font-size: 0.82rem; }
/* "Back to log in": same small size as the other links, and only the words are underlined */
.auth-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.86rem; text-decoration: none; }
.auth-back span { text-decoration: underline; text-underline-offset: 3px; }
.auth-msg .auth-link { font-size: inherit; color: inherit; }
.auth-form .auth-msg { margin-bottom: 0.75rem; }      /* breathing room above the button */
.auth-submit { min-height: 46px; margin-top: 0.25rem; }
.auth-switch { margin: 1.1rem 0 0; text-align: center; font-size: 0.88rem; color: var(--color-text-muted); }
.auth-powered { margin: 1.25rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--color-border); text-align: center; font-size: 0.74rem; color: var(--color-text-muted); }
.auth-powered a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.auth-msg,
.account-msg,
.form-error {
  margin: 0.75rem 0 0.25rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.auth-msg.is-error,
.account-msg.is-error,
.form-error { background: #fbeaea; color: #8a2a2a; }
.auth-msg.is-success,
.account-msg.is-success { background: #eef3e2; color: #4c5a1c; }

/* ---------- My Account page ---------- */
.account-card {
  height: 100%;
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.account-card h2 { font-size: 1.25rem; margin: 0; color: var(--color-primary-dark); }
.account-logout { padding: 0; font-size: 0.88rem; color: var(--color-text-muted); text-decoration: none; }
.account-logout:hover { color: var(--color-primary); }
.account-email { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }
.account-email i { margin-right: 0.35rem; }
.account-form .form-label { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.account-form .opt { font-weight: 400; color: var(--color-text-muted); }
.account-form .form-control,
.account-form .form-select { min-height: 44px; border-radius: var(--radius-sm); }
.account-loading { color: var(--color-text-muted); }
.account-empty,
.account-none {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}
.account-empty > i { font-size: 3rem; color: var(--color-primary); }
.account-empty h2 { font-size: 1.5rem; margin: 0.75rem 0 0.5rem; }
.account-empty p { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.account-none { padding: 2rem 0 1rem; }
.account-none p { margin-bottom: 0.5rem; }
.account-reset { max-width: 460px; margin: 0 auto; height: auto; }
.account-reset h2 { margin-bottom: 1rem; }
.enquiry-list { list-style: none; padding: 0; margin: 0; }
.enquiry { padding: 1rem 0; border-top: 1px solid var(--color-border); }
.enquiry:first-child { border-top: 0; padding-top: 0.25rem; }
.enquiry-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.enquiry-date { margin: 0.15rem 0 0.5rem; font-size: 0.8rem; color: var(--color-text-muted); }
.enquiry-status {
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
}
.enquiry-status.is-won { background: #eef3e2; color: #4c5a1c; }
.enquiry-status.is-lost,
.enquiry-status.is-spam { background: var(--color-surface-tint); color: var(--color-text-muted); }
.enquiry-items { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.enquiry-items li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.enquiry-items span { color: var(--color-text-muted); white-space: nowrap; }
.enquiry-msg {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
   ABOUT: spice bowls animation
   The rings, dots and background never move. Only the bowls animate:
   they appear one by one (centre first, then clockwise), rest, fade and repeat.
   One loop is 4.5 s: about 1.4 s to appear, 2 s rest, 0.65 s fade, short pause.
   Each bowl image carries its own soft shadow.
   Images: assets/about/spice-loop/
   ========================================================================= */
.about-media.about-media--spices {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #fdfbf7;              /* exactly the cream of rings.webp, so no edge shows */
  overflow: hidden;
}
.spice-loop {
  position: relative;
  width: 100%;
  max-width: 510px;                 /* native size of the artwork: never scaled up */
  aspect-ratio: 510 / 494;
  isolation: isolate;
}
.spice-loop .spice-layer {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.spice-loop .spice-rings { inset: 0; width: 100%; height: 100%; }          /* static */
.spice-loop .spice-bowl { height: auto; transform-origin: 50% 50%; }
.spice-loop .spice-bowl {
  animation-duration: 4500ms;          /* one full loop */
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.spice-loop .spice-chilli { left: 35.4902%; top: 36.2348%; width: 28.4314%; animation-name: spice-chilli; }
.spice-loop .spice-cardamom { left: 35.8824%; top: 12.5506%; width: 28.4314%; animation-name: spice-cardamom; }
.spice-loop .spice-mustard { left: 55.4902%; top: 25.1012%; width: 28.4314%; animation-name: spice-mustard; }
.spice-loop .spice-cumin { left: 55.0980%; top: 47.9757%; width: 28.4314%; animation-name: spice-cumin; }
.spice-loop .spice-turmeric { left: 35.0980%; top: 59.5142%; width: 28.4314%; animation-name: spice-turmeric; }
.spice-loop .spice-coriander { left: 15.0980%; top: 47.7733%; width: 28.4314%; animation-name: spice-coriander; }
.spice-loop .spice-clove { left: 15.2941%; top: 24.4939%; width: 28.4314%; animation-name: spice-clove; }
@keyframes spice-chilli {
  0% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  11.556%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-cardamom {
  0%, 3.333% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  14.889%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-mustard {
  0%, 6.667% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  18.222%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-cumin {
  0%, 10% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  21.556%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-turmeric {
  0%, 13.333% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  24.889%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-coriander {
  0%, 16.667% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  28.222%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes spice-clove {
  0%, 20% { opacity: 0; transform: scale(0.92); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  31.556%, 77.778% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  92.222% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
/* Visitors who prefer less motion see the finished picture, with no animation */
@media (prefers-reduced-motion: reduce) {
  .spice-loop .spice-bowl { animation: none; }
}

/* =========================================================================
   MY ACCOUNT (account.html) and CHECKOUT (checkout.html)
   Tinted page, white panels. Drawn by js/account.js.
   ========================================================================= */
.page-hero--slim { padding: 1.4rem 0 1.2rem; }
.page-hero--slim .page-title { margin: 0; font-size: 1.6rem; }

.account-section,
.checkout-section { padding-block: 2rem 4rem; background: var(--color-surface-tint); }
.account-section .account-empty,
.checkout-section .account-empty {
  max-width: 560px;
  padding: 3rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ---------- Layout: side menu + content ---------- */
.account-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.account-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e4dccf;
}
.account-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);   /* same font as the round initial in the header */
  font-size: 1.15rem;
  font-weight: 600;
}
.account-user-text { min-width: 0; }
.account-user-text strong { font-weight: 600; }
.account-user-text strong,
.account-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-user-text small { color: var(--color-text-muted); }

.account-nav { display: flex; flex-direction: column; gap: 0.1rem; }
.account-nav-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.1rem;
  padding: 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.account-nav-group i,
.account-nav-link i { width: 1.1rem; color: var(--color-accent-dark); }
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
}
.account-nav-sub { padding-left: 1.95rem; font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); }
.account-nav-sub > i,
.account-nav-hint,
.account-back { display: none; }          /* used by the phone cards only (responsive.css) */
.account-nav-link:hover { color: var(--color-primary); }
.account-nav-link.is-active { color: var(--color-accent-dark); font-weight: 600; }
.account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
}
.account-nav-logout { margin-top: 0.5rem; padding-top: 0.9rem; border-top: 1px solid #e4dccf; color: var(--color-text-muted); }

.account-panel {
  padding: 1.5rem 1.75rem 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.account-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.account-panel-head h2 { margin: 0; font-size: 1.2rem; }
.account-panel-head p { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--color-text-muted); }
.account-panel .account-none > i { font-size: 2.4rem; color: #cdbfb0; }
.account-panel.account-reset { max-width: 460px; margin: 0 auto; }

/* ---------- Addresses ---------- */
.address-phone { color: var(--color-text-muted); }
.address-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--color-accent-dark);
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--color-accent-dark);
  white-space: nowrap;
}
.address-tag--alt { border-color: var(--color-primary); color: var(--color-primary); }
.address-tags .address-tag:first-child { margin-left: 0; }
.address-list { list-style: none; margin: 0; padding: 0; }
.address-item {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--color-border);
}
.address-item:first-child { border-top: 0; padding-top: 0; }
.address-item-text p { margin: 0 0 0.25rem; font-size: 0.92rem; }
.address-item-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.address-item-actions > div { display: flex; gap: 0.9rem; font-size: 0.9rem; }
.address-item-actions .btn { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.8rem; --bs-btn-font-size: 0.8rem; --bs-btn-border-radius: 4px; }

.address-modal .modal-title { font-size: 1.15rem; }
.address-modal .form-label { margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 500; }
.address-modal .form-control,
.address-modal .form-select,
.checkout-card .form-control,
.checkout-card .form-select { min-height: 44px; border-radius: var(--radius-sm); }
.checkout-card .form-label { margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 500; }
.address-defaults { display: grid; gap: 0.35rem; margin-top: 1rem; font-size: 0.9rem; }
.address-options { display: grid; gap: 0.6rem; }
.address-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
.address-option:has(input:checked) { border-color: var(--color-primary); background: #fffdf8; }
.address-option-text { flex: 1; min-width: 0; }

/* ---------- My Purchase ---------- */
.order-tabs {
  display: flex;
  margin-bottom: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.order-tabs::-webkit-scrollbar { display: none; }
.order-tab {
  flex: 1 0 auto;
  padding: 0.9rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 0.92rem;
  color: var(--color-text);
  white-space: nowrap;
}
.order-tab span { color: var(--color-accent-dark); }
.order-tab.is-active { border-bottom-color: var(--color-accent-dark); color: var(--color-accent-dark); font-weight: 600; }

.order-card {
  margin-bottom: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.order-date { margin-left: 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); }
.order-status { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-dark); white-space: nowrap; }
.order-status.is-completed { color: #4c5a1c; }
.order-status.is-cancelled { color: var(--color-text-muted); }
.order-items { list-style: none; margin: 0; padding: 0 1.25rem; }
.order-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.order-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-thumb.has-missing-image::after { content: ""; }
.order-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.order-item-text strong { font-size: 0.95rem; font-weight: 500; }
.order-item-text small { color: var(--color-text-muted); }
.order-item-price { font-weight: 500; white-space: nowrap; }
.order-foot { padding: 1rem 1.25rem 1.1rem; background: #fffdf8; }
.order-note { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--color-text-muted); }
.order-sums { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; margin: 0 0 0.5rem; }
.order-sums div { display: flex; align-items: baseline; gap: 1rem; }
.order-sums dt { font-size: 0.86rem; font-weight: 400; color: var(--color-text-muted); }
.order-sums dd { min-width: 110px; margin: 0; text-align: right; }
.order-total dd { font-size: 1.15rem; font-weight: 600; color: var(--color-primary); }
.order-total dd small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.order-ship { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--color-text-muted); }
.order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.order-actions .btn { --bs-btn-border-radius: 4px; min-width: 130px; }

/* ---------- Notifications ---------- */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice a { display: flex; gap: 0.9rem; padding: 0.9rem 0.5rem; border-top: 1px solid var(--color-border); color: var(--color-text); }
.notice:first-child a { border-top: 0; }
.notice a > i { font-size: 1.3rem; color: var(--color-accent-dark); }
.notice a > span { display: flex; flex-direction: column; font-size: 0.9rem; }
.notice small { margin-top: 0.15rem; color: var(--color-text-muted); }
.notice.is-unread a { background: #fffaf0; }
.notice.is-unread strong::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

/* ---------- Checkout ---------- */
.checkout { display: flex; flex-direction: column; gap: 0.9rem; }
.checkout-card {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.checkout-card h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.checkout-card--address { border-top: 3px solid var(--color-accent); }
.checkout-card--address h2 { color: var(--color-accent-dark); }
.checkout-card--address h2 i { margin-right: 0.35rem; }
.checkout-address { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.checkout-address-main { margin: 0; }
.checkout-address-text { margin: 0 0.5rem; }
.checkout-address--billing { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); font-size: 0.9rem; }
.checkout-label { color: var(--color-text-muted); }
.checkout-hint { font-size: 0.9rem; color: var(--color-text-muted); }
.checkout-same { margin: 1.1rem 0 0; font-size: 0.92rem; }
.checkout-billing-form { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--color-border); }
.checkout-billing-form h3 { margin-bottom: 0.9rem; font-size: 1rem; }

.checkout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 70px 130px 32px;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.checkout-row > span { text-align: right; }
.checkout-row--head { padding-top: 0; }
.checkout-row--head h2 { margin: 0; }
.checkout-row--head span { font-size: 0.86rem; color: var(--color-text-muted); }
.checkout-product { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.checkout-product > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.checkout-product strong { font-weight: 500; }
.checkout-product small { color: var(--color-text-muted); }
.checkout-line-total { font-weight: 600; }
.checkout-extra { padding-top: 1.1rem; }
.checkout-shipping p { display: flex; justify-content: space-between; margin: 0; }
.checkout-shipping small { color: var(--color-text-muted); }

.checkout-summary dl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; margin: 0 0 1rem; }
.checkout-summary dl div { display: flex; align-items: baseline; gap: 1.5rem; }
.checkout-summary dt { font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); }
.checkout-summary dd { min-width: 150px; margin: 0; text-align: right; }
.checkout-grand dd { font-size: 1.35rem; font-weight: 600; color: var(--color-primary); }
.checkout-pay-note { margin: 0; padding: 0.7rem 0.9rem; border-radius: 6px; background: var(--color-surface-tint); font-size: 0.86rem; color: var(--color-text-muted); }
.checkout-place {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.checkout-place .btn { min-width: 210px; --bs-btn-border-radius: 6px; }
.checkout-done > i { color: #5b7a2a; }

/* ---------- Mobile number: a fixed +60 box, then the number ---------- */
.phone-group { gap: 0.5rem; flex-wrap: nowrap; }
.phone-group > .input-group-text,
.phone-group > .form-control {
  border-radius: var(--radius-sm) !important;
  margin-left: 0 !important;
}
.phone-group > .input-group-text {
  min-width: 58px;
  justify-content: center;
  border-color: var(--bs-border-color);
  background: var(--color-surface-tint);
  font-weight: 500;
  color: var(--color-text-muted);
}
.phone-group > .form-control { flex: 1 1 auto; min-width: 0; }
.phone-group > .invalid-feedback { position: absolute; top: 100%; left: 0; }
.was-validated .phone-group:has(.form-control:invalid) { margin-bottom: 1.4rem; }

/* ---------- Save button with a short message beside it ---------- */
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.25rem; }
.account-note { font-size: 0.88rem; font-weight: 500; }
.account-note.is-success { color: #4c5a1c; }
.account-note.is-success::before { content: "\2713\00a0"; }
.account-note.is-error { color: #8a2a2a; }

/* ---------- Checkout: payment method ---------- */
.checkout-pay { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.checkout-pay h2 { margin: 0.45rem 0 0; }
.pay-options { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pay-option {
  position: relative;
  padding: 0.55rem 0.95rem;
  border: 1px solid #d9d0c3;
  border-radius: 4px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  transition: border-color var(--transition), color var(--transition);
}
.pay-option:hover { border-color: var(--color-primary); }
.pay-option.is-active { border-color: var(--color-primary); color: var(--color-primary); }
.pay-option.is-active::after {                 /* small corner tick, like a selected tag */
  content: "\2713";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 14px;
  padding-left: 5px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.6rem;
  line-height: 15px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.pay-detail {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.pay-detail-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1.3rem;
  color: var(--color-accent-dark);
}
.pay-detail-note { margin: 0.1rem 0 0; font-size: 0.86rem; color: var(--color-text-muted); }
.order-sums dd { font-size: 0.92rem; }
.order-total dd { font-size: 1.15rem; }

/* =========================================================================
   STAFF ORDERS PAGE (admin.html)
   ========================================================================= */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.9rem;
}
.admin-search { display: flex; flex: 1 1 320px; gap: 0.5rem; max-width: 520px; }
.admin-search .form-control { font-size: 0.92rem; }
.admin-bar-right { display: flex; align-items: center; gap: 0.75rem; }
.admin-updated { font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap; }
.admin .btn-sm { --bs-btn-border-radius: 4px; white-space: nowrap; }

.admin-order-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) minmax(120px, 1fr) 96px 1.2rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border: 0;
  background: none;
  text-align: left;
  color: var(--color-text);
}
.admin-order-head:hover { background: #fffdf8; }
.admin-order-head > span:not(.order-status) { display: flex; flex-direction: column; min-width: 0; }
.admin-order-head strong { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-order-head small { font-size: 0.8rem; color: var(--color-text-muted); }
.admin-order-pay strong { color: var(--color-primary); }
.admin-order-head .order-status { text-align: right; }
.order-status.is-pending { color: #b3401f; }
.admin-order-caret { color: var(--color-text-muted); transition: transform 0.2s ease; }
.admin-order.is-open .admin-order-caret { transform: rotate(180deg); }
.admin-order.is-open .admin-order-head { border-bottom: 1px solid var(--color-border); background: #fffdf8; }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  padding: 1.1rem 1.25rem;
}
.admin-block h3 {
  margin: 0 0 0.3rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-block p { margin: 0 0 0.9rem; font-size: 0.92rem; overflow-wrap: anywhere; }
.admin-muted { font-size: 0.84rem; font-weight: 400; color: var(--color-text-muted); }
.admin-note { padding: 0.6rem 0.8rem; border-left: 3px solid var(--color-accent); background: var(--color-surface-tint); white-space: pre-wrap; }
.admin-sums { align-items: stretch; margin-bottom: 1rem; }
.admin-sums div { justify-content: space-between; }

.admin-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-bottom: 0.6rem;
}
.admin-row label,
.admin-notes label { margin: 0; font-size: 0.86rem; font-weight: 500; }
.admin-row .form-control,
.admin-notes .form-control { font-size: 0.92rem; }
.admin-row--ship { grid-template-columns: 150px minmax(0, 1fr); }
.admin-row--ship .btn { grid-column: 2; justify-self: start; }

.admin-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0 1.25rem 1.1rem; }
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: #fffdf8;
}
.admin-actions-main { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.admin-actions .btn { min-width: 130px; }

/* =========================================================================
   CHECKOUT, NOT LOGGED IN: ways to continue (left) and order summary (right)
   ========================================================================= */
.checkout-gate {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.gate-main { padding: 1.75rem 1.9rem 1.9rem; }
.gate-main .eyebrow { margin-bottom: 0.4rem; font-size: 0.72rem; }
.checkout-card .gate-title { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 500; color: var(--color-primary); }
.gate-sub { margin: 0 0 1.25rem; font-size: 0.92rem; color: var(--color-text-muted); }
.gate-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.gate-option + .gate-option { margin-top: 0.75rem; }
.gate-option--main { border-color: #e6d3a3; background: #fffdf8; }
.gate-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-surface-tint);
  font-size: 1.25rem;
  color: var(--color-primary);
}
.gate-text { flex: 1; min-width: 0; }
.gate-text h3 { margin: 0 0 0.1rem; font-size: 1rem; font-weight: 500; color: var(--color-primary); }
.gate-text p { margin: 0; font-size: 0.86rem; color: var(--color-text-muted); }
.gate-option .btn { --bs-btn-border-radius: 6px; --bs-btn-font-size: 0.9rem; flex: none; min-width: 172px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.gate-option .btn-outline-brand { --bs-btn-border-color: var(--color-primary); }

.gate-summary { padding: 1.4rem 1.5rem; }
.gate-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--color-border); }
.checkout-card .gate-summary-head h2 { margin: 0; font-size: 1.05rem; color: var(--color-primary); }
.gate-summary-head span { font-size: 0.86rem; color: var(--color-text-muted); }
.gate-items { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.gate-items li { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.gate-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gate-item-text strong { font-size: 0.92rem; font-weight: 500; }
.gate-item-text small { font-size: 0.8rem; color: var(--color-text-muted); }
.gate-item-price { font-size: 0.92rem; font-weight: 500; white-space: nowrap; }
.gate-sums { margin: 0.9rem 0 0; }
.gate-sums div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.2rem 0; }
.gate-sums dt { font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); }
.gate-sums dd { margin: 0; font-size: 0.92rem; font-weight: 500; }
.gate-sums dd small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.gate-sums .gate-muted { font-weight: 400; color: var(--color-text-muted); }
.gate-sums .gate-total { margin-top: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.gate-total dt { font-size: 0.95rem; font-weight: 500; color: var(--color-primary); }
.gate-total dd { font-size: 1.15rem; font-weight: 600; color: var(--color-accent-dark); }

/* =========================================================================
   CHECKOUT AND ORDERS: compact, light typography (marketplace style)
   Regular weight for names and details, medium only for totals and the
   customer's name, and a smaller base size than the rest of the site.
   ========================================================================= */
.checkout-section { font-size: 0.9rem; }
.checkout-section .checkout-card h2 { font-size: 1.02rem; font-weight: 500; }
.checkout-address-main strong { font-weight: 600; }
.checkout-address .auth-link { font-size: 0.88rem; }
.checkout-row--head span { font-size: 0.82rem; }
.checkout-product strong { font-size: 0.92rem; font-weight: 400; color: var(--color-text); }
.checkout-product small { font-size: 0.82rem; }
.checkout-row > span { font-size: 0.9rem; }
.checkout-line-total { font-weight: 500; }
.checkout-delivery strong,
.checkout-extra p strong { font-weight: 500; }
.pay-option { font-size: 0.88rem; font-weight: 400; }
.pay-option.is-active { font-weight: 500; }
.pay-detail strong { font-weight: 500; }
.checkout-grand dd { font-size: 1.25rem; font-weight: 500; }
.checkout-section .gate-item-text strong { font-weight: 400; }
.checkout-section .gate-item-price,
.checkout-section .gate-sums dd { font-weight: 400; }
.checkout-section .gate-total dd { font-size: 1.1rem; font-weight: 500; }
.checkout-section .gate-text h3 { font-size: 0.95rem; }

/* My Purchase and the cart use the same lighter weights */
.order-item-text strong { font-size: 0.92rem; font-weight: 400; }
.order-item-price { font-weight: 400; }
.order-total dd { font-weight: 500; }
.cart-name { font-weight: 400; }
.cart-line-total { font-weight: 500; }
.cart-summary strong { font-weight: 500; }
.checkout-address--billing strong { font-weight: 500; }

/* ---------- Cancel order popup and the reason shown afterwards ---------- */
.cancel-reasons { margin: 0 0 0.5rem; padding: 0; border: 0; }
.cancel-reasons legend { margin-bottom: 0.6rem; font-size: 0.92rem; font-weight: 500; color: var(--color-text); }
.cancel-reason {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
}
.cancel-reason input { flex: none; width: 1rem; height: 1rem; accent-color: var(--color-primary); }
.cancel-reason:has(input:checked) { border-color: var(--color-primary); background: #fffdf8; }
.cancel-error { margin: 0 0 0.6rem; font-size: 0.84rem; color: #8a2a2a; }
.cancel-modal .form-label { margin-top: 0.5rem; }
.cancel-modal textarea.form-control { min-height: 0; }
.order-cancel-reason { margin: -0.2rem 0 0.7rem; font-size: 0.86rem; color: var(--color-text); overflow-wrap: anywhere; }
.order-cancel-reason span { color: var(--color-text-muted); }
.admin-note--cancel { border-left-color: #c8a79f; }
.admin-note--cancel strong { font-weight: 500; }

/* ---------- Changing a To Pay order: address or items ---------- */
.cancel-instead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0.2rem 0 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  background: #fff;
}
.cancel-instead p { flex: 1 1 220px; margin: 0; font-size: 0.86rem; color: var(--color-text); }
.cancel-instead .btn { --bs-btn-border-radius: 6px; flex: none; }
.edit-items { list-style: none; margin: 0; padding: 0; }
.edit-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 84px 32px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.edit-item .order-thumb { width: 48px; height: 48px; }
.edit-item-text { display: flex; flex-direction: column; min-width: 0; }
.edit-item-text strong { font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
.edit-item-text small { font-size: 0.8rem; color: var(--color-text-muted); }
.edit-item-qty { height: 36px; }
.edit-item-qty button { width: 32px; height: 36px; font-size: 0.95rem; }
.edit-item-qty button:disabled { opacity: 0.4; }
.edit-item-qty input { width: 40px; height: 36px; font-size: 16px; }
.edit-item-total { font-size: 0.9rem; font-weight: 500; text-align: right; white-space: nowrap; }
.edit-item-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--color-text-muted); }
.edit-item-remove:hover:not(:disabled) { background: #fbeaea; color: #8a2a2a; }
.edit-item-remove:disabled { opacity: 0.3; }
.edit-items-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.9rem 0 0.4rem; font-size: 0.9rem; color: var(--color-text-muted); }
.edit-items-total strong { font-size: 1.05rem; font-weight: 500; color: var(--color-primary); }
.edit-items-total small { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.edit-items-hint,
.edit-items-note { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); }
.items-modal .cancel-error { margin-top: 0.6rem; }
.admin-edited { display: inline-block; margin-top: 0.15rem; font-size: 0.72rem; font-style: normal; font-weight: 500; color: #b3401f; }
.admin-edit-flag { margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; border-radius: 6px; background: #fdf3e6; font-size: 0.86rem; color: #7a4a12; }
.admin-edit-flag i { margin-right: 0.35rem; }

/* ---------- Paying online (Billplz) ---------- */
.pay-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
}
.pay-notice > i { font-size: 1.05rem; line-height: 1.4; color: var(--color-accent-dark); }
.pay-notice.is-ok { border-left-color: #4c5a1c; }
.pay-notice.is-ok > i { color: #4c5a1c; }
.pay-notice.is-wait > i { color: var(--color-text-muted); }
.pay-notice p { flex: 1; margin: 0; color: var(--color-text); }
.pay-notice .btn-close { margin-top: 0.15rem; font-size: 0.7rem; }
.order-paid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: -0.2rem 0 0.7rem; font-size: 0.86rem; color: #4c5a1c; }
.order-paid span { font-size: 0.8rem; color: var(--color-text-muted); }
.admin-edited + .admin-edited { margin-left: 0.5rem; }
.admin-tag-paid { color: #4c5a1c; }
.admin-pay-issue { margin: 0 0 0.8rem; padding: 0.55rem 0.75rem; border-radius: 6px; background: #fbeaea; font-size: 0.86rem; color: #8a2a1c; }
.admin-pay-issue i { margin-right: 0.35rem; }
.checkout-pay-reason { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Pages drawn by script (checkout, My Account, admin, the spice list) ----------
   Keep room for the content while it loads, so the footer does not appear
   high up on the screen first and then jump down when the content arrives. */
[data-render="checkout"],
[data-render="account"],
[data-render="admin"] { min-height: 70vh; }
.product-grid:empty { min-height: 100vh; }


/* Room for lists filled by script, so the content below them does not jump down */
.contact-list:empty { min-height: 277px; }
.catalogue-tabs:empty { min-height: 45px; }
@media (min-width: 768px) { .catalogue-tabs:empty { min-height: 95px; } }
@media (min-width: 1600px) { .catalogue-tabs:empty { min-height: 41px; } }

/* Remove a product at checkout */
.checkout-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.checkout-remove:hover,
.checkout-remove:focus-visible { background: var(--color-surface-tint); color: var(--color-primary); }

/* While Place Order takes the customer to the payment page */
.pay-redirect {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  color: var(--color-primary);
}
.pay-redirect .spinner-border { width: 2rem; height: 2rem; color: var(--color-primary); }
.pay-redirect small { color: var(--color-text-muted); }

/* =========================================================================
   HEADER, DESKTOP (992px and wider): two rows
   Row 1: logo | search (category + words + Search) | WhatsApp / Call | Login / Register | cart
   Row 2: menu, under a thin gold line
   Phones and tablets keep the one-row header with the burger menu (responsive.css).
   ========================================================================= */
.header-search,
.header-call,
.header-account { font-family: var(--font-body); }

@media (min-width: 992px) {
  :root { --header-height: 134px; }
  .site-header .navbar,
  .site-header.is-scrolled .navbar { min-height: 0; padding-block: 0; }

  .navbar > .header-grid {
    --header-pad: clamp(16px, 3vw, 48px);
    /* Equal side columns where the screen is wide enough, so the search box sits in the
       middle of the page like the menu below it. On narrower screens the sides take what
       they need and the search box uses the space left. */
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 640px) minmax(max-content, 1fr);
    grid-template-areas:
      "brand search actions"
      "nav nav nav";
    column-gap: clamp(1.25rem, 2.5vw, 2.75rem);
    padding-inline: var(--header-pad);
  }
  .header-brand,
  .header-search,
  .header-actions { margin-block: 1.2rem; }
  /* Fixed widths for the header words, so nothing moves when the fonts finish loading
     (the page first draws with a stand-in font, which is a different width) */
  .header-brand .brand-text { display: inline-block; width: 7.7em; }
  /* The header keeps the same height when the page scrolls. Shrinking it moved the page up
     under the reader, which flipped the scrolled state back and forth and made the top shake. */

  /* Row 2: menu across the full width, thin gold line above it */
  .header-nav {
    justify-self: stretch;
    justify-content: center;
    margin-inline: calc(-1 * var(--header-pad));
    border-top: 1px solid rgba(237, 184, 54, 0.55);
    contain: inline-size;   /* the menu's width no longer changes the top row when the fonts load */
  }
  .header-nav .navbar-nav { gap: clamp(0.25rem, 1.6vw, 1.75rem); }
  .header-nav .nav-link { padding: 0.75rem 0.5rem !important; font-size: 0.93rem; }
  .header-nav .nav-link::after { left: 0.5rem; right: 0.5rem; bottom: 0.45rem; }

  /* Row 1: search box */
  .header-search {
    grid-area: search;
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 640px;
  }
  .header-search-form {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid #d9cfc3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .header-search-form:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(237, 184, 54, 0.15);
  }
  .header-search-category {
    flex: 0 0 auto;
    width: 150px;
    padding: 0 2rem 0 0.95rem;
    border: 0;
    border-right: 1px solid #e3dad0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c4d39' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 13px;
    appearance: none;
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    text-overflow: ellipsis;
  }
  .header-search-category:focus { outline: none; }
  .header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.88rem;
  }
  .header-search-input:focus { outline: none; }
  .header-search-input::placeholder { color: #9a918a; }
  .header-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1.25rem;
    border: 0;
    background: var(--color-primary);
    color: #fff;
    justify-content: center;
    width: 100px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color var(--transition);
  }
  .header-search-btn:hover,
  .header-search-btn:focus-visible { background: var(--color-primary-dark); }
  .header-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1040;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    max-width: none;
  }

  /* Row 1: WhatsApp / Call, Login / Register and cart, split by thin lines */
  .header-actions { gap: 0 !important; }
  .header-actions > * + * {
    margin-left: 1.1rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--color-border);
  }

  .header-call {
    align-items: center;
    gap: 0.6rem;
    color: var(--color-primary-dark);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-call > .bi { font-size: 1.45rem; color: var(--color-primary); }
  .header-call-text { display: flex; flex-direction: column; line-height: 1.2; width: 118px; }
  .header-call-text small { font-size: 0.74rem; color: var(--color-text-muted); }
  .header-call-text strong { font-size: 0.9rem; font-weight: 600; }
  .header-call:hover strong { color: var(--color-accent-dark); }

  .header-account {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-dark);
    white-space: nowrap;
  }
  .header-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.45rem;
  }
  .header-account.is-signed-in .header-account-icon {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9rem;
  }
  .header-account-label { width: 118px; font-size: 0.88rem; font-weight: 600; }
  .header-account-label { text-align: left; }
  .header-account.is-signed-in .header-account-label { width: auto; }   /* "My Account" sits right beside the round initial */
  .header-account:hover .header-account-label,
  .header-account:focus-visible .header-account-label { color: var(--color-accent-dark); }

  /* Cart: plain bag icon with the gold count, no circle */
  .header-actions .icon-btn--cart,
  .header-actions .icon-btn--cart:hover,
  .header-actions .icon-btn--cart:focus-visible {
    width: auto;
    min-width: 36px;
    height: 36px;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    color: var(--color-primary);
    font-size: 1.5rem;
  }
  .header-actions .icon-btn--cart:hover { color: var(--color-accent-dark); }
}

/* Mid-size desktops: hide the "Login / Register" words beside the icon to keep the search wide */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-account-label { display: none; }
  .header-actions > .account-dropdown { margin-left: 0; padding-left: 0; border-left: 0; }   /* WhatsApp / Call is hidden here, so no line before it */
}

/* =========================================================================
   PROMO STRIP under the homepage banner: slim brown line scrolling slowly left to right
   ========================================================================= */
.promo-strip {
  position: relative;
  background: var(--color-primary-dark);   /* deep chocolate brown */
  border-top: 1px solid rgba(237, 184, 54, 0.35);
  border-bottom: 1px solid rgba(237, 184, 54, 0.35);
  color: #f3ece6;
  font-family: var(--font-body);
  overflow: hidden;
}
.promo-marquee {
  display: flex;
  align-items: center;
  height: 42px;
  overflow: hidden;
  /* soft fade at both ends so text slides in and out gently */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.promo-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: promo-scroll 105s linear infinite;
}
.promo-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.promo-item {
  padding: 0 1.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}
.promo-sep {
  color: var(--color-accent);
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.9;
}
/* Left to right: start one group to the left, end where the second group began */
@keyframes promo-scroll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 767.98px) {
  .promo-marquee { height: 40px; }
  .promo-item { padding: 0 1rem; font-size: 0.74rem; letter-spacing: 0.02em; }
  .promo-track { animation-duration: 82s; }
}

/* Reduce motion: no scrolling, the three points sit still in the middle */
@media (prefers-reduced-motion: reduce) {
  .promo-marquee { justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .promo-track { animation: none; transform: none; }
  .promo-group[aria-hidden="true"] { display: none; }
  .promo-group > :nth-child(n + 8) { display: none; }   /* first four points only, no closing star */
}
@media (prefers-reduced-motion: reduce) and (max-width: 575.98px) {
  /* still strip on narrow phones: two columns, two rows */
  .promo-marquee { height: auto; min-height: 40px; padding-block: 0.4rem; }
  .promo-track,
  .promo-group { width: 100%; }
  .promo-group { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0.3rem; }
  .promo-sep { display: none; }
  .promo-item { padding: 0 0.4rem; font-size: 0.7rem; line-height: 1.25; text-align: center; white-space: normal; }
  .promo-item:nth-child(4n + 3) { border-left: 1px solid rgba(237, 184, 54, 0.35); }   /* line between the two columns */
}

/* Homepage: less empty space between "Made for Malaysian Kitchens" and "Popular Products" */
.section--why { padding-bottom: calc(var(--section-space) * 0.55); }
.section--popular { padding-top: calc(var(--section-space) * 0.7); }

/* Homepage banner: clicking the picture shows the next slide */
#heroCarousel .hero-slide { cursor: pointer; }
#heroCarousel .hero-content .btn { cursor: pointer; }

/* Banner: lighter small heading above the title */
.hero-content .eyebrow { font-weight: 500; letter-spacing: 0.18em; }

/* ---------- Banner slide with a video (slide 2) ----------
   Wide screens (1600px+): the wide banner video fills the slide like the photo slides, bowls on
   the right, with the same soft fade behind the text as the other slides.
   Laptops (992 to 1599px): the 16:9 video sits on the right at the banner's height, fading into
   the video's own background picture, so the bowls never go under the text.
   Tablets and phones: responsive.css. */
.hero-slide--video { background: #2f1810; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
@media (min-width: 992px) and (max-width: 1599.98px) {
  .hero-slide--video {
    /* the video's own wall and table (hero-02-bg.webp) fill the left, behind the text */
    background: #2f1810 url("../assets/banners/hero-02-bg.webp") left center / auto 100% no-repeat;
  }
  .hero-video {
    left: auto;
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
}

/* Banner video: hidden until it is really playing, the still picture shows underneath it.
   No black box or play icon while it loads or if a phone refuses to play it. */
video.hero-video { opacity: 0; transition: opacity 0.4s ease; }
video.hero-video.is-playing { opacity: 1; }
video.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video.hero-video::-webkit-media-controls { display: none !important; }

/* Touch screens: no hover colour left behind on the View All button after a tap */
@media (hover: none) {
  .btn-view-all {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
  }
}

/* =========================================================================
   OUT OF STOCK (set by staff on the Orders page, Stock tab)
   ========================================================================= */
.stock-badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  background: var(--color-primary-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.product-media .stock-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.detail-info .stock-badge { margin: -0.75rem 0 1.25rem; font-size: 0.82rem; }
.product-card.is-out .product-media img { opacity: 0.55; filter: grayscale(0.35); }
.product-card.is-out .product-price { color: var(--color-text-muted); }
.size-pill.is-out {
  color: #a59c94;
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
}
.size-pill.is-out.is-active { background: transparent; color: #a59c94; }
.btn.is-out:disabled { opacity: 0.55; cursor: not-allowed; }
.cart-out,
.checkout-out {
  margin: 0.2rem 0 0;
  color: #b0412e;
  font-size: 0.8rem;
  font-weight: 500;
}
.checkout-out { display: block; }
.cart-out i { margin-right: 0.2rem; }

/* Staff page: Orders | Stock switch and the Stock list */
.admin-views { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.admin-view {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--color-text-muted); font-weight: 500;
}
.admin-view span { padding: 0 0.45rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-dark); font-size: 0.75rem; font-weight: 600; }
.admin-view.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.stock-help { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 1rem; }
.stock-help i { color: var(--color-accent-dark); margin-right: 0.25rem; }
.stock-only { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; cursor: pointer; }
.stock-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.stock-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) 3fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.stock-row.has-out { border-color: #e7c2b9; background: #fffaf8; }
.stock-name { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.stock-name strong { display: block; font-size: 0.92rem; font-weight: 600; }
.stock-name small { color: var(--color-text-muted); font-size: 0.78rem; }
.stock-sizes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stock-size {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  min-width: 92px; padding: 0.35rem 0.7rem;
  border: 1px solid #bfd8c2; border-radius: 6px; background: #f3faf4;
  font-size: 0.8rem; line-height: 1.25; text-align: left;
}
.stock-size-name { font-weight: 600; color: var(--color-text); }
.stock-size-state { color: #2e7d42; font-size: 0.72rem; }
.stock-size.is-out { border-color: #e2a99b; background: #fbebe7; }
.stock-size.is-out .stock-size-state { color: #b0412e; font-weight: 600; }
.stock-size:disabled { opacity: 0.6; }
.stock-all { white-space: nowrap; }
@media (max-width: 767.98px) {
  .stock-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .stock-all { justify-self: start; }
  .stock-all-space { display: none; }
}

/* Slide 2: the backup picture appears only when the video cannot play (app.js adds .use-still) */
.hero-slide.video-pending .hero-video-still { opacity: 0; transition: opacity 0.4s ease; }
.hero-slide.video-pending.use-still .hero-video-still { opacity: 1; }

/* Product page: local name in brackets beside the product name, phones only (responsive.css) */
.detail-name-local { display: none; }
/* Product page trust line: phones show shorter words (responsive.css) */
.detail-points .pt-mob { display: none; }
/* Product page: "Qty: 1" dropdown beside the price is for phones only (responsive.css) */
.qty-select { display: none; }
/* Product page: total for the chosen quantity, with the single-pack price beside it */
.detail-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; }
.detail-price-row .detail-price { margin: 0; }
.detail-price-row { margin-bottom: 1.5rem; }
.detail-price-each { font-size: 0.85rem; color: var(--color-text-muted); }
/* Product page: "Quantity" on desktop, "Qty" on phones (responsive.css) */
.qty-word-short { display: none; }
/* Shop page: category dropdown is for phones only (responsive.css) */
.catalogue-cat { display: none; }

/* Price on request: one WhatsApp button instead of Add to Cart / Buy Now */
.detail-actions .detail-ask { flex: 1 1 auto; }

/* Phone menu search: tap-able search button and live suggestions */
.mobile-search { flex-wrap: wrap; }
.mobile-search .form-control { padding-right: 5.6rem; }
.mobile-search input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.mobile-search-clear {
  position: absolute;
  top: 9px;
  right: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1ece6;
  color: var(--color-text);
  font-size: 0.8rem;
}
.mobile-search-clear[hidden] { display: none; }
.mobile-search-results a { display: block; padding: 0.6rem 0.75rem; }
.mobile-search-go {
  position: absolute;
  top: 5px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.05rem;
}
.mobile-search-results {
  flex-basis: 100%;
  max-width: none;
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.3rem;
}
.mobile-search-results[hidden] { display: none; }

/* Bar with Add to Cart / Buy Now fixed to the bottom of the screen (phones only, see responsive.css) */
.buy-bar { display: none; }

/* Moving between pages: a soft fade instead of a white flash (Chrome and Safari that support it; others are unchanged) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Phone product cards: pack size box and its small list */
.size-dd-btn { display: none; }
.size-dd-list {
  position: fixed;
  z-index: 1060;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(43, 33, 31, 0.16);
}
.size-dd-list button {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  color: var(--color-text);
  white-space: nowrap;
}
.size-dd-list button.is-active { background: var(--color-primary); color: #fff; }
.size-dd-list button:disabled { color: #a59c94; text-decoration: line-through; }

/* Contact form: enquiry type dropdown is for phones only (responsive.css) */
.quote-form .choice-select { display: none; }

/* Account / checkout: shown when the server cannot be reached */
.account-offline {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-muted);
}
.account-offline p { margin-bottom: 0.9rem; }
.account-offline strong { color: var(--color-text); }

/* ---------- DuitNow QR at checkout (js/duitnow-qr.js) ---------- */
.pay-detail-qr { flex-basis: 100%; }
.qr-box { display: flex; align-items: center; gap: 1.25rem; margin-top: 0.85rem; }
.qr-box-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  padding: 0.5rem 0.5rem 0.45rem;
  border: 2px solid #c2424a;           /* red of the printed QR */
  border-radius: var(--radius-sm);
  background: #fff;
}
.qr-box-code img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.qr-box-name { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text); }
.qr-box-text { min-width: 0; }
.qr-box-amount { display: block; font-size: 1.3rem; font-weight: 600; color: var(--color-accent-dark); }
.qr-box-text p { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--color-text-muted); }
.qr-box-save { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; --bs-btn-border-radius: 6px; --bs-btn-border-color: var(--color-primary); }
.qr-on-mob { display: none !important; }
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
  .qr-on-mob { display: block !important; }
  .qr-box-save.qr-on-mob { display: inline-flex !important; }
  .qr-on-desk { display: none !important; }
}
@media (max-width: 575.98px) {
  .qr-box { flex-direction: column; align-items: center; gap: 0.6rem; margin-left: calc(-46px - 0.9rem); text-align: center; }  /* full width, under the icon too */
}
.pay-detail:has(.qr-box) { align-items: flex-start; }