/* === Global responsive adjustments — tablet & mobile === */

html, body { max-width: 100vw; overflow-x: hidden; }

/* ============================================================
   ARABIC / RTL — flip layout when html[dir="rtl"]
   ============================================================ */
html[dir="rtl"] body { direction: rtl; text-align: right; font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', Inter, sans-serif; }
html[dir="rtl"] .font-display,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .font-headline { font-family: 'Cairo', 'Tajawal', 'Amiri', serif !important; font-weight: 700; }

/* Reverse all flex/grid rows so the visual order matches reading order */
html[dir="rtl"] .flex:not(.flex-col):not(.lg\:flex-col) { flex-direction: row-reverse; }
html[dir="rtl"] .lg\:grid-cols-12,
html[dir="rtl"] .grid.grid-cols-12 { direction: rtl; }
html[dir="rtl"] .grid > * { direction: rtl; }

/* Specific flips: numeric stat cards, breadcrumbs, hero stamps */
html[dir="rtl"] nav[aria-label="Fil d'Ariane"] { direction: rtl; }
html[dir="rtl"] .grow-underline::after { transform-origin: right; }

/* Inputs & numbers stay LTR (better readability for prices, phones, emails, dates) */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] [data-keep-ltr] {
  direction: ltr; text-align: right;
}

/* Margins/paddings: swap auto sides for the most common Tailwind patterns */
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* Floating UI elements — swap right<->left */
html[dir="rtl"] #mobile-cart-fab { right: auto; left: 18px; }
html[dir="rtl"] #free-shipping-banner { right: auto; left: 16px; }
@media (max-width: 768px) {
  html[dir="rtl"] #mobile-cart-fab { left: 18px; right: auto; }
}

/* Mini-cart drawer slides from the LEFT in RTL */
html[dir="rtl"] #mini-cart-drawer .mc-panel { right: auto; left: 0; transform: translateX(-100%); }
html[dir="rtl"] #mini-cart-drawer.open .mc-panel { transform: translateX(0); }
html[dir="rtl"] #mini-cart-drawer .mc-cta-primary { padding: 6px 22px 6px 6px; flex-direction: row-reverse; }

/* Filter sheet (catalogue) slides from BOTTOM same way — already vertical */

/* Hero showcase backdrop swap */
html[dir="rtl"] section .absolute.-top-32.-right-32 { right: auto; left: -8rem; }
html[dir="rtl"] section .absolute.-bottom-32.-left-32 { left: auto; right: -8rem; }

/* Material icons that imply direction (arrow_forward/back, chevron_right/left, arrow_outward) — flip horizontally */
html[dir="rtl"] .material-symbols-outlined { unicode-bidi: plaintext; }
html[dir="rtl"] [data-flip-rtl="true"] { transform: scaleX(-1); }

/* Quote marks adapted for Arabic typography */
html[dir="rtl"] blockquote::before,
html[dir="rtl"] blockquote::after { content: none; }

/* Buttons with arrow_outward icon — keep arrow direction OK (doesn't need flip; it's diagonal) */

/* Scrollable horizontal lists (categories chips, etc.) — reverse direction */
html[dir="rtl"] .overflow-x-auto { direction: rtl; }

/* Footer columns — keep grid order natural */
html[dir="rtl"] footer .grid > *:first-child { grid-column: 1 / -1; } /* keep brand block full-width on top */

/* Visual elements with absolute positioning (Souss stamp, recolte 2025 chip, etc.) */
html[dir="rtl"] .absolute.-top-2.-right-2 { right: auto; left: -.5rem; }
html[dir="rtl"] .absolute.top-0.right-0 { right: auto; left: 0; }
html[dir="rtl"] .absolute.bottom-0.left-0 { left: auto; right: 0; }
html[dir="rtl"] .absolute.top-4.left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .absolute.top-4.right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .absolute.bottom-5.left-5 { left: auto; right: 1.25rem; }
html[dir="rtl"] .absolute.top-5.right-5 { right: auto; left: 1.25rem; }

/* Body classes shorter forms */
body.lang-ar { font-feature-settings: "calt" 1, "liga" 1; }


/* === Inline text links — visible style site-wide === */
/* Targets <a> tags inside paragraphs, list items, captions, citations, blockquotes, labels.
   Excludes: nav links, buttons, footer columns, cards/wrappers, anything with a class
   already handling its own style (.btn, .nav-link, .footer-link, .pay-*, .filter-chip, etc.) */
p > a:not([class]),
li > a:not([class]),
small > a:not([class]),
em > a:not([class]),
strong > a:not([class]),
blockquote > a:not([class]),
cite > a:not([class]),
label > a:not([class]),
.legal-prose a:not(.no-link),
.faq-body a:not(.no-link),
.mc-empty a,
[data-text-content] a:not([class]) {
  color: #c89048;
  text-decoration: underline;
  text-decoration-color: rgba(200, 144, 72, 0.5);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s ease, text-decoration-color .25s ease;
  font-weight: 500;
}

p > a:not([class]):hover,
li > a:not([class]):hover,
.legal-prose a:not(.no-link):hover,
.faq-body a:not(.no-link):hover {
  color: #1a2008;
  text-decoration-color: #c89048;
}
img, video { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

/* === TABLET (≤ 1024px) === */
@media (max-width: 1024px) {
  .font-display.text-6xl,
  .font-display.text-7xl,
  .font-display.text-8xl { font-size: clamp(2.75rem, 8vw, 5rem) !important; line-height: 1.05 !important; }

  section.py-24 { padding-top: 4rem; padding-bottom: 4rem; }
  section.py-xl, section.py-32 { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  /* Vertical brand stamps hidden */
  [class*="writing-mode"] { display: none !important; }

  /* 12-col grids → 2 cols */
  .grid.lg\:grid-cols-12 > * { min-width: 0; }

  /* Heavy oil blobs hidden on tablet for perf */
  .oil-blob.b4 { display: none; }
}

/* === MOBILE (≤ 768px) === */
@media (max-width: 768px) {
  /* === Typography === */
  h1, .font-display.text-5xl,
  .font-display.text-6xl,
  .font-display.text-7xl,
  .font-display.text-8xl { font-size: clamp(2.25rem, 9vw, 3.5rem) !important; line-height: 1.05 !important; word-wrap: break-word; }

  h2, .font-display.text-4xl, .font-headline.text-3xl, .font-headline.text-4xl { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; }
  h3, .font-headline.text-2xl, .font-headline.text-xl { font-size: 1.25rem !important; line-height: 1.3 !important; }

  p, li, label, .font-body { font-size: .95rem; line-height: 1.55; }

  /* === Spacing === */
  .px-12 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .px-8  { padding-left: 1rem !important;    padding-right: 1rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-32 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pt-28 { padding-top: 5.5rem !important; }
  .pt-24 { padding-top: 5rem !important; }
  .gap-12 { gap: 2rem !important; }
  .gap-10 { gap: 1.75rem !important; }
  .gap-xl { gap: 2rem !important; }

  /* === Grid stacking — keep grids that already have a mobile-base (grid-cols-2) === */
  .grid.lg\:grid-cols-12,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4:not(.grid-cols-2),
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4:not(.grid-cols-2),
  .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Hero showcase smaller */
  section.relative .h-\[640px\] { height: 380px !important; }
  section.relative .h-\[520px\] { height: 340px !important; }

  /* Hide vertical brand stamps */
  .lg\:flex.flex-col.absolute { display: none !important; }

  /* Reduce huge corner radii */
  .rounded-\[3rem\] { border-radius: 1.5rem !important; }
  .rounded-\[2\.5rem\] { border-radius: 1.25rem !important; }

  /* === Footer === */
  footer .grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  footer .px-12 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  /* Disable many oil animations on small screens (perf) */
  .oil-blob.b3, .oil-blob.b4,
  .oil-stream.s2, .oil-stream.s4,
  .oil-bubble.bb2, .oil-bubble.bb4, .oil-bubble.bb6,
  .oil-drop.d2, .oil-drop.d4, .oil-drop.d6, .oil-drop.d8,
  .oil-drop.d10, .oil-drop.d12, .oil-drop.d14 { display: none; }

  .absolute.top-12.left-2,
  .absolute.top-32.right-2 { padding: 0.4rem 0.85rem !important; font-size: 9px !important; }

  /* Floating language switch — keep readable size on mobile */
  /* (the actual sizing is done in translate.js media query for proper tap targets) */

  .overflow-auto { -webkit-overflow-scrolling: touch; }

  /* Stack-grouped buttons full-width */
  .flex.flex-wrap.items-center.gap-5 > a,
  .flex.flex-wrap.items-center.gap-5 > button { width: 100%; justify-content: center; }

  /* === Page-specific tweaks === */

  /* Product page: gallery (thumbnails) horizontal scroll */
  #thumbnails { flex-direction: row !important; gap: .5rem !important; overflow-x: auto !important; padding-bottom: .25rem; }
  #thumbnails > * { flex-shrink: 0; }
  #main-image, #main-video { min-height: 320px !important; }

  /* Product page: ONLY the qty + add-to-cart row stacks (kept narrow via .pt-2.space-y-3 ancestor) */
  .pt-2.space-y-3 > .flex.items-center.gap-3 { flex-direction: column; gap: .75rem; }
  .pt-2.space-y-3 > .flex.items-center.gap-3 > * { width: 100% !important; }

  /* === Product page: shipping/info trust list — premium mobile look === */
  .border-t.border-outline-variant\/40.pt-6.space-y-3 {
    margin: 1rem 0 !important;
    padding: 0 !important;
    border: 1px solid #c8bfa6 !important;
    background: #fdf8ed;
    border-radius: 18px;
    overflow: hidden;
  }
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(138,130,104,0.18);
    background: transparent;
    min-height: 64px;
  }
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3:last-child {
    border-bottom: 0 !important;
  }
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3 > * {
    width: auto !important;
    align-self: center !important;
  }

  /* Gold-filled icon pastille — perfect centering */
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3 .w-8.h-8 {
    width: 38px !important; height: 38px !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #c89048 0%, #dcb87a 100%) !important;
    box-shadow: 0 4px 10px rgba(200,144,72,0.25);
    border-radius: 9999px !important;
    align-self: center !important;
  }
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3 .w-8.h-8 .material-symbols-outlined {
    color: #1a2008 !important;
    font-variation-settings: 'FILL' 1, 'wght' 500;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px; height: 18px;
  }

  /* Label text */
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3 span:last-child {
    flex: 1;
    font-size: .85rem !important;
    line-height: 1.35 !important;
    color: #1a2008 !important;
    font-weight: 500;
    align-self: center !important;
  }

  /* Tiny chevron at the end of each row — vertically centered */
  .border-t.border-outline-variant\/40.pt-6.space-y-3 .flex.items-center.gap-3::after {
    content: '';
    width: 14px; height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c89048' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat;
    flex-shrink: 0;
    align-self: center;
    opacity: .6;
  }

  /* Cart: item card stacks */
  .item-card { padding: 1rem !important; }
  .item-card .w-36, .item-card .sm\:w-36 { width: 100% !important; height: auto !important; aspect-ratio: 16/10; }

  /* Sidebar (cart summary, checkout summary) — un-sticky on mobile */
  aside .sticky { position: static !important; top: auto !important; }

  /* Catalogue: filters become a bottom-sheet modal on mobile */
  /* Hide top category chips bar on mobile */
  #categoryChips { display: none !important; }

  /* Hide the sidebar by default — opens as a sheet */
  #filtersAside {
    position: fixed !important;
    inset: 0;
    z-index: 9990;
    background: rgba(26, 32, 8, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  #filtersAside.open { opacity: 1; pointer-events: auto; }

  #filtersAside .filter-sticky {
    position: absolute !important;
    bottom: 0; left: 0; right: 0;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
    background: #faf3e7;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 50px rgba(26, 32, 8, 0.25);
  }
  #filtersAside.open .filter-sticky { transform: translateY(0); }

  /* Drag handle */
  #filtersAside .filter-sticky::before {
    content: '';
    display: block;
    width: 44px; height: 4px;
    margin: 12px auto 0;
    border-radius: 9999px;
    background: rgba(138, 130, 104, 0.4);
  }

  #filtersAside #filtersCard {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 16px 24px 24px !important;
  }
  /* Hide the secondary "Avantage" promo card on mobile in the sheet */
  #filtersAside .bg-on-primary-fixed.rounded-3xl { display: none !important; }

  /* Lock body scroll when filters open */
  body.filters-open { overflow: hidden; }

  /* Homepage "Découvrez nos Incontournables" — cards reduced 30% on mobile */
  #featuredGrid { gap: 1rem !important; }
  #featuredGrid > a { max-width: 70%; margin-left: auto; margin-right: auto; width: 100%; }
  #featuredGrid > a .aspect-\[4\/5\] { aspect-ratio: 4 / 4.5; }
  #featuredGrid > a h4, #featuredGrid > a h3 { font-size: .9rem !important; }
  #featuredGrid > a .font-display { font-size: 1rem !important; }

  /* === Categories grid ("Sublimer Votre Beauté") — compact horizontal cards on mobile === */
  #categoriesGrid { gap: .75rem !important; }
  #categoriesGrid > a {
    background: #fff;
    border: 1px solid rgba(200, 144, 72, 0.18);
    border-radius: 1.25rem;
    padding: .65rem;
    box-shadow: 0 4px 14px rgba(61, 68, 30, 0.04);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #categoriesGrid > a:active { transform: scale(.98); }
  /* The square thumbnail container becomes a small left-side image */
  #categoriesGrid > a > div:first-child {
    aspect-ratio: 1 / 1 !important;
    width: 76px !important;
    height: 76px !important;
    padding: 0 !important;
    border-radius: 1rem !important;
    flex-shrink: 0;
  }
  #categoriesGrid > a > div:first-child img {
    border-radius: 1rem !important;
  }
  #categoriesGrid > a > div:first-child .absolute.inset-5 {
    inset: 0 !important; border-radius: 1rem !important;
  }
  /* The big "01/02/03" — small badge in the corner */
  #categoriesGrid > a > div:first-child .font-display.text-5xl {
    font-size: 14px !important;
    top: 4px !important; right: 6px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  /* The category chip "Cheveux/Visage/Corps" — smaller and repositioned */
  #categoriesGrid > a > div:first-child .absolute.bottom-5 {
    display: none !important;
  }

  /* Now compose the link itself as horizontal flex */
  #categoriesGrid > a { display: flex !important; align-items: center; gap: 1rem; }
  /* The "info row" (title + product count + arrow) — pushed to the right */
  #categoriesGrid > a > div:last-child {
    margin-top: 0 !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
  }
  #categoriesGrid > a > div:last-child p:first-child {
    font-size: .95rem !important;
    line-height: 1.2 !important;
    color: #1a2008;
  }
  #categoriesGrid > a > div:last-child p + p {
    font-size: 10px !important;
    margin-top: .25rem !important;
  }
  #categoriesGrid > a > div:last-child .material-symbols-outlined {
    font-size: 22px !important;
    color: #c89048 !important;
  }

  /* Checkout: payment options grid 2 cols on mobile */
  #paymentOptions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Confirmation: order ref smaller */
  #orderRef { font-size: 1.75rem !important; letter-spacing: .05em !important; }

  /* Reserve space at bottom of MAIN content for the floating cart FAB
     (not on body — that creates an empty band below the footer) */
  body > main { padding-bottom: 88px; }

  /* === Mobile-only hero polish === */
  .mobile-hero { z-index: 5; }
  .mobile-hero h1 span { letter-spacing: -0.02em; }
  .mobile-hero img { animation: heroFloat 6s ease-in-out infinite; }
  @keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
  /* Reduce oil background opacity on mobile so the hero card stays readable */
  .oil-stage { opacity: 0.55; }

  /* Notre Histoire — mobile hero */
  .mobile-hero-nh { z-index: 5; padding-top: 24px !important; }
  .mobile-hero-nh h1 span { letter-spacing: -0.02em; }
  .mobile-hero-nh blockquote p { line-height: 1.45; }

  /* === Catalogue: "Avantage" promo card compacted === */
  aside .bg-on-primary-fixed.text-background.rounded-3xl,
  aside .bg-on-primary-fixed.rounded-3xl { padding: 1rem 1.25rem !important; }
  aside .bg-on-primary-fixed .font-display.text-2xl,
  aside .bg-on-primary-fixed .font-display { font-size: 1.125rem !important; line-height: 1.25 !important; font-style: normal !important; }
  aside .bg-on-primary-fixed .font-display br { display: none; }
  aside .bg-on-primary-fixed p.font-body { font-size: .75rem !important; margin-top: .25rem !important; line-height: 1.4 !important; }
  aside .bg-on-primary-fixed .material-symbols-outlined { font-size: 18px !important; }
  aside .bg-on-primary-fixed .absolute.-top-6,
  aside .bg-on-primary-fixed .absolute.-top-10 { display: none !important; }

  /* === Footer compacted on mobile === */
  footer { padding-top: 2.5rem !important; padding-bottom: 2rem !important; }
  footer .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  footer .gap-12 { gap: 1.5rem !important; }
  footer .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  footer .grid > *:first-child { grid-column: 1 / -1; }       /* logo + tagline pleine largeur */
  footer h3, footer h4, footer h5 { margin-bottom: .5rem !important; font-size: 10px !important; }
  footer ul { space-y: .25rem; }
  footer li { font-size: .75rem !important; line-height: 1.5 !important; }
  footer li a { font-size: .75rem !important; }
  footer p { font-size: .7rem !important; line-height: 1.5 !important; }
  footer img { height: 40px !important; }
  footer .pt-8.border-t { padding-top: 1rem !important; margin-top: 1rem !important; }
  footer .text-\[10px\] { font-size: 9px !important; letter-spacing: .12em !important; }

  /* Footer copyright row stacks neatly */
  footer .flex.flex-col.md\:flex-row { flex-direction: column !important; gap: .75rem !important; text-align: center; }

  /* === Newsletter forms (Cercle Arganique / Boutique) === */
  /* Pill-shaped form is designed for desktop horizontal layout.
     On mobile (flex-col), break out of the pill and use a clean card. */
  form.flex.flex-col.sm\:flex-row.rounded-full {
    border-radius: 1.25rem !important;
    padding: .5rem !important;
    gap: .5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
  form.flex.flex-col.sm\:flex-row.rounded-full input[type="email"] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: .85rem !important;
    padding: .85rem 1rem !important;
    font-size: .85rem !important;
  }
  form.flex.flex-col.sm\:flex-row.rounded-full button {
    width: 100% !important;
    border-radius: .85rem !important;
    padding: .85rem 1rem !important;
    font-size: .7rem !important;
    letter-spacing: .18em !important;
  }

  /* Newsletter section dark card itself: less padding, centered text on mobile */
  section .bg-gradient-to-br.from-on-primary-fixed,
  section .max-w-7xl.bg-gradient-to-br {
    padding: 1.75rem !important;
    border-radius: 1.5rem !important;
  }
  section .bg-gradient-to-br.from-on-primary-fixed .grid,
  section .max-w-7xl.bg-gradient-to-br .grid { gap: 1.25rem !important; text-align: left; }
  section .bg-gradient-to-br.from-on-primary-fixed h3,
  section .max-w-7xl.bg-gradient-to-br h3 { font-size: 1.5rem !important; line-height: 1.15 !important; }
  section .bg-gradient-to-br.from-on-primary-fixed h3 br { display: none; }
  section .bg-gradient-to-br.from-on-primary-fixed p,
  section .max-w-7xl.bg-gradient-to-br p { font-size: .8rem !important; }

  /* Hide oversized decorative water_drop icon on mobile (overlaps content) */
  section .animate-float .material-symbols-outlined { font-size: 28px !important; opacity: 0.2 !important; }
}

/* === Hide the "Avantage" card entirely on small screens (optional cleanup) === */
@media (max-width: 480px) {
  /* Keep only essential catalogue sidebar items */
  aside .bg-on-primary-fixed.rounded-3xl { display: none !important; }
}

/* === SMALL MOBILE (≤ 480px) === */
@media (max-width: 480px) {
  .font-display.text-5xl,
  .font-display.text-6xl,
  .font-display.text-7xl,
  .font-display.text-8xl { font-size: clamp(2rem, 10vw, 3rem) !important; }

  /* Trust avatar dots smaller */
  .w-8.h-8.rounded-full { width: 1.75rem; height: 1.75rem; }

  /* Process SVG connector hidden */
  svg.absolute.top-10 { display: none !important; }

  /* Nav inner padding extra-tight */
  nav .px-8, nav .px-6 { padding-left: .75rem !important; padding-right: .75rem !important; }
  nav img { height: 36px !important; }

  /* Reviews / cards single col */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Stepper paiement — keep compact */
  ol.hidden.md\:flex { display: none !important; }
}

/* === Mobile menu — premium drawer === */
#mobile-menu {
  background: linear-gradient(180deg, #faf3e7 0%, #f4ecdc 100%) !important;
  box-shadow: 0 16px 40px rgba(26, 32, 8, 0.12), inset 0 1px 0 rgba(200, 144, 72, 0.18);
  border-top: 1px solid rgba(200, 144, 72, 0.25) !important;
  padding: 0.5rem 1.5rem 1.5rem !important;
  animation: mobileMenuSlide .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mobileMenuSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#mobile-menu a {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 0.25rem !important;
  border-bottom: 1px solid rgba(138, 130, 104, 0.18) !important;
  font-family: Inter, sans-serif;
  font-size: 12px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #5a5444;
  position: relative;
  transition: all .25s ease;
}
#mobile-menu a:last-child { border-bottom: none !important; }

/* Icon prefix using ::before with material-symbols ligature */
#mobile-menu a::before {
  content: '';
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(200, 144, 72, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .25s ease;
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  font-size: 18px;
  color: #c89048;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
#mobile-menu a[href*="index"]::before          { content: 'home'; }
#mobile-menu a[href*="catalogue"]::before      { content: 'storefront'; }
#mobile-menu a[href*="notre-histoire"]::before { content: 'auto_stories'; }
#mobile-menu a[href*="blog"]::before           { content: 'article'; }

/* Trailing chevron */
#mobile-menu a::after {
  content: '';
  margin-left: auto;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8268' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat;
  opacity: .6;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hover state — desktop preview / tap feedback */
#mobile-menu a:hover { color: #1a2008; }
#mobile-menu a:hover::before { background: #c89048; color: #1a2008; transform: scale(1.06); }
#mobile-menu a:hover::after { transform: translateX(4px); opacity: 1; }

/* Active page (color set inline as text-tertiary in HTML) */
#mobile-menu a.text-tertiary,
#mobile-menu a[class*="text-tertiary"] {
  color: #c89048 !important;
}
#mobile-menu a.text-tertiary::before,
#mobile-menu a[class*="text-tertiary"]::before {
  background: #1a2008 !important;
  color: #c89048 !important;
}

/* The hamburger button — subtle pill/box on mobile */
#mobile-menu-btn {
  border-radius: 12px;
  background: rgba(200, 144, 72, 0.12);
  transition: all .25s ease;
}
#mobile-menu-btn:hover, #mobile-menu-btn:active {
  background: #1a2008;
  color: #c89048;
}

/* === Floating Cart FAB (mobile only) === */
#mobile-cart-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9990;
  display: none;
  align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #1a2008 0%, #3f4a1d 100%);
  color: #f5dfaf;
  box-shadow:
    0 12px 30px rgba(26,32,8,0.32),
    0 0 0 4px rgba(200,144,72,0.12),
    inset 0 1px 0 rgba(245,223,175,0.18);
  font-family: Inter, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(20px) scale(.9); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, box-shadow .25s ease;
}
#mobile-cart-fab.ready { transform: translateY(0) scale(1); opacity: 1; }
#mobile-cart-fab:active { transform: scale(.95); box-shadow: 0 6px 18px rgba(26,32,8,0.32), inset 0 1px 0 rgba(245,223,175,.2); }
#mobile-cart-fab .fab-icon { font-family: 'Material Symbols Outlined'; font-size: 26px; line-height: 1; font-variation-settings: 'FILL' 1, 'wght' 500; color: #f5dfaf; }
#mobile-cart-fab .fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 9999px;
  background: #c89048; color: #1a2008;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #faf3e7;
  box-shadow: 0 4px 10px rgba(200,144,72,.4);
}
#mobile-cart-fab .fab-badge.bump { animation: fab-bump .5s cubic-bezier(.2,.8,.2,1); }
@keyframes fab-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Show on mobile + tablet portrait, never on desktop */
@media (max-width: 768px) {
  #mobile-cart-fab { display: inline-flex; }
}

/* Hide the FAB on the cart page itself (no point) */
body.is-cart-page #mobile-cart-fab { display: none !important; }

/* === Mobile: hide cart icon in header — floating FAB replaces it === */
@media (max-width: 768px) {
  /* Any nav/header link pointing to the cart (icon) */
  nav a[href="panier.html"],
  header a[href="panier.html"],
  nav a[href="panier"],
  header a[href="panier"],
  nav a[href$="/panier"],
  header a[href$="/panier"] { display: none !important; }
  /* Footer: remove FAB-reserved bottom space (footer is below main) */
  body > footer { margin-bottom: 0 !important; padding-bottom: 1rem !important; }
  body { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-cart-fab, .fab-badge.bump { transition: none; animation: none; }
}