/* =========================================================
   TINTLANE — SITE-WIDE MOBILE HEADER / FOOTER / MODALS
   Load AFTER style.css (and after any page-specific <style> block)
   on every page that uses the shared header (#site-header-mount)
   and/or shared footer (#site-footer-mount).

   Everything in this file lives inside a max-width media query, so
   desktop layout is completely untouched — these rules simply don't
   apply above the breakpoint.

   Note: index.html already has its own hand-tuned mobile treatment in
   mobile-index.css, scoped to ".home-page". Those selectors carry
   higher specificity (".home-page .navbar" beats ".navbar"), so on
   index.html they continue to win exactly as before — this file only
   fills the same gap on every OTHER page that shares the same header/
   footer/mega-menu markup and previously had no mobile treatment at all.
   ========================================================= */

/* Hidden on desktop unconditionally (not just "above the breakpoint") so
   there's no chance of it ever appearing outside the mobile media query
   below, regardless of load order. */
.mobile-bottom-nav { display: none; }

/* Same reasoning: the mobile filter-drawer trigger (browse-listings.js)
   must never render on desktop, unconditionally. */
.mobile-filter-trigger { display: none; }

@media (max-width: 768px) {
  /* Kills the blue-ish transparent tap-highlight overlay mobile browsers
     (Chrome/Safari on touch devices) flash over whatever you tap — links,
     buttons, cards, icons, everything. It's a touch-only browser default,
     not something desktop's mouse clicks ever trigger, so this is safe to
     leave unconditional here without affecting desktop at all. Applied to
     "*" (not just buttons/links) since on this site plain divs/cards are
     clickable too (onclick handlers on ".card", ".category-lux-card", etc). */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  :root {
    --tl-mobile-gutter: 16px;
    /* Single source of truth for the tab bar's height, shared by both
       ".mobile-bottom-nav" and "body"'s reserved bottom spacing below —
       these two used to be two separate hardcoded numbers that had to be
       updated in lockstep by hand. When the bar's icons/padding were
       shrunk earlier, this value never got updated to match, so the page
       kept reserving more space than the (now shorter) bar actually
       used — showing up as a strip of the body's background peeking
       through between the footer and the bar. Driving both from one
       variable makes that class of bug impossible going forward. */
    --tl-bottom-nav-height: 40px;
  }

  html { -webkit-text-size-adjust: 100%; }

  /* Leave room at the bottom of every page so the fixed tab bar never
     covers the last bit of content (footer legal line, sticky CTA bars,
     etc). Extra safe-area padding covers the home-indicator on notched
     phones. */
  body { padding-bottom: calc(var(--tl-bottom-nav-height) + env(safe-area-inset-bottom)); }

  /* ========================
     Fixed bottom tab bar (Home / Categories / Wishlist / Cart / Account)
     — the persistent app-shell navigation every Myntra/Amazon-style
     mobile experience has, that TintLane's header-only nav didn't.
     ======================== */
  /* Icons only — no "Home"/"Categories"/etc labels — on a plain burgundy
     bar. (Previously had a slow metallic sheen sweeping across it via a
     "::before" pseudo-element + "bottomNavMetallicSweep" animation —
     removed per request.) */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: hidden;
    height: calc(var(--tl-bottom-nav-height) + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #7c1428, #5a0c1a);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 -6px 20px rgba(46, 14, 23, .30);
    padding-bottom: env(safe-area-inset-bottom);
    /* No visual effect on its own (transform never changes here except on
       listing.html, see that page's own <style> block) — lets a page with
       its own sticky bottom bar hand off from this tab bar smoothly. */
    transition: transform .3s ease;
  }

  .bottom-nav-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 2px;
    border: none;
    background: none;
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
  }

  .bottom-nav-icon,
  .bottom-nav-icon-wrap {
    position: relative;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    opacity: .8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    transition: opacity .2s ease, transform .2s ease;
  }

  /* Labels are removed entirely — icon-only bar. */
  .bottom-nav-label { display: none; }

  .bottom-nav-item.active .bottom-nav-icon,
  .bottom-nav-item.active .bottom-nav-icon-wrap {
    opacity: 1;
    transform: translateY(-1px) scale(1.1);
  }

  /* Height (13px) minus the 1.5px border on each side (box-sizing:border-box
     is global) only left ~10px of actual content box, but line-height was
     set to 12px — taller than that box, so the digit was being pushed
     off-center/clipped instead of sitting cleanly in the middle. Sized so
     line-height now exactly equals height minus the border on both sides. */
  .bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #d4af37;
    color: #fff;
    border: 1.5px solid #6a0f20;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  }

  body { overflow-x: hidden; }

  button, a, input, select { touch-action: manipulation; }

  /* ========================
     Compact single-row header: logo + search + a small round account icon.
     Wishlist and Cart are hidden here (they live in the fixed bottom tab
     bar — showing them twice was the literal duplicate-cart bug). The
     "All ▾" category pill is also hidden, since the bottom nav's own
     Categories tab opens the exact same panel — no need for both. Account
     stays visible up here too, same as desktop, just shrunk to the round
     avatar icon with no name/caret text, so tapping it here still opens
     the real sign-in/account menu (this is the same button the bottom
     nav's Account tab triggers, not a separate control).
     ======================== */
  .navbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(6px, env(safe-area-inset-top)) var(--tl-mobile-gutter) 6px;
    background: rgba(255, 255, 255, .97);
    box-shadow: none;
  }

  .navbar .brand {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Desktop's ".brand-link{margin-left:-30px}" (style.css) pulls the logo
     left to tuck it into the wide desktop header. On a ~360-400px phone
     header that same -30px shove pushes the logo mostly off the left edge
     of the screen — that's the "logo not fully visible" clipping. */
  .navbar .brand-link { margin-left: 0; }

  /* Forced with !important: repeated non-!important attempts at 30px
     here weren't visibly winning (the logo kept rendering far larger
     than the 30px ".nav-account-avatar" it's meant to match), which
     means something outside this file is out-specificity-ing or
     out-ordering these rules. !important guarantees this wins
     regardless. Matches ".navbar .nav-account-avatar" (also 30px) so
     the logo and the account avatar read as the same size, same as
     requested. The earlier greyish-corner fringe was very likely just
     this same oversized rendering making the un-clipped square corners
     of "circle-logo.webp" (opaque, non-transparent) far more visible
     than they'd be at the true 30px size — no separate border/mask
     hack needed once this is actually 30px. */
  .navbar .brand-logo {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    border: none !important;
  }

  .navbar .social-icons { display: none; }

  .navbar .header-icons { display: none; }

  .navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .navbar .search-wrap {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 32px;
  }

  /* The "All" pill duplicated the bottom nav's Categories tab, so it's
     hidden and the search input gets the full pill shape back. */
  .navbar #catAllBtn { display: none; }

  .navbar #searchBar {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 11px;
    box-shadow:
      inset 0 1px 3px rgba(106, 15, 32, .08),
      inset 0 -1px 0 rgba(255, 255, 255, .6);
  }

  .navbar .search-suggestions {
    top: calc(100% + 6px);
    max-height: min(52vh, 360px);
    overflow-y: auto;
  }

  /* Account: keep it visible and tappable, just shrunk to a plain round
     icon (no "Sign Up / Log In" or "Hi, Name ▾" text) so it reads exactly
     like the account icon in Myntra/Amazon's top bar. */
  .navbar .auth-buttons {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  .navbar .auth-buttons .dropdown { margin: 0; }

  .navbar .auth-buttons .signup-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    display: grid;
    place-items: center;
    gap: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8),
      0 3px 8px rgba(106, 15, 32, .18);
  }

  /* Guest state has no avatar markup at all (it's plain "Sign Up / Log In
     ▾" text) — draw a proper Font Awesome person-outline glyph (no markup
     change needed) so there's a real account icon in the site's own
     burgundy, instead of a stock-emoji smiley that ignored the brand's
     colors. */
  .navbar .auth-buttons .signup-btn:not(.nav-account-chip)::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #fff;
  }

  /* Signed-in state already renders a round avatar-with-initial span
     (".nav-account-avatar") — keep only that, hide the name text + caret. */
  .navbar .nav-account-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .navbar .nav-account-name,
  .navbar .nav-account-caret { display: none; }

  /* Compact version of the "My Account" / seller "My Dashboard" menu —
     the desktop dropdown's 230px width and 13px/18px item padding were
     built for a mouse-driven pill button, not a small round mobile icon;
     shrinking it (and its own <a> items + divider) matches the rest of
     the tightened-up header. */
  .navbar .dropdown-content {
    right: 0;
    left: auto;
    min-width: 168px;
    max-width: calc(100vw - 24px);
    padding: 6px 0;
    border-radius: 12px;
  }

  .navbar .dropdown-content a {
    padding: 9px 14px;
    font-size: 13px;
  }

  .navbar .dropdown-divider { margin: 4px 0; }

  .navbar .dropdown-group-label { padding: 5px 14px 3px; }

  /* Products/Services/Featured Creators/New Arrivals: Categories is now a
     bottom-nav tab and Featured Creators/New Arrivals are one scroll away
     on the home page itself, so this strip is redundant on phones. */
  .header-quicklinks { display: none; }

  /* ========================
     Full-height mobile category drawer (Products/Services mega menu)
     ======================== */
  .cat-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    max-height: 0;
    overflow: hidden auto;
    background: #fff;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .28s ease, opacity .2s ease, transform .28s ease;
  }

  .cat-panel.show-mega {
    max-height: 100dvh;
    min-height: 100dvh;
    padding-top: 116px;
    opacity: 1;
    transform: translateY(0);
  }

  .cat-panel-inner { padding: 18px var(--tl-mobile-gutter) 28px; }

  .split-select {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 12px;
    background: #fff;
  }

  .split-btn { min-height: 42px; font-size: 14px; }

  .cat-panel.show-mega .cat-mega.active {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cat-mega .mega-col {
    padding: 13px 0;
    border-bottom: 1px solid rgba(106, 15, 32, .10);
  }

  .cat-mega .mega-col strong { font-size: 16px; }
  .cat-mega .mega-col a { padding: 5px 0; font-size: 14px; }

  /* ========================
     Footer — same compact sizing already settled on for the homepage
     (mobile-index.css, scoped to ".home-page" there so it never reached
     any other page). A 50px logo, 15px headings and 30-38px section
     padding were sized for the wide desktop bar; condensed down here so
     it matches everywhere the footer appears, not just index.html.
     ======================== */
  .site-footer { margin-top: 0; padding: 14px var(--tl-mobile-gutter) 0; }

  /* Was a single stacked column (brand, then 3 full-width link lists of
     up to 6 items each) — every link got its own row, making the footer
     a tall, separately-scrollable block beneath the tab bar. The 3 link
     columns now sit 2-up in a compact grid (brand banner stays full-width
     above them, centered), and every gap/font below is trimmed to the
     smallest still-legible size — same treatment index.html settled on,
     applied unscoped here so it matches on every other page too. */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    text-align: center;
    padding-bottom: 10px;
  }
  /* Explicit reset on the 2 grid columns themselves — desktop's own
     ".footer-brand{padding-right:12px}" only ever targeted the brand
     block, but without this the 2 link columns had no guaranteed-equal
     box model of their own, which is what made the 2-up grid look
     unevenly split rather than a clean symmetric 50/50. */
  .footer-top > .footer-col:nth-child(2),
  .footer-top > .footer-col:nth-child(3) {
    padding: 0;
    margin: 0;
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .footer-logo { width: 26px; height: 26px; margin: 0 auto 5px; }
  .footer-tagline {
    max-width: 260px;
    margin: 0 auto 8px;
    font-size: 10px;
    line-height: 1.35;
  }
  /* Full desktop sentence runs ~190 characters — clamped to 2 lines at
     this size it was cutting off mid-sentence. Swapping to a shorter,
     purpose-written line for mobile instead of truncating the long one
     lets the whole description read fully without the footer growing
     taller to fit it. */
  .footer-tagline .tagline-full { display: none; }
  .footer-tagline .tagline-short { display: inline; }
  .footer-social { justify-content: center; gap: 5px; }
  .footer-social a { width: 23px; height: 23px; font-size: 11px; }
  .footer-heading { font-size: 11px; margin-bottom: 4px; }
  .footer-links { align-items: center; gap: 4px; }
  .footer-links a { font-size: 10px; line-height: 1.2; }
  .footer-loc { margin-top: 4px; font-size: 9.5px; }

  /* "Marketplace" and "Help & Policies" (6 links each) pair up evenly as
     the 2 grid columns — but "Support" (only 3 links) left alone in a
     3rd row sat lopsided in the left half with empty space beside it.
     Spanning it full-width and laying its links out as a single centered
     horizontal row (instead of another half-width vertical list) closes
     that gap and reads as one deliberate, evenly-balanced closing line
     rather than a leftover column. */
  .footer-top > .footer-col:nth-child(4) {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .footer-top > .footer-col:nth-child(4) .footer-heading { display: none; }
  .footer-top > .footer-col:nth-child(4) .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 14px;
  }
  .footer-top > .footer-col:nth-child(4) .footer-loc {
    width: 100%;
    text-align: center;
  }

  .footer-badges { padding: 8px 0 10px; gap: 5px 12px; }
  .footer-badge { font-size: 9.5px; gap: 4px; }
  .footer-badge i { font-size: 11px; }
  .footer-bottom { flex-direction: column; text-align: center; padding: 8px 0 10px; gap: 4px; }
  .footer-bottom .footer-copy { font-size: 9.5px; }

  /* This last line (Privacy Policy / Prohibited Items) was also getting
     cut off by the fixed bottom tab bar — but both links already appear
     just above in the Help & Policies column, so it's redundant. Removed
     on mobile rather than fixed in place. */
  .footer-legal { display: none; }

  /* ========================
     Modals / popups / toasts — several overlapping systems accumulated
     across the site over time (".modal", ".auth-popup", "#successPopup",
     ".lux-popup", ".lux-popup-overlay") but they all share the same
     shape: a fixed, full-screen dim backdrop with a centered white card
     sized for a 420-540px desktop dialog, never given any mobile
     treatment before. One block covers all of them. Toasts (".cart-popup",
     ".toast") are a different shape — pinned to a screen corner instead
     of centered — and get their own rules further down.
     ======================== */
  .modal,
  .auth-popup,
  #successPopup,
  .lux-popup,
  .lux-popup-overlay { padding: 12px; }

  .modal-content,
  .auth-popup-box,
  .success-box,
  .lux-box,
  .lux-popup-box,
  .lux-popup-card {
    width: min(100%, 280px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 14px 13px;
    border-radius: 14px;
  }

  /* "Added!" success popup (#successPopup) — tick badge, message, and
     optional subtext were sized for the same wide desktop card. */
  #successPopup .tick { width: 40px; height: 40px; }
  #successPopup .tick .check { width: 16px; height: 10px; border-width: 3px; }
  #successPopup .success-msg { font-size: 13px; padding: 0; }
  #successPopup .success-sub { font-size: 10px; margin-top: 3px; }

  /* "Please log in" prompt (.auth-popup) */
  .auth-popup-icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 8px; }
  .auth-popup-box h2 { font-size: 14.5px; margin-bottom: 6px; }
  .auth-popup-box p { font-size: 11px; line-height: 1.5; margin-bottom: 12px; }
  .auth-popup-btn { padding: 8px 20px; font-size: 11px; }

  /* Original "luxury popup" (.lux-popup/.lux-box) — customization,
     size-required, and service-booking prompts on listing.html reuse
     this shell. */
  .lux-box h3 { font-size: 14px; }
  .lux-box p { font-size: 11px; line-height: 1.4; margin: 6px 0 10px; }
  .lux-actions { gap: 6px; }
  .lux-btn { padding: 7px 13px; font-size: 11px; }

  /* Newer "luxury popup" confirm/cancel dialogs (.lux-popup-overlay) —
     used for destructive-action confirmations (remove item, etc.). */
  .lux-popup-message { font-size: 11.5px; line-height: 1.5; margin-bottom: 12px; }
  .lux-popup-actions,
  .lux-popup-buttons { gap: 6px; margin-top: 10px; }
  .lux-popup-confirm,
  .lux-popup-cancel,
  .lux-popup-btn { padding: 8px 13px; font-size: 11px; }

  /* Toasts — fixed 30px from a screen corner on desktop; pulled in and
     centered so they never crowd off-screen edge-to-edge, and lifted
     clear of the fixed bottom tab bar. */
  .cart-popup { top: 10px; right: 10px; left: 10px; }
  .cart-popup-box { width: auto; text-align: center; font-size: 11px; padding: 8px 12px; }

  .toast {
    right: 10px;
    left: 10px;
    bottom: calc(var(--tl-bottom-nav-height, 40px) + env(safe-area-inset-bottom) + 10px);
    max-width: none;
    font-size: 11px;
    padding: 8px 12px;
  }

  /* ========================
     Standalone policy/info pages — About, Shopping Guide, Shipping,
     Payments, Returns & Refunds, Prohibited Items, Privacy & Security,
     Contact. All eight share this one ".policy-*" template, so this one
     block covers every one of them at once. Never had any mobile
     treatment before (a 40px heading and 38-90px section padding sized
     for a wide centered column, carried over unchanged onto a phone).
     ======================== */
  .policy-hero { padding: 24px var(--tl-mobile-gutter, 16px) 20px; }
  .policy-hero::before { width: 200px; height: 200px; top: -60px; left: -60px; }
  .policy-eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 10px; }
  .policy-title { font-size: 23px; margin: 0 0 8px; }
  .policy-divider { width: 44px; height: 3px; margin: 0 auto 12px; }
  .policy-sub { font-size: 12.5px; line-height: 1.6; }

  .policy-container { padding: 20px var(--tl-mobile-gutter, 16px) 40px; }
  .policy-card { padding: 20px 18px; border-radius: 18px; }
  .policy-body p,
  .policy-body ul { font-size: 12.5px; line-height: 1.7; margin: 0 0 14px; }
  .policy-body ul { padding-left: 18px; }
  .policy-back { font-size: 12px; margin-bottom: 16px; gap: 6px; }

  .policy-nav { margin-top: 20px; padding-top: 16px; }
  .policy-nav h4 { font-size: 14px; margin: 0 0 10px; }
  .policy-nav-links { gap: 6px; }
  .policy-nav-links a { font-size: 11px; padding: 6px 12px; }

  /* ========================
     Browse grids (category/products/services/search results) — the
     product image height was a flat 220px regardless of viewport, which
     on a 2-column mobile grid made every card look oversized. Scale it
     down to something proportionate to a ~170px-wide card. */
  .category-grid .card img,
  .browse-main .category-grid.browse-grid .card img { height: 140px; }

  .category-grid .card h3,
  .browse-main .category-grid.browse-grid .card h3 { font-size: 13.5px; padding: 8px 8px; }

  /* ========================
     Notification bell + dropdown — shared across account, my-orders,
     wishlist and the seller/service dashboards (style.css), so this one
     override compacts it everywhere at once instead of needing a
     per-page fix. It was rendering at its full desktop size (360px wide
     panel, 18px padding, 34px icons) on every phone width. */
  .notif-bell { width: 32px; height: 32px; font-size: 15px; border-radius: 11px; }

  /* The unread-count badge kept its full desktop size (18px) after the
     bell itself shrunk to 32px, so it was overlapping and hiding a good
     chunk of the bell glyph. Sized down and pulled out to the corner —
     same fix already applied to the bottom-nav cart badge — so it reads
     as a small badge on the bell instead of covering it. */
  #notifCount {
    top: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    font-size: 8px;
  }

  .notif-panel {
    width: min(78vw, 300px);
    max-height: min(60vh, 380px);
    top: calc(100% + 8px);
    border-radius: 16px;
  }

  .notif-panel-header { padding: 12px 14px; font-size: 13px; }
  .notif-mark-all { font-size: 10.5px; padding: 3px 5px; }

  .notif-item { padding: 10px 14px; gap: 8px; font-size: 12px; line-height: 1.4; }
  .notif-item-icon { width: 26px; height: 26px; border-radius: 9px; font-size: 11px; }
  .notif-item-time { margin-top: 3px; font-size: 10px; }
  .notif-item-dot { width: 6px; height: 6px; margin-top: 5px; }

  .notif-empty { padding: 26px 14px; font-size: 11.5px; }
  .notif-empty i { font-size: 18px; margin-bottom: 7px; }

  /* ========================
     Products / Category / Services / Search — the shared "browse all"
     layout (products.html, category.html, services.html, search.html),
     all rendered by browse-listings.js using the SAME ".category-lux-card"
     markup as the homepage's rail cards. This page had no real mobile
     treatment at all: the ".category-grid .card ..." rule above targets
     a plain ".card" class these pages never actually use (they render
     ".category-lux-card"), so it silently matched nothing here and
     everything — hero, sidebar, toolbar, cards, pagination — was
     rendering at full desktop size on every phone. */

  /* ".category-page" carried its full desktop padding (40px top / 80px
     bottom) into mobile untouched — that's what was pushing "All
     Products" so far down below the breadcrumb bar. */
  .category-page { padding: 10px var(--tl-mobile-gutter, 16px) 32px; }

  .category-hero.compact-hero { margin-bottom: 10px; }
  .category-hero.compact-hero .category-breadcrumb { font-size: 11px; gap: 6px; margin-bottom: 6px; }
  .category-hero.compact-hero h1 { font-size: 19px; letter-spacing: .1px; }
  .category-hero.compact-hero .category-subtitle { font-size: 11px; margin-top: 3px; }

  /* Filter sidebar — real off-canvas drawer instead of a panel stacked
     above the grid. Closed, it takes up zero page space (position:fixed,
     translated fully off-screen) — the only footprint is the small
     "Filters" trigger chip in the toolbar (added by browse-listings.js).
     Open, it slides in over the content with a backdrop behind it,
     Myntra-style, instead of pushing the grid down the page. */
  .browse-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 300px);
    max-height: none;
    z-index: 1201;
    border-radius: 0 18px 18px 0;
    border-left: none;
    box-shadow: 0 20px 50px rgba(20,8,12,.28);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  /* Deliberately NOT keyed off ":not(.collapsed)" — "collapsed" only
     ever gets added by JS once it runs, so the raw HTML (before that JS
     executes) always starts with the class absent. ":not(.collapsed)"
     is true in that gap, so the drawer rendered wide open at first
     paint and only snapped shut once the script caught up — a real
     flash on every load, not a click bug. "drawer-open" is only ever
     added explicitly (never the default/absent state), so the panel is
     guaranteed hidden until something deliberately opens it. */
  .browse-sidebar.drawer-open { transform: translateX(0); }

  .browse-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(20,8,12,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .browse-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  .browse-sidebar-head {
    position: sticky;
    top: 0;
    padding: 10px 12px;
    border-radius: 0;
    z-index: 1;
  }
  .browse-sidebar-head h3 { font-size: 10px; letter-spacing: 1.2px; }
  .sidebar-toggle-btn { width: 24px; height: 24px; font-size: 10px; }

  .sidebar-clear-btn { font-size: 10px; margin: 6px 12px 0; }
  .browse-sidebar-body { padding: 8px 10px 12px; }
  .sidebar-all-btn { font-size: 11px; padding: 7px 10px; margin-bottom: 8px; }
  .sidebar-group-head { padding: 9px 10px; font-size: 9.5px; letter-spacing: .8px; }
  .sidebar-sub-btn { font-size: 11px; padding: 6px 6px 6px 16px; }

  /* Small persistent icon button — this is the sidebar's entire
     footprint while closed. Sits on the right side of the toolbar,
     opposite the listing count, so the row stays a single compact line
     instead of the icon wrapping onto its own row underneath. Icon-only
     and mobile-only: hidden by default (below, outside the media query)
     so it never shows up on desktop. */
  .mobile-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 50%;
    background: linear-gradient(180deg,#ffffff,#fdfaf8);
    color: var(--burgundy, #6a0f20);
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-filter-trigger i { font-size: 11.5px; color: #c7a84f; }

  .category-toolbar {
    padding: 8px 10px;
    gap: 8px;
    margin-bottom: 12px;
    border-radius: 12px;
    flex-wrap: nowrap;
  }
  .toolbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .listing-counter { font-size: 10.5px; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .active-filter-pill { margin-left: 0; font-size: 9.5px; }

  /* The dropdown itself is removed on mobile per request (the "Newest
     Arrivals" default covers the same ground without a second control
     competing for space) — the toolbar-right slot stays, now holding
     just the filter icon on the row's right edge. */
  #sortSelect { display: none; }
  .toolbar-right { flex-shrink: 0; }

  /* Cards: same "image is the point, caption stays compact" proportions
     and gap as the wishlist page's mobile cards. "align-items: stretch"
     (overriding the desktop grid's own "align-items: start") makes every
     card in a row match the row's tallest card — without it, a 1-line
     title vs. a 2-line title made neighbouring cards visibly different
     heights. */
  .browse-grid { gap: 18px 14px; align-items: stretch; }
  .browse-grid .category-lux-card { height: 100%; }
  .browse-grid .category-lux-image-wrap { height: 198px; }
  .browse-grid .category-lux-heart { width: 30px; height: 30px; top: 8px; right: 8px; font-size: 13px; }
  .browse-grid .category-lux-badge { left: 8px; bottom: 8px; padding: 5px 10px; font-size: 8.5px; }

  .browse-grid .category-lux-content { padding: 8px; }
  .browse-grid .category-lux-creator { font-size: 8px; margin-bottom: 2px; }
  .browse-grid .category-lux-title { font-size: 11.5px; min-height: 28px; line-height: 1.25; }
  .browse-grid .category-lux-bottom { padding-top: 5px; }
  .browse-grid .category-lux-price { font-size: 13px; }
  .browse-grid .category-lux-rating { font-size: 9px; }
  .browse-grid .category-lux-rating span { font-size: 8.5px !important; }

  /* ":hover" never fires on touch, so — same fix already applied to the
     wishlist cards — mobile-tint-observer.js drives a ".mobile-tint"
     class instead, mirroring these ":hover" rules from style.css. */
  .browse-grid .category-lux-card.mobile-tint {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 42px rgba(0,0,0,.18);
  }
  .browse-grid .category-lux-card.mobile-tint .category-lux-image { transform: scale(1.06); }
  .browse-grid .category-lux-card.mobile-tint .category-lux-content::before { transform: translateY(0); }
  .browse-grid .category-lux-card.mobile-tint .category-lux-creator,
  .browse-grid .category-lux-card.mobile-tint .category-lux-title,
  .browse-grid .category-lux-card.mobile-tint .category-lux-price,
  .browse-grid .category-lux-card.mobile-tint .category-lux-rating {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.22), 2px 3px 6px rgba(0,0,0,.18);
  }

  .pagination { gap: 8px; margin: 28px 0 16px; }
  .page-btn,
  .page-number { height: 34px; min-width: 34px; padding: 0 12px; font-size: 12px; }
  .page-numbers { gap: 4px; }

  /* Shared breadcrumb + back bar (site-breadcrumb.js, and reused as-is by
     listing.html's own richer Home/Products/Category/Sub/Title trail).
     A multi-level trail wraps to 2-3 lines on a phone no matter how small
     the font gets, pushing real content down before it's even visible.
     Keep it (don't remove it), just collapse it to one compact,
     horizontally-scrollable line instead of letting it wrap. */
  .breadcrumb-inner { padding: 6px var(--tl-mobile-gutter, 16px); gap: 6px; flex-wrap: nowrap; }
  .breadcrumb-back { flex-shrink: 0; }
  .breadcrumb-trail {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 10px;
    gap: 4px;
    scrollbar-width: none;
  }
  .breadcrumb-trail::-webkit-scrollbar { display: none; }
  .breadcrumb-trail a { white-space: nowrap; }
  .breadcrumb-current { max-width: 130px; }
}

/* Small phones: tighter sizing, same layout. */
@media (max-width: 390px) {
  .navbar { padding-right: 10px; padding-left: 10px; gap: 8px; }
  .navbar .brand-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .navbar #catAllBtn { flex-basis: 42px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-panel, .cat-panel.show-mega { transition-duration: .01ms !important; }
}