/* =================================================================
   MODELES DE SITE — mise en page complete de la vitrine
   -----------------------------------------------------------------
   La COULEUR principale (Reglages) change les teintes.
   Un MODELE change la MISE EN PAGE : en-tete, cartes produits,
   densite de la grille, arrondis, typographie, ombres.

   Le modele actif est pose sur la balise <html> :
       <html data-model="minimal" lang="ar" dir="rtl">

   REGLE D'OR : ce fichier ne fait que SURCHARGER site.min.css.
   Le modele "classic" n'a donc AUCUNE regle ici : c'est le site
   d'origine, inchange. Aucun contenu n'est concerne.

   Ce fichier est charge APRES site.min.css. Certains reglages de
   patch15.css sont marques !important (couleur unie) : on les
   surcharge donc aussi avec !important, uniquement quand il faut.

   Ecrit en logique RTL : inset-inline-start/end, margin-inline,
   text-align:start/end. Le site reste lisible en arabe.
   ================================================================= */


/* =================================================================
   1) MINIMAL — epure, aucun cadre, beaucoup d'air, angles droits
   Mode, bijoux, haut de gamme : la photo parle toute seule.
   ================================================================= */
[data-model="minimal"] {
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: none;
}
[data-model="minimal"] body { letter-spacing: .005em }
[data-model="minimal"] section { padding: 58px 0 }

/* En-tete : barre du haut retiree, en-tete plat */
[data-model="minimal"] .topbar { display: none }
[data-model="minimal"] header.main { box-shadow: none; border-bottom: 1px solid var(--line) }
[data-model="minimal"] .head-row { height: 72px; gap: 26px }
[data-model="minimal"] .logo { font-weight: 600; font-size: 20px; letter-spacing: .1em }
[data-model="minimal"] .logo .mark {
  border-radius: 0;
  background: transparent !important;
  color: var(--theme, var(--orange)) !important;
  border: 1px solid var(--theme, var(--orange));
}
[data-model="minimal"] nav.desk { gap: 20px }
[data-model="minimal"] nav.desk a {
  padding: 8px 2px; border-radius: 0; font-weight: 500; font-size: 14px;
  letter-spacing: .04em; box-shadow: inset 0 -1px 0 transparent; transition: .15s;
}
[data-model="minimal"] nav.desk a:hover {
  background: transparent !important;
  color: var(--theme, var(--orange));
  box-shadow: inset 0 -1px 0 currentColor;
}
[data-model="minimal"] .icon-btn {
  border-radius: 0; box-shadow: none !important;
  background: var(--ink) !important; font-weight: 700; letter-spacing: .04em;
}
[data-model="minimal"] .icon-btn:hover { background: #000 !important }
[data-model="minimal"] .icon-btn .badge { border-radius: 0; color: var(--ink) }

/* Titres de section : discrets, sans le trait sous le titre */
[data-model="minimal"] .sec { font-weight: 500; font-size: 24px; letter-spacing: .02em }
[data-model="minimal"] .sec::after { display: none }
[data-model="minimal"] .sec-row { margin-bottom: 26px }
[data-model="minimal"] .car-nav button { border-radius: 0 }

/* Recherche et filtres : rectangles nets */
[data-model="minimal"] .searchbar {
  border-radius: 0; box-shadow: none; border: 1px solid var(--line); margin-top: -26px;
}
[data-model="minimal"] .searchbar input,
[data-model="minimal"] .searchbar .btn { border-radius: 0 }
[data-model="minimal"] .chip,
[data-model="minimal"] .cat-tabs button,
[data-model="minimal"] .toolbar input,
[data-model="minimal"] .toolbar select,
[data-model="minimal"] .field input,
[data-model="minimal"] .field select,
[data-model="minimal"] .field textarea { border-radius: 0 }

/* Cartes produits : ni fond ni cadre, seule la photo compte */
[data-model="minimal"] .grid-products { gap: 30px 22px }
[data-model="minimal"] .product-card {
  background: none; border: 0; border-radius: 0; box-shadow: none !important;
}
[data-model="minimal"] .product-card:hover {
  transform: none; box-shadow: none !important; border-color: transparent;
}
[data-model="minimal"] .product-card .thumb { aspect-ratio: 3/4; background: var(--surface3, #f2f3f6) }
[data-model="minimal"] .product-card:hover .thumb img { transform: scale(1.03) }
[data-model="minimal"] .product-card .body { padding: 13px 2px 0; text-align: center; gap: 5px }
[data-model="minimal"] .product-card .cat { letter-spacing: .14em; font-size: 10.5px }
[data-model="minimal"] .product-card h3 { font-weight: 600; font-size: 15px; min-height: 40px }
[data-model="minimal"] .product-card .price { color: var(--ink); font-weight: 700; font-size: 16px }
[data-model="minimal"] .tag-disc,
[data-model="minimal"] .tag-out,
[data-model="minimal"] .tag-flash { border-radius: 0 }

/* Le bouton n'apparait qu'au survol : la grille reste tres calme */
[data-model="minimal"] .product-card .atc-form,
[data-model="minimal"] .product-card .body > .btn.block {
  margin: 10px 0 0; opacity: 0; transform: translateY(4px); transition: .22s;
}
[data-model="minimal"] .product-card:hover .atc-form,
[data-model="minimal"] .product-card:hover .body > .btn.block { opacity: 1; transform: none }
[data-model="minimal"] .product-card .atc-form .btn.block { margin: 0 }
[data-model="minimal"] .btn {
  border-radius: 0; box-shadow: none !important; letter-spacing: .05em; font-size: 14.5px;
}
[data-model="minimal"] .cat-card { border-radius: 0; border: 0; box-shadow: none }
[data-model="minimal"] .cat-card:hover { transform: none; box-shadow: none }
[data-model="minimal"] .cat-card span { font-weight: 600; letter-spacing: .03em }
[data-model="minimal"] .promo-cta { border-radius: 0; box-shadow: none !important }

/* Banniere de page : plus de bandeau colore, un simple filet */
[data-model="minimal"] .page-head {
  background: transparent !important; color: var(--ink);
  border-bottom: 1px solid var(--line); padding: 30px 0;
}
[data-model="minimal"] .page-head h1 { font-weight: 600; font-size: 26px }
[data-model="minimal"] .breadcrumb { border: 0 }

/* Fiche produit */
[data-model="minimal"] .product-layout { gap: 48px }
[data-model="minimal"] .gal-main,
[data-model="minimal"] .gallery img#mainImage,
[data-model="minimal"] .thumbs img,
[data-model="minimal"] .order-box,
[data-model="minimal"] .totals,
[data-model="minimal"] .checkout-items,
[data-model="minimal"] .qty,
[data-model="minimal"] .flash-box,
[data-model="minimal"] .opt-price,
[data-model="minimal"] .pack,
[data-model="minimal"] .opt-choices.sizes button,
[data-model="minimal"] .opt-choices button.txt,
[data-model="minimal"] .review,
[data-model="minimal"] .reviews-head,
[data-model="minimal"] .table,
[data-model="minimal"] .alert { border-radius: 0 }
[data-model="minimal"] .pname { font-weight: 700; letter-spacing: .01em }

@media (max-width: 760px) {
  [data-model="minimal"] section { padding: 34px 0 }
  /* Sur telephone il n'y a pas de survol : le bouton reste visible */
  [data-model="minimal"] .product-card .atc-form,
  [data-model="minimal"] .product-card .body > .btn.block { opacity: 1; transform: none }
}


/* =================================================================
   2) MAGAZINE — marque centree, gros titres, cartes arrondies
   Cosmetique, alimentaire, tout ce qui se raconte.
   ================================================================= */
[data-model="magazine"] {
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 20px 44px rgba(15, 23, 42, .13);
  --font-title: 'El Messiri', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
[data-model="magazine"] section { padding: 50px 0 }

/* En-tete en trois colonnes : menu / marque centree / panier */
[data-model="magazine"] .head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav logo tools";
  align-items: center;
  height: auto;
  padding: 14px 0;
  gap: 10px;
}
[data-model="magazine"] .head-row .burger { grid-area: nav; justify-self: start }
[data-model="magazine"] nav.desk { grid-area: nav; justify-content: flex-start; flex-wrap: wrap }
[data-model="magazine"] .logo {
  grid-area: logo; justify-content: center; font-size: 27px;
  font-family: var(--font-title); letter-spacing: .01em;
}
[data-model="magazine"] .head-row .spacer { display: none }
[data-model="magazine"] .head-row .icon-btn { grid-area: tools; justify-self: end }
[data-model="magazine"] .topbar {
  background: var(--theme, var(--orange)) !important; color: #fff; font-weight: 600;
}
[data-model="magazine"] .topbar b { color: #fff !important }

/* Titres : gros, en police de titre */
[data-model="magazine"] .sec,
[data-model="magazine"] .sec-row .sec,
[data-model="magazine"] .page-head h1,
[data-model="magazine"] .pname,
[data-model="magazine"] .hero-txt h1,
[data-model="magazine"] footer.main h4 { font-family: var(--font-title) }
[data-model="magazine"] .sec { font-size: 34px; letter-spacing: -.005em }
[data-model="magazine"] .sec::after { height: 5px; width: 78px }
[data-model="magazine"] .hero-txt h1 { font-size: clamp(30px, 4.4vw, 52px) }
[data-model="magazine"] .hero .container { min-height: 440px }
[data-model="magazine"] .hero-img img { border-radius: 26px }

/* Cartes : tres arrondies, sans cadre, bien ombrees */
[data-model="magazine"] .grid-products { gap: 24px }
[data-model="magazine"] .product-card {
  border-radius: 22px; border: 0; box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}
[data-model="magazine"] .product-card:hover {
  transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 23, 42, .16) !important;
}
[data-model="magazine"] .product-card .thumb { aspect-ratio: 4/5 }
[data-model="magazine"] .product-card .body { padding: 16px 16px 6px }
[data-model="magazine"] .product-card h3 { font-size: 16.5px; font-weight: 800 }
[data-model="magazine"] .product-card .cat {
  color: var(--theme, var(--orange)); font-size: 11.5px; letter-spacing: .08em;
}
[data-model="magazine"] .product-card .btn.block,
[data-model="magazine"] .product-card .atc-form { margin: 0 16px 16px }
[data-model="magazine"] .product-card .atc-form .btn.block { margin: 0; border-radius: 14px }
[data-model="magazine"] .tag-disc,
[data-model="magazine"] .tag-out { border-radius: 999px; padding: 5px 12px }
[data-model="magazine"] .cat-card { border-radius: 22px; border: 0; box-shadow: 0 12px 28px rgba(15, 23, 42, .09) }
[data-model="magazine"] .cat-card span { padding: 14px 10px; font-size: 16px }
[data-model="magazine"] .btn { border-radius: 14px }
[data-model="magazine"] .page-head { padding: 46px 0 }
[data-model="magazine"] .page-head h1 { font-size: 34px }
[data-model="magazine"] .chip,
[data-model="magazine"] .cat-tabs button { padding: 10px 18px; font-weight: 600 }

@media (max-width: 760px) {
  [data-model="magazine"] .head-row { grid-template-columns: auto 1fr auto; padding: 10px 0 }
  [data-model="magazine"] .logo { font-size: 21px }
  [data-model="magazine"] .sec { font-size: 23px }
}


/* =================================================================
   3) VITRINE (showcase) — grandes photos, texte pose sur l'image
   Chaussures, meubles, decoration : effet catalogue.
   ================================================================= */
[data-model="showcase"] { --radius: 8px; --shadow: 0 18px 40px rgba(15, 23, 42, .16) }
[data-model="showcase"] section { padding: 44px 0 }
[data-model="showcase"] .hero .container { min-height: 480px }
[data-model="showcase"] .sec { font-size: 29px }

/* La carte devient une photo pleine, le texte se pose dessus */
[data-model="showcase"] .grid-products { gap: 20px }
[data-model="showcase"] .product-card {
  border: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
[data-model="showcase"] .product-card:hover {
  transform: none; box-shadow: 0 20px 44px rgba(15, 23, 42, .22) !important;
}
[data-model="showcase"] .product-card .thumb { aspect-ratio: 3/4 }
[data-model="showcase"] .product-card .body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 46px 14px 14px;
  background: linear-gradient(to top, rgba(6, 10, 18, .90) 0%, rgba(6, 10, 18, .62) 52%, rgba(6, 10, 18, 0) 100%);
  color: #fff; gap: 4px;
}
[data-model="showcase"] .product-card .cat { color: rgba(255, 255, 255, .78) }
[data-model="showcase"] .product-card h3 { min-height: 0; font-size: 16px }
[data-model="showcase"] .product-card h3 a { color: #fff }
[data-model="showcase"] .product-card .price { color: #fff; font-size: 18px }
[data-model="showcase"] .product-card .old { color: rgba(255, 255, 255, .6) }

/* Le bouton se devoile au survol pour ne pas cacher la photo */
[data-model="showcase"] .product-card .atc-form,
[data-model="showcase"] .product-card .body > .btn.block {
  margin: 8px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: .25s;
}
[data-model="showcase"] .product-card:hover .atc-form,
[data-model="showcase"] .product-card:hover .body > .btn.block { max-height: 60px; opacity: 1 }
[data-model="showcase"] .product-card .atc-form .btn.block { margin: 0; border-radius: 6px }
[data-model="showcase"] .tag-disc,
[data-model="showcase"] .tag-out { border-radius: 4px; top: 10px }

/* Categories : meme traitement, titre pose sur la photo */
[data-model="showcase"] .cat-card { position: relative; border: 0; border-radius: 8px }
[data-model="showcase"] .cat-card img { aspect-ratio: 3/4 }
[data-model="showcase"] .cat-card span {
  position: absolute; inset-inline: 0; bottom: 0; color: #fff; padding: 34px 10px 12px;
  background: linear-gradient(to top, rgba(6, 10, 18, .88), rgba(6, 10, 18, 0));
  font-size: 16px;
}
[data-model="showcase"] .cat-card span small { color: rgba(255, 255, 255, .72) }
[data-model="showcase"] .btn { border-radius: 6px }
[data-model="showcase"] .page-head { padding: 52px 0 }

@media (max-width: 760px) {
  /* Pas de survol sur telephone : le bouton reste accessible */
  [data-model="showcase"] .product-card .atc-form,
  [data-model="showcase"] .product-card .body > .btn.block { max-height: 60px; opacity: 1 }
  [data-model="showcase"] .product-card .body { padding: 34px 10px 10px }
}


/* =================================================================
   4) COMPACT — densite maximale, beaucoup de produits par ecran
   Gros catalogue, electronique, discount.
   ================================================================= */
[data-model="compact"] { --radius: 8px; --radius-sm: 6px }
[data-model="compact"] section { padding: 22px 0 }
[data-model="compact"] .topbar { padding: 6px 12px; font-size: 13px }
[data-model="compact"] .head-row { height: 60px; gap: 14px }
[data-model="compact"] .logo { font-size: 21px }
[data-model="compact"] nav.desk a { padding: 8px 11px; font-size: 14.5px }
[data-model="compact"] .icon-btn { padding: 9px 14px; font-size: 14px; border-radius: 8px }
[data-model="compact"] .sec { font-size: 21px; margin-bottom: 14px }
[data-model="compact"] .sec::after { height: 3px; width: 44px; margin-top: 8px }
[data-model="compact"] .sec-row { margin-bottom: 12px }
[data-model="compact"] .hero .container { min-height: 300px; padding-top: 34px; padding-bottom: 34px }

/* La grille se remplit d'elle-meme : autant de colonnes que l'ecran
   le permet, sans jamais descendre sous 178 px de large. */
[data-model="compact"] .grid-products {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)) !important;
  gap: 10px;
}
[data-model="compact"] .grid-cats {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px;
}
[data-model="compact"] .product-card { border-radius: 8px; box-shadow: none }
[data-model="compact"] .product-card:hover { transform: none; box-shadow: var(--shadow) !important }
[data-model="compact"] .product-card .body { padding: 9px 9px 4px; gap: 5px }
[data-model="compact"] .product-card .cat { display: none }
[data-model="compact"] .product-card h3 { font-size: 13.5px; min-height: 36px; line-height: 1.35 }
[data-model="compact"] .product-card .price { font-size: 15px }
[data-model="compact"] .product-card .old { font-size: 11px }
[data-model="compact"] .product-card .btn.block,
[data-model="compact"] .product-card .atc-form { margin: 0 9px 9px }
[data-model="compact"] .product-card .atc-form .btn.block {
  margin: 0; padding: 8px; font-size: 13px; border-radius: 7px;
}
[data-model="compact"] .tag-disc,
[data-model="compact"] .tag-out { top: 7px; padding: 3px 7px; font-size: 11px; border-radius: 5px }
[data-model="compact"] .cat-card { border-radius: 8px; box-shadow: none }
[data-model="compact"] .cat-card:hover { transform: none }
[data-model="compact"] .cat-card span { padding: 8px 6px; font-size: 13.5px }
[data-model="compact"] .btn { border-radius: 8px; padding: 11px 18px; font-size: 15px }
[data-model="compact"] .chip,
[data-model="compact"] .cat-tabs button { padding: 6px 12px; font-size: 13px }
[data-model="compact"] .page-head { padding: 22px 0 }
[data-model="compact"] .page-head h1 { font-size: 24px }
[data-model="compact"] footer.main { padding-top: 32px; margin-top: 22px }

@media (max-width: 760px) {
  [data-model="compact"] .grid-products {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)) !important; gap: 8px;
  }
  [data-model="compact"] .grid-cats {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 8px;
  }
  [data-model="compact"] .product-card h3 { font-size: 12.5px; min-height: 34px }
}


/* =================================================================
   5) ELEGANT — naskh calligraphie, cadres fins, boutons contour
   Parfum, bijoux, mariage : allure de maison de luxe.
   ================================================================= */
[data-model="elegant"] {
  --radius: 2px;
  --radius-sm: 2px;
  --shadow: none;
  --line: color-mix(in srgb, var(--theme, #b78320) 26%, transparent);
  --font-title: 'Amiri', 'Cairo', Georgia, serif;
}
[data-model="elegant"] body { background: color-mix(in srgb, var(--theme, #b78320) 4%, var(--page-bg, #fff)) }
[data-model="elegant"] section { padding: 56px 0 }
[data-model="elegant"] .topbar {
  background: color-mix(in srgb, var(--theme, #b78320) 11%, var(--surface, #fff)) !important;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
[data-model="elegant"] .topbar b { color: var(--theme, var(--orange)) !important }
[data-model="elegant"] header.main {
  background: color-mix(in srgb, var(--theme, #b78320) 4%, var(--page-bg, #fff));
  box-shadow: none; border-bottom: 1px solid var(--line);
}
[data-model="elegant"] .head-row { height: 86px }
[data-model="elegant"] .logo {
  font-family: var(--font-title); font-size: 30px; font-weight: 700; letter-spacing: .02em;
}
[data-model="elegant"] .logo .mark {
  border-radius: 0; background: transparent !important;
  color: var(--theme, var(--orange)) !important; border: 1px solid var(--theme, var(--orange));
}
[data-model="elegant"] nav.desk a { font-weight: 500; font-size: 15px; border-radius: 0 }
[data-model="elegant"] nav.desk a:hover { background: transparent !important; color: var(--theme, var(--orange)) !important }

/* Titres calligraphies, encadres de deux filets fins */
[data-model="elegant"] .sec,
[data-model="elegant"] .sec-row .sec,
[data-model="elegant"] .page-head h1,
[data-model="elegant"] .pname,
[data-model="elegant"] .hero-txt h1,
[data-model="elegant"] .product-card h3,
[data-model="elegant"] footer.main h4 { font-family: var(--font-title); font-weight: 700 }
[data-model="elegant"] .sec { font-size: 33px; letter-spacing: .01em }
[data-model="elegant"] .sec::after {
  width: 120px; height: 1px; background: var(--theme, var(--orange)) !important; margin-top: 14px;
}

/* Boutons : contour uniquement, remplis au survol */
[data-model="elegant"] .btn {
  background: transparent !important; background-image: none !important;
  color: var(--theme, var(--orange)) !important;
  border: 1px solid var(--theme, var(--orange)) !important;
  box-shadow: none !important; border-radius: 0;
  letter-spacing: .06em; font-weight: 600; font-size: 14.5px;
}
[data-model="elegant"] .btn:hover {
  background: var(--theme, var(--orange)) !important; color: #fff !important; transform: none;
}
[data-model="elegant"] .btn.dark {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
[data-model="elegant"] .icon-btn {
  background: transparent !important; background-image: none !important;
  color: var(--theme, var(--orange)) !important;
  border: 1px solid var(--theme, var(--orange)); box-shadow: none !important; border-radius: 0;
}
[data-model="elegant"] .icon-btn:hover { background: var(--theme, var(--orange)) !important; color: #fff !important }

/* Cartes : fond blanc, cadre d'un cheveu, aucune ombre */
[data-model="elegant"] .grid-products { gap: 26px 20px }
[data-model="elegant"] .product-card {
  border-radius: 0; border: 1px solid var(--line); box-shadow: none !important; background: var(--surface, #fff);
}
[data-model="elegant"] .product-card:hover {
  transform: none; box-shadow: none !important; border-color: var(--theme, var(--orange));
}
[data-model="elegant"] .product-card .thumb {
  aspect-ratio: 3/4;
  background: color-mix(in srgb, var(--theme, #b78320) 7%, var(--surface3, #f7f4ee));
}
[data-model="elegant"] .product-card .body { padding: 16px 14px 6px; text-align: center; align-items: center }
[data-model="elegant"] .product-card .cat { letter-spacing: .14em; font-size: 10.5px }
[data-model="elegant"] .product-card h3 { font-size: 17px; min-height: 46px }
[data-model="elegant"] .product-card .body > div { justify-content: center; display: flex; gap: 8px; align-items: baseline }
[data-model="elegant"] .product-card .price { color: var(--ink); font-weight: 700 }
[data-model="elegant"] .tag-disc,
[data-model="elegant"] .tag-out,
[data-model="elegant"] .tag-flash { border-radius: 0; box-shadow: none; font-weight: 600; letter-spacing: .04em }
[data-model="elegant"] .cat-card { border-radius: 0; box-shadow: none }
[data-model="elegant"] .cat-card:hover { transform: none; box-shadow: none; border-color: var(--theme, var(--orange)) }
[data-model="elegant"] .cat-card span { font-family: var(--font-title); font-size: 17px }
[data-model="elegant"] .page-head {
  background: transparent !important; color: var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0;
}
[data-model="elegant"] .page-head h1 { font-size: 34px }
[data-model="elegant"] .searchbar { border-radius: 0; box-shadow: none; border: 1px solid var(--line) }
[data-model="elegant"] .searchbar input,
[data-model="elegant"] .searchbar .btn { border-radius: 0 }
[data-model="elegant"] .chip,
[data-model="elegant"] .cat-tabs button,
[data-model="elegant"] .toolbar input,
[data-model="elegant"] .toolbar select,
[data-model="elegant"] .field input,
[data-model="elegant"] .field select,
[data-model="elegant"] .field textarea,
[data-model="elegant"] .gal-main,
[data-model="elegant"] .thumbs img,
[data-model="elegant"] .order-box,
[data-model="elegant"] .totals,
[data-model="elegant"] .checkout-items,
[data-model="elegant"] .qty,
[data-model="elegant"] .pack,
[data-model="elegant"] .review,
[data-model="elegant"] .reviews-head,
[data-model="elegant"] .table,
[data-model="elegant"] .opt-choices.sizes button,
[data-model="elegant"] .opt-choices button.txt { border-radius: 0 }
[data-model="elegant"] .order-box { background: color-mix(in srgb, var(--theme, #b78320) 7%, var(--surface2, #fff)) }
[data-model="elegant"] .promo-cta { border-radius: 0; box-shadow: none !important }
[data-model="elegant"] footer.main { background: var(--navy, #1d1a15) }

@media (max-width: 760px) {
  [data-model="elegant"] .head-row { height: 68px }
  [data-model="elegant"] .logo { font-size: 23px }
  [data-model="elegant"] .sec { font-size: 23px }
}


/* =================================================================
   6) NEON — fond sombre, contours lumineux, effet high-tech
   Gaming, high-tech, sport. Seul modele a inverser le fond.
   ================================================================= */
[data-model="neon"] {
  --ink: #e9edf8;
  --muted: #8d97b0;
  --line: #262d42;
  --bg: #070912;
  --navy: #05070e;
  --navy2: #0a0e1a;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 16px 40px rgba(0, 0, 0, .6);
  --font-title: 'Reem Kufi', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --glow: var(--theme, var(--orange));
}
[data-model="neon"] body { background: #070912; color: var(--ink) }
[data-model="neon"] section { padding: 40px 0 }

/* Toutes les surfaces blanches du theme clair passent en sombre */
[data-model="neon"] header.main,
[data-model="neon"] .product-card,
[data-model="neon"] .cat-card,
[data-model="neon"] .searchbar,
[data-model="neon"] .chip,
[data-model="neon"] .cat-tabs button,
[data-model="neon"] .car-nav button,
[data-model="neon"] .gal-main,
[data-model="neon"] .gal-nav,
[data-model="neon"] .toolbar,
[data-model="neon"] .toolbar input,
[data-model="neon"] .toolbar select,
[data-model="neon"] .field input,
[data-model="neon"] .field select,
[data-model="neon"] .field textarea,
[data-model="neon"] .table,
[data-model="neon"] .review,
[data-model="neon"] .reviews-head,
[data-model="neon"] .checkout-items,
[data-model="neon"] .totals,
[data-model="neon"] .qty,
[data-model="neon"] .qty button,
[data-model="neon"] .pack,
[data-model="neon"] .opt-choices.sizes button,
[data-model="neon"] .opt-choices button.txt,
[data-model="neon"] .radios label.radio-row,
[data-model="neon"] .sticky-buy,
[data-model="neon"] .bottom-nav,
[data-model="neon"] .flash-box,
[data-model="neon"] .opt-price,
[data-model="neon"] .mobile-nav {
  background: #0d1220;
  color: var(--ink);
  border-color: var(--line);
}
[data-model="neon"] .table th { background: #121829 }
[data-model="neon"] .order-box { background: #0a0f1b; border-color: var(--line) }
[data-model="neon"] .product-card .thumb { background: #0a0f1b }
[data-model="neon"] .product-card h3 a,
[data-model="neon"] .cat-card,
[data-model="neon"] .chip,
[data-model="neon"] .cat-tabs button { color: var(--ink) }
[data-model="neon"] .alert,
[data-model="neon"] .empty-tab {
  background: rgba(255, 122, 0, .10); border-color: rgba(255, 122, 0, .35); color: #ffcc9b;
}

/* En-tete lumineux */
[data-model="neon"] .topbar {
  background: #05070e !important; color: #9aa5bf; border-bottom: 1px solid var(--line);
}
[data-model="neon"] header.main { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .6) }
[data-model="neon"] .logo {
  font-family: var(--font-title); text-transform: uppercase; letter-spacing: .06em; color: #fff;
}
[data-model="neon"] .logo .mark { box-shadow: 0 0 18px var(--glow) }
[data-model="neon"] nav.desk a { text-transform: uppercase; font-size: 13.5px; letter-spacing: .06em }
[data-model="neon"] nav.desk a:hover {
  background: rgba(255, 255, 255, .05) !important; color: var(--glow) !important;
}
[data-model="neon"] .icon-btn { box-shadow: 0 0 20px var(--glow) !important }

/* Titres en kufi, majuscules */
[data-model="neon"] .sec,
[data-model="neon"] .sec-row .sec,
[data-model="neon"] .page-head h1,
[data-model="neon"] .pname,
[data-model="neon"] .hero-txt h1,
[data-model="neon"] footer.main h4 { font-family: var(--font-title) }
[data-model="neon"] .sec { color: #fff; letter-spacing: .02em }
[data-model="neon"] .sec::after { box-shadow: 0 0 14px var(--glow) }

/* Cartes : contour lumineux qui s'allume au survol */
[data-model="neon"] .grid-products { gap: 16px }
[data-model="neon"] .product-card {
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) !important;
}
[data-model="neon"] .product-card:hover {
  transform: translateY(-4px);
  border-color: var(--glow);
  box-shadow: 0 0 0 1px var(--glow), 0 0 26px -4px var(--glow) !important;
}
[data-model="neon"] .product-card .body { padding: 13px }
[data-model="neon"] .product-card .cat { color: var(--glow); letter-spacing: .1em }
[data-model="neon"] .product-card h3 { font-size: 15px }
[data-model="neon"] .product-card .price { text-shadow: 0 0 14px var(--glow) }
[data-model="neon"] .product-card .old { color: #6b7590 }
[data-model="neon"] .product-card .btn.block,
[data-model="neon"] .product-card .atc-form { margin: 0 13px 13px }
[data-model="neon"] .product-card .atc-form .btn.block { margin: 0 }
[data-model="neon"] .btn {
  border-radius: 8px; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
  box-shadow: 0 0 22px -4px var(--glow) !important;
}
[data-model="neon"] .btn.dark { background: #131a2c !important; border: 1px solid var(--line) }
[data-model="neon"] .cat-card { border-radius: 10px }
[data-model="neon"] .cat-card:hover { border-color: var(--glow); box-shadow: 0 0 24px -6px var(--glow) }
[data-model="neon"] .tag-disc,
[data-model="neon"] .tag-out,
[data-model="neon"] .tag-flash { border-radius: 6px; box-shadow: 0 0 16px -3px currentColor }
[data-model="neon"] .hero { background: #05070e !important }
[data-model="neon"] .hero::after {
  background: radial-gradient(60% 90% at 80% 30%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 70%);
}
[data-model="neon"] .page-head {
  background: #05070e !important; border-bottom: 1px solid var(--line);
}
[data-model="neon"] .page-head h1 { text-shadow: 0 0 22px var(--glow) }
[data-model="neon"] footer.main { background: #05070e; border-top: 1px solid var(--line) }
[data-model="neon"] .bottom-nav { border-top: 1px solid var(--line) }
[data-model="neon"] .searchbar { box-shadow: 0 0 30px -8px var(--glow) }
[data-model="neon"] .thumbs img { border-color: var(--line) }
[data-model="neon"] .breadcrumb,
[data-model="neon"] .count { color: var(--muted) }
[data-model="neon"] .flash-box { background: #0d1220 }
[data-model="neon"] .wa-float { box-shadow: 0 0 26px -4px #25d366 }


/* =================================================================
   7) DOUX (soft) — tout en rondeur, ombres tendres
   Bebe, enfants, artisanat.
   ================================================================= */
[data-model="soft"] {
  --radius: 26px;
  --radius-sm: 16px;
  --shadow: 0 16px 40px rgba(15, 23, 42, .10);
  --font-title: 'Almarai', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
[data-model="soft"] body { background: var(--page-bg, #fdfcfa); font-family: var(--font-title) }
[data-model="soft"] section { padding: 44px 0 }
[data-model="soft"] .topbar { background: var(--theme-soft2, #fff2e6) !important; color: var(--ink) }
[data-model="soft"] header.main { box-shadow: 0 6px 24px rgba(15, 23, 42, .06) }
[data-model="soft"] .logo { font-family: var(--font-title) }
[data-model="soft"] .logo .mark { border-radius: 50% }
[data-model="soft"] nav.desk a { border-radius: 999px }
[data-model="soft"] .icon-btn { border-radius: 999px; padding: 12px 22px }
[data-model="soft"] .sec { font-family: var(--font-title); font-size: 28px }
[data-model="soft"] .sec::after { border-radius: 999px; height: 6px; width: 56px }
[data-model="soft"] .car-nav button { border: 0; box-shadow: 0 6px 18px rgba(15, 23, 42, .10) }

/* La photo est encadree a l'interieur d'une grande carte arrondie */
[data-model="soft"] .grid-products { gap: 22px }
[data-model="soft"] .product-card {
  border-radius: 26px; border: 0; padding: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .09) !important; overflow: visible;
}
[data-model="soft"] .product-card:hover {
  transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15, 23, 42, .15) !important;
}
[data-model="soft"] .product-card .thumb { border-radius: 20px; overflow: hidden }
[data-model="soft"] .product-card .body { padding: 13px 6px 4px; gap: 7px }
[data-model="soft"] .product-card h3 { font-size: 15.5px; font-weight: 700 }
[data-model="soft"] .product-card .cat { color: var(--theme, var(--orange)); letter-spacing: .04em }
[data-model="soft"] .product-card .btn.block,
[data-model="soft"] .product-card .atc-form { margin: 0 }
[data-model="soft"] .product-card .atc-form .btn.block { margin: 0; border-radius: 999px }
[data-model="soft"] .tag-disc,
[data-model="soft"] .tag-out,
[data-model="soft"] .tag-flash { border-radius: 999px; padding: 5px 13px; top: 18px }
[data-model="soft"] .tag-disc { inset-inline-start: 18px }
[data-model="soft"] .tag-out { inset-inline-end: 18px }
[data-model="soft"] .btn { border-radius: 999px }
[data-model="soft"] .cat-card { border-radius: 26px; border: 0; padding: 8px; box-shadow: 0 12px 30px rgba(15, 23, 42, .08) }
[data-model="soft"] .cat-card img { border-radius: 20px }
[data-model="soft"] .cat-card span { font-size: 15.5px; font-weight: 700 }
[data-model="soft"] .chip,
[data-model="soft"] .cat-tabs button { border-radius: 999px; padding: 10px 18px }
[data-model="soft"] .searchbar { box-shadow: 0 18px 44px rgba(15, 23, 42, .14) }
[data-model="soft"] .page-head { border-radius: 0 0 34px 34px; padding: 44px 0 }
[data-model="soft"] .promo-cta { border-radius: 999px }
[data-model="soft"] .toolbar input,
[data-model="soft"] .toolbar select,
[data-model="soft"] .field input,
[data-model="soft"] .field select,
[data-model="soft"] .field textarea,
[data-model="soft"] .qty,
[data-model="soft"] .opt-choices.sizes button,
[data-model="soft"] .opt-choices button.txt { border-radius: 999px }
[data-model="soft"] .order-box,
[data-model="soft"] .totals,
[data-model="soft"] .checkout-items,
[data-model="soft"] .review,
[data-model="soft"] .reviews-head,
[data-model="soft"] .pack,
[data-model="soft"] .flash-box,
[data-model="soft"] .gal-main,
[data-model="soft"] .table { border-radius: 24px }
[data-model="soft"] .thumbs img { border-radius: 16px }
[data-model="soft"] footer.main { border-radius: 34px 34px 0 0 }

@media (max-width: 760px) {
  [data-model="soft"] .product-card { padding: 7px; border-radius: 20px }
  [data-model="soft"] .product-card .thumb { border-radius: 15px }
  [data-model="soft"] .tag-disc { inset-inline-start: 14px }
  [data-model="soft"] .tag-out { inset-inline-end: 14px }
}


/* =================================================================
   8) JOURNAL (press) — grille separee par des filets, naskh
   Librairie, epicerie, pieces detachees : catalogue papier.
   ================================================================= */
[data-model="press"] {
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: none;
  --line: color-mix(in srgb, var(--ink, #1b2436) 18%, transparent);
  --font-title: 'Amiri', 'Cairo', Georgia, serif;
}
[data-model="press"] body { background: color-mix(in srgb, var(--theme, #ff6a00) 3%, var(--page-bg, #fff)) }
[data-model="press"] section { padding: 34px 0 }
[data-model="press"] .topbar { background: var(--navy, #201d17) !important }
[data-model="press"] header.main {
  background: color-mix(in srgb, var(--theme, #ff6a00) 3%, var(--page-bg, #fff)); box-shadow: none;
  border-bottom: 3px double var(--line);
}
[data-model="press"] .logo { font-family: var(--font-title); font-size: 30px; font-weight: 700 }
[data-model="press"] .logo .mark { border-radius: 0 }
[data-model="press"] nav.desk a { border-radius: 0; font-weight: 600; font-size: 15px }
[data-model="press"] .icon-btn { border-radius: 0; box-shadow: none !important }
[data-model="press"] .sec,
[data-model="press"] .sec-row .sec,
[data-model="press"] .page-head h1,
[data-model="press"] .pname,
[data-model="press"] .hero-txt h1,
[data-model="press"] .product-card h3,
[data-model="press"] footer.main h4 { font-family: var(--font-title); font-weight: 700 }
[data-model="press"] .sec {
  font-size: 28px; text-align: start; padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
[data-model="press"] .sec::after { display: none }

/* La grille n'a plus de cartes : ce sont des cases separees par des filets */
[data-model="press"] .grid-products { gap: 0; border-top: 1px solid var(--line) }
[data-model="press"] .product-card {
  background: none; border: 0; border-radius: 0; box-shadow: none !important;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px;
}
[data-model="press"] .product-card:hover {
  transform: none; box-shadow: none !important; background: var(--surface2, #f4f1e9);
}
[data-model="press"] .product-card .thumb { background: var(--surface3, #f2efe7); aspect-ratio: 4/3 }
[data-model="press"] .product-card .body { padding: 12px 0 0; gap: 6px; text-align: start }
[data-model="press"] .product-card .cat { letter-spacing: .1em }
[data-model="press"] .product-card h3 { font-size: 17.5px; min-height: 48px }
[data-model="press"] .product-card .price { color: var(--ink); font-weight: 700 }
[data-model="press"] .product-card .btn.block,
[data-model="press"] .product-card .atc-form { margin: 0 }
[data-model="press"] .product-card .atc-form .btn.block { margin: 0 }
[data-model="press"] .btn {
  border-radius: 0; box-shadow: none !important; font-weight: 600; letter-spacing: .04em;
}
[data-model="press"] .tag-disc,
[data-model="press"] .tag-out,
[data-model="press"] .tag-flash { border-radius: 0; box-shadow: none; top: 22px }
[data-model="press"] .tag-disc { inset-inline-start: 22px }
[data-model="press"] .tag-out { inset-inline-end: 22px }
[data-model="press"] .grid-cats { gap: 0; border-top: 1px solid var(--line) }
[data-model="press"] .cat-card {
  border: 0; border-radius: 0; box-shadow: none; background: none;
  border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px;
}
[data-model="press"] .cat-card:hover { transform: none; box-shadow: none; background: var(--surface2, #f4f1e9) }
[data-model="press"] .cat-card span { font-family: var(--font-title); font-size: 17px }
[data-model="press"] .page-head {
  background: transparent !important; color: var(--ink);
  border-bottom: 3px double var(--line); padding: 30px 0;
}
[data-model="press"] .page-head h1 { font-size: 32px }
[data-model="press"] .searchbar { border-radius: 0; box-shadow: none; border: 1px solid var(--line) }
[data-model="press"] .searchbar input,
[data-model="press"] .searchbar .btn { border-radius: 0 }
[data-model="press"] .chip,
[data-model="press"] .cat-tabs button,
[data-model="press"] .toolbar input,
[data-model="press"] .toolbar select,
[data-model="press"] .field input,
[data-model="press"] .field select,
[data-model="press"] .field textarea,
[data-model="press"] .order-box,
[data-model="press"] .totals,
[data-model="press"] .checkout-items,
[data-model="press"] .qty,
[data-model="press"] .gal-main,
[data-model="press"] .thumbs img,
[data-model="press"] .review,
[data-model="press"] .reviews-head,
[data-model="press"] .pack,
[data-model="press"] .table { border-radius: 0 }
[data-model="press"] .order-box { background: var(--surface2, #f4f1e9) }
[data-model="press"] .promo-cta { border-radius: 0; box-shadow: none !important }
[data-model="press"] footer.main { background: var(--navy, #201d17) }

@media (max-width: 760px) {
  [data-model="press"] .product-card { padding: 10px }
  [data-model="press"] .product-card h3 { font-size: 15px; min-height: 42px }
  [data-model="press"] .sec { font-size: 21px }
}


/* =================================================================
   9) MOSAIQUE (mosaic) — la premiere carte en grand, les autres autour
   Lookbook, deco, Instagram.
   ================================================================= */
[data-model="mosaic"] { --radius: 14px; --shadow: 0 14px 34px rgba(15, 23, 42, .12) }
[data-model="mosaic"] section { padding: 40px 0 }
[data-model="mosaic"] .sec { font-size: 28px }

/* Grille en 4 colonnes : la 1re fiche occupe 2 colonnes sur 2 rangees */
[data-model="mosaic"] .grid-products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 14px;
}
[data-model="mosaic"] .grid-products > .product-card:first-child {
  grid-column: span 2; grid-row: span 2;
}
[data-model="mosaic"] .grid-products > .product-card:first-child .thumb { aspect-ratio: auto; flex: 1 1 auto }
[data-model="mosaic"] .grid-products > .product-card:first-child .thumb img { height: 100% }
[data-model="mosaic"] .grid-products > .product-card:first-child h3 { font-size: 20px; min-height: 0 }
[data-model="mosaic"] .grid-products > .product-card:first-child .price { font-size: 22px }
[data-model="mosaic"] .grid-products > .product-card:nth-child(7n + 8) {
  grid-column: span 2; grid-row: span 2;
}
[data-model="mosaic"] .product-card { border: 0; border-radius: 14px; box-shadow: 0 10px 26px rgba(15, 23, 42, .10) }
[data-model="mosaic"] .product-card:hover {
  transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15, 23, 42, .18) !important;
}
[data-model="mosaic"] .product-card .body { padding: 13px 13px 4px }
[data-model="mosaic"] .product-card .btn.block,
[data-model="mosaic"] .product-card .atc-form { margin: 0 13px 13px }
[data-model="mosaic"] .product-card .atc-form .btn.block { margin: 0; border-radius: 10px }
[data-model="mosaic"] .btn { border-radius: 10px }
[data-model="mosaic"] .grid-cats { gap: 14px }
[data-model="mosaic"] .cat-card { border: 0; border-radius: 14px }
[data-model="mosaic"] .tag-disc,
[data-model="mosaic"] .tag-out { border-radius: 999px }

@media (max-width: 980px) {
  [data-model="mosaic"] .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
}
@media (max-width: 760px) {
  [data-model="mosaic"] .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px }
  [data-model="mosaic"] .grid-products > .product-card:first-child { grid-column: span 2; grid-row: span 1 }
  [data-model="mosaic"] .grid-products > .product-card:nth-child(7n + 8) { grid-column: span 2; grid-row: span 1 }
  [data-model="mosaic"] .grid-products > .product-card:first-child .thumb,
  [data-model="mosaic"] .grid-products > .product-card:nth-child(7n + 8) .thumb { aspect-ratio: 16/10 }
  [data-model="mosaic"] .grid-products > .product-card:first-child h3 { font-size: 16px }
}


/* =================================================================
   Reglage commun : quand un modele change la police de titre, on
   l'applique aussi aux titres du panier / de la commande, pour que
   la boutique reste cohérente de bout en bout.
   ================================================================= */
[data-model] .ob-head h2,
[data-model] .co-subhead { font-family: inherit }
[data-model="magazine"] .ob-head h2,
[data-model="elegant"] .ob-head h2,
[data-model="neon"] .ob-head h2,
[data-model="press"] .ob-head h2 { font-family: var(--font-title) }