/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE-CORE.CSS — ADVERSE Shop
   ─────────────────────────────────────────────────────────────────────
   Objektif: kenbe DESIGN mobile a 100% jan l ye a, men transfòme sit la
   an yon VRE sitwèb ki byen li sou tablèt ak òdinatè (portrait/landscape),
   san kraze okenn logic JS ki egziste deja.

   Estrateji:
   1) Elaji "kès" la (header, banner, categories, grid pwodwi, footer...)
      sou gwo ekran olye l rete kole mobile-width sou yon gwo monitè.
   2) Ogmante lisiblite tèks la (typographie) pwogresivman selon gwosè
      ekran an — san chanje okenn koulè/font/branding.
   3) Sou tablèt/desktop, ranje pwodwi yo pase de "scroll orizontal"
      (pattern app mobile) a yon VRE grid ki wrap, pi natirèl pou sourit.
   4) Ajoute sipò landscape pou tablèt ak telefòn.

   IMPÒTAN: Fichye sa a dwe LINK APRE <style> entèn chak paj la nan <head>,
   pou règ ki gen menm sélektè yo ka "genyen" kaskad la san !important.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --container-max: 1240px;
  --container-pad: 16px;
}

/* ═══════════════════════════ 1. BAZ / AKSESIBILITE ═══════════════════════════ */

/* Pinch-zoom te dezaktive (user-scalable=no) sou kèk paj — sa se yon
   pwoblèm aksesibilite/lisibilite serye pou moun ki gen pwoblèm vizyon.
   Nou re-otorize zoom san n pa touche okenn lòt konpòtman. */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ═══════════════════════════ 2. TYPOGRAPHIE FLYID ═══════════════════════════
   ~90% deklarasyon font-size nan sit la ekri an "rem", relatif a
   font-size rasin lan (html). Nou ogmante rasin lan PWOGRESIVMAN selon
   gwosè ekran — sa fè TOUT tèks (h3 pwodwi, pri, label, meta...) grandi
   ansanm, pwopòsyonèlman, san nou pa oblije touche 100+ sélektè endividyèl.
   Chif yo chwazi pou rete diskrè sou mobil (okenn chanjman) epi vin pi
   jenere sou gwo ekran, pou tèks pa rete mikwoskopik sou yon monitè 24". */
html{ font-size: 100%; }                 /* mobil ≤480px : okenn chanjman */

@media (min-width: 481px){               /* gwo telefòn / mini tablèt   */
  html{ font-size: 104%; }
}
@media (min-width: 641px){               /* tablèt pòtrè                */
  html{ font-size: 109%; }
}
@media (min-width: 1025px){              /* tablèt peyizaj / laptop      */
  html{ font-size: 114%; }
}
@media (min-width: 1440px){              /* desktop laj                 */
  html{ font-size: 119%; }
}

/* Kèk gwosè kle ekri an px (pa rem) — nou monte yo apa pou yo pa rete
   kole mikwoskopik sou gwo ekran (13px input rechèch, 9px badge, elt). */
@media (min-width: 641px){
  #search-input{ font-size: 15px !important; }
  .text p{ font-size: 13px !important; }
  .text h2{ font-size: 21px !important; }
}
@media (min-width: 1025px){
  #search-input{ font-size: 16px !important; }
  .text p{ font-size: 14.5px !important; }
  .text h2{ font-size: 24px !important; }
}

/* Limite longè liy tèks long yo (paragraf, deskripsyon) pou yo rete
   konfòtab pou li sou gwo ekran — liy twò long fatige zye. */
@media (min-width: 1025px){
  p, .description, .qa-name, .products-section-title{
    max-width: 72ch;
  }
}

/* ═══════════════════════════ 3. KÈS SANTRE (CONTAINER) ═══════════════════════
   Sou mobil, chak seksyon rete full-width jan l te ye a. Apati tablèt,
   nou santre kontni prensipal la nan yon kolonn ki gen yon lajè maksimòm,
   pou li pa "koule" tou plat sou yon monitè 27". */
@media (min-width: 768px){
  .header-container,
  .banner-wrapper,
  .categories,
  .products-section,
  #cart-page,
  .site-footer,
  .legal-page,
  .about-page,
  .vendor-info-panel{
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
  }

  .products-section,
  .categories{
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    box-sizing: border-box;
  }

  .main-header{ padding-left: 0; padding-right: 0; }
  .header-container{ padding-left: var(--container-pad); padding-right: var(--container-pad); box-sizing: border-box; }

  .banner{ max-width: 100%; }
  .banner-wrapper{ padding-left: var(--container-pad); padding-right: var(--container-pad); box-sizing: border-box; }
}

/* ═══════════════════════════ 4. GRID PWODWI: SCROLL → WRAP ═══════════════════
   Sou mobil, .product-row se yon ranje ki gen scroll orizontal (pattern
   app). Apati tablèt, moun sèvi ak sourit/trackpad — pi natirèl se yon
   VRE grid ki "wrap" sou plizyè liy, ak plis kolòn selon lajè ekran an. */
@media (min-width: 768px){
  .product-row{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    grid-auto-columns: unset;
    overflow: visible;
    scroll-snap-type: none;
    gap: 16px;
  }
  .product-image-container{ height: 150px; }
  .skeleton-img{ height: 150px; }
}
@media (min-width: 1025px){
  .product-row{
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
  }
  .product-image-container{ height: 175px; }
  .skeleton-img{ height: 175px; }
}
@media (min-width: 1440px){
  .product-row{
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
  }
  .product-image-container{ height: 195px; }
  .skeleton-img{ height: 195px; }
}

/* Vendor strip (lis boutik) — menm lojik: soti nan scroll strik a yon
   wrap pi jenere sou gwo ekran. */
@media (min-width: 768px){
  .vendor-strip-scroll{
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ═══════════════════════════ 5. MODAL / SHEET SOU GWO EKRAN ═══════════════
   Sou mobil, kèk modal (panye, quick-add) ranpli tout lajè ekran an —
   sa nòmal sou telefòn men parèt "kraze" sou desktop. Nou boukle yo nan
   yon bwat santre ak yon lajè rezonab. */
@media (min-width: 768px){
  #cart-overlay, #quick-add-sheet, .notif-modal, #alert-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #cart-page{
    max-width: 480px;
    max-height: 88vh;
    border-radius: 20px;
    margin: 0;
  }
  #quick-add-box{
    max-width: 460px;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
  }
}

/* ═══════════════════════════ 6. LANDSCAPE (TELEFÒN / TABLÈT) ═══════════════
   Lè ekran an vin pi laj pase l wo (telefòn/tablèt kouche), header ak
   modal yo ka pran twòp plas an wotè. Nou redwi wotè eleman vètikal yo
   pou tout kontni rete aksesib san eskwòl san rezon. */
@media (max-height: 480px) and (orientation: landscape){
  .main-header{ padding-top: 6px; padding-bottom: 6px; }
  .banner{ height: 110px !important; }
  #quick-add-box{ max-height: 92vh; overflow-y: auto; }
  #cart-page{ max-height: 94vh; }
}
@media (min-width: 768px) and (orientation: landscape){
  .products-section{ padding-bottom: 24px; }
}

/* ═══════════════════════════ 7. FOOTER / PYE PAJ (nouvo, sit konplè) ═══════
   Yon pye-paj senp ki parèt sou tout paj piblik (lyen legal, rezo sosyal,
   sou nou). Style la itilize menm varyab koulè ADVERSE yo (--primary etc.)
   pou l fondu ak rès sit la san bezwen nouvo palèt. */
.site-footer{
  margin-top: 28px;
  padding: 28px var(--container-pad) 90px;
  border-top: 1px solid var(--border, rgba(139,92,246,0.15));
  background: var(--surface, #fff);
  font-family: inherit;
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 641px){
  .site-footer .footer-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px){
  .site-footer .footer-grid{ grid-template-columns: repeat(4, 1fr); }
}
.site-footer h4{
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: normal;
  color: var(--text-muted, #6b7280); margin-bottom: 10px; font-weight: 400;
}
.site-footer a{
  display: block; font-size: 0.85rem; color: var(--text, #1e1b2e);
  text-decoration: none; padding: 5px 0; opacity: 0.85; transition: opacity .2s, color .2s;
}
.site-footer a:hover{ opacity: 1; color: var(--primary, #7c3aed); }
.site-footer .footer-social{ display: flex; gap: 10px; margin-top: 6px; }
.site-footer .footer-social a{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg, #f0eeff); display: flex; align-items: center; justify-content: center;
  padding: 0; font-size: 1rem; color: var(--primary, #7c3aed);
}
.site-footer .footer-bottom{
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border, rgba(139,92,246,0.15));
  font-size: 0.72rem; color: var(--text-muted, #6b7280); text-align: center;
}
