/**
 * OEM ASTRA J — Mobile V2 Foundation (Phase 1)
 * Applies at max-width: 900px only. Desktop (>900px) unchanged.
 * Loaded last — overrides mobile-home, home-premium, inline nav rules.
 */

/* Hero — image only, no overlay copy */
.mob-v2-hero-copy,
.hero-v2-layout,
.hero-v2-copy,
.hero-v2-features {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Real HTML CTA over mobile hero artwork — desktop never shows it */
.mob-v2-hero-cta {
  display: none !important;
}

@media (min-width: 901px) {
  .mob-v2-hero-compose {
    display: contents;
  }

  #mobWaFab,
  .mob-wa-fab--float {
    display: none !important;
  }
}

@media (max-width: 900px) {
  :root {
    --mob-v2-bg: #f0f1f3;
    --mob-v2-card: #ffffff;
    --mob-v2-border: #e8ecf2;
    --mob-v2-text: #1a2332;
    --mob-v2-muted: #5b6575;
    /* Same blue as Top Selling “View All” (--ts-m-blue) — kept for accents;
       top bar itself uses white via these tokens on mobile */
    --mob-v2-header-blue: #ffffff;
    --mob-v2-header-blue-edge: #e5eaf0;
    --mob-v2-header-pad: 16px;
    --mob-v2-section-gap: 16px;
    --mob-v2-header-row-h: 34px;
    /* Logo heights: tablet 601–900 → 123px; mobile ≤600 overridden below */
    --mob-v2-logo-h: 123px;
    --mob-v2-search-h: var(--mob-v2-header-row-h);
    --mob-v2-tab-h: 64px;
    /*
     * Hero is a normal block above Best Selling (no overlap strip).
     * Former 100dvh − 4cm left Top Selling crushed under a near-fullscreen hero.
     */
    --mob-v2-hero-topsell-overlap: 0px;
    /* Slightly taller so top headline/CTA art stays in frame under cover crop */
    --mob-v2-hero-h: clamp(300px, calc(52dvh + 2cm), calc(440px + 2cm));
    --mob-v2-header-top-gap: 0px;
    --mob-v2-header-total: calc(var(--mob-v2-logo-h) + env(safe-area-inset-top, 0));
    --nav-mob-h: var(--mob-v2-logo-h);
    --mob-sticky-search-h: calc(var(--mob-v2-search-h) + 16px);
  }
}

@media (max-width: 600px) {
  :root {
    --mob-v2-logo-h: 106px;
    --nav-mob-h: var(--mob-v2-logo-h);
    --mob-v2-header-total: calc(var(--mob-v2-logo-h) + env(safe-area-inset-top, 0));
  }
}

@media (max-width: 900px) {
  /* continue mobile-v2 rules */

  /* Home: keep top bar height so hero sits below the logo strip */
  body.is-home-page {
    --mob-v2-header-total: calc(var(--mob-v2-logo-h) + env(safe-area-inset-top, 0));
    --nav-mob-h: var(--mob-v2-logo-h);
  }

  /* ── Global layout & colors ── */
  html {
    font-size: 16px;
  }

  body {
    background: var(--mob-v2-bg) !important;
    color: var(--mob-v2-text);
    padding-bottom: calc(var(--mob-v2-tab-h) + env(safe-area-inset-bottom, 0)) !important;
  }

  body.is-home-page .mob-home-feed,
  .mob-home-feed {
    background: var(--mob-v2-bg) !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* ── Header shell — light blue top bar (visible on mobile) ── */
  body > nav:not(.mob-bottom-bar),
  nav:not(.mob-bottom-bar),
  body.is-home-page > nav:not(.mob-bottom-bar),
  body.is-home-page nav:not(.mob-bottom-bar) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
    z-index: 120 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--mob-v2-header-blue) !important;
    background-color: var(--mob-v2-header-blue) !important;
    border-bottom: 1px solid var(--mob-v2-header-blue-edge) !important;
    box-shadow: none !important;
  }

  body > nav:not(.mob-bottom-bar)::before,
  body > nav:not(.mob-bottom-bar)::after,
  nav:not(.mob-bottom-bar)::before,
  nav:not(.mob-bottom-bar)::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body.is-home-page > nav:not(.mob-bottom-bar) .nav-main,
  body.is-home-page .nav-main {
    display: grid !important;
  }

  body.is-home-page .nav-shell.nav-main-row {
    display: contents !important;
  }

  /* Links row + SELECT YOUR PARTS hidden on mobile via header-mobile-desktop-parity.css */

  body.is-home-page > nav:not(.mob-bottom-bar) .nav-main,
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo,
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-util-cluster,
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-garage-btn,
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-shop-btn {
    pointer-events: auto;
  }

  body.is-home-page .nav-logo-img {
    filter: none !important;
  }

  body.is-home-page .nav-garage-btn {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body.is-home-page .mob-home-feed {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: var(--mob-v2-bg) !important;
  }

  nav:not(.mob-bottom-bar)::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    animation: none !important;
  }

  .nav-main {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--mob-v2-logo-h) + var(--mob-v2-header-top-gap) + env(safe-area-inset-top, 0) + 8px) !important;
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "logo";
    gap: 0;
    padding-top: calc(var(--mob-v2-header-top-gap) + env(safe-area-inset-top, 0)) !important;
    padding-bottom: 4px !important;
    padding-inline: 0 !important;
    align-items: stretch;
    overflow: hidden !important;
  }

  .nav-shell.nav-main-row {
    display: contents !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    direction: ltr;
  }

  nav .nav-main {
    max-width: none !important;
    width: 100% !important;
  }

  .nav-logo {
    grid-area: logo;
    flex: none !important;
    width: auto !important;
    max-width: min(48vw, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-left: var(--mob-v2-header-pad) !important;
    margin-right: auto !important;
    padding: 0 !important;
    padding-right: var(--mob-v2-header-pad) !important;
    align-self: start !important;
    justify-content: flex-start !important;
    z-index: auto !important;
  }

  html[dir="rtl"] .nav-logo {
    margin-left: var(--mob-v2-header-pad) !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }

  .nav-logo picture {
    display: contents;
  }

  .nav-logo-img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: var(--mob-v2-logo-h) !important;
    max-height: var(--mob-v2-logo-h) !important;
    object-fit: contain !important;
    /* Same desktop logo asset — keep full mark visible, anchored left */
    object-position: left center !important;
  }

  html[dir="rtl"] .nav-logo-img {
    object-position: left center !important;
  }

  .nav-actions-wrap {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    flex: none !important;
    z-index: auto !important;
  }

  .nav-main-actions {
    display: contents !important;
  }

  .nav-trade-cluster {
    display: contents !important;
  }

  /* SHOP NOW — mobile top bar (flush physical right) */
  .nav-shop-btn {
    display: inline-flex !important;
    position: absolute !important;
    top: calc(var(--mob-v2-header-top-gap) + env(safe-area-inset-top, 0) + 1mm) !important;
    right: max(4px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    grid-area: unset !important;
    order: unset !important;
    justify-self: unset !important;
    z-index: 12;
    align-items: center;
    justify-content: center;
    gap: calc(4px * 1.1);
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(34px - 2mm);
    min-height: calc(34px - 2mm);
    max-height: calc(34px - 2mm);
    margin: 0 !important;
    padding: 0 calc(12px * 1.1) !important;
    background: var(--red, #d71920) !important;
    border: none !important;
    border-radius: calc(8px - 1mm) !important;
    color: #ffffff !important;
    font-family: var(--font-en, Montserrat, Arial, sans-serif) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(215, 25, 32, 0.28);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    align-self: flex-start;
    transition: background 200ms ease, transform 200ms ease;
  }

  .nav-shop-btn:active {
    transform: scale(0.98);
    background: var(--red-dark, #a8131a) !important;
  }

  .nav-shop-btn-icon {
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 50%;
  }

  .nav-shop-btn-icon svg {
    width: 11px !important;
    height: 11px !important;
    stroke: #ffffff !important;
  }

  .nav-shop-btn-label {
    color: #ffffff !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html[dir="rtl"] .nav-shop-btn,
  html[dir="ltr"] .nav-shop-btn {
    right: max(4px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    margin-inline: 0 !important;
  }

  html[dir="rtl"] .nav-shop-btn {
    font-family: var(--font-ar, Cairo, sans-serif) !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px !important;
    padding: 0 calc(10px * 1.1) !important;
  }

  html[dir="ltr"] .nav-shop-btn-label {
    font-size: 9px !important;
    letter-spacing: 0.06em;
  }

  html[dir="rtl"] .nav-shop-btn-label {
    font-family: var(--font-ar, Cairo, sans-serif) !important;
    font-size: 12px !important;
    letter-spacing: 0;
  }

  body.catalog-page-open .nav-shop-btn,
  body.catalog-branch-mode .nav-shop-btn,
  body:has(#catalogDrawer.open) .nav-shop-btn {
    display: none !important;
  }

  .nav-util-cluster {
    display: none !important;
    position: absolute !important;
    top: calc(var(--mob-v2-header-top-gap) + env(safe-area-inset-top, 0) - 2mm) !important;
    right: var(--mob-v2-header-pad) !important;
    left: auto !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    z-index: 12;
    margin: 0 !important;
    padding: 0 !important;
    height: auto;
    min-height: 0;
    pointer-events: auto;
  }

  html[dir="rtl"] .nav-util-cluster {
    flex-direction: row-reverse;
  }

  .nav-util-cluster .nav-util-btn--auth,
  .nav-util-cluster .nav-util-btn--cart,
  .nav-util-cluster .nav-lang-wrap {
    display: none !important;
  }

  .nav-util-cluster .nav-garage-car-svg--desktop {
    display: block;
  }

  .nav-util-cluster .nav-garage-avatar-svg--mobile {
    display: none;
  }

  .nav-garage-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto !important;
    max-width: 144px !important;
    height: calc(30px - 2mm);
    min-height: calc(30px - 2mm);
    max-height: calc(30px - 2mm);
    margin: 0 !important;
    padding: 0 calc(15px - 1.5mm) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: calc(8px - 1mm) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: var(--font-en, Montserrat, Arial, sans-serif) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-garage-btn .nav-util-btn__icon,
  .nav-garage-btn .nav-util-btn__label,
  .nav-garage-btn svg {
    pointer-events: none;
  }

  html[dir="rtl"] .nav-garage-btn {
    font-family: var(--font-ar) !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px !important;
    max-width: 132px !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
  }

  html[dir="ltr"] .nav-garage-btn {
    font-family: var(--font-en, Montserrat, Arial, sans-serif) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px !important;
    color: #ffffff !important;
  }

  .nav-util-cluster .nav-garage-btn .nav-util-btn__icon,
  .nav-garage-btn .nav-util-btn__icon {
    /* Icon shown on mobile top bar (parity CSS sizes it) */
    display: inline-flex !important;
  }

  .nav-garage-btn .nav-garage-status {
    top: -1px;
    inset-inline-end: -1px;
    transform: scale(0.75);
    transform-origin: top right;
  }

  .nav-garage-btn .nav-util-btn__label {
    /* Label hidden on mobile top bar by header-mobile-desktop-parity.css */
    font-size: inherit !important;
    line-height: 1 !important;
    font-weight: 700;
    color: #ffffff !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[dir="rtl"] .nav-garage-btn .nav-util-btn__label {
    font-family: var(--font-ar) !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px !important;
    color: #ffffff !important;
  }

  html[dir="ltr"] .nav-garage-btn .nav-util-btn__label {
    font-family: var(--font-en, Montserrat, Arial, sans-serif) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px !important;
    color: #ffffff !important;
  }

  .nav-garage-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
  }

  /* Garage visible on mobile top bar (far right) */

  /* Hide top language + legacy mobile header icons */
  .nav-mobile-actions .nav-lang-wrap,
  .nav-mobile-actions .nav-btn-auth,
  .nav-mobile-actions .nav-cart-btn {
    display: none !important;
  }

  .nav-mobile-actions {
    display: contents !important;
  }

  /* ── Search: hidden in top bar (bottom nav Search tab) ── */
  .nav-search-wrap,
  .nav-search-dropdown,
  #navSearchDropdown {
    display: none !important;
    visibility: hidden !important;
  }

  .nav-quick-cats {
    display: none !important;
  }

  /* ── Hero: full-bleed under top bar (no rounded card) ── */
  body.is-home-page .mob-home-feed .home-cinematic-band,
  body.is-home-page .mob-home-feed .mob-v2-hero-compose {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.is-home-page .mob-home-feed .mob-card--hero,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero,
  .mob-home-feed > .mob-card--hero {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
    animation: none !important;
  }

  body.is-home-page .mob-home-feed .mob-card--hero .hero,
  body.is-home-page .mob-home-feed .mob-card--hero .hero.hero-v2,
  .mob-home-feed .mob-card--hero .hero,
  .mob-home-feed .mob-card--hero .hero.hero-v2 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Fixed hero band — Best Selling starts fully below this box */
    height: var(--mob-v2-hero-h) !important;
    min-height: var(--mob-v2-hero-h) !important;
    max-height: var(--mob-v2-hero-h) !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #08080c !important;
    isolation: isolate;
  }

  .mob-home-feed .mob-card--hero .hero.hero-v2::before {
    display: none !important;
  }

  .mob-home-feed .mob-card--hero .hero.hero-v2::after {
    display: none !important;
  }

  /* ── Hero + Catalog: catalog sits below hero (no overlap card) ── */
  body.is-home-page .mob-v2-hero-compose::before {
    display: none !important;
  }

  body.is-home-page .mob-v2-hero-compose {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.is-home-page .mob-v2-hero-compose > .mob-card--hero {
    position: relative;
    z-index: 1;
  }

  body.is-home-page .mob-v2-hero-compose > .mob-v2-catalog-section {
    position: relative;
    z-index: 1;
    margin-top: 12px !important;
    margin-inline: var(--mob-v2-section-gap) !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px;
    background: transparent !important;
    isolation: isolate;
    overflow: visible;
  }

  body.is-home-page .mob-v2-hero-compose > .mob-v2-catalog-section::after {
    display: none !important;
    content: none !important;
  }

  body.is-home-page .mob-v2-hero-compose .mob-v2-catalog-card {
    position: relative;
    z-index: 1;
  }

  body.is-home-page .mob-home-feed > #topParts,
  body.is-home-page .mob-v2-hero-compose > #topParts {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 12px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  body.is-home-page #topParts .section-head,
  body.is-home-page #topParts .section-head *,
  body.is-home-page #topParts .btn-all-gold,
  body.is-home-page #topParts .top-parts-viewport,
  body.is-home-page #topParts .top-selling-card,
  body.is-home-page #topParts .top-selling-cart,
  body.is-home-page #topParts button,
  body.is-home-page #topParts a {
    pointer-events: auto !important;
  }

  body.is-home-page #topParts .top-parts-mobile,
  body.is-home-page #topParts .mob-card-body--marquee {
    overflow: visible !important;
    max-width: 100% !important;
    touch-action: auto !important;
  }

  body.is-home-page #topParts .top-parts-viewport,
  body.is-home-page #topParts #topPartsViewport,
  body.is-home-page .mob-home-feed .top-parts-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.is-home-page #topParts .section-head {
    touch-action: pan-y pinch-zoom !important;
  }

  body.is-home-page #topParts .top-selling-track.top-selling-marquee,
  body.is-home-page #topParts #topPartsTrack.top-selling-marquee {
    width: max-content !important;
    will-change: transform !important;
    animation: topSellingMarqueeLtr 32s linear infinite !important;
    animation-play-state: running !important;
  }

  html[dir="rtl"] body.is-home-page #topParts .top-selling-track.top-selling-marquee,
  html[dir="rtl"] body.is-home-page #topParts #topPartsTrack.top-selling-marquee {
    animation-name: topSellingMarqueeRtl !important;
  }

  body.is-home-page #topParts .top-parts-viewport.is-paused .top-selling-track.top-selling-marquee,
  body.is-home-page #topParts .top-parts-viewport.is-dragging .top-selling-track.top-selling-marquee,
  body.is-home-page #topParts #topPartsViewport.is-paused .top-selling-track.top-selling-marquee,
  body.is-home-page #topParts #topPartsViewport.is-dragging .top-selling-track.top-selling-marquee {
    animation-play-state: paused !important;
  }

  /* Hero: receive touch/hover; image stays non-interactive except dots */
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero {
    pointer-events: auto !important;
    touch-action: pan-y pinch-zoom !important;
    overflow: hidden !important;
  }

  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero-static-bg,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero-static-img,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero-slider,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero-slide,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .hero-slide-img {
    pointer-events: none !important;
  }

  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .slider-dots,
  body.is-home-page .mob-v2-hero-compose > .mob-card--hero .slider-dots .dot {
    pointer-events: auto !important;
  }

  .mob-v2-hero-copy {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hero image — animated 3-slide carousel (copy baked into art) */
  .hero-v2-layout,
  .hero-v2-copy,
  .hero-v2-features,
  .hero-scroll-down,
  .hero-cta-overlay,
  #heroShopBtn,
  #heroFlashBtn,
  .btn-hero-flash,
  .hero-premium-fx,
  .hero-gold-streak,
  .hero-smoke,
  .hero-particle,
  .hero-v2-visual {
    display: none !important;
  }

  #hero.hero-v2,
  #hero.hero-v2.hero-premium-ready {
    animation: none !important;
  }

  .hero-static-bg,
  .hero-slider,
  #heroSlider {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 0;
  }

  .hero--carousel .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  .hero-static-bg picture,
  .hero-static-bg .hero-static-img,
  #heroSlider picture,
  #heroSlider .hero-static-img,
  #heroSlider .hero-slide picture,
  #heroSlider .hero-slide-img,
  #heroSlider img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    /* Portrait art + shorter band: cover fills width/height (no L/R letterbox).
       Anchor top so baked-in headline/CTA aren’t cropped off. */
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 0 !important;
  }

  #heroSlider .hero-slide {
    background: #001023 !important;
  }

  .hero--carousel .slider-dots {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  .hero--carousel .slider-dots .dot {
    width: 4mm !important;
    height: 2px !important;
    border-radius: 1px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }

  .hero--carousel .slider-dots .dot.active {
    background: #f0c14b !important;
    border: none !important;
  }

  body.is-home-page .mob-home-feed .mob-card--hero .hero.hero-v2 {
    margin-top: 0 !important;
  }

  /* ── Homepage sections removed on mobile V2 ── */
  #brands,
  .hero-why-title-section,
  #featuredCollectionsHome,
  .featured-collections-section {
    display: none !important;
  }

  /* Keep desktop end-of-page info blocks on mobile */
  body.is-home-page .home-premium-info,
  body.is-home-page .cta-strip,
  body.is-home-page footer {
    display: block !important;
  }

  /* WHY / Track / Help zone — light page + separate section bubbles */
  body.is-home-page .home-premium-info {
    margin-inline: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.is-home-page .cta-strip {
    margin-inline: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    overflow: visible;
    background: #f8fafc !important;
  }

  body.is-home-page .home-premium-info .section-inner {
    padding: 0 !important;
  }

  body.is-home-page .premium-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Footer surface owned by Phase 2D — css/mobile-v2-footer.css */

  /* ── Section rhythm ── */
  .mob-home-feed > .mob-card:not(.mob-card--hero):not(.home-premium-info),
  .mob-home-feed > .section:not(.home-premium-info),
  .mob-home-feed > .brands-section {
    margin-inline: var(--mob-v2-section-gap) !important;
    margin-bottom: var(--mob-v2-section-gap) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
    background: var(--mob-v2-card) !important;
    border: 1px solid var(--mob-v2-border) !important;
    box-shadow: none !important;
  }

  .mob-home-feed > .mob-card--hero {
    margin-top: 0 !important;
  }

  .mob-home-feed .section-inner,
  .mob-home-feed .brands-section-inner {
    padding: 16px !important;
  }

  .mob-home-feed .section-label,
  .mob-home-feed .top-parts-swipe-hint,
  .mob-home-feed .brands-section-title {
    color: var(--mob-v2-muted) !important;
  }

  .mob-home-feed .section-title,
  .mob-home-feed .hero-why-title {
    color: var(--mob-v2-text) !important;
  }

  /* Feed gold label — Top Selling overrides below */
  .mob-home-feed .btn-all-gold {
    color: #d4b44a !important;
  }

  body.is-home-page #topParts.top-selling-section > .section-inner > .section-head > .btn-all-gold,
  body.is-home-page #topParts .section-head > .btn-all-gold,
  body.is-home-page #topParts button.btn-all-gold {
    background: #1e5bb8 !important;
    background-color: #1e5bb8 !important;
    background-image: none !important;
    border: 1px solid #1e5bb8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
  }

  body.is-home-page #topParts.top-selling-section > .section-inner > .section-head > .btn-all-gold span,
  body.is-home-page #topParts .section-head > .btn-all-gold span,
  body.is-home-page #topParts button.btn-all-gold span {
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Top Selling: full-bleed white band — beat generic .mob-card chrome */
  body.is-home-page .mob-home-feed > #topParts.top-selling-section,
  body.is-home-page .mob-v2-hero-compose > #topParts.top-selling-section {
    margin-inline: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ── Bottom navigation V2 — Parts | Garage | Home | Auth | Language ── */
  .mob-bottom-bar .mob-tab--search,
  .mob-bottom-bar [data-mob-tab="search"] {
    display: none !important;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    direction: ltr !important;
    position: fixed !important;
    padding-inline: 2px;
  }

  html[dir="rtl"] .mob-bottom-bar.mob-bottom-bar--v2 {
    direction: ltr !important;
  }

  /* Garage moved to top bar — hide from bottom */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    grid-column: unset;
    grid-row: unset;
  }

  /* Equal columns: lang | home | auth | parts (lang↔parts swapped; garage removed) */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-lang-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none !important;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--home {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none !important;
    flex: none !important;
    z-index: 2;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth {
    grid-column: 3;
    grid-row: 1;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--catalog {
    grid-column: 4;
    grid-row: 1;
    position: relative;
    z-index: 3;
    overflow: visible !important;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--catalog,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth {
    width: 100%;
    max-width: none !important;
  }

  /*
   * Single shared row: pin every tab stack to the bar bottom so
   * icons rest on one row and labels share one baseline.
   * Protruding Parts FAB uses negative margin-top only.
   */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang.nav-lang-btn {
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding-top: 0;
    padding-bottom: 2px;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab-label,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang #langBtnLabelBottom {
    flex: 0 0 14px;
    height: 14px;
    min-height: 14px;
    max-height: 14px;
    line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Taller Arabic labels (esp. garage 15px) — keep one shared slot */
  html[dir="rtl"] .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab-label,
  html[dir="rtl"] .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang #langBtnLabelBottom {
    flex-basis: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    line-height: 18px;
  }

  /* Unified side-tab icon + label scale (catalog uses red hero mark below) */
  /* Garage house mark — 80% of prior 48px; protrudes above bar like parts FAB */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage svg {
    width: 38.4px;
    height: 38.4px;
    flex-shrink: 0;
    margin-top: -22.4px;
    display: block;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth svg,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang svg {
    width: 24px;
    height: 24px;
  }

  /* Filled garage silhouette — cutouts (door lines / roof slit) show through */
  .mob-bottom-bar .mob-tab--garage svg,
  .mob-bottom-bar .mob-tab--garage svg path,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage svg,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage svg path {
    fill: currentColor !important;
    stroke: none !important;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth .mob-tab-label,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang .mob-tab-label,
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--lang #langBtnLabelBottom {
    font-size: 10px;
    font-weight: 700;
  }

  /* Keep "My Garage" on one line at the same baseline as Home */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage .mob-tab-label {
    font-size: 9px;
    font-weight: 700;
  }

  /* SELECT YOUR PARTS — red protruding FAB, larger than home (56 vs 44) */
  .mob-bottom-bar .mob-tab--catalog {
    color: #D71920 !important;
    gap: 2px;
    align-items: center;
    overflow: visible !important;
  }

  .mob-bottom-bar .mob-tab--catalog .mob-tab-parts-mark {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: -26px;
    margin-inline: auto;
    border-radius: 50%;
    background: #D71920 !important;
    background-image: none !important;
    border: 2px solid #D71920;
    box-shadow:
      0 0 0 3px #ffffff,
      0 8px 20px rgba(215, 25, 32, 0.35);
    box-sizing: border-box;
  }

  /* No overlay on the mark — a white ::before with z-index:-1 painted ABOVE
     the element's background (stacking context) and left a white/incomplete fill */
  .mob-bottom-bar .mob-tab--catalog .mob-tab-parts-mark::before,
  .mob-bottom-bar .mob-tab--catalog .mob-tab-parts-mark::after {
    content: none;
    display: none;
  }

  .mob-bottom-bar .mob-tab--catalog .mob-tab-parts-icon,
  .mob-bottom-bar .mob-tab--catalog.is-active .mob-tab-parts-icon {
    width: 34px !important;
    height: 34px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 1.7;
    color: #ffffff;
  }

  /* Center aiming dot — solid white; rings stay stroke-only */
  .mob-bottom-bar .mob-tab--catalog .mob-tab-parts-icon circle:nth-of-type(3) {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  .mob-bottom-bar .mob-tab--catalog.is-active .mob-tab-parts-mark,
  .mob-bottom-bar .mob-tab--catalog:active .mob-tab-parts-mark {
    background: #b8141a !important;
    background-image: none !important;
    border-color: #b8141a;
    box-shadow:
      0 0 0 3px #ffffff,
      0 10px 24px rgba(215, 25, 32, 0.42);
  }

  .mob-bottom-bar .mob-tab--catalog:active .mob-tab-parts-mark {
    transform: scale(0.96);
  }

  /*
   * SELECT YOUR PARTS — same layout slot as other tab labels (14/18px) so
   * "Select Your" / "اختر" share the shared label baseline; "Parts" / "قطعك"
   * is the second line and may overflow below (bar/tab overflow: visible).
   */
  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--catalog .mob-tab-label {
    flex: 0 0 14px;
    height: 14px;
    min-height: 14px;
    max-height: none;
    display: block;
    line-height: 14px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding-inline: 1px;
    color: #D71920 !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
  }

  html[dir="rtl"] .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--catalog .mob-tab-label {
    flex-basis: 18px;
    height: 18px;
    min-height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-family: var(--font-ar, Arial, sans-serif);
    letter-spacing: 0;
  }

  /* Arabic garage label only — 150% of shared 10px tab label */
  html[dir="rtl"] .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--garage .mob-tab-label {
    font-size: 15px;
    font-family: var(--font-ar, Arial, sans-serif);
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth .mob-tab-auth-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 .mob-tab--auth .nav-auth-initials {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: inherit;
  }

  .mob-bottom-bar {
    position: fixed !important;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    height: var(--mob-v2-tab-h);
    min-height: var(--mob-v2-tab-h);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
    background: #ffffff !important;
    border-top: 1px solid #e8ecf2 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -4px 16px rgba(26, 35, 50, 0.06) !important;
    z-index: 1500 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    isolation: isolate;
    overflow: visible !important;
  }

  .mob-bottom-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #ffffff;
    border-top: 1px solid #e8ecf2;
    box-shadow: 0 -4px 16px rgba(26, 35, 50, 0.06);
  }

  body:has(#cartDrawer.open) .mob-bottom-bar,
  body:has(#checkoutModal.open) .mob-bottom-bar,
  body:has(#authModal.open) .mob-bottom-bar,
  body:has(#catalogDrawer.open) .mob-bottom-bar,
  body.catalog-drawer-open .mob-bottom-bar {
    background: #ffffff !important;
    border-top: 1px solid #e8ecf2 !important;
    box-shadow: 0 -4px 16px rgba(26, 35, 50, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:has(#cartDrawer.open) .mob-bottom-bar::before,
  body:has(#checkoutModal.open) .mob-bottom-bar::before,
  body:has(#authModal.open) .mob-bottom-bar::before,
  body:has(#catalogDrawer.open) .mob-bottom-bar::before,
  body.catalog-drawer-open .mob-bottom-bar::before {
    display: none;
  }

  .mob-bottom-bar .mob-tab,
  .mob-bottom-bar .mob-lang-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: none !important;
    position: relative;
    z-index: 1;
  }

  .mob-bottom-bar .mob-tab svg,
  .mob-bottom-bar .mob-tab-label {
    filter: none;
  }

  .mob-bottom-bar .mob-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: none;
    background: transparent;
    color: #1e5bb8;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html[dir="rtl"] .mob-bottom-bar .mob-tab {
    font-family: var(--font-ar);
    font-size: 10px;
    letter-spacing: 0;
  }

  .mob-bottom-bar .mob-tab svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mob-bottom-bar .mob-tab--wa {
    display: none !important;
  }

  .mob-bottom-bar .mob-tab.is-active {
    color: #1e5bb8;
  }

  .mob-bottom-bar .mob-tab.is-active svg {
    stroke: #1e5bb8;
  }

  .mob-bottom-bar .mob-tab:active {
    transform: scale(0.96);
  }

  .mob-bottom-bar .mob-lang-wrap {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mob-bottom-bar .mob-tab--lang,
  .mob-bottom-bar .mob-tab--lang.nav-lang-btn {
    display: flex !important;
    width: 100%;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Blue icons on white bar */
    color: #1e5bb8 !important;
  }

  .mob-bottom-bar .mob-tab--lang .mob-tab-lang-icon,
  .mob-bottom-bar .mob-tab--lang svg {
    stroke: currentColor !important;
  }

  .mob-bottom-bar .mob-tab--lang .mob-tab-label,
  .mob-bottom-bar .mob-tab--lang #langBtnLabelBottom {
    color: inherit !important;
    display: block !important;
  }

  .mob-bottom-bar .mob-tab--lang.is-active,
  .mob-bottom-bar .mob-tab--lang.nav-lang-btn.is-active {
    color: #1e5bb8 !important;
  }

  .mob-bottom-bar .lang-menu--bottom {
    display: none !important;
  }

  .mob-bottom-bar .mob-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mob-bottom-bar .mob-tab {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }

  .mob-bottom-bar .mob-tab > * {
    pointer-events: none;
  }

  .mob-bottom-bar .mob-tab--search {
    font-size: 0;
    min-width: 48px;
  }

  .mob-bottom-bar .mob-tab--search .mob-tab-label {
    display: none;
  }

  .mob-bottom-bar .mob-tab--search .mob-tab-search-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
  }

  .mob-bottom-bar .mob-tab--search .mob-tab-search-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 16.5px;
    width: 22.5px;
    height: 10.5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(30, 91, 184, 0.42) 0%, rgba(30, 91, 184, 0.16) 42%, transparent 78%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
  }

  .mob-bottom-bar .mob-tab--search .mob-tab-search-icon {
    position: relative;
    z-index: 1;
    width: 30px !important;
    height: 30px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mob-bottom-bar .mob-tab--search.is-active .mob-tab-search-mark::after {
    background: radial-gradient(ellipse at 50% 50%, rgba(30, 91, 184, 0.52) 0%, rgba(30, 91, 184, 0.2) 45%, transparent 80%);
  }

  .mob-bottom-bar .mob-tab--search:active .mob-tab-search-mark {
    transform: scale(0.96);
  }

  /* Center home — large house icon, no circular mark */
  .mob-bottom-bar .mob-tab--home {
    color: #1e5bb8 !important;
    gap: 2px;
    align-items: center;
    overflow: visible !important;
  }

  .mob-bottom-bar .mob-tab--home .mob-tab-home-mark {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-top: -4px;
    margin-inline: auto;
    border: none !important;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .mob-bottom-bar .mob-tab--home .mob-tab-home-mark::before,
  .mob-bottom-bar .mob-tab--home .mob-tab-home-mark::after {
    content: none;
    display: none;
  }

  .mob-bottom-bar .mob-tab--home .mob-tab-home-icon {
    width: 34px !important;
    height: 34px !important;
    stroke: #1e5bb8 !important;
    fill: rgba(30, 91, 184, 0.14);
    stroke-width: 1.65;
    filter: drop-shadow(0 1px 2px rgba(30, 91, 184, 0.28));
  }

  .mob-bottom-bar .mob-tab--home .mob-tab-label {
    color: #1e5bb8 !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 0.02em;
    text-shadow: none;
  }

  .mob-bottom-bar .mob-tab--home:active {
    transform: none;
  }

  .mob-bottom-bar .mob-tab--home:active .mob-tab-home-mark {
    transform: scale(0.96);
  }

  /* ── Floating WhatsApp (mobile) ── */
  .mob-wa-fab--float,
  #mobWaFab {
    position: fixed;
    z-index: 120;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mob-v2-tab-h, 56px) + env(safe-area-inset-bottom, 0px) + 14px);
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #25d366 !important;
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.38);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html[dir="rtl"] .mob-wa-fab--float,
  html[dir="rtl"] #mobWaFab {
    right: auto;
    left: max(14px, env(safe-area-inset-left, 0px));
  }

  .mob-wa-fab--float,
  #mobWaFab {
    display: inline-flex !important;
  }

  .mob-wa-fab--float span,
  #mobWaFab span {
    display: none !important;
  }

  .mob-wa-fab--float svg,
  #mobWaFab svg {
    width: 26px;
    height: 26px;
    fill: #fff;
  }

  body.catalog-page-open .mob-wa-fab--float,
  body.catalog-page-open #mobWaFab,
  body.product-page-open .mob-wa-fab--float,
  body.product-page-open #mobWaFab {
    bottom: calc(var(--mob-v2-tab-h, 56px) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  /* ── Catalog / product pages offset ── */
  body.catalog-page-open,
  body.catalog-branch-mode,
  body.catalog-drawer-open {
    padding-bottom: calc(var(--mob-v2-tab-h) + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Catalog drawer open: never show products shell behind overlay */
  body.catalog-drawer-open #products,
  body:has(#catalogDrawer.open) #products,
  body.catalog-drawer-open #catalogBranchPage,
  body:has(#catalogDrawer.open) #catalogBranchPage,
  #products[hidden],
  #products.catalog-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.catalog-drawer-open .mob-home-feed,
  body:has(#catalogDrawer.open) .mob-home-feed {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Legacy catalog-page header offset — top nav is hidden on mobile */
  #products,
  .product-page {
    scroll-margin-top: 0;
  }

  /* Mobile: branch sidebar tree is drawer-only — hide duplicate white panel */
  body.catalog-branch-mode #catalogBranchPage,
  body.catalog-page-open #catalogBranchPage {
    display: none !important;
  }

  body.catalog-branch-mode #products.section,
  body.catalog-branch-mode #products.catalog-branch-main,
  body.catalog-page-open #products.section,
  body.catalog-page-open #products.catalog-branch-main {
    padding-top: 12px !important;
    background: var(--mob-v2-bg) !important;
  }

  body.catalog-branch-mode #products .section-light,
  body.catalog-page-open #products .section-light {
    background: var(--mob-v2-bg) !important;
  }

  /* Dim only the page strip beside the drawer — catalog stays clear, soft fade at edge */
  .catalog-overlay.open {
    top: 0;
    bottom: calc(var(--mob-v2-tab-h) + env(safe-area-inset-bottom, 0));
    background: rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  html[dir="ltr"] .catalog-overlay.open {
    left: min(320px, 88vw);
    right: 0;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.1) 28%,
      rgba(0, 0, 0, 0.24) 100%
    ) !important;
  }

  html[dir="rtl"] .catalog-overlay.open {
    left: 0;
    right: min(320px, 88vw);
    background: linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.1) 28%,
      rgba(0, 0, 0, 0.24) 100%
    ) !important;
  }

  body.is-home-page #mobV2CatalogHost,
  body.is-home-page #mobV2CatalogHost .catalog-drawer:not(.open),
  body.is-home-page #mobV2CatalogHost .ct-row[data-ct-action],
  body.is-home-page .mob-v2-catalog-expand {
    pointer-events: auto;
    touch-action: manipulation;
  }

  body.catalog-branch-mode .nav-garage-btn,
  body.catalog-page-open .nav-garage-btn {
    pointer-events: auto !important;
    z-index: 8;
  }

  /* Override homepage-premium mobile header rules */
  body.is-home-page .nav-search-wrap,
  body.is-home-page .nav-search-dropdown,
  body.is-home-page #navSearchDropdown {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-home-page .nav-main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  body.is-home-page .nav-shell.nav-main-row,
  body.is-home-page .nav-main-row,
  body.is-home-page .nav-main .nav-shell {
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: start !important;
    align-content: start !important;
  }

  body.is-home-page .nav-util-cluster {
    top: calc(env(safe-area-inset-top, 0px) - 2mm) !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  body.is-home-page .nav-shop-btn {
    display: inline-flex !important;
  }

  nav:not(.mob-bottom-bar) .nav-shop-btn {
    right: max(4px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
  }

  body.is-home-page .nav-main-actions,
  body.is-home-page .nav-actions-wrap,
  body.is-home-page .nav-mobile-actions,
  body.is-home-page .nav-trade-cluster {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    align-items: flex-start !important;
  }

  body.is-home-page .nav-mobile-actions .nav-lang-wrap,
  body.is-home-page .nav-mobile-actions .nav-cart-btn,
  body.is-home-page .nav-mobile-actions .nav-btn-auth,
  body.is-home-page .nav-mobile-actions .nav-btn-wa:not(.mob-wa-fab) {
    display: none !important;
  }

  body.is-home-page .nav-logo,
  html[dir="rtl"] body.is-home-page .nav-logo {
    max-width: min(48vw, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-start !important;
    align-self: start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin-top: 0 !important;
    line-height: 0 !important;
  }

  body.is-home-page .nav-logo-img,
  html[dir="rtl"] body.is-home-page .nav-logo-img {
    max-height: var(--mob-v2-logo-h) !important;
    height: var(--mob-v2-logo-h) !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    vertical-align: top !important;
  }

  html[dir="rtl"] body.is-home-page .nav-logo-img {
    object-position: left center !important;
  }

  /* Beat inline ≤767 rules that hide .nav-actions-wrap */
  .nav-actions-wrap {
    display: contents !important;
  }

  .mob-home-feed .hero,
  .mob-home-feed .mob-card--hero .hero,
  #hero.hero {
    margin-top: 0 !important;
  }

  /* Auth modal — bottom sheet on mobile */
  .auth-modal {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(104%) !important;
    border-bottom: none !important;
  }

  .auth-modal.open {
    transform: translateY(0) !important;
  }

  .auth-modal-header {
    flex-shrink: 0;
    padding: 16px 18px 0 !important;
  }

  .auth-tabs {
    flex-shrink: 0;
    padding: 12px 18px 0 !important;
  }

  .auth-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .auth-field input {
    font-size: 16px !important;
    min-height: 48px;
  }

  .auth-submit,
  .auth-wa-btn {
    min-height: 48px;
  }

  .auth-close {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #authOverlay.open {
    z-index: 2298 !important;
  }

  #authModal.open {
    z-index: 2299 !important;
  }

}

/* Show bottom bar on tablet band (768–900) — mobile-home hides it above 767 */
@media (max-width: 900px) {
  body:has(#catalogDrawer.open) .catalog-overlay.open,
  body.catalog-drawer-open .catalog-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2099 !important;
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  body.is-home-page:has(#catalogDrawer.open) .catalog-overlay.open,
  body.is-home-page.catalog-drawer-open .catalog-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2099 !important;
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  body:has(#catalogDrawer.open) .catalog-drawer,
  body.catalog-drawer-open .catalog-drawer {
    z-index: 2100 !important;
    filter: none !important;
  }

  body.is-home-page:has(#catalogDrawer.open) .catalog-drawer,
  body.is-home-page.catalog-drawer-open .catalog-drawer {
    z-index: 2100 !important;
    filter: none !important;
  }

  body.catalog-drawer-open #catalogDrawer.open::after,
  body:has(#catalogDrawer.open) #catalogDrawer::after {
    display: none !important;
    content: none !important;
  }

  .catalog-overlay.open {
    z-index: 2099 !important;
  }

  #cartDrawer.cart-drawer.open {
    z-index: 2200 !important;
  }

  #cartOverlay.open {
    z-index: 2199 !important;
  }

  .mob-bottom-bar.mob-bottom-bar--v2 {
    display: grid !important;
  }

  /* Final beat: home-premium + inline nav row centering */
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    align-items: start !important;
    align-content: start !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
  }

  body.is-home-page > nav:not(.mob-bottom-bar) .nav-shell.nav-main-row,
  body.is-home-page > nav:not(.mob-bottom-bar) .nav-main-row {
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo,
  html[dir="rtl"] body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-start !important;
    align-self: start !important;
    line-height: 0 !important;
  }

  body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo-img,
  html[dir="rtl"] body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo-img {
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  html[dir="rtl"] body.is-home-page > nav:not(.mob-bottom-bar) .nav-logo-img {
    object-position: left center !important;
  }

  /* Final beat: keep top nav visible on mobile home (logo + Shop Now) */
  body.is-home-page > nav:not(.mob-bottom-bar),
  body.is-home-page nav:not(.mob-bottom-bar),
  nav:not(.mob-bottom-bar) {
    display: block !important;
    visibility: visible !important;
    background: var(--mob-v2-header-blue) !important;
    background-color: var(--mob-v2-header-blue) !important;
    border-bottom: 1px solid var(--mob-v2-header-blue-edge) !important;
  }

  /* Product detail — rounded main photo on mobile */
  body.product-page-open #productPage .pd-main-wrap,
  body.product-page-open #productPage .pd-main-img,
  body.product-page-open #productPage .pd-main-stage,
  #pdModal .pd-main-wrap,
  #pdModal .pd-main-img,
  #pdModal .pd-main-stage,
  .pd-modal .pd-main-wrap,
  .pd-modal .pd-main-img,
  .pd-modal .pd-main-stage {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body.product-page-open #productPage .pd-main-photo,
  body.product-page-open #productPage .pd-main-img img,
  #pdModal .pd-main-photo,
  #pdModal .pd-main-img img,
  .pd-modal .pd-main-photo,
  .pd-modal .pd-main-img img {
    border-radius: 16px !important;
  }

  body.product-page-open #productPage .product-page-gallery .pd-gallery,
  #pdModal .pd-gallery,
  .pd-modal .pd-gallery {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body {
    padding-bottom: calc(var(--mob-v2-tab-h) + env(safe-area-inset-bottom, 0)) !important;
  }
}