/* DAMASKINO — correction visuelle v3 — 30/09/2026 */

/* 1) HERO / PHOTO BOUTIQUE : photo entière, sans crop destructeur */
[data-testid="home-banner"]{
  height:clamp(430px,52vw,650px)!important;
  min-height:430px!important;
  max-height:650px!important;
  background:#18384d url('/assets/storefront.jpeg') center/cover no-repeat!important;
  position:relative!important;
}
[data-testid="home-banner"]::before{
  content:"";position:absolute;inset:0;background:rgba(11,35,51,.42);backdrop-filter:blur(8px);z-index:0;pointer-events:none;
}
[data-testid="home-banner"]>img{
  position:relative!important;z-index:1!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;
  filter:none!important;
}
[data-testid="home-banner"]>div.absolute{z-index:2!important;background:linear-gradient(90deg,rgba(15,31,42,.78) 0%,rgba(15,31,42,.40) 38%,rgba(15,31,42,.10) 68%,rgba(15,31,42,.08) 100%)!important;}
[data-testid="home-banner"]>div.relative{z-index:3!important;}

/* 2) CATÉGORIES : 6 cartes = grille 3 x 2, toutes identiques */
section.container-x:has([data-testid^="home-category-"])>div.grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;align-items:stretch!important;
}
[data-testid^="home-category-"]{
  aspect-ratio:1/1!important;width:100%!important;min-height:0!important;
  border-radius:18px!important;background:#f4eee6!important;
  box-shadow:0 8px 26px rgba(22,45,60,.10)!important;
}
[data-testid^="home-category-"]>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;
  background:#f4eee6!important;
}
[data-testid^="home-category-"]:hover>img{transform:scale(1.01)!important;}
/* Les titres sont déjà intégrés dans les visuels carrés : on évite le doublon qui les masque */
[data-testid^="home-category-"]>div.absolute.inset-0,
[data-testid^="home-category-"]>div.absolute.bottom-0{display:none!important;}

/* 3) BEST-SELLERS : vraie photo de boutique en fond, lisible mais discrète */
section.bg-sand.relative.grain{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  background:#f7f2eb!important;
}
section.bg-sand.relative.grain::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-2!important;
  background:url('/assets/storefront.jpeg') center 48%/cover no-repeat!important;
  opacity:.28!important;filter:saturate(.8) contrast(.95)!important;pointer-events:none!important;
}
section.bg-sand.relative.grain::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(250,247,242,.88),rgba(250,247,242,.74),rgba(250,247,242,.88));pointer-events:none;
}
section.bg-sand.relative.grain>.container-x{position:relative!important;z-index:2!important;}

/* 4) BLOC « UNE ÉPICERIE, MILLE SAVEURS » : plus de grand rectangle bleu vide */
section.container-x:has(h2) .relative.rounded-3xl.bg-brand{
  min-height:390px!important;display:flex!important;align-items:center!important;
  background-image:linear-gradient(90deg,rgba(0,103,174,.94) 0%,rgba(0,103,174,.78) 42%,rgba(0,103,174,.28) 72%,rgba(0,103,174,.08) 100%),url('/assets/storefront.jpeg')!important;
  background-size:cover!important;background-position:center 48%!important;
  box-shadow:0 18px 50px rgba(20,55,78,.16)!important;
}
section.container-x:has(h2) .relative.rounded-3xl.bg-brand::before{display:none!important;}
section.container-x:has(h2) .relative.rounded-3xl.bg-brand>.relative{max-width:620px!important;}

@media(max-width:900px){
  section.container-x:has([data-testid^="home-category-"])>div.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
  [data-testid="home-banner"]{height:clamp(390px,70vw,560px)!important;min-height:390px!important;}
}
@media(max-width:520px){
  [data-testid="home-banner"]{height:430px!important;min-height:430px!important;}
  section.container-x:has([data-testid^="home-category-"])>div.grid{gap:10px!important;}
  section.container-x:has(h2) .relative.rounded-3xl.bg-brand{min-height:340px!important;background-position:62% center!important;}
}