/* AURA mobile polish: spacing, tap targets, and overflow fixes without changing IA or content. */
main > section:first-child a.aura-hero-shop-cta-hidden,
main > section:first-child a[href="/produits"],
main > section:first-child a[href$="/produits"],
main > section:first-child a[href="/ar/montajat"],
main > section:first-child a[href$="/ar/montajat"] {
  display: none !important;
}

main > section:first-child a.aura-diagnostic-cta,
main > section:first-child a[href="/diagnostic"],
main > section:first-child a[href$="/diagnostic"],
main > section:first-child a[href="/ar/tachkhiss"],
main > section:first-child a[href$="/ar/tachkhiss"] {
  border-color: rgb(255 255 255 / 0.52) !important;
  background: linear-gradient(135deg, #5f755f 0%, #3f5945 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgb(24 48 30 / 0.32), inset 0 1px 0 rgb(255 255 255 / 0.22) !important;
  gap: 10px !important;
}

main > section:first-child a.aura-diagnostic-cta:hover,
main > section:first-child a[href="/diagnostic"]:hover,
main > section:first-child a[href$="/diagnostic"]:hover,
main > section:first-child a[href="/ar/tachkhiss"]:hover,
main > section:first-child a[href$="/ar/tachkhiss"]:hover {
  border-color: rgb(255 255 255 / 0.72) !important;
  background: linear-gradient(135deg, #6f846c 0%, #48644d 100%) !important;
}

.aura-diagnostic-cta__images {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: -2px;
}

.aura-diagnostic-cta__image {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(255 255 255 / 0.86);
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

.aura-diagnostic-cta__image + .aura-diagnostic-cta__image {
  margin-left: -9px;
}

[dir="rtl"] .aura-diagnostic-cta__images {
  margin-right: -2px;
  margin-left: 0;
}

[dir="rtl"] .aura-diagnostic-cta__image + .aura-diagnostic-cta__image {
  margin-right: -9px;
  margin-left: 0;
}

@media (max-width: 767px) {
  :root {
    --aura-mobile-topbar: 95px;
  }

  .fixed.top-16.left-0.right-0.z-40 .overflow-x-auto {
    justify-content: flex-start !important;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fixed.top-16.left-0.right-0.z-40 .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }

  .fixed.top-16.left-0.right-0.z-40 .overflow-x-auto > * {
    scroll-snap-align: start;
  }

  main > section:first-child {
    min-height: 100svh !important;
    padding-top: var(--aura-mobile-topbar) !important;
  }

  main > section:first-child > .container-main {
    min-height: calc(100svh - var(--aura-mobile-topbar)) !important;
    justify-content: center !important;
    padding-bottom: 22px !important;
  }

  main > section:first-child h1 {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  [dir="rtl"] main > section:first-child h1 {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }

  main > section:first-child p.hc-text {
    max-width: 20rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.95rem !important;
    line-height: 1.42 !important;
  }

  main > section:first-child .hc-text.flex.flex-col:has(> a) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px !important;
  }

  main > section:first-child .hc-text.flex.flex-col:has(> a) > a {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  main > section:first-child .hc-text.flex.flex-col:has(> a) > a:first-child {
    grid-column: 1 / -1;
  }

  main > section:first-child .hc-text.flex.flex-col:has(> a) > a.aura-diagnostic-cta,
  main > section:first-child .hc-text.flex.flex-col:has(> a) > a[href="/diagnostic"],
  main > section:first-child .hc-text.flex.flex-col:has(> a) > a[href$="/diagnostic"],
  main > section:first-child .hc-text.flex.flex-col:has(> a) > a[href="/ar/tachkhiss"],
  main > section:first-child .hc-text.flex.flex-col:has(> a) > a[href$="/ar/tachkhiss"] {
    gap: 7px !important;
  }

  .aura-diagnostic-cta__image {
    width: 20px;
    height: 20px;
    border-width: 1.5px;
  }

  .aura-diagnostic-cta__image + .aura-diagnostic-cta__image {
    margin-left: -8px;
  }

  [dir="rtl"] .aura-diagnostic-cta__image + .aura-diagnostic-cta__image {
    margin-right: -8px;
    margin-left: 0;
  }

  main > section:first-child .hc-text.mt-6.flex.flex-col {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
    margin-top: 14px !important;
  }

  main > section:first-child .hc-text.mt-6.flex.flex-col > * {
    min-width: 0 !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  main > section:first-child .mt-8.flex.flex-col {
    margin-top: 16px !important;
    gap: 8px !important;
  }

  main > section:first-child button.absolute.top-1\/2 {
    display: none !important;
  }

  button[aria-label*="WhatsApp"],
  button[title*="WhatsApp"] {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 50px !important;
    height: 50px !important;
  }

  main > .min-h-\[100dvh\].bg-cream {
    padding-top: var(--aura-mobile-topbar) !important;
  }

  main > .min-h-\[100dvh\].bg-cream .container-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main > .min-h-\[100dvh\].bg-cream > .container-main:first-child {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  main > .min-h-\[100dvh\].bg-cream > .container-main:first-child .flex.items-center.gap-2.text-body-xs.text-grey {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  main > .min-h-\[100dvh\].bg-cream > .container-main:first-child .flex.items-center.gap-2.text-body-xs.text-grey::-webkit-scrollbar {
    display: none;
  }

  main > .min-h-\[100dvh\].bg-cream > .container-main:first-child .flex.items-center.gap-2.text-body-xs.text-grey > * {
    flex: 0 0 auto !important;
    overflow-wrap: normal !important;
  }

  main > .min-h-\[100dvh\].bg-cream .relative.h-\[240px\] {
    height: 210px !important;
  }

  main > .min-h-\[100dvh\].bg-cream .relative.h-\[240px\] h1,
  main .text-display-l {
    font-size: 2.4rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  main > .min-h-\[100dvh\].bg-cream .relative.h-\[240px\] p,
  main .text-body-l {
    max-width: 20rem !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  main input[type="search"],
  main input[placeholder*="Rechercher"] {
    height: 42px !important;
    font-size: 14px !important;
  }

  main .flex.flex-wrap.items-center.justify-between.gap-4.mb-6 {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  main .flex.flex-wrap.items-center.justify-between.gap-4.mb-6 > .flex.items-center.gap-3 {
    width: 100% !important;
    justify-content: space-between !important;
  }

  main .flex.flex-wrap.items-center.justify-between.gap-4.mb-6 select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .aura-ai-context-card--catalog {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 0 14px !important;
    padding: 10px 12px !important;
  }

  main .grid,
  main .grid > * {
    min-width: 0 !important;
  }

  main .grid.lg\:grid-cols-2,
  main .grid.lg\:grid-cols-2 > *,
  main .lg\:sticky,
  main .relative.aspect-square.bg-white {
    width: 100% !important;
    max-width: 100% !important;
  }

  main > .min-h-\[100dvh\].bg-cream > .container-main.py-8 > .grid.lg\:grid-cols-2 > div:nth-child(2) {
    transform: none !important;
  }

  main .text-display-m {
    font-size: 2rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  main .grid.grid-cols-2 {
    gap: 12px !important;
  }

  main .grid.grid-cols-2 .absolute.inset-x-0.bottom-0.p-3 {
    opacity: 1 !important;
    transform: none !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.94) 35%, rgb(255 255 255 / 0.98));
  }

  main .grid.grid-cols-2 .absolute.inset-x-0.bottom-0.p-3 button {
    height: 34px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }

  main .grid.grid-cols-2 .p-4 {
    padding: 12px !important;
  }

  main .border-t.border-light-grey .flex.gap-1.mb-4.overflow-x-auto {
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow-x: visible !important;
  }

  main .border-t.border-light-grey .flex.gap-1.mb-4.overflow-x-auto > button {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  main h1,
  main h2,
  main h3,
  main p {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 370px) {
  main > section:first-child h1 {
    font-size: 1.65rem !important;
  }

  [dir="rtl"] main > section:first-child h1 {
    font-size: 1.65rem !important;
  }
}