/* =========================================================================
   MANGAL MUKHE — PHONE & TABLET LAYER

   Everything in this file lives inside a max-width media query, so the
   desktop and laptop layout cannot be affected by anything here. It exists
   because most of this brand's customers shop on a phone, and a layout that
   reads well on a 1600px monitor is not automatically the right one at 390px:
   the order of the page, the density of the cards and the reach of the buy
   button all need to change.

   Loaded after components.css, so it only ever overrides.
   ========================================================================= */

/* ======================================================================== *
 * TABLET AND PHONE  (<= 1023px)
 * ======================================================================== */
@media (max-width: 1023px) {

  /* ---------------------------------------------------------- Header --- */
  /* The nav becomes a fixed drawer at this width and leaves the flow, which
     left the logo and the icons huddled together on the left. */
  .header-actions { margin-left: auto; gap: 0.15rem; }

  /* The header band was eating the top third of a phone screen before a
     single product appeared. Shorter bar, smaller logo. */
  .site-header__inner { min-height: 58px; }
  .brand-logo img { height: 38px; }
  .topbar__inner { min-height: 30px; padding-block: 0.2rem; }

  /* Thumb-sized targets. */
  .icon-btn { width: 44px; height: 44px; }
  .search-open svg, .cart-open svg { width: 21px; height: 21px; }
  /* The menu button is the main way around the site on a phone, so it is
     drawn heavier and wider than the design's desktop hairline. */
  .nav-toggle svg { width: 26px; height: 26px; stroke-width: 2.4; }

  /* An icon inside a button has no intrinsic size, so it stretched to fill
     the button — the WhatsApp mark was taking half the screen. */
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn--lg svg { width: 20px; height: 20px; }

  /* The rotating benefit line clips to one line; its own line-height has to
     match that window or two half-lines show at once. */
  .topbar__mobile b { line-height: 1.2; }

  /* ----------------------------------------------------- Page rhythm --- */
  /* Desktop spacing reads as dead space on a phone. */
  .section { padding-block: clamp(2.25rem, 7vw, 3.25rem); }
  .section--tight { padding-block: clamp(1.75rem, 5vw, 2.5rem); }
  .section-head { margin-bottom: clamp(1.5rem, 5vw, 2rem); }

  /* Background line art is decoration only: it costs layout and bandwidth
     here and is barely visible at this size. */
  .deco { display: none; }

  /* ------------------------------------------------- Home page order --- */
  /* Shopping first. On a phone the collection and the combos come before the
     brand story, so the first scroll after the hero is something to buy. */
  main#main,
  .elementor-widget-html:has([aria-labelledby="collection-h"]) {
    display: flex;
    flex-direction: column;
  }
  [data-hero]                        { order: 1; }
  [aria-labelledby="collection-h"]   { order: 2; }
  [aria-labelledby="combos-h"]       { order: 3; }
  [aria-labelledby="why-h"]          { order: 4; }
  [aria-labelledby="story-h"]        { order: 5; }
  [aria-labelledby="partner-h"]      { order: 6; }
  [aria-labelledby="social-h"]       { order: 7; }
  [aria-labelledby="heritage-h"]     { order: 8; }

  /* ----------------------------------------------------------- Grids --- */
  /* Three columns at 834px makes every card too narrow to read; two is the
     honest maximum on a tablet. */
  .product-grid,
  .product-grid--4,
  .product-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combo-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-points  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Combo titles run to one or two lines depending on the name, which left
     the three cards' images starting at different heights. */
  .combo-card__title { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }

  /* ------------------------------------------------------ Shop page ---- */
  .shop-group + .shop-group { margin-top: clamp(2.25rem, 6vw, 3rem); }
  .shop-group__head { flex-wrap: wrap; gap: 0.35rem; }

  /* The first section after the hero carried the hero's padding and its own,
     which read as a dead band before the first product. */
  .hero + .section,
  [aria-labelledby="collection-h"] { padding-top: clamp(1.25rem, 4vw, 1.75rem); }

  /* ------------------------------------------------- Product detail ---- */
  /* The gallery used to fill the whole screen, pushing the price and the Add
     to Cart button below the fold. Capping it keeps the buy box in reach. */
  .pdp__gallery .gallery__stage { max-height: 58vh; }
  .pdp__gallery .gallery__stage > div img { object-fit: contain; background: var(--c-ivory-warm); }
  .pdp { gap: clamp(1.5rem, 4vw, 2.25rem); }
  .pdp h1 { font-size: clamp(1.8rem, 1.2rem + 3.2vw, 2.4rem); }

  /* Buying comes before reading. The price and the Add to Cart button move
     above the feature ticks, which a shopper can read afterwards. */
  .pdp__info { display: flex; flex-direction: column; }
  .pdp__cat        { order: 1; }
  .pdp__info h1    { order: 2; }
  .pdp__tagline    { order: 3; }
  .pdp__pricerow   { order: 4; }
  .pdp__info > p.pdp__tax { order: 5; }
  .pdp__buy        { order: 6; margin-bottom: var(--sp-5); }
  .pdp__highlights { order: 7; margin-bottom: var(--sp-4); }
  .pdp__badges     { order: 8; }
  .pdp__assurances { order: 9; }

  /* ------------------------------------------------------- Shop page --- */
  /* The intro paragraph explained the range before showing any of it. It
     stays on desktop; here the products lead. */
  [aria-labelledby="shop-h"] .lead { display: none; }
  [aria-labelledby="shop-h"] { padding-block: clamp(1rem, 4vw, 1.5rem) 0; }
  [aria-label="Products"] { padding-top: clamp(1rem, 3vw, 1.5rem); }

  /* -------------------------------------------------------- B2B page --- */
  /* The maroon band ran for most of a screen before anything actionable. */
  .partner-band--hero { padding-block: clamp(1.75rem, 5vw, 2.75rem); }
  .partner-band--hero h1 { font-size: clamp(1.9rem, 1.3rem + 3.4vw, 2.6rem); }
  .partner-band p { font-size: 0.95rem; }
  .partner-points { margin-top: var(--sp-4); gap: var(--sp-3); }
  .partner-point__icon { width: 38px; height: 38px; }
  .partner-point__icon svg { width: 18px; height: 18px; }
  .partner-point b { font-size: 0.82rem; }
  .partner-point span { font-size: 0.78rem; }

  /* Talk to us first; the explanation of who we work with follows. */
  .elementor-widget-html:has([aria-labelledby="b2b-h"]) {
    display: flex;
    flex-direction: column;
  }
  [aria-labelledby="b2b-h"]     { order: 1; }
  .elementor-widget-html:has([aria-labelledby="b2b-h"]) > nav.breadcrumb { order: 2; }
  #enquiry                      { order: 3; }
  [aria-labelledby="who-h"]     { order: 4; }
  [aria-labelledby="process-h"] { order: 5; }
  [aria-labelledby="why-b2b-h"] { order: 6; }

  /* Circle icons were drawn at desktop scale inside cards half the width. */
  .benefit__icon, .pillar__icon { width: 46px; height: 46px; }
  .benefit__icon svg, .pillar__icon svg { width: 21px; height: 21px; }
  .benefit h3, .pillar h3 { font-size: 1rem; }

  /* ------------------------------------------------- Cart & checkout --- */
  /* The banner on these two pages was a desktop-sized title block. */
  .page-banner--store { padding-block: clamp(0.9rem, 3vw, 1.4rem); }
  .page-banner--store h1 { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2rem); }
  .page-banner--store .eyebrow { margin-bottom: 0.25rem; }

  /* ------------------------------------------------------- Checkout ---- */
  .checkout-step { padding: clamp(1rem, 4vw, 1.5rem); }
}

/* ======================================================================== *
 * PHONE  (<= 767px)
 * ======================================================================== */
@media (max-width: 767px) {

  /* ---------------------------------------------------------- Header --- */
  /* Thumbs, not cursors: the three controls are the only navigation on a
     phone, so they get real target sizes while the band itself gets shorter.
     The logo keeps the size it had. */
  /* The parent theme also pads the header band itself; on a phone that is
     32px of nothing above the fold. */
  .site-header { padding-block: 4px; }
  .site-header__inner { min-height: 52px; }
  .icon-btn { width: 48px; height: 48px; padding: 0; }
  .search-open svg, .cart-open svg { width: 26px; height: 26px; }
  .nav-toggle svg { width: 30px; height: 30px; stroke-width: 2.6; }
  .header-actions { gap: 0; margin-right: -0.4rem; }

  /* ------------------------------------------------- Page headings ----- */
  /* Less air between the title and the first thing a shopper can tap. */
  .breadcrumb { margin-block: 0.5rem; font-size: 0.7rem; }
  .ornament-title { margin-bottom: 0.25rem; }
  .eyebrow--center { margin-bottom: 0.4rem; }
  [aria-labelledby="shop-h"] { padding-block: 0.35rem 0; }
  [aria-labelledby="shop-h"] h1 { font-size: clamp(1.55rem, 1.15rem + 2.4vw, 1.95rem); }
  .shop-filters { margin-block: 0.85rem 1rem; gap: 0.4rem; }
  [aria-label="Products"] { padding-top: 0.35rem; }

  /* ---------------------------------------------------------- Footer --- */
  /* One column made the footer a long red scroll. Two columns, no repeated
     brand prose, and the contact block full width where it is readable. */
  .site-footer { padding-top: 1.5rem; font-size: 0.8rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand img { height: 40px; margin-bottom: 0.4rem; }
  /* The logo already says the name and the promise; both lines were repeats. */
  .footer-brand p { display: none; }
  .footer-social { justify-content: center; margin-top: 0.6rem; gap: 0.5rem; }
  .footer-social a { width: 38px; height: 38px; }
  .footer-col h2 { margin-bottom: 0.4rem; }
  .footer-col li { margin-bottom: 0.3rem; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-contact li { margin-bottom: 0.4rem; }
  .footer-contact small { display: none; }
  /* The full address lives on the contact page, with a map. Here the three
     ways to actually reach someone are enough. */
  .footer-contact li:first-child { display: none; }
  .footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    font-size: 0.68rem;
    padding-block: 0.9rem;
  }

  /* ------------------------------------------------------ Type scale --- */
  /* The hero copy sat in desktop-sized padding, which read as a dead gap
     between the buttons and the first product. */
  .hero__copy { padding-block: clamp(1.5rem, 6vw, 2.25rem); }
  .hero__sub { margin-bottom: var(--sp-5); }

  /* Long measures and generous leading are a desktop luxury. */
  .lead { font-size: 1rem; line-height: 1.6; }
  .section-head .lead { max-width: 40ch; margin-inline: auto; }

  /* The gold rules either side of a heading collapse to stubs at this width. */
  .ornament-title::before,
  .ornament-title::after { display: none; }
  .ornament-title { justify-content: center; }

  /* ----------------------------------------------------------- Cards --- */
  /* Density over prose: the name, the size and the price are what a shopper
     scans on a phone. The blurb is one tap away on the product page. */
  .product-card__blurb { display: none; }
  .product-card__body { padding: 0.9rem 0.85rem 1rem; gap: 0.35rem; }
  .product-card__name { font-size: 1rem; }
  .product-card__price { font-size: 1.15rem; margin-top: 0.2rem; }
  .product-card__actions .btn--ghost { display: none; }   /* the card itself links there */
  .product-card__tag { font-size: 0.58rem; padding: 0.3rem 0.5rem; }

  .combo-card { padding: 1rem 0.9rem 1.15rem; }
  .combo-card__title { font-size: 1.05rem; min-height: 0; }
  .combo-card__kicker { font-size: 0.68rem; }
  .combo-card__includes { font-size: 0.8rem; }

  /* One column for combos: three jars in a 165px card show nothing. */
  .combo-grid { grid-template-columns: 1fr; }

  /* ------------------------------------------------- Product detail ---- */
  .pdp__gallery .gallery__stage { max-height: none; aspect-ratio: 1 / 1; }
  .pdp__assurances { grid-template-columns: 1fr; gap: 0.75rem; }
  .pdp__assurance span { white-space: normal; }
  .pdp__badges { gap: 0.35rem; }
  .pdp__badge { font-size: 0.6rem; padding: 0.35rem 0.6rem; }
  .tabs__list { gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__tab { white-space: nowrap; }

  /* Related products are useful but not before the tabs have been read. */
  .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ------------------------------------------------------- Partner ----- */
  /* The trade pitch is the heading and the two buttons. The paragraph and the
     supporting copy under each point are a desktop read; here they only push
     the enquiry form further away. */
  .partner-band--hero .partner-band__inner p:not(.eyebrow) { display: none; }
  .partner-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem var(--sp-4); margin-top: var(--sp-4); }
  .partner-point span { display: none; }
  .partner-point b { font-size: 0.74rem; line-height: 1.3; }
  .partner-point__icon { width: 32px; height: 32px; }
  .partner-point__icon svg { width: 16px; height: 16px; }

  .b2b-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-stat b { font-size: 1.5rem; }
  .b2b-stat span { font-size: 0.62rem; }
  .step-grid { grid-template-columns: 1fr; }

  /* --------------------------------------------------- Shop heading ---- */
  .section-head--center { margin-bottom: 1rem; }
  .shop-filters { margin-block: 0.5rem 1.25rem; }

  /* --------------------------------------------------------- Forms ----- */
  .field-grid { grid-template-columns: 1fr; }
  .form-card { padding: 1.15rem 1rem 1.35rem; }
  .input, .select, .textarea { font-size: 16px; }   /* stops iOS zooming on focus */

  /* ---------------------------------------------------------- Cart ----- */
  .cart-row { grid-template-columns: 72px 1fr; gap: 0.85rem; }
  .cart-row__right { grid-column: 2; display: flex; align-items: center; justify-content: space-between; }
  .summary { padding: 1.15rem 1rem 1.35rem; }

  /* --------------------------------------------------------- Trust ----- */
  .trust-strip { gap: 0.75rem 1.25rem; font-size: 0.72rem; }

  /* The group heading and its count fought for one line at 390px. */
  .shop-group__head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}

/* ======================================================================== *
 * STICKY BUY BAR  (phones, product pages)
 * Built by mobile.js once the main buy box scrolls out of view, so the price
 * and Add to Cart are always one thumb away.
 * ======================================================================== */
.mm-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem clamp(0.9rem, 4vw, 1.25rem);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--c-ivory);
  border-top: 1px solid var(--c-line-soft);
  box-shadow: 0 -8px 24px rgba(43, 33, 26, 0.12);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.mm-buybar.is-visible { transform: none; }
.mm-buybar__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mm-buybar__price b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--c-maroon);
}
.mm-buybar__price span {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.mm-buybar .btn { flex: 1; min-height: 48px; }

@media (max-width: 767px) {
  body.mm-has-buybar .mm-buybar { display: flex; }
  /* The floating cart button would sit on top of the bar. */
  body.mm-has-buybar .cart-fab { bottom: 84px; }
}

/* ======================================================================== *
 * FLOATING CART BUTTON
 * It only appears once there is something in the basket, so a slow pulse is
 * a reminder rather than noise. Stilled for anyone who asks for less motion.
 * ======================================================================== */
@keyframes mm-fab-glow {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(185, 143, 62, 0.55); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 14px rgba(185, 143, 62, 0); }
}
.cart-fab.is-visible { animation: mm-fab-glow 2.4s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .cart-fab.is-visible { animation: none; }
}

/* ======================================================================== *
 * GALLERY SWIPE
 * The stage is swipeable on touch devices; these dots say so.
 * ======================================================================== */
/* The stage handles horizontal gestures itself. Without this, a swipe can be
   taken as the browser's own back/forward gesture and leave the page. */
.gallery__stage {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.gallery__dots {
  display: none;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.gallery__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-line);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery__dots button[aria-current="true"] {
  background: var(--c-maroon);
  transform: scale(1.25);
}

@media (max-width: 767px) {
  .gallery__dots { display: flex; }
  /* Thumbnails and dots together are redundant on a narrow screen; the
     labelled thumbs stay, since they name what each shot shows. */
  .gallery__thumbs button span { font-size: 0.55rem; }
}