/* ============================================
   Eden Carrelage — Showroom Premium Edition
   Style : Noir • Blanc • Pierre naturelle • Vert Eden
   Compatible viewBoutique.php
   Responsive PC / tablette / téléphone
============================================ */

/* ---- Reset ---- */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

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

body{
  font-family:'Segoe UI',Inter,Roboto,Arial,sans-serif;
  color:#222;
  background:
    radial-gradient(circle at 0% 20%,rgba(57,181,74,.06),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7f6f4 55%,#efede9 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Tokens Eden ---- */
:root{
  --eden:#39b54a;
  --eden-dark:#248534;
  --eden-soft:#e8f7eb;

  --black:#050505;
  --charcoal:#101010;
  --graphite:#1a1a1a;

  --white:#ffffff;
  --marble:#f7f6f4;
  --marble-2:#efede9;

  --stone:#8f877d;
  --stone-dark:#5d554c;

  --text:#222222;
  --muted:#666666;

  --border:#e1ded8;
  --border-dark:#292929;

  --gold:#b99a5a;

  --success:#18b85f;
  --danger:#d92b2b;

  --shadow-soft:0 8px 24px rgba(0,0,0,.08);
  --shadow-premium:0 18px 45px rgba(0,0,0,.13);

  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;
  --radius-xl:22px;

  --w-max:1240px;

  --nav-logo-size:150px;
  --nav-left-gap:24px;

  --card-img-h-desktop:420px;
  --card-img-h-mobile:220px;
}

/* ============================================
   HEADER / NAV SHOWROOM
============================================ */

.boutique-title{
  display:none!important;
}

.boutique-header{
  height:auto;
  overflow:visible;
  position:relative;
}

.boutique-header::before{
  display:block;
}

.footer-nav{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:2000;

  width:100%;

  min-height:96px;

  background:#050505;

  border-bottom:1px solid rgba(57,181,74,.35);

  box-shadow:
    0 2px 16px rgba(0,0,0,.45),
    0 0 18px rgba(57,181,74,.18);

  padding:18px 32px;
  padding-left:calc(var(--nav-logo-size) + var(--nav-left-gap));

  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.footer-nav::before{
    content:"";
    position:absolute;

    left:28px;
    top:50%;

    transform:translateY(-50%);

    width:170px;
    height:90px;

    background:url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
               center center / contain no-repeat;

    pointer-events:none;

    filter:
        drop-shadow(0 0 6px rgba(57,181,74,.45))
        drop-shadow(0 0 14px rgba(57,181,74,.20));
}

.footer-nav a{
  color:#ffffff;

  text-decoration:none;

  font-weight:800;
  font-size:15px;

  padding:11px 16px;

  border-radius:999px;
  border:1px solid transparent;

  background:transparent;

  letter-spacing:.01em;
}

.footer-nav a:hover{
  color:var(--eden);
  border-color:rgba(57,181,74,.55);
  background:rgba(57,181,74,.08);
  box-shadow:0 0 14px rgba(57,181,74,.22);
}

.footer-nav a.active{
  color:#fff;
  background:var(--eden);
  border-color:var(--eden);
}

/* ============================================
   BOUTON RETOUR
============================================ */

.back-btn{
  position:fixed;
  bottom:22px;
  left:22px;
  z-index:1500;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  max-width:280px;

  padding:11px 17px;

  background:#ffffff;
  color:var(--eden-dark);

  border-radius:999px;
  border:1px solid rgba(57,181,74,.35);

  font-weight:900;
  text-align:center;
  text-decoration:none;

  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

.back-btn:hover{
  background:var(--eden);
  color:#fff;
  border-color:var(--eden);
  transform:translateY(-2px);
}

/* ============================================
   BANDEAU HERO / FOND CARRELAGE
============================================ */

body::before{
  content:"EDEN CARRELAGE";
  display:block;

  width:100%;
  min-height:260px;

  background:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.42)),
    linear-gradient(135deg,rgba(255,255,255,.04) 25%,transparent 25%) 0 0/120px 120px,
    linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/160px 160px,
    radial-gradient(circle at 15% 80%,rgba(185,154,90,.24),transparent 20%),
    linear-gradient(180deg,#7d776e,#48443f);

  color:#fff;

  font-size:clamp(2rem,4vw,4rem);
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;

  padding:95px 24px 70px;

  text-align:center;

  box-shadow:
    inset 0 -90px 90px rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.14);
}

body::after{
  content:"Votre magasin de carrelage sublime vos projets";
  display:block;

  margin:-78px auto 42px;

  width:min(720px,calc(100% - 30px));

  color:#ffffff;

  text-align:center;

  font-size:clamp(1.1rem,2.1vw,1.7rem);
  font-weight:800;

  position:relative;
  z-index:1;

  text-shadow:0 4px 18px rgba(0,0,0,.5);
}

body > *{
  position:relative;
  z-index:2;
}

/* ============================================
   FILTRES PREMIUM
============================================ */

.filter-bar-wrapper{
  width:min(1100px,calc(100% - 28px));
  margin:34px auto 26px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,246,244,.94));

  border-radius:18px;
  border:1px solid var(--border);

  padding:18px 22px;

  box-shadow:var(--shadow-soft);

  position:relative;
  overflow:hidden;
}

.filter-bar-wrapper::before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;

  height:4px;

  background:linear-gradient(90deg,transparent,var(--eden),transparent);

  border-radius:999px;

  box-shadow:0 0 12px rgba(57,181,74,.35);
}

.filters{
  position:relative;
  z-index:1;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 16px;
}

.filters-actions{
  width:100%;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.filter{
  display:flex;
  flex-direction:column;
  gap:6px;

  min-width:210px;
}

.filter label,
.filters .filter label{
  color:#222;
  font-weight:900;
  font-size:.9rem;
}

input,
select,
textarea,
.filters .filter select,
.filters .filter input[type="number"]{
  width:100%;
  max-width:100%;

  background:#fff;

  border:1px solid #d9d9d9;
  border-radius:12px;

  color:#222;

  font-size:16px;

  padding:11px 13px;

  outline:none;

  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--eden);
  box-shadow:
    0 0 0 3px rgba(57,181,74,.16),
    inset 0 1px 2px rgba(0,0,0,.04);
}

.btn-basic,
.filters button,
#contactSection button,
.actions-row button,
.btn-details{
  border:none;
  border-radius:999px;

  cursor:pointer;

  background:linear-gradient(135deg,var(--eden),var(--eden-dark));

  color:#fff;

  font-weight:900;

  padding:11px 16px;

  box-shadow:0 8px 18px rgba(57,181,74,.22);
}

.btn-basic:hover,
.filters button:hover,
#contactSection button:hover,
.actions-row button:hover,
.btn-details:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
}

/* ============================================
   MAIN / SECTIONS
============================================ */

main{
  width:min(100%,var(--w-max));
  margin:0 auto 95px;
  padding:0 12px;
}

.category-section{
  max-width:var(--w-max);

  margin:44px auto;

  background:#ffffff;

  border-radius:22px;

  border:1px solid var(--border);

  box-shadow:var(--shadow-premium);

  padding:30px;

  position:relative;
  overflow:hidden;
}

.category-section::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 0% 0%,rgba(57,181,74,.06),transparent 28%),
    linear-gradient(135deg,rgba(0,0,0,.018) 25%,transparent 25%) 0 0/90px 90px;

  pointer-events:none;
}

.category-section h2{
  position:relative;
  z-index:1;

  font-size:1.75rem;

  color:#222;

  margin-bottom:24px;

  text-align:center;

  padding-bottom:14px;

  border-bottom:1px solid var(--border);

  font-weight:950;
}

.category-section h2::before,
.category-section h2::after{
  content:"";
  display:inline-block;

  width:36px;
  height:3px;

  background:var(--eden);

  vertical-align:middle;

  margin:0 12px;

  border-radius:999px;
}

.category-block{
  position:relative;
  z-index:1;

  display:grid;
  gap:22px;
  justify-items:center;
}

/* Compat colonnes */
body.columns-1 .category-block,
body.cols-1 .category-block{grid-template-columns:1fr!important}

body.columns-2 .category-block,
body.cols-2 .category-block{grid-template-columns:repeat(2,1fr)!important}

body.columns-3 .category-block,
body.cols-3 .category-block{grid-template-columns:repeat(3,1fr)!important}

body.columns-4 .category-block,
body.cols-4 .category-block{grid-template-columns:repeat(4,1fr)!important}

/* ============================================
   PRODUCT CARDS
============================================ */

.product-card{
  width:100%;
  max-width:100%;

  background:#ffffff;

  border:1px solid #dedede;
  border-radius:16px;

  overflow:hidden!important;

  box-shadow:
    0 5px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  min-height:340px;

  position:relative;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.product-card::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;

  height:4px;

  background:linear-gradient(90deg,transparent,var(--eden),transparent);

  border-radius:999px;

  opacity:0;

  transition:.22s ease;

  z-index:3;
}

.product-card:hover{
  transform:translateY(-7px);

  border-color:rgba(57,181,74,.55);

  box-shadow:
    0 18px 38px rgba(0,0,0,.14),
    0 0 22px rgba(57,181,74,.12);
}

.product-card:hover::before{
  opacity:1;
}

.product-card.highlight,
.highlight{
  outline:3px solid var(--eden);
  outline-offset:3px;
}

/* ============================================
   PRODUCT IMAGE
============================================ */

.product-image{
  width:100%;

  height:var(--card-img-h-desktop);

  position:relative;

  overflow:hidden!important;

  cursor:pointer;

  background:#111;
}

.product-image img,
.product-image video{
  width:100%!important;
  height:100%!important;

  object-fit:cover!important;

  display:block;

  transition:
    transform .32s ease,
    filter .32s ease;

  cursor:pointer;
}

.product-card:hover .product-image img{
  transform:scale(1.045);
  filter:contrast(1.04) saturate(1.02);
}

.product-image::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,.22),
      transparent 62%
    );

  opacity:0;

  transition:.32s ease;

  pointer-events:none;
}

.product-image:hover::after{
  opacity:.7;
}

.video-thumb,
.img-placeholder{
  width:100%;
  height:var(--card-img-h-desktop);

  display:flex;
  align-items:center;
  justify-content:center;

  background:#111;

  color:#fff;

  font-size:2rem;
}

/* ============================================
   PRODUCT INFO
============================================ */

.product-info{
  padding:16px;

  display:flex;
  flex-direction:column;
  gap:9px;

  text-align:center;
}

.product-info h3{
  color:#222;

  font-size:1.08rem;

  font-weight:950;

  margin:0;

  line-height:1.3;
}

.product-price{
  color:var(--eden-dark);
  font-weight:950;
  font-size:1.08rem;
}

.product-price .prix-original{
  color:var(--danger)!important;
  text-decoration:line-through;
  margin-right:8px;
}

.product-price .prix-solde{
  color:var(--success)!important;
  font-weight:950;
  font-size:1.15em;
}

.product-price:has(.prix-solde){
  color:inherit;
}

.actions-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;

  margin-top:8px;
}

.product-info button,
.actions-row button{
  position:relative;
  overflow:hidden;

  padding:10px 14px;

  border:none;
  border-radius:999px;

  cursor:pointer;

  font-weight:900;

  background:linear-gradient(135deg,var(--eden),var(--eden-dark));

  color:#fff;

  box-shadow:0 8px 18px rgba(57,181,74,.22);
}

.product-info button::after,
.actions-row button::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  transform:translateX(-100%);
}

.product-info button:hover::after,
.actions-row button:hover::after{
  animation:edenBtn .9s ease;
}

@keyframes edenBtn{
  100%{transform:translateX(100%)}
}

/* ============================================
   CHIPS / DETAILS
============================================ */

.custom-summary{
  color:#666;
}

.custom-summary.chips{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.42rem .55rem;
  margin-top:4px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;

  min-width:0;

  padding:.38rem .65rem;

  border:1px solid #e1e8e2;
  border-radius:999px;

  background:#f5fbf6;

  color:#2b3340;

  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.chip .k{
  font-weight:900;
  color:var(--eden-dark);
}

.chip .v{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.extra-info{
  font-size:.95rem;

  color:#2b3340;

  margin-top:10px;

  list-style:none;

  padding:.8em;

  background:#f7faf8;

  border:1px solid #dfeee2;
  border-radius:12px;

  max-width:92%;

  margin-left:auto;
  margin-right:auto;

  text-align:left;

  transition:.25s ease;

  min-width:0!important;

  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.45!important;
}

.extra-info li{
  margin:6px 0;
}

.extra-info:hover{
  transform:scale(1.01);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.extra-info.hidden,
.hidden{
  display:none!important;
}

/* ============================================
   BADGES
============================================ */

.badge-solde{
  position:absolute!important;
  top:8px!important;
  left:8px!important;

  background:#dcfce7!important;
  color:#166534!important;

  border:1px solid #bbf7d0!important;

  padding:5px 9px!important;

  border-radius:999px!important;

  font-size:.8rem!important;
  font-weight:900!important;

  z-index:5!important;
}

/* ============================================
   CONTACT / INFOS
============================================ */

#contactSection,
.boutique-info{
  width:min(900px,calc(100% - 28px));

  margin:40px auto;

  background:#fff;

  padding:24px 30px;

  border-radius:18px;

  box-shadow:var(--shadow-soft);

  border:1px solid var(--border);

  color:#333;
}

#contactSection p,
.boutique-info p,
.boutique-info li{
  margin:8px 0;
  line-height:1.55;
}

#contactSection a,
.boutique-info a{
  color:var(--eden-dark);
  font-weight:900;
}

#contactSection input{
  width:60%;

  padding:8px 10px;

  margin-right:8px;

  border:1px solid #ccc;
  border-radius:10px;
}

#contactSection button{
  padding:8px 12px;
}

#copyMsg{
  display:inline-block;
  margin-left:10px;
  color:var(--eden-dark);
  font-weight:bold;
}

.boutique-info h2,
.boutique-info h3{
  color:var(--eden-dark);
  margin-bottom:10px;
}

.boutique-info ul{
  margin-left:20px;
}

.services{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ============================================
   BANNIERE SOLDES
============================================ */

.banniere-soldes{
  overflow:hidden;

  background:#ffffff;

  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);

  box-shadow:0 -8px 24px rgba(0,0,0,.08);

  padding:8px 0;

  margin:10px auto 22px;
}

.banniere-soldes .defilement{
  display:flex;
  gap:12px;
  align-items:center;

  padding:0 12px;

  animation:eden-marquee 28s linear infinite;

  will-change:transform;
}

.banniere-soldes:hover .defilement{
  animation-play-state:paused;
}

@keyframes eden-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.item-solde{
  flex:0 0 auto;

  display:grid;
  grid-template-columns:56px auto;
  align-items:center;

  min-width:280px;

  gap:10px;

  padding:8px 10px;

  background:#fff;

  color:var(--text);

  border:1px solid var(--border-soft);
  border-radius:12px;

  box-shadow:0 4px 10px rgba(0,0,0,.06);

  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.item-solde:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

.item-solde img{
  width:56px;
  height:56px;

  object-fit:cover;

  border-radius:10px;

  background:#f3f4f6;
}

.item-solde .info{
  line-height:1.1;
}

.item-solde .info strong{
  display:block;

  font-weight:900;

  color:#111;

  max-width:26ch;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.item-solde .old{
  text-decoration:line-through;
  opacity:.55;
  margin-right:.4rem;
}

.item-solde .new{
  color:var(--success);
  font-weight:900;
}

.item-solde .badge-pct{
  margin-left:.35rem;

  background:#ef4444;
  color:#fff;

  font-weight:900;

  padding:.1rem .4rem;

  border-radius:8px;

  font-size:.78rem;
}

/* ============================================
   LIGHTBOX
============================================ */

.lightbox{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.88);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:9999;
}

.lightbox.hidden{
  display:none!important;
}

#lightboxContent img,
#lightboxContent video{
  max-width:90vw;
  max-height:90vh;

  border-radius:10px;

  box-shadow:0 0 18px rgba(255,255,255,.28);
}

.close-btn,
.nav.prev,
.nav.next,
.nav{
  position:absolute;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
  user-select:none;
  display:block;
}

.close-btn{
  top:20px;
  right:30px;
}

.nav.prev{
  top:50%;
  left:30px;
  transform:translateY(-50%);
}

.nav.next{
  top:50%;
  right:30px;
  transform:translateY(-50%);
}

/* ============================================
   FLOATING CART
============================================ */

.floating-cart{
  position:fixed!important;

  right:18px!important;
  bottom:18px!important;

  z-index:9999!important;

  width:64px!important;
  height:64px!important;

  border-radius:50%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  background:linear-gradient(135deg,var(--eden),var(--eden-dark))!important;

  color:#fff!important;

  font-size:26px!important;

  cursor:pointer!important;

  box-shadow:
    0 10px 25px rgba(57,181,74,.30),
    0 0 20px rgba(57,181,74,.20)!important;
}

.floating-cart span{
  position:absolute!important;

  top:-6px!important;
  right:-6px!important;

  background:#ef4444!important;

  color:#fff!important;

  font-size:12px!important;
  font-weight:900!important;

  border-radius:999px!important;

  padding:2px 6px!important;

  min-width:18px!important;

  text-align:center!important;
}

/* ============================================
   MOBILE / TABLETTE
============================================ */

@media (max-width:900px){

  :root{
    --nav-logo-size:110px;
    --card-img-h-desktop:330px;
  }

  .footer-nav{
    padding:14px 16px;
    padding-left:calc(var(--nav-logo-size) + 16px);
    min-height:120px;
    justify-content:flex-start;
  }

  .footer-nav::before{
    left:12px;
    width:var(--nav-logo-size);
  }

  .footer-nav a{
    font-size:14px;
    padding:9px 12px;
  }
}

@media (max-width:768px){

  :root{
    --card-img-h-mobile:210px;
  }

  body::before{
    min-height:210px;
    padding:70px 18px 52px;
    font-size:2rem;
  }

  body::after{
    margin:-60px auto 30px;
    font-size:1.05rem;
  }


  .back-btn{
    position:static;
    display:flex;

    margin:14px auto;

    width:calc(100% - 28px);
    max-width:420px;
  }

  .filter-bar-wrapper{
    width:calc(100% - 22px);
    padding:14px 16px;
  }

  .filters-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .btn-basic,
  .filters button,
  .filters-actions button{
    width:100%;
  }

  #filtersFields{
    width:100%;
  }

  .filter{
    width:100%;
  }

  main{
    padding:0 10px;
  }

  .category-section{
    margin:28px auto;
    padding:18px;
    border-radius:18px;
  }

  .category-section h2{
    font-size:1.25rem;
  }

  .category-section h2::before,
  .category-section h2::after{
    width:22px;
    margin:0 8px;
  }

  .category-block{
    justify-items:center;
  }

  .product-card{
    min-height:auto;
  }

  .product-image{
    height:var(--card-img-h-mobile);
    cursor:zoom-in;
    touch-action:manipulation;
  }

  .video-thumb,
  .img-placeholder{
    height:var(--card-img-h-mobile);
  }

  .product-info{
    padding:11px;
    gap:6px;
  }

  .product-info h3{
    font-size:1rem;
  }

  .product-price{
    font-size:.96rem;
  }

  .product-info button,
  .actions-row button{
    width:100%;
    min-height:42px;
    min-width:44px;
    touch-action:manipulation;
  }

  .actions-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .custom-summary.chips{
    grid-template-columns:1fr!important;
  }

  #contactSection,
  .boutique-info{
    width:calc(100% - 24px);
    padding:18px;
  }

  #contactSection input{
    width:100%;
    margin:8px 0;
  }

  #contactSection button{
    width:100%;
  }

  .banniere-soldes{
    position:static!important;
    z-index:auto!important;
    pointer-events:none!important;
  }

  .banniere-soldes .item-solde{
    pointer-events:auto!important;
  }

  .floating-cart{
    width:58px!important;
    height:58px!important;
    right:14px!important;
    bottom:14px!important;
  }
}

@media (max-width:520px){

  :root{
    --card-img-h-mobile:185px;
  }


  .item-solde{
    min-width:240px;
  }

  .item-solde .info strong{
    max-width:20ch;
  }
}

/* ============================================
   REDUCE MOTION
============================================ */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ==========================================================
   EDEN — HERO COMPACT PC + TABLETTE + TÉLÉPHONE
   Réduit uniquement le grand bandeau sombre "EDEN CARRELAGE".
   Le reste du design reste inchangé.
   ========================================================== */

/* PC */
body::before{
  min-height:190px!important;
  height:190px!important;

  padding:82px 24px 34px!important;

  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;

  font-size:clamp(2rem,3.4vw,3.3rem)!important;
  line-height:1!important;

  background:
    url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
      center 14px / 105px auto no-repeat,
    linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
    linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/95px 95px,
    radial-gradient(circle at 15% 80%,rgba(185,154,90,.18),transparent 22%),
    linear-gradient(180deg,#151515,#050505)!important;

  box-shadow:
    inset 0 -38px 46px rgba(0,0,0,.16),
    0 8px 22px rgba(0,0,0,.12)!important;
}

body::after{
  margin:-38px auto 24px!important;
  width:min(720px,calc(100% - 30px))!important;
  font-size:clamp(1rem,1.45vw,1.22rem)!important;
  line-height:1.25!important;
}

/* Tablette */
@media (max-width:900px){

  body::before{
    min-height:165px!important;
    height:165px!important;

    padding:72px 18px 28px!important;

    font-size:clamp(1.8rem,5vw,2.6rem)!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center 12px / 92px auto no-repeat,
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%) 0 0/88px 88px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.16),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  body::after{
    margin:-34px auto 20px!important;
    font-size:1rem!important;
  }
}

/* Téléphone */
@media (max-width:768px){

  body::before{
    min-height:140px!important;
    height:140px!important;

    padding:62px 14px 22px!important;

    font-size:clamp(1.5rem,7vw,2rem)!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center 8px / 78px auto no-repeat,
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%) 0 0/78px 78px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.15),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  body::after{
    margin:-28px auto 16px!important;
    width:calc(100% - 28px)!important;
    font-size:.88rem!important;
  }
}

/* Petit téléphone */
@media (max-width:520px){

  body::before{
    min-height:124px!important;
    height:124px!important;

    padding:56px 12px 18px!important;

    font-size:1.42rem!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center 7px / 70px auto no-repeat,
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.028) 25%,transparent 25%) 0 0/72px 72px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.14),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  body::after{
    margin:-24px auto 14px!important;
    font-size:.82rem!important;
  }
}


/* ==========================================================
   EDEN — POSITION DU LOGO
   Ordre visuel :
   1. EDEN CARRELAGE
   2. Logo Eden centré
   3. Barre de navigation
   ========================================================== */

/* Le logo n'est plus intégré dans le hero */
body::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
    linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/95px 95px,
    radial-gradient(circle at 15% 80%,rgba(185,154,90,.18),transparent 22%),
    linear-gradient(180deg,#151515,#050505)!important;
}

/* Le logo devient un vrai bandeau intermédiaire centré */
.boutique-header::before{
  content:""!important;
  display:block!important;

  width:100%!important;
  height:72px!important;

  background:
    #050505
    url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
    center center / 112px auto no-repeat!important;

  border:0!important;
  border-bottom:1px solid rgba(57,181,74,.18)!important;

  box-shadow:none!important;
  pointer-events:none!important;
}

/* La navigation reste juste sous le logo */
.footer-nav{
  margin-top:0!important;
}

/* Tablette */
@media (max-width:900px){

  body::before{
    background:
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%) 0 0/88px 88px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.16),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  .boutique-header::before{
    height:64px!important;
    background:
      #050505
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
      center center / 98px auto no-repeat!important;
  }
}

/* Téléphone */
@media (max-width:768px){

  body::before{
    background:
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%) 0 0/78px 78px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.15),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  .boutique-header::before{
    height:58px!important;
    background:
      #050505
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
      center center / 88px auto no-repeat!important;
  }
}

/* Petit téléphone */
@media (max-width:520px){

  body::before{
    background:
      linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.48)),
      linear-gradient(135deg,rgba(255,255,255,.028) 25%,transparent 25%) 0 0/72px 72px,
      radial-gradient(circle at 15% 80%,rgba(185,154,90,.14),transparent 22%),
      linear-gradient(180deg,#151515,#050505)!important;
  }

  .boutique-header::before{
    height:54px!important;
    background:
      #050505
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
      center center / 82px auto no-repeat!important;
  }
}


/* ==========================================================
   EDEN — BANDEAU LOGO COMPACT / PROPRE
   - Suppression du gros titre "EDEN CARRELAGE"
   - Suppression du faux effet noir géométrique
   - Conservation du logo centré
   - Bandeau noir beaucoup plus bas
   ========================================================== */

/* On supprime complètement l'ancien hero avec le texte EDEN CARRELAGE */
body::before{
  content:none!important;
  display:none!important;
}

/* On supprime aussi le sous-titre associé à l'ancien hero */
body::after{
  content:none!important;
  display:none!important;
}

/* Nouveau bandeau supérieur : simple, propre, compact */
.boutique-header::before{
  content:""!important;
  display:block!important;

  width:100%!important;
  height:78px!important;

  background:
    url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
      center center / 118px auto no-repeat,
    linear-gradient(180deg,#111111 0%,#050505 100%)!important;

  border:0!important;
  border-bottom:2px solid rgba(57,181,74,.72)!important;

  box-shadow:
    inset 0 -12px 20px rgba(0,0,0,.22),
    0 5px 14px rgba(0,0,0,.14)!important;

  pointer-events:none!important;
}

/* Barre de navigation directement sous le logo */
.footer-nav{
  margin-top:0!important;
  border-top:0!important;
}

/* TABLETTE */
@media (max-width:900px){
  .boutique-header::before{
    height:68px!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center center / 102px auto no-repeat,
      linear-gradient(180deg,#111111 0%,#050505 100%)!important;
  }
}

/* TÉLÉPHONE */
@media (max-width:768px){
  .boutique-header::before{
    height:60px!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center center / 90px auto no-repeat,
      linear-gradient(180deg,#101010 0%,#050505 100%)!important;

    border-bottom:1px solid rgba(57,181,74,.65)!important;
  }
}

/* PETIT TÉLÉPHONE */
@media (max-width:520px){
  .boutique-header::before{
    height:54px!important;

    background:
      url('https://www.eden-carrelages.fr/assets/images/logo-5e3c89698534dbac9198506bcf65823f.png')
        center center / 82px auto no-repeat,
      linear-gradient(180deg,#101010 0%,#050505 100%)!important;
  }
}

/* ==========================================================
   EDEN — PERSONNALISATION DU MENU MOBILE UNIVERSEL
   Le fonctionnement et les boutons viennent de viewBoutique.php
   via shop.json -> nav_buttons.
   ========================================================== */

:root{
  --bzc-mobile-menu-bottom:72px;
  --bzc-mobile-menu-size:62px;
  --bzc-mobile-menu-accent:rgba(57,181,74,.88);
  --bzc-mobile-menu-bg:rgba(5,5,5,.98);
  --bzc-mobile-menu-border:rgba(57,181,74,.68);
  --bzc-mobile-menu-radius:16px;
  --bzc-mobile-menu-shadow:0 18px 45px rgba(0,0,0,.42);
  --bzc-mobile-menu-link-color:#fff;
  --bzc-mobile-menu-link-bg:rgba(255,255,255,.045);
  --bzc-mobile-menu-link-border:rgba(255,255,255,.09);
  --bzc-mobile-menu-link-radius:10px;
  --bzc-mobile-menu-button-bg:#050505;
  --bzc-mobile-menu-button-color:#fff;
  --bzc-mobile-menu-button-shadow:0 10px 28px rgba(0,0,0,.40),0 0 0 3px rgba(57,181,74,.10),0 0 20px rgba(57,181,74,.24);
}

@media (max-width:768px){

  .boutique-header{
    position:relative!important;
    overflow:visible!important;
    pointer-events:auto!important;
    z-index:2147483000!important;
  }

  /* neutralise uniquement l'ancien faux burger éventuel du thème */
  .footer-nav::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .floating-cart{
    position:fixed!important;
    right:14px!important;
    top:auto!important;
    bottom:72px!important;
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
    z-index:2147483646!important;
  }

  body{
    padding-bottom:150px!important;
  }

  body.columns-1 .category-block,
  body.columns-2 .category-block,
  body.columns-3 .category-block,
  body.columns-4 .category-block,
  body.cols-1 .category-block,
  body.cols-2 .category-block,
  body.cols-3 .category-block,
  body.cols-4 .category-block{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:520px){

  :root{
    --bzc-mobile-menu-bottom:64px;
    --bzc-mobile-menu-size:58px;
  }

  .floating-cart{
    bottom:64px!important;
    bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
  }

  body{
    padding-bottom:140px!important;
  }
}

/* ===== BIZCREATOR RESPONSIVE COMPATIBILITY ===== */
/* Compatibilité commune PC / tablette / téléphone sans modifier l'identité du thème. */
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  max-width:100%;
}

img,
video,
svg,
canvas,
iframe{
  max-width:100%;
}

.boutique-header,
.boutique-info,
.filter-bar-wrapper,
.filters,
#filtersFields,
#contactSection,
#infosSection,
.category-section,
.category-block,
.product-card,
.product-info,
.custom-summary,
.banniere-soldes{
  min-width:0;
  max-width:100%;
}

.category-block > *,
.filters > *,
.filters-actions > *,
.actions-row > *{
  min-width:0;
}

.product-card,
.product-info,
.boutique-info,
#contactSection,
#infosSection{
  overflow-wrap:anywhere;
  word-break:normal;
}

@media (max-width:768px){
  body{
    overflow-x:hidden;
    scroll-padding-bottom:96px;
  }

  .boutique-header,
  .boutique-info,
  .filter-bar-wrapper,
  #contactSection,
  #infosSection,
  .category-section{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .filters,
  .filters-actions,
  .filter-bar,
  .row,
  .actions-row{
    max-width:100%;
    flex-wrap:wrap;
  }

  .filters input,
  .filters select,
  .filters textarea,
  .filter-bar input,
  .filter-bar select,
  .filter-bar textarea{
    max-width:100%;
    font-size:16px;
  }

  .filters label,
  #filtersFields label{
    min-width:0;
    max-width:100%;
  }

  body.columns-1 .product-card,
  body.cols-1 .product-card,
  .product-card{
    width:100%;
    max-width:100%;
  }

  .product-image,
  .product-image img,
  .product-image video,
  .video-thumb,
  .img-placeholder{
    max-width:100%;
  }

  .banniere-soldes{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  button,
  .btn-basic,
  .actions-row a,
  .actions-row button,
  .footer-nav a{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .actions-row a,
  .actions-row button,
  .btn-basic{
    min-height:44px;
  }
}

@media (max-width:520px){
  .boutique-header{
    padding-left:clamp(12px,4vw,20px);
    padding-right:clamp(12px,4vw,20px);
  }

  .filters-actions{
    width:100%;
  }

  .filters-actions > .btn-basic{
    flex:1 1 140px;
  }

  .actions-row{
    width:100%;
  }

  .actions-row > a,
  .actions-row > button{
    flex:1 1 120px;
  }
}

@media (hover:none){
  .product-card:hover{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}