/* ============================================================
   Rabreez — Mobile responsiveness overrides
   ------------------------------------------------------------
   Every rule in this file lives inside an @media (max-width:...)
   block. Above 1024px nothing here applies, so desktop rendering
   is completely unaffected — this file only adds behavior below
   the breakpoints, it never removes or overrides desktop styles.
   Loaded last (after layout-fix.css) so it wins the cascade on
   the widths it targets.
   ============================================================ */

/* ============================================================
   Tier 1 — Tablets / small laptops (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* overflow-x:hidden on html/body stops horizontal scroll, but it's
     also a well-known way to accidentally break position:sticky on
     descendants (like the header) in mobile browsers — setting any
     overflow value here makes html/body the sticky positioning
     context instead of the viewport. overflow-x:clip prevents the
     same horizontal scroll without that side effect. No :hidden
     fallback — a stray :hidden declaration was still tripping the
     same sticky-context bug on some Chromium builds under fractional
     display scaling (visible as the header snapping ~20-40px into
     scroll, right as it transitions into its stuck state). */
  html, body { overflow-x: clip; }
  img, video { max-width: 100%; height: auto; }

  .container { padding: 0 18px; }

  /* Header: give the nav row breathing room before it collapses at 991px */
  .site-header .container { gap: 18px; }

  /* Account icon's hover-to-logout dropdown is desktop-only by design
     (mobile just taps through to the account page) — but plain CSS
     :hover with no media guard still gets triggered by a tap on touch
     devices, so it can flash/stick open on mobile. Force it off here. */
  .acct-hover:hover .acct-drop { opacity: 0; visibility: hidden; }

  /* Product / category grids */
  .grid.g4, .grid.g5, .grid.g6 { grid-template-columns: repeat(3, 1fr); }
  .grid.g3 { grid-template-columns: repeat(2, 1fr); }
  #shop-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-row { grid-template-columns: repeat(3, 1fr); }
  .insp-feats { grid-template-columns: repeat(2, 1fr); }

  /* Two-pane layouts: keep side-by-side a little longer, narrow the rails */
  .shop-layout { grid-template-columns: 200px 1fr; }
  .pd-layout { grid-template-columns: 76px 1fr; }
  .pd-layout .pd-info { grid-column: 1 / -1; }

  /* Footer: 5 columns is too tight on tablets */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

/* ============================================================
   Tier 2 — Phones / small tablets (<=991px)
   Mobile navigation kicks in here.
   ============================================================ */
@media (max-width: 991px) {
  .mnav-toggle { display: flex; order: 3; }

  /* .site-header's own position:sticky + z-index:100 creates a stacking
     context, which caps how high its descendant .nav panel can render
     relative to page-level siblings like #mnav-backdrop. Raise the header's
     context above the backdrop so the open panel (and the toggle button
     used to close it) stay on top and tappable. */
  .site-header { z-index: 9996; }

  .site-header .container { flex-wrap: nowrap; position: relative; }
  /* Hamburger before the logo on mobile only — desktop has no toggle
     button at all, so this never applies there. */
  .mnav-toggle { order: 1; }
  .header-icons { order: 4; margin-left: auto; }
  /* Scoped to the HEADER logo specifically — .logo is also the class
     on the footer's brand logo, and an earlier unscoped version of
     this rule made that escape to the top of the page, since the
     footer itself isn't a positioning anchor for it to center within.
     Positioned independent of the hamburger/icon-group widths (which
     aren't equal, so normal flow drifted it off-center); left is
     slightly under 50% per request, not dead-center. */
  .site-header .logo { position: absolute; left: 46%; top: 50%; transform: translate(-50%, -50%); }

  .nav {
    order: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 84%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 20px 24px 24px;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 9995;
  }
  .nav.mnav-open { transform: translateX(0); }
  /* Logo + close button row at the top of the panel — replaces the old
     84px top padding that just faked clearing the page header. */
  .mnav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line, #EBE0CF); }
  .mnav-logo img { height: 32px; display: block; }
  .mnav-close { background: none; border: 0; padding: 4px 6px; font-size: 26px; line-height: 1; color: var(--ink, #231A14); cursor: pointer; }
  .nav > a, .nav .has-drop { width: 100%; }
  .nav > a { padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--line, #EBE0CF); }
  /* The label (<a>) and the caret toggle are now separate elements — row
     styling (border, spacing) moves to the shared parent; flex-wrap lets
     .drop fall onto its own line below when expanded. */
  .nav .has-drop { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
  .nav .has-drop > a { flex: 1; padding: 13px 0; border-bottom: 1px solid var(--line, #EBE0CF); }
  /* NEW — align-items:stretch above makes this match the label's full row
     height instead of shrinking to the caret glyph's own line-height, so
     both border-bottoms land on the same line instead of stepping. */
  .nav .has-drop > .drop-toggle { padding: 0 8px 0 10px; border-bottom: 1px solid var(--line, #EBE0CF); display: flex; align-items: center; justify-content: center; }

  /* Submenus become tap-to-expand accordions instead of hover flyouts */
  .has-drop .drop {
    display: block; /* .drop is a <span> — max-height/overflow only clip block boxes */
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    min-width: 0;
    width: 100%;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .has-drop.mnav-drop-open .drop { max-height: 70vh; padding: 4px 0 10px 12px; }
  .has-drop .drop a { padding: 10px 0; font-size: 14.5px; }

  /* Two-pane layouts fully stack */
  .shop-layout { grid-template-columns: 1fr; margin-top: 20px; }
  .filters { position: static; top: auto; margin-bottom: 18px; }
  .pd-layout { grid-template-columns: 1fr; margin-top: 18px; }
  .pd-thumbs { order: 2; display: flex; flex-direction: row; overflow-x: auto; gap: 10px; }
  .pd-main { order: 1; }
  .pd-info { order: 3; }
  .pd-delivery { grid-template-columns: 1fr; }
  /* Reviews tab's "0 / 5" summary block only (the top-of-page rating next
     to the product name already renders fine) — its stars + review-count
     siblings crowd it on a narrow screen, so the "/ 5" span shrinks and
     wraps its own text onto a second line instead of staying on one. */
  .tab-body[data-tab-body="rev"] .pd-rating { flex-shrink: 0; white-space: nowrap; }
  .tab-body[data-tab-body="rev"] .pd-rating span { white-space: nowrap; }
  /* On narrower phones (~360px), even with the above the 5 fixed-size
     stars leave too little room for the review-count text, which then
     pokes past the card's right edge instead of staying inside it —
     shrink the stars (they're inline-styled, hence !important) and let
     the review-count wrap/shrink into whatever's left. */
  .tab-body[data-tab-body="rev"] .pd-delivery { gap: 8px !important; padding: 16px 12px !important; flex-wrap: wrap !important; }
  .tab-body[data-tab-body="rev"] .stars { font-size: 15px !important; letter-spacing: 0px !important; }
  /* On very narrow phones there's no width left for this at all next to
     the score + stars — rather than squeeze it into a sliver (breaking
     "reviews" apart letter by letter), let it drop to its own full-width
     line below instead. */
  .tab-body[data-tab-body="rev"] .pd-delivery > span:last-child { flex: 1 0 100%; margin-left: 0 !important; text-align: left; white-space: normal; }
  .wsel { grid-template-columns: repeat(2, 1fr); }
  .feat-strip { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(2, 1fr); }
  .fbt { flex-direction: column; align-items: stretch; text-align: center; }
  .fbt-total { text-align: center; }

  /* Tab labels (Description/Ingredients/Storage Info/Reviews/Shipping &
     Returns) overflow their container with no way to reach the later
     ones — give it a real horizontal scroller. */
  /* Extra right padding beyond the base 22px — even scrolled all the way,
     the last tab's trailing character (e.g. the "s" in "Reviews (2
     reviews)") was getting clipped by the scroll boundary. */
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 34px; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav button { flex: none; white-space: nowrap; padding: 14px 14px; }
  .tab-body { grid-template-columns: 1fr; padding: 20px; }

  /* Cart row: image(92)+qty(~124)+price(90)+total(100) never fit one line
     on a phone — wrap into a 2-line card instead of letting price/total
     get pushed off-screen. */
  .cart-row, .cart-item { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
  .cart-row img, .cart-item img { width: 60px; height: 60px; order: 1; flex: none; }
  .cart-row-info, .cart-row .cart-row-info { order: 2; flex: 1 1 160px; min-width: 0; }
  .cart-row-info .cart-title, .cart-item .cart-title { font-size: 14.5px; }
  .cart-remove-btn { order: 3; flex: none; }
  .cart-qty-box { order: 4; flex: none; }
  .cart-price { order: 5; width: auto; text-align: left; }
  .cart-total { order: 6; width: auto; margin-left: auto; text-align: right; }

  .cart-layout, .co-layout { grid-template-columns: 1fr; }
  .summary, .cart-summary-panel { position: static; top: auto; margin-top: 18px; }
  /* NEW — cart/checkout mobile footer-gap fix. Root cause was
     .site-footer's global margin-top:70px (style.css) — fine on pages
     with enough content to fill the viewport, but the dominant source
     of blank space on these two short-content pages. Scoped via the
     sibling selector so only these two pages' footer is affected,
     desktop and every other page keep the 70px margin. */
  #checkout-checkout { min-height: 30vh !important; }
  .cart-empty-state { padding: 40px 0; }
  #checkout-cart ~ .site-footer,
  #checkout-checkout ~ .site-footer { margin-top: 24px; }
  /* END NEW */
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "info" "map" "form"; }
  .about-story { grid-template-columns: 1fr; gap: 26px; }
  .occ-grid { grid-template-columns: 1fr; }
  .story-row { grid-template-columns: 1fr; }
  .enquiry-grid { grid-template-columns: 1fr; }
  .faq-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .register-row2, .edit-account-row2, .address-row2, .enq-form { grid-template-columns: 1fr; }

  /* Homepage hero */
  /* Same structure as desktop — text on the left, image on the right,
     within one bordered visual — just at mobile proportions (a wider
     text column, smaller type) instead of stacking or overlaying text
     across the whole photo. */
  /* .on only — the carousel's own JS relies on inactive slides staying
     display:none (set by home-1.css's base .hero-v1 .slide rule). */
  .hero-v1 .slide.on { display: block; }
  .hero-v1 .hbg { aspect-ratio: 4/3; max-height: 300px; min-height: 268px; object-position: right center; }
  /* Left-to-right cream tint, same direction as desktop's, just reaching
     further across since the text column is proportionally wider on a
     narrow screen — image on the right stays fully clear. */
  /* Fading out over just 52%->68% (16% span) read as a hard seam
     between the text panel and the image instead of a blend — widened
     the fade zone so it tapers off gradually with no visible line. */
  .hero-v1 .slide::after { background: linear-gradient(90deg, rgba(253,246,234,.97) 0%, rgba(253,246,234,.8) 40%, rgba(253,246,234,.35) 62%, rgba(253,246,234,0) 88%); }
  /* Text is vertically centered in a fixed-height box, so a slide with
     more copy (longer description, in this case) pushes the CTA row
     right up against the bottom edge while shorter slides have room
     to spare. Bottom padding keeps a safety margin for every slide. */
  /* Widened 56% -> 62% — the extra room (plus the tighter type sizes
     below) is what actually lets everything fit without crowding,
     including both CTA buttons sharing one row. */
  .hero-v1 .container { padding: 20px 16px 26px; }
  .hero-v1 .htext { flex: 0 0 62%; max-width: 62%; }
  /* nowrap+ellipsis so the kicker can never wrap to a second line,
     whatever the slide's actual kicker text length. */
  .hero-v1 .kicker { font-size: 10.5px; letter-spacing: .03em; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Red-on-red: the accent word sits over photo slides with similarly warm
     tones (e.g. a red/pink gift box), which can make pure red text hard to
     read even with the gradient behind it. Keep the color, add a soft
     light glow so it stays legible against any slide's background. */
  .hero-v1 .kicker em { text-shadow: 0 0 6px rgba(253,246,234,.9), 0 0 2px rgba(253,246,234,.9); }
  .hero-v1 h1 { font-size: clamp(18px, 5.6vw, 23px); line-height: 1.12; }
  .hero-v1 .orn-line { margin: 7px 0; }
  .hero-v1 .orn-line::before, .hero-v1 .orn-line::after { width: 20px; }
  .hero-v1 p.lead { font-size: 11px; max-width: none; margin-bottom: 12px; line-height: 1.4; }
  /* Two full labels genuinely don't fit side by side within the 62%
     text column at any legible size — that's the actual constraint,
     not a sizing detail. Letting just the button row extend wider
     than the text column (into the image area, which the gradient
     already keeps legible) gives both buttons real room to show their
     full text without shrinking or clipping either one. */
  .hero-v1 .cta { flex-wrap: nowrap; gap: 8px; width: 148%; }
  .hero-v1 .cta .btn { flex: 0 0 auto; padding: 10px 14px; font-size: 12px; white-space: nowrap; }
  .hero-v1 .cta .btn-outline { background: rgba(255,255,255,.55); }
  /* Desktop's :hover turns this button's text white — on mobile that
     :hover state can stick after a tap (no real pointer to move away),
     leaving white text on this button's light translucent background,
     nearly invisible. Keep the text red on tap here instead. */
  .hero-v1 .cta .btn-outline:hover, .hero-v1 .cta .btn-outline:active, .hero-v1 .cta .btn-outline:focus { color: var(--red); }
  /* The overlaid text block fills nearly the whole short mobile hero top
     to bottom (kicker+heading near the top, CTA row near the bottom), so
     a fixed-position arrow collides with one or the other depending on
     content length — confirmed both a bottom placement (hit the CTA row)
     and a top placement (hit the heading). The carousel autoplays every
     6s on its own (main.js), so manual controls aren't required. Dots
     still fit in the ~46px gap below the CTA row, restyled as plain
     circles below instead of desktop's stretched pill shape. */
  .hero-v1 .car-prev, .hero-v1 .car-next { display: none; }
  .hero-v1 .dots { bottom: 12px; gap: 6px; }
  .hero-v1 .dots button { width: 7px; height: 7px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); }
  .hero-v1 .dots button.on { width: 7px; background: var(--red); border-color: var(--red); }

  .fest-banner, .cta-band { flex-direction: column; text-align: center; padding: 26px; gap: 18px; }
  .fest-banner .fimg { width: 130px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }

  .newsletter { flex-direction: column; align-items: stretch; text-align: center; padding: 22px; }
  .newsletter form { width: 100%; }
  .trust { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  /* Desktop's divider (.trust-item + .trust-item::before) is a single
     left-edge line, built for one row of 4 — wrapped into this 2x2
     grid it would misalign, so it's turned off here. A "+"-shaped
     divider suited to an actual 2x2 grid replaces it instead: a
     vertical line between the two columns, a horizontal line between
     the two rows — same divider concept as desktop, adapted to this
     layout instead of just dropped. */
  .trust-item + .trust-item::before { display: none; }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  /* Desktop sizing (34px icon, 15px/13px text, 22px/26px padding) wraps
     every title and subtitle across 2-3 lines at half the card's width on
     mobile, making each box tall instead of compact. Shrink everything in
     proportion so it reads as a dense box, icon still clearly visible. */
  .trust-item { padding: 14px 12px; gap: 8px; }
  .trust-item .ti img { width: 20px; height: 20px; }
  .trust-item b { font-size: 12.5px; line-height: 1.25; }
  .trust-item span { font-size: 10.5px; line-height: 1.3; }

  /* Top-only, matching the same fix in style.css — mobile.css loads
     last and would otherwise reinstate the symmetric padding this was
     just corrected away from. The old .sec-trust bottom-padding
     override (16px) is no longer needed now that .sec's own bottom
     padding is 0 by default. */
  .sec { padding: 40px 0 0; }
  .sec-head h2 { font-size: 26px; }
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }

  .story-card { flex-direction: column; text-align: center; }
  .story-card img { width: 100%; height: 200px; }

  /* "Added to cart" toast reads as a mobile notification — top, not bottom.
     --header-h is set live by header.twig to the real header height, so
     this sits just below the header on any page, not a homepage guess. */
  #toast-wrap { left: 16px; right: 16px; top: calc(var(--header-h, 90px) + 10px); bottom: auto; }
  .toast { width: 100%; box-sizing: border-box; animation: toastInTop .4s var(--ease); }
  .toast.out { animation: toastOutTop .35s var(--ease) forwards; }
  @keyframes toastInTop { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes toastOutTop { to { opacity: 0; transform: translateY(-10px); } }

  /* Any fixed screen position eventually lands on top of real content on
     this single-column mobile layout (it already has, twice: "Clear All
     Filters", then the checkout "Address 1" field — confirmed it was
     intercepting taps there). Hiding it removes the whole bug class;
     native scroll gestures cover the same need on mobile. */
  #toTop { display: none; }

  /* Checkout step content (Checkout Options, Address, Shipping,
     Payment, Confirm) is injected via AJAX from OpenCart's own
     default sub-templates — plain <h2>/<h3> headings, <p> text, and
     an unwrapped <input class="btn"> button, none of which the
     .co-form/.co-card system actually has spacing rules for (the
     existing rules target .co-card h3/legend/.buttons, none of which
     this real markup uses) — so everything sits flush with zero gap
     at any screen size. Only fixing it on mobile per request; the
     same gap exists on desktop too but is left alone for now. */
  .co-form h2, .co-form h3 { margin-bottom: 10px; }
  .co-form > p, .co-form p { margin-bottom: 14px; line-height: 1.5; }
  .co-form .radio, .co-form .checkbox { margin: 0 0 12px; }
  .co-form input[type="button"].btn,
  .co-form input[type="submit"].btn,
  .co-form button.btn { margin-top: 8px; }

  /* Raw Bootstrap-markup tables (order summary, address book, account
     orders/returns, etc.) already wrap in the standard `.table-responsive`
     div — style that wrapper, not the <table> itself. Forcing
     display:block onto the <table> (an earlier attempt) breaks the
     table's native layout mode, which breaks colspan — that's exactly
     why the checkout totals ("Sub-Total:", "Total:") rendered blank. */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive table { white-space: nowrap; }

  /* Checkmark + label rows: no flex-wrap meant items shrank instead of
     stacking, forcing the text (not the checkmark) onto two lines and
     breaking the alignment between the icon and wrapped text. */
  .pd-assure { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Defensive: guarantee AJAX-loaded free text (reviews, alerts) can
     never overflow its card regardless of device text-wrap quirks. */
  .rv-card p, .rv-header strong { overflow-wrap: break-word; word-break: break-word; }
  .pm-changed-note span { min-width: 0; overflow-wrap: break-word; }
}

/* ============================================================
   Tier 3 — Phones (<=767px)
   ============================================================ */
@media (max-width: 767px) {
  .grid.g3, .grid.g4, .grid.g5, .grid.g6, #shop-grid, .chip-row, .wishlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .account-grid { grid-template-columns: 1fr; }

  /* Home "Gifting by Occasion" — same swipeable horizontal slider treatment
     as "Shop by Category" above, mobile only (desktop keeps its untouched
     3-column .occ-cards grid). */
  .occ-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 4px;
  }
  .occ-cards::-webkit-scrollbar { display: none; }
  .occ-cards .occ-card { flex: 0 0 220px; }

  /* Home "Shop by Category" — swipeable horizontal slider on mobile only
     (desktop keeps the untouched .grid.g4 4-column grid); same CSS-only
     horizontal-scroll pattern already used for the Shop page's
     category-filter chips. */
  .cat-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 4px;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-grid .catcard { flex: 0 0 200px; }

  /* Narrower 2-column cards here have much less room next to the price
     than desktop's 3-4 columns — shrink the stepper so a 4-digit price
     (e.g. ₹1,220) and the control both still fit on one row, and let the
     row wrap as a last resort instead of ever clipping either one. */
  .prow { flex-wrap: wrap; row-gap: 6px; }
  .pcart-row { justify-content: flex-end; }
  .qty-stepper { gap: 4px; padding: 4px; height: 32px; width: auto; }
  .qty-btn { width: 24px; height: 24px; font-size: 13px; }
  .qty-val { min-width: 18px; font-size: 13px; }
  .pcart-row .addcart { height: 32px; width: 32px; font-size: 15px; border-radius: 50%; }
  .pcart-row .cart-ctrl { width: auto; }

  /* Shop grid + Search results + Category/subcategory grid: instead of
     letting the stepper wrap onto a second line only when the price/unit
     text happens to be long (inconsistent from card to card, breaking
     row-height alignment), always force it onto its own full-width line
     via a zero-size `order`-positioned spacer — same clean two-row look
     as Home's Favourites, but CSS-only so desktop's single-row layout
     (no media match there) is completely untouched. */
  #shop-grid .prow::before,
  .srch-grid .prow::before,
  #category-grid .prow::before {
    content: '';
    flex-basis: 100%;
    order: 2;
  }
  #shop-grid .prow > .addcart,
  #shop-grid .prow > .cart-ctrl,
  .srch-grid .prow > .addcart,
  .srch-grid .prow > .cart-ctrl,
  #category-grid .prow > .addcart,
  #category-grid .prow > .cart-ctrl {
    order: 3;
    margin-left: auto;
    margin-right: -6px;
  }
  /* Price sits left, unit sits at the far right of that same first row
     (instead of bunched right next to the price) — .price becomes its
     own full-width row so its raw price text and the nested .unit span
     land at opposite ends. */
  #shop-grid .prow > .price,
  .srch-grid .prow > .price,
  #category-grid .prow > .price {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
  }

  /* Tapping the +/- control on touch devices can leave the card's
     desktop-only hover lift (:hover translateY + shadow) stuck "on"
     since touch simulates :hover with no real mouse-leave to clear it —
     reads as the card jumping/flickering right when the stepper
     updates. Neutralize the hover lift for these two grids on mobile;
     desktop (real mouse hover) is untouched since this rule only lives
     inside this media query. */
  #shop-grid .pcard:hover,
  .srch-grid .pcard:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }

  /* layout-fix.css already switches .container > .row to flex-direction:
     column on mobile (sidebar pages like Account), but never overrides
     align-items:flex-start from its base rule. In a column flex container
     that governs the CROSS axis (width), so #content/#column-left shrink
     to their own content instead of filling the row — exactly the
     right-side gap on My Account. stretch is the one missing piece. */
  .container > .row { align-items: stretch; }

  /* layout-fix.css's 30px flex `gap` (meant for desktop's side-by-side
     content+sidebar) becomes a large vertical gap once stacked here on
     mobile — on top of that, .sidebar-module's own margin-top:50px
     (pages.css, a desktop-only visual alignment offset against the
     content column) stacks right in front of it, compounding into a
     large dead zone above the account menu card. Both are tightened to
     mobile-appropriate values here only; desktop never enters this
     @media block, so its side-by-side layout is untouched. */
  .container > .row { gap: 16px; }
  .container > .row > #column-left .sidebar-module,
  .container > .row > #column-right .sidebar-module { margin-top: 0; }

  /* All vertical — one column, not the 2-column grid. Order below
     sequences them Shop, Quick Links, Customer Care, We Accept
     (DOM order is Brand, Shop, Customer Care, Quick Links, We Accept —
     `order` resequences without touching the underlying HTML). */
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding: 40px 0 30px; text-align: left; }
  .footer-grid .fcol:nth-child(1) { order: 0; }
  .footer-grid .fcol:nth-child(2) { order: 1; } /* Shop */
  .footer-grid .fcol:nth-child(4) { order: 2; } /* Quick Links */
  .footer-grid .fcol:nth-child(3) { order: 3; } /* Customer Care */
  .footer-grid .fcol:nth-child(5) { order: 4; } /* We Accept */
  /* We Accept badges: single centered column, in this exact order —
     Visa, RuPay, Mastercard, NetBanking, UPI — via `order` only, the
     underlying HTML/content order is untouched. */
  /* Compact chips wrapping into a row/column grid — sized to their own
     content instead of stretched full-width — rather than one badge
     per full-width row. */
  .pay-badges { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
  .pay-badges .pb { justify-content: center; width: auto; }
  .pay-badges .pb:nth-child(1) { order: 1; } /* Visa */
  .pay-badges .pb:nth-child(2) { order: 3; } /* Mastercard */
  .pay-badges .pb:nth-child(3) { order: 5; } /* UPI */
  .pay-badges .pb:nth-child(4) { order: 2; } /* RuPay */
  .pay-badges .pb:nth-child(5) { order: 4; } /* NetBanking */

  /* Assurance line (Secure Payments / Hygienically Packed / On-time
     Delivery) is its own full-width row (style.css) — this needs to
     genuinely fit one line on a ~360px phone: tighter gaps, smaller
     text and checkmark spacing than the previous attempt, which still
     wrapped to 2 lines. */
  /* Desktop dropped this divider line — kept here so mobile's look is
     unchanged. */
  .f-assure { gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
  .f-assure span { font-size: 10.5px; white-space: nowrap; }
  .f-assure span::before { margin-right: 4px; }

  /* Social icons are moved into here (above the copyright), by
     main.js, on mobile only — the icons stay a single element in the
     HTML (under the about text) for desktop; nothing here duplicates
     markup. align-items:center (inherited from the desktop rule,
     untouched) centers them once relocated. */
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 0; }
  /* Divider above the copyright line specifically (not above the
     social icons row before it) — full-width even though the text
     itself is centered and narrower than the row. Extra padding-bottom
     because the floating WhatsApp button (fixed, bottom-right) sits over
     whatever content ends up at the very bottom of the page. */
  .footer-bottom > span { width: 100%; border-top: 1px solid var(--line); padding-top: 12px; padding-bottom: 60px; }
  .wa-float { width: 46px; height: 46px; bottom: 18px; right: 18px; }
  /* Once relocated into footer-bottom, spacing comes from that flex
     gap — the margin-top added for desktop's under-the-about-text
     placement would otherwise double up with it here. */
  .footer-bottom .socials { margin-top: 0; }

  /* Shop / Customer Care / Quick Links / We Accept become tap-to-expand
     accordion sections on mobile only — collapsed by default (main.js
     strips the `open` attribute these <details> start with, which is
     only there so desktop — untouched by this block — keeps showing
     everything without needing JS at all). */
  .facc { border-top: 1px solid var(--line); padding: 14px 0; }
  .facc summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  .facc summary h4 { margin-bottom: 0; }
  .facc summary::after { content: "⌃"; color: var(--ink-soft); font-size: 12px; transition: transform .3s; }
  .facc:not([open]) summary::after { transform: rotate(180deg); }
  .facc[open] ul, .facc[open] .pay-badges { margin-top: 14px; }

  .about-hero, .faq-hero { padding-top: 46px; padding-bottom: 40px; }
  /* NEW — matches the Gifting hero's mobile pattern: left-aligned text,
     a divider ornament, then a button + image inside the same cream
     panel (both hidden on desktop by default in pages.css). */
  .about-hero { text-align: left; }
  .about-hero .crumbs { justify-content: flex-start !important; }
  .about-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .about-hero h1 em { display: block; }
  .about-hero p { margin: 16px 0 0; max-width: none; }
  .about-hero .ah-orn { display: flex; align-items: center; gap: 8px; color: var(--gold); margin: 14px 0; }
  .about-hero .ah-orn::before, .about-hero .ah-orn::after { content: ""; height: 1px; width: 40px; background: var(--gold); opacity: .6; }
  .about-hero .ah-mobile-cta { display: block; margin-top: 4px; }
  .about-hero .ah-mobile-img { margin-top: 20px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
  .about-hero .ah-mobile-img img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
  .cinfo-card { padding: 20px; }
  /* Extra breathing room above/below the map embed, between the contact
     info card and the enquiry form. */
  /* margin-top only — margin-bottom would stack on top of the grid's own
     row-gap (26px) plus the enquiry form's inline margin-top (30px),
     which together already give 56px of space below the map. */
  .map-ph { height: 200px; margin-top: 28px; position: relative; }
  /* The iframe has a fixed HTML height="320" attribute, and .map-ph's
     base rule centers overflowing content without clipping it — so the
     oversized iframe was bleeding 60px above AND below its own shrunk
     200px container, swallowing the margin above whole. A CSS rule beats
     an HTML height attribute (lowest cascade priority), so this makes it
     actually fill the container instead of overflowing it. */
  .map-ph iframe { height: 100%; width: 100%; display: block; }
  /* Google's embed needs two fingers to pan/zoom on touch devices (a
     single-finger swipe scrolls the page instead) — that rule is
     Google's, not ours, and can't be turned off. This overlay just makes
     the first tap's result predictable instead of looking broken: one
     tap dismisses it and hands control to the map underneath. */
  .map-tap-overlay { position: absolute; inset: 0; border-radius: 8px; background: rgba(20,10,8,.35); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; cursor: pointer; }
  .map-tap-overlay span { color: #fff; font-size: 13.5px; font-weight: 500; background: rgba(0,0,0,.35); padding: 8px 16px; border-radius: 999px; }

  /* Shared by the Gifting and Shop page heroes (gifting_banner.twig /
     shop_banner.twig) — fixed 40/60 flex split with no mobile override
     at all, so the text got squeezed to ~40% width (heavy wrapping)
     while the image, forced to max-height:360px in a ~60%-wide box,
     rendered as a tall cropped strip overlapping the button below it. */
  .page-hero .container { flex-direction: column; gap: 20px; padding-top: 28px; padding-bottom: 24px; }
  .page-hero .ptext { flex: 1 1 auto; width: 100%; }
  .page-hero .pimg-hero { flex: 1 1 auto; width: 100%; }
  .page-hero .pimg-hero img { max-height: 220px; width: 100%; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 36px); }

  .login-card, .register-card, .address-card, .edit-account-card, .change-password-card, .forgotten-card {
    padding: 30px 22px;
  }
  .register-wrap, .address-wrap, .edit-account-wrap, .change-password-wrap { padding: 30px 16px 0px; }

  .qty-row { flex-wrap: wrap; }
  .faq-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .faq-search { min-width: 0; }
}

/* ============================================================
   Tier 4 — Small phones (<=480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  .logo img { height: 36px; }
  .site-header .container { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .header-icons { gap: 8px; }
  .hicon { width: 34px; height: 34px; }

  .grid.g3, .chip-row, .wishlist-grid {
    grid-template-columns: 1fr;
  }
  /* Product-card grids (Rabreez Favourites, Shop grid, Category/sub-category
     grids) stay 2-up on small phones instead of collapsing to one long
     vertical column. */
  .grid.g4, .grid.g5, .grid.g6, #shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-band, .insp-feats, .wsel { grid-template-columns: 1fr; }
  /* Footer (Shop / Customer Care / About Us / We Accept): same bug as
     the trust badges below — keep the 2-column grid from the ≤767px
     rule above all the way down to phone width instead of collapsing
     to one long vertical list. Original behavior, if this needs
     reverting: .footer-grid { grid-template-columns: 1fr; } */
  /* Trust badges (100% Vegetarian / No Preservatives / Crafted with Care /
     Local Pickup): keep the 2-column box layout from the ≤991px rule above
     all the way down to phone width instead of collapsing to a vertical
     list. Original behavior, if this needs reverting:
     .trust { grid-template-columns: 1fr; } */
  .fbt-item { flex-direction: column; text-align: center; }

  .sec-head h2 { font-size: 22px; }
  .fest-banner .ftext h2, .cta-band h2 { font-size: 24px; }

  .qty-row { flex-direction: column; align-items: stretch; }
  /* align-items:stretch above also stretches the compact stepper (no
     explicit width of its own) to the full row width — keep it at its
     natural size while the Add to Cart / Buy Now buttons stay full-width. */
  .qty-row .qty { align-self: flex-start; width: auto; }
  .newsletter .nico { display: none; }

  .login-wrap, .forgotten-wrap { padding: 30px 14px 0px; }
  .login-card, .forgotten-card { padding: 26px 18px; }
}