/* ── MOBILE (≤ 768px) ── */
@media(max-width:768px){
  /* Body needs bottom padding for mobile nav */
  body{padding-bottom:60px}
  main{padding-bottom:4px}

  /* NAV — simplified on mobile */
  .nav{padding:0 16px;height:52px}
  .logo{height:20px}
  main{padding-top:52px}
  .nav-tabs{display:none}
  .gender-toggle{display:none}
  .profile-name{display:none}
  .profile-btn{padding:4px}
  /* Show bottom nav */
  .mob-nav{display:block}
  /* Adjust sections that calculate off nav height */
  .ask-sec{height:calc(100vh - 52px - 60px)}
  .stg-sidebar{display:none}
  .srch-filters{display:none}
  .srch{flex-direction:column}
  .srch-main{padding:16px}

  /* HERO */
  .hero{padding:48px 16px 36px}
  .hero-eye{font-size:10px}

  /* ASK BAR */
  .ask-home{padding:12px 14px}
  .hint-row{gap:5px}
  .hint-chip{font-size:11px;padding:3px 9px}
  /* Hide overflow chips on mobile */
  .hint-chip:nth-child(n+4){display:none}
  .ask-bottom{gap:8px}

  /* BRANDS */
  .brands-strip{margin-top:36px}

  /* FEATURES */
  .feats{grid-template-columns:1fr;padding:40px 16px 0;gap:12px}
  .feat-card{padding:20px}

  /* TODAY / THEMATIC / SI / TRENDING */
  .today-sec,.thematic-sec,.si-sec,.trending-sec{padding:40px 16px 0}
  .today-ttl,.disc-ttl{font-size:24px}
  .theme-blk{margin-bottom:40px}
  .theme-q{font-size:15px}
  .theme-tiles{grid-template-columns:repeat(2,1fr);gap:9px}
  .theme-tile{height:170px}

  /* DISCOVER */
  .disc{padding:20px 16px}
  .disc-hdr{flex-direction:column;gap:12px}
  .filters-box{width:100%;flex-direction:row;flex-wrap:wrap;padding:14px;gap:10px}
  .frow{flex:1;min-width:140px}

  /* SEARCH */
  .srch-main{padding:16px}
  .srch-chips{gap:6px}
  .chip{font-size:11px;padding:4px 11px}
  .mob-filter-btn{display:flex}

  /* PRODUCT GRID */
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  /* NB : pas de `.pc{width:100%!important}` ici — cette règle (héritée du
     monolithe d'origine) forçait aussi les cartes des rangées à défilement
     horizontal (Ask, "aujourd'hui pour vous", "vous aimerez aussi") à
     s'étirer en pleine largeur, cassant ces carousels sur mobile. Les
     grilles (Search/Discover) n'en ont pas besoin : elles utilisent déjà
     .pc-full{width:100%}, indépendant de ce breakpoint. */
  .pc-img{height:200px}
  .pc-full .pc-img{height:220px}

  /* SETTINGS - mobile horizontal nav at top, collante au scroll */
  .mob-stg-nav{display:flex;position:sticky;top:52px;z-index:5}
  .stg-content{padding:20px 16px}
  .sct-h{font-size:24px}
  .radar-wrap{flex-direction:column}
  .radar-box{width:100%;max-width:260px;margin:0 auto}
  .morph-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .morph-card{padding:12px 6px}
  .si-settings-grid{grid-template-columns:repeat(2,1fr)}
  .sform-row{grid-template-columns:1fr}

  /* WISHLIST */
  .wishlist-panel{width:100%;right:-100%}

  /* MODALS
     NB : .prod-sheet / .prod-modal / .ps-img sont mortes — aucun élément
     du DOM ne porte ces classes (ancien design de modale produit jamais
     nettoyé lors du passage à la page pleine). Conservées à l'identique
     pour ne rien changer au comportement du site. */
  .prod-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;margin-top:auto;align-self:flex-end;width:100%}
  .prod-modal{align-items:flex-end;padding:0}
  .ps-img{height:240px;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .modal{padding:24px;max-height:90vh}
  .vs-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0}
  .vsearch-modal{align-items:flex-end;padding:0}

  /* FOOTER */
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .footer{padding:36px 16px 28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}

  /* ONBOARDING TOAST */
  .ob-toast{left:16px;right:16px;max-width:none;bottom:72px}
}