/* =========================================================================
   responsive.css - breakpoint adjustments (mobile-first overrides)
   Bootstrap breakpoints: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   ========================================================================= */

/* ---------- Large desktop ---------- */
@media (min-width: 1400px) {
  .hero-content > * { max-width: 560px; }
  .hero-content .hero-text { max-width: 460px; }
}

/* ---------- Below desktop (tablet & mobile) ---------- */
@media (max-width: 991.98px) {
  :root {
    --header-height: 66px;
    --section-space: 72px;
  }

  /* Header: logo (left) | cart + menu (right), menu drops below */
  .navbar > .header-grid {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand actions toggle"
      "nav nav nav";
  }
  .header-nav { justify-self: stretch; }
  .header-toggle { justify-self: end; margin-right: -0.5rem; }

  .brand { gap: 0.5rem; }
  .brand-logo { height: 36px; }
  .brand-text { font-size: 1.2rem; }

  /* Collapsed menu */
  .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--color-border);
  }
  .navbar-nav { gap: 0; }
  .navbar-nav .nav-link {
    padding: 0.85rem 0.25rem !important;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
  }
  .navbar-nav .nav-link::after { display: none; }
  .navbar-nav button.nav-link { width: 100%; border-width: 0 0 1px; background: none; text-align: left; }   /* Log out is a button, styled like the links */
  .navbar-nav .nav-link.active { color: var(--color-accent-dark); }
  .mobile-search { margin-top: 1rem; }
  .mobile-search .form-control { font-size: 16px; }      /* below 16px an iPhone zooms in when the box is tapped */

  .search-panel { display: none; }

  /* Hero: taller shape so the text fits, with a wider fade behind it */
  .hero-slide { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
  .hero-overlay {
    background: linear-gradient(90deg, rgba(38, 26, 19, 0.78) 0%, rgba(38, 26, 19, 0.6) 45%, rgba(38, 26, 19, 0) 80%);
  }
  .hero-slide.is-light-photo .hero-overlay {
    background: linear-gradient(90deg, rgb(247, 240, 227) 0%, rgb(247, 240, 227) 40%, rgba(247, 240, 227, 0.85) 52%, rgba(247, 240, 227, 0) 74%);
  }
  .hero-content > * { max-width: 46%; }
  .hero-content .hero-text { max-width: 44%; }
  .carousel-control-prev,
  .carousel-control-next { display: none; }

  /* Trust bar 2×2 */
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-item { justify-content: flex-start; padding: 1.25rem 0.75rem; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item > i { font-size: 1.7rem; }
  .trust-item strong { font-size: 0.88rem; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: 1.5rem; }
  .trust-item:nth-child(n + 3) { border-top: 1px solid var(--color-border); }

  /* About: image first, then text */
  .about-media { aspect-ratio: 16 / 10; }

  /* Bulk CTA: the photo moves under the text as a band along the bottom */
  .bulk-cta-inner {
    padding: 3rem 2.5rem calc(3rem + 220px);
  }
  .bulk-cta-inner::after {
    top: auto;
    left: 11px;
    width: auto;
    height: 230px;
    border-radius: 0 0 calc(var(--radius-lg) - 7px) calc(var(--radius-lg) - 7px);
    background:
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 32%),
      url("../assets/banners/wholesale-banner-2.webp") right bottom / cover no-repeat;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  :root { --section-space: 56px; }

  .section-head { margin-bottom: 2rem; }

  /* Fewer, smaller spice drawings on phones */
  .spice-decor img { width: calc(var(--decor-size, 60px) * 0.6); opacity: 0.15; }
  .spice-decor img:nth-child(even) { display: none; }

  .announcement-bar { font-size: 0.74rem; letter-spacing: 0.03em; }
  .announcement-inner { gap: 0.5rem; }

  /* Tabs scroll sideways instead of wrapping onto many lines */
  .product-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -0.5rem calc(var(--bs-gutter-x) * -0.5) 1.75rem;
    padding: 0 calc(var(--bs-gutter-x) * 0.5) 0.25rem;
    scrollbar-width: none;
  }
  .product-tabs::-webkit-scrollbar { display: none; }
  .product-tab { padding: 0.42rem 0.85rem; font-size: 0.82rem; }
  .product-tab .tab-count { font-size: 0.7rem; }

  /* Shop page: soft fade at the right edge shows there are more tabs to swipe to */
  .catalogue-tabs {
    position: relative;
    padding-right: 2.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent);
  }

  /* Inner pages */
  .page-hero { padding: 2.25rem 0 2rem; }
  .catalogue-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .catalogue-tabs { min-width: 0; margin-bottom: 0; }
  .catalogue-controls { width: 100%; }
  .catalogue-search { flex: 1; }
  .catalogue-search .form-control { width: 100%; }
  .catalogue-sort { min-width: 0; width: 44%; }
  .quote-card { padding: 1.75rem 1.25rem; }
  .contact-panel { padding: 1.5rem 1.25rem; }
  .detail-actions .btn { flex: 1 1 0; min-width: 0; --bs-btn-padding-x: 0.75rem; }   /* phones: side by side, half each */

  .faq-wrap .accordion-button { font-size: 1.02rem; }
  .section-head-split { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  /* Phones: the phone banner (hero-01-mobile, 1080 x 1440 px) fills the whole slide
     and the text sits on top of it, at the bottom. Dark photo: white text on a soft
     dark fade. Light photo (.is-light-photo): dark text on a short cream fade. */
  .hero-slide {
    aspect-ratio: 3 / 4;
    min-height: 30rem;                /* small phones: always enough room for the text */
    max-height: none;
    background-color: var(--color-primary-dark);
  }
  .hero-slide picture { display: block; }
  .hero-img {
    object-position: center top;      /* keep the subject (top of the photo) in view */
    transform-origin: 50% 25%;
  }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(38, 26, 19, 0) 30%, rgba(38, 26, 19, 0.55) 55%, rgba(38, 26, 19, 0.85) 100%);
  }
  .hero-content {
    justify-content: flex-end;        /* text at the bottom of the photo */
    padding-top: 1.5rem;
    padding-bottom: 3.25rem;          /* room for the slide dots */
    color: #fff;
  }
  .hero-content > *,
  .hero-content .hero-text { max-width: 100%; }
  .hero-content .eyebrow { color: var(--color-accent); }
  .hero-title { color: #fff; }
  .hero-title .title-accent { color: var(--color-accent); }
  .hero-text { color: rgba(255, 255, 255, 0.88); }

  /* Light photo: short cream fade, dark text */
  .hero-slide.is-light-photo .hero-overlay {
    background: linear-gradient(180deg, rgba(247, 240, 227, 0) 40%, rgba(247, 240, 227, 0.9) 60%, rgb(247, 240, 227) 74%);
  }

  /* No phone banner uploaded for this slide: wide desktop photo on top, text on white below */
  .hero-slide--desktop-img,
  .hero-slide.has-missing-image {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .hero-slide--desktop-img .hero-img,
  .hero-slide.has-missing-image .hero-img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.4 / 1;
    object-fit: cover;
    object-position: center right;
    transform-origin: 75% 50%;
  }
  .hero-slide.has-missing-image .hero-img { visibility: hidden; }
  .hero-slide--desktop-img .hero-overlay,
  .hero-slide.has-missing-image .hero-overlay { display: none; }
  .hero-slide--desktop-img .hero-content,
  .hero-slide.has-missing-image .hero-content {
    position: relative;
    inset: auto;
    justify-content: center;
    min-height: 21rem;                /* same height on every slide, so the page doesn't jump */
    background: #fff;
  }

  /* Dark text for the two light cases above */
  .hero-slide.is-light-photo .hero-content,
  .hero-slide--desktop-img .hero-content,
  .hero-slide.has-missing-image .hero-content { color: var(--color-text); }
  .hero-slide.is-light-photo .hero-content .eyebrow,
  .hero-slide--desktop-img .hero-content .eyebrow,
  .hero-slide.has-missing-image .hero-content .eyebrow { color: var(--color-accent-dark); }
  .hero-slide.is-light-photo .hero-title,
  .hero-slide--desktop-img .hero-title,
  .hero-slide.has-missing-image .hero-title { color: var(--color-primary-dark); }
  .hero-slide.is-light-photo .hero-title .title-accent,
  .hero-slide--desktop-img .hero-title .title-accent,
  .hero-slide.has-missing-image .hero-title .title-accent { color: #c9962a; }
  .hero-slide.is-light-photo .hero-text,
  .hero-slide--desktop-img .hero-text,
  .hero-slide.has-missing-image .hero-text { color: #5c4d45; }
  .hero-title { font-size: 1.95rem; }
  .hero-title .title-accent { white-space: nowrap; }   /* keep the gold phrase on one line */
  .hero-text { font-size: 0.95rem; margin-bottom: 1.25rem; }
  .carousel-indicators { margin-bottom: 1rem; }

  .section--categories { padding-top: 2.25rem; padding-bottom: 2.75rem; }
  .section--categories .section-head-split { flex-direction: row; align-items: flex-end; gap: 0.75rem; }
  .section--categories .link-arrow { font-size: 0.88rem; padding-bottom: 0.2rem; }
  .trust-item strong { font-size: 0.84rem; }
  .category-body { padding: 0.7rem 0.75rem; }
  .category-body h3 { font-size: 0.84rem; }
  .category-arrow { width: 26px; height: 26px; }

  .feature-illustration { width: 84px; height: 84px; margin-bottom: 0.6rem; }
  .feature-illustration img { width: 52px; height: 52px; }
  .feature-item h3 { font-size: 0.92rem; }
  .feature-item p { font-size: 0.84rem; }

  .bulk-cta { padding-inline: 0; }
  .bulk-cta-inner { padding: 2.5rem 1.75rem calc(2rem + 170px); gap: 1.5rem; }
  .bulk-cta-inner::after { height: 180px; }
  .bulk-cta-actions { width: 100%; }
  .bulk-cta-actions .btn { flex: 1 1 180px; }

  .site-footer { padding-top: 3.5rem; }
  .footer-bottom { flex-direction: column; margin-top: 2.5rem; }
}

/* ---------- Product slider: cards per view ---------- */
@media (max-width: 1199.98px) {
  .slider-track { --per-view: 3; }
}
@media (max-width: 991.98px) {
  .slider-track { --per-view: 2; --slide-gap: 18px; }
  .slider-prev { left: -12px; }
  .slider-next { right: -12px; }
}
@media (max-width: 575.98px) {
  /* Swipe on phones; arrows hidden, dots remain */
  .slider-arrow { display: none; }
  .slider-track { --slide-gap: 12px; }
}

/* ---------- Compact cards: 2-up on phones >=360px ---------- */
@media (min-width: 360px) and (max-width: 575.98px) {
  .product-grid > .col { flex: 0 0 auto; width: 50%; }

  .product-card { padding: 10px; }
  .product-body { padding-top: 0.8rem; }
  .product-name { font-size: 0.86rem; }
  .product-descriptor { font-size: 0.78rem; }
  .product-price { font-size: 0.95rem; }
  .product-price.is-on-request { font-size: 0.85rem; }
  .product-category { font-size: 0.8rem; }
  .size-pill { padding: 0.22rem 0.55rem; font-size: 0.72rem; }
  .product-actions { grid-template-columns: 1fr; }
  .product-actions .btn { --bs-btn-font-size: 0.78rem; --bs-btn-padding-x: 0.5rem; }
}

/* Very narrow phones: one card fills most of the width */
@media (max-width: 359.98px) {
  .slider-track { --per-view: 1.15; }
}

/* ---------- Small phones ---------- */
@media (max-width: 359.98px) {
  .trust-list { grid-template-columns: 1fr; }
  .trust-item,
  .trust-item:nth-child(even) { border-left: 0; padding-left: 0.25rem; }
  .trust-item + .trust-item { border-top: 1px solid var(--color-border); }


  .cart-drawer { --bs-offcanvas-width: 100%; }

  .brand-logo { height: 30px; }
  .brand-text { font-size: 1.05rem; }
}

/* ---------- Touch & small-screen polish (phones and tablets) ---------- */
@media (max-width: 991.98px) {
  /* Comfortable tap targets (about 32px minimum) */
  .size-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
  .announcement-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
  }
}

/* Search and sort each take a full row on narrow phones */
@media (max-width: 399.98px) {
  .catalogue-controls { flex-direction: column; }
  .catalogue-sort { width: 100%; }
}

/* Smallest phones (iPhone SE, Galaxy Fold): keep logo, name, cart and menu on one line */
@media (max-width: 374.98px) {
  .navbar > .header-grid { padding-inline: 12px; }
  .brand { gap: 0.4rem; }
  .brand-logo { height: 28px; }
  .brand-text { font-size: 1rem; }
  .header-actions { gap: 0.35rem !important; }
  .header-actions .icon-btn,
  .header-toggle { width: 38px; height: 38px; }
  .header-toggle { margin-right: 0; }
}

/* ---------- Login popup and My Account on small screens ---------- */
@media (max-width: 767.98px) {
  .auth-grid { grid-template-columns: 1fr; }
  .auth-aside { display: none; }           /* keep the popup short on phones */
  .auth-main { padding: 2rem 1.25rem 1.5rem; }
  .auth-modal .modal-dialog { margin: 0.75rem; }
  .account-card { padding: 1.5rem 1.25rem; }
  /* Phones: no short description line ("Whole black peppercorns") on product cards or the product page */
  .product-card .product-descriptor,
  .detail-descriptor { display: none; }
}

/* ---------- Phones: compact product card ----------
   One row at the bottom: size dropdown + round plus (add to cart) button, the same on every card.
   The photo and the name open the product page, so "View Product" is not repeated. */
@media (max-width: 575.98px) {
  .product-card .product-descriptor { display: none; }       /* name + local name are enough here; full text is on the product page */
  .product-card .product-local { margin-bottom: 0.5rem; }
  .product-card .product-price { margin-top: auto; margin-bottom: 0.55rem; }   /* price sits right above the row */
  .product-card .product-wholesale-note { margin-bottom: 0.6rem; font-size: 0.74rem; }

  .product-card .product-buy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .product-card .size-options--multi { display: none; }
  .product-card .size-select { display: none; }
  .product-card .size-dd-btn {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0.2rem 1.6rem 0.2rem 0.7rem;
    border: 1px solid #e3ded8;
    border-radius: 8px;
    background: #f4f2ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b211f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.55rem center / 11px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    color: var(--color-text);
  }
  .product-card .size-options { flex: 1 1 auto; margin-bottom: 0; }           /* single fixed size */

  .product-card .product-actions { display: block; flex: none; margin-top: 0; }
  .product-card .btn-view { display: none; }

  .product-card .btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    transition: background-color var(--transition), border-color var(--transition), transform 0.15s ease;
  }
  .product-card .btn-add:active { transform: scale(0.92); }
  .product-card .btn-add-label { display: none; }
  .product-card .btn-add-icon { display: inline-block; }

  /* Wholesale-only products: one slim Enquire button */
  .product-card .product-buy > .product-actions:only-child { flex: 1 1 auto; }
  .product-card .product-buy > .product-actions:only-child .btn { width: 100%; }
}

/* ---------- Phones and tablets: the header cart icon shows only when the cart has items.
   An empty cart is still reachable from the menu. ---------- */
@media (max-width: 991.98px) {
  .header-actions .icon-btn--cart.is-empty { display: none; }
}
@media (max-width: 991.98px) {
  /* same rule without waiting for the script, so the icon doesn't flash on page load */
  .header-actions .icon-btn--cart:has([data-cart-count][hidden]) { display: none; }
}

/* ---------- Phones: trust bar as four short one-line items (icon + title) ---------- */
@media (max-width: 575.98px) {
  .trust-bar { background: #fff; }
  .trust-item { gap: 0.55rem; padding: 0.95rem 0.5rem; }
  .trust-item:nth-child(even) { padding-left: 0.9rem; }
  .trust-item > i { font-size: 1.4rem; }
  .trust-item strong { font-size: clamp(0.72rem, 3.2vw, 0.84rem); white-space: nowrap; }
  .trust-item span { display: none; }          /* the second line is shown on tablets and desktop */
}

/* Smallest phones: keep both product page buttons on one line each */
@media (max-width: 359.98px) {
  .detail-actions { gap: 0.5rem; }
  .detail-actions .btn { --bs-btn-font-size: 0.8rem; --bs-btn-padding-x: 0.4rem; white-space: nowrap; }
}

/* ---------- My Account and Checkout on tablets and phones ---------- */
@media (max-width: 991.98px) {
  .account-layout { display: block; }
  .account-side { margin-bottom: 1rem; }
  .account-user { margin-bottom: 0.9rem; padding-bottom: 0; border-bottom: 0; }
  /* My Account opens on small cards, one per section: nothing to scroll sideways.
     Opening a card shows only that section, with a link back to the cards. */
  .account-layout[data-view="section"] .account-side,
  .account-layout[data-view="overview"] .account-main { display: none; }
  .account-layout[data-view="section"] .account-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.75rem -0.2rem;
    padding: 0.3rem 0.5rem 0.3rem 0;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-primary);
  }
  .account-back i { font-size: 0.8rem; }
  .account-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .account-nav-group { display: none; }
  .account-nav-link,
  .account-nav-sub {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    gap: 0.1rem;
    width: auto;
    min-height: 82px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-primary);
    text-align: left;
  }
  .account-nav-link:active { border-color: var(--color-primary); }
  .account-nav-link.is-active { color: var(--color-primary); font-weight: 500; }
  .account-nav-link > i,
  .account-nav-sub > i { display: block; width: auto; margin-bottom: 0.3rem; font-size: 1.15rem; line-height: 1; color: var(--color-accent-dark); }
  .account-nav-hint { display: block; font-size: 0.72rem; font-weight: 400; line-height: 1.35; color: var(--color-text-muted); }
  .account-nav-link .account-badge { position: absolute; top: 0.6rem; right: 0.6rem; }
  /* most used first */
  .account-nav-link[data-tab="purchase"] { order: 1; }
  .account-nav-link[data-tab="notifications"] { order: 2; }
  .account-nav-link[data-tab="addresses"] { order: 3; }
  .account-nav-link[data-tab="profile"] { order: 4; }
  .account-nav-link[data-tab="password"] { order: 5; }
  .account-nav-link[data-tab="enquiries"] { order: 6; }
  .account-nav-staff { order: 7; }
  .account-nav-logout {
    order: 8;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 0;
    margin-top: 0.2rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.86rem;
    color: var(--color-text-muted);
  }
  .account-nav-logout > i { margin: 0; font-size: 1rem; color: var(--color-text-muted); }
}

@media (max-width: 575.98px) {
  .account-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
}

@media (max-width: 767.98px) {
  .account-section,
  .checkout-section { padding-block: 1.25rem 3rem; }
  .account-panel { padding: 1.25rem 1rem; }
  .account-panel-head { flex-wrap: wrap; }
  .address-item { flex-direction: column; gap: 0.6rem; }
  .address-item-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }

  .order-head,
  .order-foot { padding-inline: 1rem; }
  .order-items { padding-inline: 1rem; }
  .order-actions .btn { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
  .order-actions .order-pay { flex-basis: 100%; }                 /* Pay Now on its own row */

  .checkout-card { padding: 1.1rem 1rem; }
  .checkout-address-text { display: block; margin: 0.15rem 0 0; }
  .checkout-row { grid-template-columns: auto auto 1fr; gap: 0.25rem 0.6rem; }
  .checkout-row--head span { display: none; }
  .checkout-product,
  .checkout-row--head h2 { grid-column: 1 / -1; }
  .checkout-row > span { text-align: left; font-size: 0.9rem; color: var(--color-text-muted); }
  .checkout-row > span[data-label="Qty"]::before { content: "x"; }
  .checkout-row { position: relative; }
  .checkout-row .checkout-product { padding-right: 2rem; }
  .checkout-remove { position: absolute; top: 0.7rem; right: 0; }
  .checkout-row > span[aria-hidden="true"]:empty { display: none; }
  .checkout-row > .checkout-line-total { text-align: right; color: var(--color-text); }
  .checkout-summary dl { align-items: stretch; }
  .checkout-summary dl div { justify-content: space-between; }
  .checkout-summary dd { min-width: 0; }
  .checkout-grand dd { font-size: 1.25rem; }
  .checkout-place { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .checkout-place .btn { width: 100%; }
}

/* Checkout payment method on phones: heading on top, two options per row */
@media (max-width: 767.98px) {
  .checkout-pay { grid-template-columns: 1fr; gap: 0.75rem; }
  .checkout-pay h2 { margin: 0; }
  .pay-option { flex: 1 1 calc(50% - 0.3rem); padding-inline: 0.5rem; font-size: 0.85rem; }
}

/* ---------- Staff orders page on tablets and phones ---------- */
@media (max-width: 767.98px) {
  .admin-search { flex-basis: 100%; max-width: none; }
  .admin-bar-right { width: 100%; justify-content: space-between; }
  /* order row: number and status on top, customer and total below */
  .admin-order-head {
    grid-template-columns: minmax(0, 1fr) auto 1.2rem;
    grid-template-areas: "no status caret" "who pay caret";
    gap: 0.45rem 0.75rem;
    padding: 0.8rem 1rem;
  }
  .admin-order-no { grid-area: no; }
  .admin-order-who { grid-area: who; }
  .admin-order-pay { grid-area: pay; text-align: right; }
  .admin-order-head .order-status { grid-area: status; }
  .admin-order-caret { grid-area: caret; }
  .admin-grid { grid-template-columns: 1fr; gap: 0.5rem; padding: 1rem; }
  .admin-row,
  .admin-row--ship { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-row label { grid-column: 1 / -1; margin-bottom: -0.25rem; }
  .admin-row--ship .form-control { grid-column: 1 / -1; }
  .admin-row--ship .btn { grid-column: 1; }
  .admin-notes { padding-inline: 1rem; }
  .admin-actions { padding-inline: 1rem; }
  .admin-actions .btn { flex: 1 1 auto; min-width: 0; }
  .admin-actions-main { width: 100%; }
}

/* ---------- Phones: a little more room at the screen edges, slightly smaller reading text ---------- */
@media (max-width: 575.98px) {
  .container,
  .container-fluid { --bs-gutter-x: 2.25rem; }          /* 18px each side (was 12px) */
  .navbar > .header-grid { padding-inline: 18px; }

  body { font-size: 0.92rem; }
  .form-control,
  .form-select { font-size: 16px; }                      /* below 16px an iPhone zooms the page when a box is tapped */
  .lead-text,
  .page-intro,
  .faq-wrap .accordion-button { font-size: 0.95rem; }
  .section-title,
  .bulk-cta-copy h2,
  .quote-title { font-size: 1.5rem; }
  .audience-card h3 { font-size: 1rem; }
}

/* "Powered by" lines up with the copyright text on phones and tablets */
@media (max-width: 767.98px) {
  .footer-powered { flex: none; text-align: left; }
}

/* ---------- Checkout before logging in: one column on tablets and phones ---------- */
@media (max-width: 991.98px) {
  .checkout-gate { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .gate-main { padding: 1.25rem 1rem 1.25rem; }
  .gate-summary { padding: 1.1rem 1rem; }
  .gate-option { flex-wrap: wrap; gap: 0.75rem; padding: 0.9rem; }
  .gate-option .btn { width: 100%; min-width: 0; }
  .checkout-card .gate-title { font-size: 1.15rem; }
}

/* ---------- Edit items popup on phones: name on top, controls underneath ---------- */
@media (max-width: 575.98px) {
  .edit-item { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "thumb text remove" "thumb qty total"; gap: 0.45rem 0.7rem; }
  .edit-item .order-thumb { grid-area: thumb; width: 44px; height: 44px; align-self: start; }
  .edit-item-text { grid-area: text; }
  .edit-item-remove { grid-area: remove; justify-self: end; }
  .edit-item-qty { grid-area: qty; justify-self: start; }
  .edit-item-total { grid-area: total; align-self: center; }
}

/* ---------- Homepage phones: the four category tabs sit in two neat rows (nothing hidden off screen) ---------- */
@media (max-width: 575.98px) {
  .product-tabs:not(.catalogue-tabs) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .product-tabs:not(.catalogue-tabs) .product-tab { width: 100%; padding-inline: 0.5rem; text-align: center; }
}

/* ---------- Phones and tablets: the menu button has no grey circle left behind after a tap,
   and the page never slides sideways while the menu is open ---------- */
@media (max-width: 991.98px) {
  .header-toggle,
  .header-toggle:hover,
  .header-toggle:focus { background: transparent; }
  .header-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  html,
  body { overflow-x: clip; }
}

/* ---------- Narrow Android phones (about 360px wide): keep the top bar on one line
   and the section titles from breaking awkwardly ---------- */
@media (max-width: 399.98px) {
  .announcement-bar { font-size: 0.7rem; letter-spacing: 0.01em; }
  .announcement-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Android phones about 360px wide (narrower than an iPhone): same layout as on iPhone */
@media (max-width: 379.98px) {
  .section-title { font-size: 1.32rem; }                 /* "Made for Malaysian Kitchens" stays on one line */
  .section--why .row { --bs-gutter-x: 1rem; }
  .feature-item h3 { font-size: 0.88rem; }
  .feature-item p { font-size: 0.8rem; line-height: 1.5; }
}

/* ---------- Phones: their own 3:4 video (hero-02-mobile.mp4) fills the banner like the photo
   slides; bowls at the top, text on the plain table below ---------- */
@media (max-width: 767.98px) {
  .hero-slide--video { background: #2a1912; }
  .hero-video {
    inset: auto 0 auto 0;
    top: -10%;                       /* lift the bowls clear of the text; only plain wall is cut */
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
    /* the plain table at the very bottom fades into the dark background */
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  }
}
/* Narrow phones: the text starts a little higher, so the video goes up a little more */
@media (max-width: 379.98px) {
  .hero-video { top: -15%; }
}
/* Phones: the backup picture is lifted a little less than the video, so its top bowls stay whole */
@media (max-width: 767.98px) {
  .hero-video-still { top: -6%; }
}
/* Phones, slide 2 backup picture (hero-02-mobile.webp): fills the banner like slide 1's
   picture, not lifted, so the bowls sit with a little space at the top. */
@media (max-width: 767.98px) {
  .hero-slide--video .hero-video-still {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---------- Phones: product page, name, price and Add to Cart visible without scrolling ---------- */
@media (max-width: 767.98px) {
  /* Breadcrumb: one short line */
  .page-hero--compact { padding: 0.6rem 0; }
  .page-hero--compact .breadcrumb-trail { flex-wrap: nowrap; gap: 0.3rem; white-space: nowrap; overflow: hidden; }
  .page-hero--compact .breadcrumb-trail li { flex: 0 0 auto; }
  .page-hero--compact .breadcrumb-trail li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .page-hero--compact .breadcrumb-trail li + li::before { margin-right: 0.3rem; }

  /* Less space above the picture; the picture stays square (Zar mark in its corner, as on desktop), a bit smaller and centred */
  .product-detail-section { padding-top: 0.9rem; }
  .product-detail-section > .container > .row { --bs-gutter-y: 0.9rem; }
  /* Picture size follows the screen height, so Add to Cart / Buy Now fit on the first screen
     (smaller on phones whose browser bar sits at the top, such as Android Chrome) */
  .detail-media { width: min(100%, 320px); margin-left: 0; margin-right: auto; }   /* older browsers */
  .detail-media { width: clamp(240px, calc(100svh - 415px), 350px); max-width: 100%; }

  /* Tighter details */
  .detail-category { display: none; }   /* no "WHOLE SPICES" line above the name (it is in the Home / Spices line) */
  .detail-name { margin-bottom: 0.2rem; font-size: 1.18rem; font-weight: 500; line-height: 1.3; color: var(--color-text); }   /* black, not bold */
  .detail-local { display: none; }   /* shown in brackets beside the name instead */
  .detail-name-local {
    display: inline;
    font-family: var(--font-accent);
    font-size: 0.85em;
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent-dark);
  }
  .detail-descriptor { margin-bottom: 0.4rem; font-size: 0.9rem; }
  .detail-price { margin-top: 0.3rem; margin-bottom: 0.6rem; font-size: 1.3rem; font-weight: 600; line-height: 1.15; color: var(--color-accent-dark); }   /* gold-brown price */
  .detail-block { margin-bottom: 1rem; }
  .detail-label { margin-bottom: 0.35rem; font-size: 0.85rem; line-height: 1.3; font-weight: 400; color: var(--color-text-muted); }   /* "Pack size", "Quantity": plain, not bold */
  .detail-block .size-options { flex-wrap: nowrap; gap: 0.45rem; }
  .detail-block .size-pill { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.45rem 0.3rem; font-size: 0.82rem; text-align: center; }   /* pack sizes share one row, equal widths */
  /* "Qty: 1" dropdown under the pack sizes, instead of a whole Quantity row */
  .detail-price-row { margin-top: 0.3rem; margin-bottom: 0.35rem; }
  .detail-price-row .stock-badge { flex-basis: 100%; margin: 0.4rem 0 0; }
  /* "Quantity" with a small - 1 + box beside it, under the pack sizes (no dropdown) */
  .detail-block:has(.qty-stepper) { display: flex; align-items: center; gap: 1rem; margin-top: -0.1rem; margin-bottom: 1.3rem; }   /* a little more room above the buttons */
  .detail-block:has(.qty-stepper) .detail-label { margin-bottom: 0; }
  .qty-word-long { display: none; }
  .qty-word-short { display: inline; }
  .qty-select {
    display: none;
    align-items: center;
    gap: 0.2rem;
    margin: 0.7rem 0 0;
    padding: 0.2rem 0.55rem 0.2rem 0.7rem;
    border: 1px solid #e3ded8;
    border-radius: 8px;
    background: #f7f5f2;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
  }
  .qty-select select {
    padding: 0 1.05rem 0 0.1rem;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b211f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right center / 11px;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-weight: 500;
    color: var(--color-text);
  }
  .qty-select select:focus { outline: none; }
  .qty-select:focus-within { border-color: var(--color-accent); }

  /* Small quantity box: one light rounded outline, no lines inside */
  .qty-stepper { border-color: #e3ded8; border-radius: 8px; background: #fff; }
  .qty-stepper button,
  .qty-stepper input { height: 36px; background: #fff; }
  .qty-stepper button { width: 38px; color: var(--color-text); font-size: 1rem; }
  .qty-stepper button:hover { background: #fff; }
  .qty-stepper input { width: 42px; font-size: 0.95rem; font-weight: 500; color: var(--color-text); }
  /* Two separate buttons, half the width each */
  .detail-actions { margin-bottom: 1rem; gap: 0.6rem; flex-wrap: nowrap; }
  .detail-actions .btn { flex: 1 1 0; min-width: 0; --bs-btn-padding-y: 0.7rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.95rem; --bs-btn-border-radius: 8px; }

  /* Trust line right under the buttons (it was at the bottom, after "How it's used") */
  .detail-info { display: flex; flex-direction: column; }
  .detail-info > * { flex: 0 0 auto; }
  .detail-info > .detail-wholesale,
  .detail-info > .detail-uses { order: 2; }
  .detail-points {
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.74rem;
    line-height: 1.35;
    text-align: center;
  }
  .detail-points i { display: block; margin: 0 0 0.25rem; font-size: 1.15rem; }
  .detail-points .pt-desk { display: none; }
  .detail-points .pt-mob { display: block; }
  .detail-points a { color: inherit; }
}

/* ---------- Laptops and desktops: product page fits the screen height ----------
   Small laptop screens (about 650px tall inside the browser) showed a very big picture
   and the buttons below the fold. The picture now follows the screen height
   (big monitors look the same as before) and the details sit right beside it. */
@media (min-width: 992px) {
  .product-detail-section { padding-top: 2rem; }
  .product-detail-section > .container > .row > .col-lg-6:first-child { width: min(50%, calc(max(340px, 100vh - 250px) + var(--bs-gutter-x))); }
  .product-detail-section > .container > .row > .col-lg-6:last-child { flex: 1 1 0; width: auto; }
}
@media (min-width: 992px) and (max-height: 820px) {
  .detail-descriptor { margin-bottom: 0.6rem; }
  .detail-price-row { margin-bottom: 1rem; }
  .detail-block { margin-bottom: 1rem; }
  .detail-actions { margin-bottom: 1.25rem; }
}

/* Shop and product pages on phones: no top announcement bar, so the product shows sooner */
@media (max-width: 767.98px) {
  .announcement-bar--no-phone { display: none; }
}

/* ---------- Short laptop screens (for example 1920 x 1080 with Windows display scaling at 150%,
   which gives the browser only about 1280 x 600) ----------
   Slimmer header on every page, and a tighter product page, so the picture can stay
   large and the name, price and buttons still fit on the first screen. */
@media (min-width: 992px) and (max-height: 720px) {
  .header-brand,
  .header-search,
  .header-actions { margin-block: 0.7rem; }
  .header-nav .nav-link { padding-block: 0.55rem !important; }
  .header-nav .nav-link::after { bottom: 0.3rem; }

  .page-hero--compact { padding: 0.6rem 0; }
  .product-detail-section { padding-top: 1.25rem; }
  .product-detail-section > .container > .row > .col-lg-6:first-child { width: min(50%, calc(max(340px, 100vh - 210px) + var(--bs-gutter-x))); }

  .detail-category { margin-bottom: 0.2rem; font-size: 0.74rem; }
  .detail-name { margin-bottom: 0.15rem; font-size: 1.5rem; }
  .detail-local { margin-bottom: 0.3rem; font-size: 1.05rem; }
  .detail-descriptor { margin-bottom: 0.5rem; font-size: 0.95rem; }
  .detail-price { font-size: 1.35rem; }
  .detail-price-row { margin-bottom: 0.8rem; }
  .detail-block { margin-bottom: 0.85rem; }
  .detail-label { margin-bottom: 0.35rem; }
  .qty-stepper button,
  .qty-stepper input { height: 38px; }
  .detail-actions { margin-bottom: 1rem; }
}

/* ---------- Phones: shop page ----------
   Categories in one dropdown instead of tabs to swipe; less empty space under the page title. */
@media (max-width: 767.98px) {
  .page-hero:not(.page-hero--compact) { padding: 1.4rem 0 1.25rem; }
  .page-hero .page-title { margin-bottom: 0.35rem; }
  .page-hero .page-intro { margin-bottom: 0; }
  .catalogue { padding-top: 1.25rem; }
  .catalogue-tabs { display: none; }
  /* Row 1: category | sort, row 2: search */
  .catalogue-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cat sort" "search search";
    gap: 0.6rem;
    margin-bottom: 0.75rem;
  }
  .catalogue-controls { display: contents; }
  .catalogue-cat { grid-area: cat; display: block; width: 100%; }
  .catalogue-sort { grid-area: sort; width: 100%; min-width: 0; }
  .catalogue-search { grid-area: search; }
  .catalogue-cat,
  .catalogue-controls .form-select,
  .catalogue-controls .form-control { height: 42px; border-color: #dcd6cf; border-radius: 6px; font-size: 0.88rem; }
  .catalogue-count { margin-bottom: 0.9rem; }
}

/* Shop page on tablets and desktop: less empty space between the page title and the products */
@media (min-width: 768px) {
  .catalogue { padding-top: 2rem; }
}

/* Inner pages (Contact, About) on tablets and desktop: less empty space under the page title,
   the same as the shop page */
@media (min-width: 768px) {
  .page-hero + .section:not(.product-detail-section) { padding-top: 2.5rem; }
}

/* ---------- Phones: menu, product page buy bar, price on request ---------- */
@media (max-width: 991.98px) {
  /* The open menu is solid white: the see-through blur flickered over the page on Android */
  .site-header:has(.navbar-collapse.show),
  .site-header:has(.navbar-collapse.collapsing) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 767.98px) {
  .buy-bar:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 18px rgba(43, 33, 31, 0.08);
  }
  .buy-bar .btn { flex: 1 1 0; min-width: 0; --bs-btn-padding-y: 0.65rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.95rem; --bs-btn-border-radius: 8px; }
  body.has-buy-bar { padding-bottom: 76px; }      /* the footer is not hidden behind the bar */
  .detail-note { margin: 0.25rem 0 0.9rem; font-size: 0.85rem; line-height: 1.45; }
}

/* Phones: wholesale-only product page, two buttons on one line each without wrapping */
@media (max-width: 767.98px) {
  .detail-actions .btn { white-space: nowrap; }
  .detail-actions .btn > .bi { margin-right: 0.15rem; }
  .detail-actions a.btn-brand,
  .detail-actions .btn-whatsapp { --bs-btn-font-size: 0.9rem; }
}

/* ---------- Phones: forms and inner pages ---------- */
@media (max-width: 767.98px) {
  /* Enquiry type as one dropdown on phones */
  .quote-form .choice-group:has(input[name="type"]) { display: none; }
  .quote-form .choice-select { display: block; height: 46px; border-color: #dcd6cf; border-radius: 8px; }
  /* Less empty space under the page title (Contact, About) */
  .page-hero + .section:not(.product-detail-section) { padding-top: 1.25rem; }
}

/* Touch screens: boxes use 16px text. Below 16px an iPhone zooms in when a box is tapped,
   which made the contact form jump sideways and cut off the logo. */
@media (max-width: 991.98px) and (pointer: coarse) {
  input.form-control,
  textarea.form-control,
  select.form-select,
  .qty-stepper input,
  .catalogue-cat { font-size: 16px !important; }
}

/* Phones and tablets: while the menu is open, only the menu scrolls, not the page behind it */
@media (max-width: 991.98px) {
  /* (the page is held still by the dark layer, see initMobileNav in app.js; hiding the page's
     scrolling here moved the header off the screen when the menu was opened lower down) */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    max-height: calc(100dvh - var(--header-height) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phone menu: the search box sits at the top, so its suggestions show right under it
   and the keyboard does not push the menu out of reach */
@media (max-width: 991.98px) {
  #mainNav.show,
  #mainNav.collapsing { display: flex; flex-direction: column; }
  #mainNav .mobile-search { order: -1; margin-top: 0.5rem; margin-bottom: 0.5rem; }
  #mainNav > .navbar-nav { align-self: stretch; width: 100%; margin-inline: 0 !important; }
}

/* Inner page titles on tablets and desktop (Contact, About, Shop): a little less padding */
@media (min-width: 768px) {
  .page-hero:not(.page-hero--compact):not(.page-hero--slim) { padding: 2.25rem 0 1.9rem; }
}

/* ---------- Phones and tablets: menu ----------
   Shorter rows, the page behind is dimmed (tap it to close), the ☰ becomes ✕,
   and a small bar at the bottom shows the menu can be swiped up to close. */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link { padding: 0.62rem 0.25rem !important; font-size: 0.95rem; }
  .navbar-collapse { padding-bottom: 0.4rem; }
  #mainNav.show::after {
    content: "";
    display: block;
    align-self: center;
    width: 44px;
    height: 4px;
    margin: 0.7rem auto 0.1rem;
    border-radius: 4px;
    background: #d9cfc3;
  }
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1029;                /* just under the header with the menu */
    background: rgba(20, 14, 12, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
  }
  html.menu-open .menu-backdrop { opacity: 1; visibility: visible; }
  .header-toggle .bi-x-lg { font-size: 1.25rem; }
}
@media (min-width: 992px) { .menu-backdrop { display: none; } }

/* Phones: less empty space under View All and above About Us on the home page */
@media (max-width: 767.98px) {
  .section--popular { padding-bottom: 1.75rem; }
  #about { padding-top: 2rem; }
}