/**
 * OEM ASTRA J â€” Mobile homepage card feed (AUTOPULSE-style)
 * Applies at â‰¤767px only; desktop layout unchanged.
 */

@media (min-width: 768px) {
  .mob-home-feed { display: contents; }
  .mob-hero-overlay { display: none !important; }
  .mob-card-chevron { display: none; }
  .mob-card-label--actions { display: none; }
  .mob-bottom-bar { display: none !important; }
}

@keyframes mobCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  :root {
    --mob-tab-h: 62px;
    --nav-mob-logo-over: 0px;
    --nav-mob-actions-w: 0px;
    --mob-fw-body: 300;
    --mob-fw-ui: 400;
    --mob-fw-title: 500;
    --mob-fw-emphasis: 600;
    --mob-fw-btn: 500;
    --mob-text-muted: #9ba8b3;
    --mob-label-track: 0.12em;
    --mob-bar-teal-start: #28c8d8;
    --mob-bar-teal-mid: #14a4b6;
    --mob-bar-teal-end: #0a8598;
    --mob-bar-icon: rgba(255, 255, 255, 0.82);
    --mob-bar-icon-active: #fff;
  }

  html {
    font-size: 15px;
  }

  body {
    background: #0a0b0e;
    padding-bottom: calc(var(--mob-tab-h) + env(safe-area-inset-bottom, 0));
    font-weight: var(--mob-fw-body);
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  html[dir="ltr"] body {
    font-family: var(--font-en);
  }

  button,
  input,
  select,
  textarea {
    font-weight: var(--mob-fw-ui);
  }

  /* â”€â”€ Dark mobile top nav (logo/icons in index.html @media 900px) â”€â”€ */
  body > nav:not(.mob-bottom-bar) {
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
  }

  .nav-main {
    background: #000 !important;
  }

  .mob-drawer {
    inset: calc(var(--nav-mob-h) + env(safe-area-inset-top, 0)) 0 0 0 !important;
  }

  .mob-home-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    padding-top: calc(var(--nav-mob-h) + env(safe-area-inset-top, 0) + 2px);
    padding-bottom: 18px;
    max-width: 100%;
    overflow-x: clip;
  }

  /* â”€â”€ Shared card shell â”€â”€ */
  .mob-home-feed .mob-card {
    background: #16181c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    animation: mobCardIn 0.42s ease both;
  }

  .mob-home-feed .mob-card:nth-child(1) { animation-delay: 0.02s; }
  .mob-home-feed .mob-card:nth-child(2) { animation-delay: 0.06s; }
  .mob-home-feed .mob-card:nth-child(3) { animation-delay: 0.1s; }
  .mob-home-feed .mob-card:nth-child(4) { animation-delay: 0.14s; }
  .mob-home-feed .mob-card:nth-child(5) { animation-delay: 0.18s; }
  .mob-home-feed .mob-card:nth-child(6) { animation-delay: 0.22s; }

  .mob-home-feed .mob-card-inner {
    padding: 16px 16px 18px;
  }

  .mob-card-label {
    font-size: 10px;
    font-weight: var(--mob-fw-ui);
    letter-spacing: var(--mob-label-track);
    text-transform: uppercase;
    color: var(--mob-text-muted);
    margin-bottom: 6px;
  }

  .mob-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  .mob-card-head .section-label {
    color: #8b919a;
    margin-bottom: 4px;
  }

  .mob-card-head .section-title,
  .mob-card-head .brands-section-title {
    font-size: 18px;
    font-weight: var(--mob-fw-title);
    line-height: 1.25;
  }

  .mob-card-chevron {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #c5cad3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .mob-card-chevron:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.08);
  }

  .mob-card-chevron svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
  }

  html[dir="rtl"] .mob-card-chevron svg {
    transform: scaleX(-1);
  }

  /* Hero stays a dark rounded card above light bands */
  .mob-home-feed .mob-card--hero {
    margin: 0 14px 0;
    width: auto;
    max-width: calc(100% - 28px);
    padding: 0;
    background: linear-gradient(155deg, #221018 0%, #16181c 42%, #101622 100%);
    border-color: rgba(215, 25, 32, 0.22);
  }

  .mob-home-feed .mob-card--hero .hero {
    margin-top: 0 !important;
    border-radius: 0;
    height: auto !important;
    min-height: 220px !important;
    max-height: min(52vh, 380px) !important;
    aspect-ratio: 16 / 10;
    background: transparent;
  }

  .mob-home-feed .mob-card--hero .hero-slide-fg {
    object-fit: cover;
    object-position: center 40%;
  }

  .mob-home-feed .mob-card--hero .hero-slide-bg {
    display: none;
  }

  .mob-home-feed .mob-card--hero .hero-slider {
    background: transparent;
  }

  .mob-home-feed .mob-card--hero .slider-dots {
    bottom: 10px;
    z-index: 4;
  }

  .mob-hero-overlay {
    position: relative;
    z-index: 3;
    margin-top: -2px;
    padding: 14px 16px 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 11, 14, 0.55) 18%, rgba(10, 11, 14, 0.92) 100%);
  }

  .mob-hero-kicker {
    font-size: 10px;
    font-weight: var(--mob-fw-ui);
    letter-spacing: var(--mob-label-track);
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 6px;
  }

  .mob-hero-title {
    font-size: 20px;
    font-weight: var(--mob-fw-title);
    color: #fff;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .mob-hero-title em {
    color: var(--red);
    font-style: normal;
  }

  .mob-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mob-stat-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: var(--mob-fw-body);
    color: #e8eaee;
    line-height: 1.35;
    text-align: center;
  }

  .mob-stat-pill strong {
    display: block;
    font-size: 13px;
    font-weight: var(--mob-fw-emphasis);
    color: #fff;
    margin-bottom: 2px;
  }

  /* â”€â”€ Quick actions card â”€â”€ */
  .mob-home-feed .mob-card--actions:not(.section-light) {
    background: #16181c;
  }

  .mob-home-feed .mob-catalog-cta {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .mob-home-feed .mob-catalog-cta-inner {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mob-home-feed .mob-catalog-cta-main {
    min-height: 48px;
    border-radius: 14px;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(215, 25, 32, 0.32);
  }

  .mob-home-feed .mob-catalog-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mob-home-feed .mob-catalog-cta-chip {
    flex: 1;
    min-height: 44px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #22252b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e8eaee;
    font-size: 10px;
    font-weight: var(--mob-fw-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    line-height: 1.2;
  }

  .mob-home-feed .mob-catalog-cta-chip svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold-light);
  }

  .mob-home-feed .mob-catalog-cta-chip--wa svg {
    stroke: none;
    fill: #25d366;
  }

  /* â”€â”€ Top selling card â”€â”€ */
  .mob-home-feed .top-selling-section {
    padding: 0;
    margin: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent;
    border: none;
    border-top: none;
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--nav-mob-logo-over) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  .mob-home-feed .top-selling-section .section-head {
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--nav-mob-logo-over) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  .mob-home-feed .top-selling-section .section-inner {
    padding: 16px 16px 0;
  }

  .mob-home-feed .top-selling-section .top-parts-head-title {
    color: #fff;
    font-weight: var(--mob-fw-title);
    font-size: 17px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: none;
  }

  .mob-home-feed .top-selling-section .top-parts-head-title em {
    color: #fff;
    font-style: normal;
    font-weight: inherit;
  }

  html[dir="ltr"] .mob-home-feed .top-selling-section .top-parts-head-title {
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .mob-home-feed .top-selling-section .section-label {
    color: rgba(255, 255, 255, 0.45);
  }

  .mob-home-feed .mob-card-body--marquee {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 0 0;
    overflow: hidden;
    box-shadow: none;
  }

  .mob-home-feed .top-selling-card {
    flex: 0 0 172px;
    width: 172px;
    background: #2a2a2a;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  }

  .mob-home-feed .top-selling-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
  }

  .mob-home-feed .top-selling-img-wrap {
    background: #000;
    min-height: 130px;
  }

  .mob-home-feed .top-selling-name {
    color: #fff;
    text-transform: uppercase;
  }

  .mob-home-feed .top-selling-price-row {
    color: inherit;
  }

  .mob-home-feed .top-selling-price-row .product-price-sale {
    color: var(--price-final-on-light, #3b82f6);
    font-size: 22px;
    font-weight: 400;
  }

  .mob-home-feed .top-selling-price-row .product-price-badge {
    color: #D71920;
  }

  .mob-home-feed .top-selling-price-row .product-price-compare {
    color: #fff;
    text-decoration: line-through;
  }

  .mob-home-feed .top-selling-price-row .product-price--single {
    color: var(--price-final-on-light, #3b82f6);
    font-size: 22px;
    font-weight: 400;
  }

  .product-card .product-price-sale,
  .product-card .product-price--single,
  .product-card .product-price {
    font-weight: 400 !important;
  }

  .mob-home-feed .top-selling-cart {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 6px;
    background: #4a4a4a;
  }

  .mob-home-feed .top-selling-cart:hover {
    background: var(--gold, #d4af37);
    color: #111;
  }

  .mob-home-feed .top-parts-swipe-hint {
    color: rgba(255, 255, 255, 0.35);
  }

  .mob-home-feed .brands-section {
    background: transparent;
    border: none;
  }

  .mob-home-feed .brands-section-inner {
    padding: 16px;
    padding-bottom: 18px;
  }

  .mob-home-feed .brands-section-title {
    color: #fff;
  }

  .mob-home-feed .brands-section .btn-all-gold {
    color: var(--gold-light);
  }

  .mob-home-feed .brands-banner {
    margin-top: 12px;
    padding: 12px 12px 14px;
    background: #12151a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
  }

  .mob-home-feed .brands-banner-label {
    color: var(--mob-text-muted);
    font-weight: var(--mob-fw-ui);
    font-size: 10px;
    letter-spacing: var(--mob-label-track);
  }

  .mob-home-feed .brands-banner-all {
    font-size: 11px;
    font-weight: var(--mob-fw-ui);
    color: var(--gold-light);
  }

  .mob-home-feed .brand-banner-item {
    width: 76px;
    height: 76px;
    padding: 8px;
    background: #22252b;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }

  .mob-home-feed .brand-banner-item.active {
    border-color: var(--gold);
    outline-color: var(--gold);
  }

  /* â”€â”€ Maintenance card â”€â”€ */
  .mob-home-feed .maint-section {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--nav-mob-logo-over) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  .mob-home-feed .maint-section .section-inner {
    padding: 16px;
  }

  .mob-home-feed .maint-tabs {
    margin-bottom: 14px;
    padding-bottom: 4px;
  }

  .mob-home-feed .maint-tab {
    border-radius: 12px;
    background: #22252b;
    border-color: rgba(255, 255, 255, 0.08);
  }

  .mob-home-feed .maint-package {
    background: #12151a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px;
  }

  .mob-home-feed .maint-items {
    gap: 8px;
  }

  .mob-home-feed .maint-item {
    background: #22252b;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
  }

  .mob-home-feed .maint-km {
    font-size: 18px;
  }

  .mob-home-feed .btn-add-maint {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
    margin-top: 4px;
  }

  /* ── Why us ── */
  .mob-home-feed #why {
    padding: 0;
    margin: 0;
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--nav-mob-logo-over) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  .mob-home-feed #why:not(.section-light) {
    background: transparent !important;
  }

  .mob-home-feed #why .section-inner {
    padding: 16px;
  }

  .mob-home-feed #why .why-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -4px;
    padding-inline: 4px;
  }

  .mob-home-feed #why .why-grid::-webkit-scrollbar {
    display: none;
  }

  .mob-home-feed #why .why-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    background: #22252b;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
  }

  .mob-home-feed #why .why-card:hover {
    transform: none;
  }

  /* CTA card */
  .mob-home-feed .cta-strip {
    margin: 0 14px;
    width: auto;
    max-width: calc(100% - 28px);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1014 0%, #16181c 50%, #101820 100%);
    border: 1px solid rgba(215, 25, 32, 0.25);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  }

  .mob-home-feed .cta-inner {
    padding: 18px 16px;
    gap: 14px;
  }

  .mob-home-feed .cta-text h2 {
    font-size: 18px;
  }

  .mob-home-feed .cta-text p {
    font-size: 13px;
  }

  .mob-home-feed .btn-wa-big {
    width: 100%;
    border-radius: 14px;
    min-height: 48px;
  }

  /* Section spacing reset inside feed */
  .mob-home-feed .section {
    padding: 0;
  }

  #topParts,
  #maintenance,
  #why {
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--nav-mob-logo-over) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  footer {
    margin-top: 4px;
    padding-bottom: 8px;
  }

  /* No desktop-style scrollbar / horizontal bleed on phones */
  html {
    overflow-x: hidden;
    scrollbar-width: none;
  }

  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .mob-home-feed .top-parts-viewport,
  .mob-home-feed .mob-card-body--marquee {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* â”€â”€ Bottom tab bar â”€â”€ */
  .mob-bottom-bar {
    position: fixed;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    z-index: 998;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    min-height: var(--mob-tab-h);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(
      90deg,
      var(--mob-bar-teal-start) 0%,
      var(--mob-bar-teal-mid) 52%,
      var(--mob-bar-teal-end) 100%
    ) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 22px rgba(8, 96, 110, 0.35) !important;
    overflow: visible;
    transition: transform 0.28s ease;
  }

  body:has(#cartDrawer.open) .mob-bottom-bar,
  body:has(#catalogDrawer.open) .mob-bottom-bar,
  body:has(.pd-modal.open) .mob-bottom-bar,
  body:has(#checkoutModal.open) .mob-bottom-bar,
  body:has(#authModal.open) .mob-bottom-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  .checkout-overlay {
    backdrop-filter: blur(6px);
  }

  .checkout-modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    max-height: min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px));
    border-radius: 18px 18px 0 0;
    transform: translateY(104%);
    border-bottom: none;
  }

  .checkout-modal.open {
    transform: translateY(0);
  }

  .checkout-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .checkout-footer .btn-continue-shopping,
  .checkout-footer .btn-checkout {
    min-height: 48px;
    font-size: 15px;
  }

  .checkout-payment-block {
    padding: 14px;
    border-radius: 14px;
  }

  .checkout-payment-methods {
    gap: 10px;
    margin-top: 12px;
  }

  .checkout-pay-option {
    min-height: 54px;
    padding: 12px 14px;
    gap: 14px;
  }

  .checkout-pay-option input {
    width: 20px;
    height: 20px;
  }

  .checkout-pay-option-icon {
    width: 42px;
    height: 42px;
  }

  .checkout-pay-option-text {
    font-size: 14px;
  }

  .checkout-payment-confirm {
    padding: 14px;
    border-radius: 12px;
  }

  .checkout-pay-confirm-line {
    font-size: 14px;
    line-height: 1.5;
  }

  .checkout-copy-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .checkout-proof-btn {
    min-height: 48px;
    font-size: 15px;
  }

  .checkout-prepaid-input {
    min-height: 48px;
    font-size: 16px;
  }

  .cart-pay-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .cart-pay-methods-label {
    font-size: 11px;
    font-weight: var(--mob-fw-ui);
    color: var(--mob-text-muted);
    letter-spacing: 0.04em;
  }

  .cart-pay-methods-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .cart-pay-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.1);
    color: #f3e6b8;
    font-size: 11px;
    font-weight: var(--mob-fw-emphasis);
    line-height: 1.2;
  }

  .cart-footer .btn-continue-shopping,
  .checkout-footer .btn-checkout {
    min-height: 48px;
    font-size: 15px;
  }

  .cart-drawer {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cart-footer .btn-continue-shopping,
  .cart-footer .btn-checkout {
    min-height: 48px;
  }

  .mob-tab {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--mob-bar-icon);
    font-size: 9px;
    font-weight: var(--mob-fw-ui);
    font-family: var(--font-ar);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .mob-tab svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mob-tab.is-active {
    color: var(--mob-bar-icon-active);
    background: rgba(255, 255, 255, 0.14);
  }

  .mob-tab.is-active svg {
    stroke: var(--mob-bar-icon-active);
  }

  .mob-tab--wa svg {
    stroke: none;
    fill: #25d366;
  }

  .mob-tab--wa.is-active {
    color: #25d366;
  }

  .mob-tab--wa.is-active svg {
    fill: #25d366;
    stroke: none;
  }

  .mob-tab--cart .cart-badge {
    top: 0;
    right: auto;
    left: 50%;
    margin-left: 6px;
    border-color: var(--mob-bar-teal-end);
    z-index: 2;
  }

  html[dir="ltr"] .mob-tab--cart .cart-badge {
    left: auto;
    right: 50%;
    margin-left: 0;
    margin-right: 6px;
  }

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

  .mob-tab--auth #navAuthIconMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
  }

  .mob-tab--auth #navAuthIconMobile svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
  }

  .mob-tab--auth .nav-auth-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 10px;
    font-weight: var(--mob-fw-emphasis);
    font-family: var(--font-en);
    letter-spacing: 0.02em;
  }

  .mob-tab--auth.is-active .nav-auth-initials {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  .mob-tab--auth #navAuthLabelMobile {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mob-bottom-bar .mob-lang-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 88px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    align-self: stretch;
  }

  .mob-bottom-bar .mob-tab--lang.nav-lang-btn {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100% !important;
    min-height: 100% !important;
    align-self: stretch;
    padding: 4px 2px !important;
    margin: 0;
    line-height: 1.2;
    flex-shrink: 1;
    background: transparent !important;
    color: var(--mob-bar-icon) !important;
    border: none;
    border-radius: 12px;
    min-width: 0;
    font-size: 9px;
    font-weight: var(--mob-fw-ui);
    font-family: var(--font-ar);
  }

  .mob-bottom-bar .mob-tab--lang.nav-lang-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--mob-bar-icon-active) !important;
  }

  .mob-bottom-bar .mob-tab--lang.nav-lang-btn.is-active {
    color: var(--mob-bar-icon-active) !important;
    background: rgba(255, 255, 255, 0.14) !important;
  }

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

  .mob-bottom-bar .mob-tab--lang .mob-tab-lang-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #langTabBottomLabel {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }

  .mob-bottom-bar .lang-menu--bottom {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(100% + 10px);
    top: auto;
    transform: translateX(-50%) translateY(8px);
    min-width: 148px;
    z-index: 1001;
  }

  .mob-bottom-bar .lang-menu--bottom.open {
    transform: translateX(-50%) translateY(0);
  }

  /* â”€â”€ Page-wide thin typography (AUTOPULSE) â”€â”€ */
  .section-label,
  .footer-col h4,
  .catalog-drawer-head h2,
  .mob-drawer-head,
  .pd-section-title,
  .auth-field label,
  .product-card .product-meta-label,
  .maint-item-note {
    font-weight: var(--mob-fw-ui);
    letter-spacing: var(--mob-label-track);
  }

  .section-label {
    font-size: 10px;
    color: var(--mob-text-muted);
  }

  .section-title,
  .brands-section-title,
  .top-parts-head-title,
  .cta-text h2,
  .why-title,
  .no-results-title,
  .pd-header h2,
  .auth-modal-header h2,
  .checkout-modal h2,
  .track-modal h2,
  .cart-title-text {
    font-weight: var(--mob-fw-title);
    letter-spacing: 0.01em;
  }

  .section-title {
    font-size: 17px;
  }

  .brands-section-title,
  .top-parts-head-title {
    font-size: 17px;
    font-weight: var(--mob-fw-title);
  }

  .maint-km,
  .top-selling-price,
  .cart-item-price,
  .pd-price,
  .cart-badge,
  .mob-nav-icon .cart-badge {
    font-weight: var(--mob-fw-emphasis);
  }

  .mob-catalog-cta-main,
  .btn-cart,
  .top-selling-cart,
  .btn-add-maint,
  .btn-wa-big,
  .mob-wa-btn,
  .btn-all-gold,
  .btn-hero-shop,
  .btn-hero-contact,
  .auth-submit,
  .auth-wa-btn,
  .checkout-modal .btn-primary,
  .item-tab,
  .maint-tab,
  .cat-tab,
  .auth-tab {
    font-weight: var(--mob-fw-btn);
  }

  .product-name,
  .product-name-ar,
  .top-selling-name,
  .product-card .product-meta-row,
  .why-text,
  .maint-desc,
  .maint-item-name,
  .maint-item-brand,
  .cta-text p,
  .footer-desc,
  .footer-col li a,
  .catalog-drawer-link-text,
  .mob-nav-links li a,
  .cart-item-name,
  .cart-item-brand,
  .cart-count-text,
  .pd-meta-label,
  .pd-meta-val,
  .auth-footer-text,
  .brand-card-name,
  .product-tag,
  .product-warranty,
  .catalog-breadcrumb,
  .live-search-bar,
  .mob-nav-icon--lang {
    font-weight: var(--mob-fw-body);
  }

  .mob-nav-icon--lang {
    font-size: 11px;
  }

  .footer-logo-text,
  .footer-copy {
    font-weight: var(--mob-fw-title);
  }

  .brand-badge,
  .pay-badge,
  .badge-14,
  .product-tag {
    font-weight: var(--mob-fw-ui);
  }

  .mob-drawer-head span,
  .search-drop-hint em,
  .live-search-bar .search-query-term,
  .catalog-pagination-info em,
  .pd-related-name,
  .pd-related-price,
  .brand-page-name,
  .brand-page-price {
    font-weight: var(--mob-fw-title);
  }

  .pd-related-price,
  .brand-page-price {
    font-weight: var(--mob-fw-emphasis);
  }

  .mob-tab svg,
  .mob-nav-icon svg,
  .mob-catalog-cta-chip svg {
    stroke-width: 1.5;
  }

  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: 10px;
    padding-bottom: 18px;
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 12px
    );
  }

  body.catalog-branch-mode .product-card,
  body.catalog-page-open .product-card {
    scroll-margin-top: calc(
      var(--nav-mob-h) + var(--mob-sticky-search-h) +
      env(safe-area-inset-top, 0) + 8px
    );
  }

  body.catalog-branch-mode #products .catalog-breadcrumb {
    margin-top: 0;
    margin-bottom: 6px;
  }
}

