/* ==========================================================================
   AFRIKA MARKET — Refonte visuelle v4
   themes/vp_spices/assets/css/custom.css
   Cible les VRAIES classes du thème (verifiees sur le HTML genere).
   NB : le theme charge un <style> inline APRES ce fichier -> on monte
   en specificite avec "html body" et !important.
   Pour tout annuler : supprimer custom.css et custom.js.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,700&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --am-red:#A32B1F; --am-red-dark:#7E1F16; --am-gold:#E8B04B; --am-gold-dk:#C8901F;
  --am-cream:#FDF3E7; --am-dark:#1E1109; --am-text:#33241A; --am-muted:#8B7666;
  --am-border:#E9D9C4; --am-r:14px;
  --am-sh:0 3px 14px rgba(30,17,9,.08); --am-sh-lg:0 14px 38px rgba(30,17,9,.18);
  --am-tr:all .28s ease;
  --am-serif:'Playfair Display',Georgia,serif;
  --am-sans:'DM Sans',-apple-system,'Segoe UI',sans-serif;
}

/* ---------- BASE (bat le <style> inline Arial/#FFF) ---------- */
html body{
  font-family:var(--am-sans) !important;
  background-color:var(--am-cream) !important;
  color:var(--am-text) !important;
  font-size:15px !important;
  line-height:1.65 !important;
  -webkit-font-smoothing:antialiased;
}
html body p, html body li, html body a,
html body input, html body button, html body label{
  font-family:var(--am-sans) !important;
}
/* IMPORTANT : ne jamais ecraser les polices d'icones */
html body .fa, html body [class^="fa-"], html body [class*=" fa-"]{
  font-family:FontAwesome !important;
}
html body .material-icons{ font-family:'Material Icons' !important; }
html body h1, html body h2, html body h3, html body h4,
html body .best-title, html body .title_block, html body .page-heading{
  font-family:var(--am-serif) !important;
  color:var(--am-dark) !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
html body a{ color:var(--am-red); transition:var(--am-tr); }
html body a:hover{ color:var(--am-gold-dk); text-decoration:none; }

/* ---------- HEADER : rouge de marque ---------- */
html body #header{ background-color:var(--am-red) !important; border:none !important; }

/* les sections bestwidget ont des backgrounds INLINE -> !important obligatoire */
html body #header .best-section,
html body #header .best-header-info,
html body #header .logo-cart,
html body #header .section-header-custom,
html body #header .best-block{
  background-color:transparent !important;
  color:#FFF4E4 !important;
}
html body #header .header-nav,
html body #header .header-top,
html body #header .header-banner{ background-color:transparent !important; border:none !important; }

html body #header .html-content p,
html body #header .html-content strong,
html body #header .best-content,
html body #header .link-caption{ color:#FFF4E4 !important; }

/* liens du mini-menu haut (Accueil / A propos / Contact / Actualites) */
html body #header .blocklink-wrap a{
  color:#FFF4E4 !important; font-weight:600 !important;
  padding:7px 14px !important; border-radius:999px !important;
  display:inline-block !important; transition:var(--am-tr) !important;
}
html body #header .blocklink-wrap a:hover{
  background-color:var(--am-gold) !important; color:var(--am-dark) !important;
}
html body #header .fa{ color:var(--am-gold) !important; }

/* recherche */
html body #search_block_top .form-control,
html body #search_query_top{
  border:2px solid rgba(255,255,255,.35) !important;
  border-radius:999px 0 0 999px !important;
  background-color:rgba(255,255,255,.14) !important;
  color:#fff !important; box-shadow:none !important; height:auto !important; padding:10px 18px !important;
}
html body #search_query_top::placeholder{ color:rgba(255,255,255,.75) !important; }
html body #search_query_top:focus{ background-color:#fff !important; color:var(--am-text) !important; border-color:var(--am-gold) !important; }
html body #search_block_top .button-search{
  background-color:var(--am-gold) !important; color:var(--am-dark) !important;
  border:none !important; border-radius:0 999px 999px 0 !important;
}
html body .top-login.btn{
  background-color:rgba(255,255,255,.15) !important; color:#FFF4E4 !important;
  border:2px solid rgba(255,255,255,.3) !important; border-radius:50% !important;
  width:42px !important; height:42px !important; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
html body .top-login.btn:hover{ background-color:var(--am-gold) !important; color:var(--am-dark) !important; }
html body .top-login.btn .fa{ color:inherit !important; }

/* logos */
html body #_desktop_logo img, html body .logo2 img{
  max-height:62px !important; width:auto !important;
  object-fit:contain !important;
  background:#fff !important; border-radius:10px !important; padding:5px 8px !important;
}

/* ---------- HEADER COMPACT ---------- */
html body #header .best-section{ padding-top:6px !important; padding-bottom:6px !important; }
html body #header .best-section-inside{ padding-top:0 !important; padding-bottom:0 !important; }
html body #header .best-block{ margin-bottom:0 !important; padding-top:4px !important; padding-bottom:4px !important; }
html body #header .best-block-inside{ padding-top:0 !important; padding-bottom:0 !important; }
html body #header .html-content p{ margin-bottom:0 !important; }
html body #header .blocklink-wrap ul{ margin-bottom:0 !important; }
html body #header .logo-cart{ padding-top:4px !important; padding-bottom:4px !important; }
html body #header .header-top{ padding:0 !important; }
html body #header .header-nav{ min-height:0 !important; }
html body #header .best-header-info{ border-bottom:1px solid rgba(255,255,255,.15) !important; }

/* ---------- TITRES DE SECTION ---------- */
html body .best-title{
  position:relative !important;
  font-size:28px !important;
  text-transform:none !important;
  padding-bottom:14px !important;
  margin-bottom:24px !important;
  border:none !important;
}
html body .best-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:58px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--am-red),var(--am-gold));
}
/* dans le footer, titres clairs */
html body #footer .best-title{ color:#fff !important; font-size:19px !important; }

/* ---------- BOUTONS ---------- */
html body .btn, html body .btn-primary, html body .add-to-cart,
html body input[type="submit"], html body .button_mini{
  font-family:var(--am-sans) !important; font-weight:700 !important;
  border-radius:999px !important; border:none !important;
  text-transform:none !important; transition:var(--am-tr) !important;
}
html body .btn-primary, html body .add-to-cart,
html body input[type="submit"], html body .button_mini{
  background-color:var(--am-red) !important; color:#FFF4E4 !important;
  padding:11px 26px !important;
}
html body .btn-primary:hover, html body .add-to-cart:hover,
html body input[type="submit"]:hover{
  background-color:var(--am-red-dark) !important; color:#fff !important;
  box-shadow:0 8px 20px rgba(163,43,31,.35) !important;
}

/* ---------- CARTES PRODUITS ---------- */
html body .product-miniature{
  background-color:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  overflow:hidden !important;
  box-shadow:var(--am-sh) !important;
  transition:var(--am-tr) !important;
}
html body .product-miniature:hover{
  transform:translateY(-6px);
  border-color:var(--am-gold) !important;
  box-shadow:var(--am-sh-lg) !important;
}
html body .product-miniature .product-image-container{ background:#fff !important; overflow:hidden !important; }
html body .product-miniature .product-image-container img{ transition:transform .5s ease !important; }
html body .product-miniature:hover .product-image-container img{ transform:scale(1.07); }

html body .product-miniature .caption.product-description{
  padding:16px !important; background:#fff !important; text-align:left !important;
  border-top:1px solid var(--am-border) !important;
}
html body .product-miniature .product-title a{
  font-family:var(--am-sans) !important; font-weight:600 !important;
  color:var(--am-text) !important; font-size:15px !important; text-transform:none !important;
}
html body .product-miniature .product-title a:hover{ color:var(--am-red) !important; }
html body .product-miniature .price, html body .price{
  color:var(--am-red) !important; font-family:var(--am-sans) !important; font-weight:700 !important;
}
html body .quick-view{
  background:rgba(255,255,255,.95) !important; color:var(--am-dark) !important;
  border-radius:999px !important; border:none !important;
}

/* ---------- COLONNE GAUCHE / CATEGORIES ---------- */
html body .block-categories,
html body #left-column .best-block-inside,
html body #left-column .card{
  background-color:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  overflow:hidden !important;
}
html body .block-categories .card-header{
  background-color:var(--am-red) !important; color:#FFF4E4 !important;
  font-family:var(--am-serif) !important; font-weight:800 !important;
  border:none !important; padding:14px 18px !important;
}
html body .block-categories a{ color:var(--am-text) !important; transition:var(--am-tr) !important; }
html body .block-categories a:hover{ color:var(--am-red) !important; }

/* images / bannieres arrondies */
html body .image-wrap img, html body .widget-image-content img,
html body .best_main_slideshow, html body .box_skitter{
  border-radius:var(--am-r) !important; box-shadow:var(--am-sh) !important;
}

/* ---------- FORMULAIRES ---------- */
html body .form-control, html body input[type="text"], html body input[type="email"],
html body input[type="password"], html body textarea{
  border:2px solid var(--am-border) !important; border-radius:10px !important;
  background-color:#fff !important; color:var(--am-text) !important; box-shadow:none !important;
}
html body .form-control:focus{ border-color:var(--am-red) !important; box-shadow:0 0 0 3px rgba(163,43,31,.12) !important; }

/* ---------- NEWSLETTER ---------- */
html body #newsletter_block_left{
  background:linear-gradient(135deg,var(--am-red),var(--am-red-dark)) !important;
  border-radius:var(--am-r) !important; padding:28px !important; border:none !important;
  box-shadow:var(--am-sh-lg) !important;
}
html body #newsletter_block_left .title_block,
html body #newsletter_block_left p{ color:#fff !important; }
html body #newsletter_block_left .title_block{ font-family:var(--am-serif) !important; }
html body #newsletter_block_left .inputNew{
  border-radius:999px !important; border:2px solid rgba(255,255,255,.3) !important;
  background-color:rgba(255,255,255,.14) !important; color:#fff !important; padding:11px 18px !important;
}
html body #newsletter_block_left .inputNew::placeholder{ color:rgba(255,255,255,.7) !important; }
html body #newsletter_block_left .button_mini{ background-color:var(--am-gold) !important; color:var(--am-dark) !important; }

/* ---------- FOOTER ---------- */
html body #footer .best-footer-info,
html body #footer .section-brand,
html body #footer .best-section{
  background-color:var(--am-dark) !important; color:#CBB9A6 !important; border:none !important;
}
html body #footer a, html body #footer .link-caption{ color:#CBB9A6 !important; transition:var(--am-tr) !important; }
html body #footer a:hover, html body #footer a:hover .link-caption{ color:var(--am-gold) !important; }
html body #footer .fa{ color:var(--am-gold) !important; }
html body #footer .title_block{ color:#fff !important; font-family:var(--am-serif) !important; }

html body #footer .social .link a{
  background-color:rgba(255,255,255,.08) !important; border-radius:50% !important;
  width:42px !important; height:42px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  transition:var(--am-tr) !important;
}
html body #footer .social .link a:hover{ background-color:var(--am-gold) !important; transform:translateY(-3px); }
html body #footer .social .link a:hover .fa{ color:var(--am-dark) !important; }

html body #footer .box-brand img{ background:#fff !important; border-radius:10px !important; padding:8px !important; }

html body .best-copyright{
  background-color:#150C06 !important; color:#8B7D70 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}
html body .best-copyright p, html body .best-copyright address span{ color:#8B7D70 !important; }
html body .best-copyright .fa{ color:var(--am-gold) !important; }

html body .box-gotop .gotop{
  background-color:var(--am-red) !important; color:#fff !important;
  border-radius:50% !important; width:44px !important; height:44px !important;
  line-height:44px !important; text-align:center !important;
  box-shadow:var(--am-sh-lg) !important;
}
html body .box-gotop .gotop:hover{ background-color:var(--am-gold) !important; color:var(--am-dark) !important; }

/* ---------- BLOG ---------- */
html body .ybc_block_latest li{ list-style:none !important; }
html body .ybc-blog-latest-post-content{ padding:14px !important; }
html body .ybc_title_block{ font-family:var(--am-serif) !important; color:var(--am-dark) !important; font-weight:800 !important; }
html body .ybc_title_block:hover{ color:var(--am-red) !important; }
html body .read_more{ color:var(--am-red) !important; font-weight:700 !important; }
html body .title_blog{ font-family:var(--am-serif) !important; }

/* ---------- ACCUEIL : plein largeur (pas de colonne gauche) ---------- */
html body#index #left-column{ display:none !important; }
html body#index #content-wrapper{
  flex:0 0 100% !important; max-width:100% !important; width:100% !important;
}
html body#index .breadcrumb{ display:none !important; }

/* ============================================================
   HERO (injecte par custom.js)
   ============================================================ */
.am-hero{
  position:relative;
  min-height:78vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,#2B1710 0%,#7E1F16 55%,#A32B1F 100%);
  background-size:cover; background-position:center;
  overflow:hidden;
  margin-bottom:36px;
}
.am-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,10,5,.62) 0%,rgba(20,10,5,.45) 45%,rgba(20,10,5,.78) 100%);
}
.am-hero__inner{ position:relative; z-index:2; padding:60px 20px; max-width:820px; }
.am-hero__badge{
  display:inline-block;
  border:1px solid rgba(232,176,75,.6);
  background:rgba(232,176,75,.12);
  color:var(--am-gold);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 20px; border-radius:999px; margin-bottom:26px;
}
.am-hero__title{
  font-family:var(--am-serif) !important;
  color:#fff !important;
  font-size:clamp(38px,6vw,76px) !important;
  line-height:1.05 !important;
  font-weight:800 !important;
  margin:0 0 22px !important;
}
.am-hero__title em{
  display:block; font-style:italic;
  color:var(--am-gold) !important;
}
.am-hero__text{
  color:rgba(255,255,255,.9) !important;
  font-size:18px !important; line-height:1.6 !important;
  max-width:560px; margin:0 auto 32px !important;
}
.am-hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.am-hero__cta a{
  display:inline-block; padding:14px 32px; border-radius:999px;
  font-weight:700 !important; font-size:16px; transition:var(--am-tr);
}
.am-hero__cta .am-btn1{ background:var(--am-red) !important; color:#fff !important; }
.am-hero__cta .am-btn1:hover{ background:var(--am-red-dark) !important; transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.am-hero__cta .am-btn2{ background:rgba(255,255,255,.95) !important; color:var(--am-dark) !important; }
.am-hero__cta .am-btn2:hover{ background:#fff !important; transform:translateY(-3px); }

/* (header sticky retire : desagreable au defilement) */

/* apparition au scroll */
.am-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.am-reveal.am-in{ opacity:1; transform:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
  html body .best-title{ font-size:23px !important; }
  .am-hero{ min-height:62vh; }
}
@media (max-width:767px){
  html body{ font-size:14.5px !important; }
  html body .product-miniature:hover{ transform:none; }
  .am-hero{ min-height:56vh; }
  .am-hero__text{ font-size:16px !important; }
  .am-hero__cta a{ width:100%; }
  html body #_desktop_logo img, html body .logo2 img{ max-height:56px !important; }
}


/* ==========================================================================
   HEADER 2 ETAGES (facon maquette React)
   Etage 1 : barre sombre fine (tel + recherche + compte)
   Etage 2 : bandeau rouge (logo + menu en pilule)
   ========================================================================== */

/* --- Etage 1 : barre sombre --- */
html body #header .best-header-info{
  background-color:#1A0F08 !important;
  padding:5px 0 !important;
  border-bottom:none !important;
}
html body #header .best-header-info .html-content p{
  color:#CBB9A6 !important; font-size:13px !important; margin:0 !important;
}
html body #header .best-header-info strong{ color:#fff !important; font-weight:600 !important; }
html body #header .best-header-info .fa{ color:var(--am-gold) !important; margin-right:6px !important; }

/* recherche discrete sur fond sombre */
html body .best-header-info #search_query_top{
  background-color:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px 0 0 999px !important;
  font-size:13.5px !important; padding:7px 16px !important;
}
html body .best-header-info #search_query_top::placeholder{ color:#8B7D70 !important; }
html body .best-header-info .button-search{
  background-color:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-left:none !important;
  color:var(--am-gold) !important;
  border-radius:0 999px 999px 0 !important;
  padding:7px 14px !important;
}
html body .best-header-info .button-search:hover{ background-color:var(--am-gold) !important; color:var(--am-dark) !important; }
html body .best-header-info .top-login.btn{
  background-color:transparent !important;
  border:1px solid rgba(255,255,255,.2) !important;
  width:34px !important; height:34px !important; color:#CBB9A6 !important;
}

/* --- Etage 2 : bandeau rouge --- */
html body #header .logo-cart{
  background-color:var(--am-red) !important;
  padding:12px 0 !important;
}
html body #_desktop_logo img, html body .logo2 img{
  max-height:56px !important;
  border-radius:50% !important;
  padding:3px !important;
}

/* menu en pilule */
html body #header .blocklink-wrap ul{
  display:inline-flex !important;
  align-items:center;
  background-color:rgba(255,255,255,.13) !important;
  border-radius:999px !important;
  padding:5px !important;
  margin:0 !important;
}
html body #header .blocklink-wrap li{
  float:none !important; display:inline-block !important; margin:0 !important;
}
html body #header .blocklink-wrap a{
  padding:8px 20px !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  border-radius:999px !important;
  color:#FFF4E4 !important;
  white-space:nowrap;
}
html body #header .blocklink-wrap a:hover{
  background-color:var(--am-gold) !important; color:var(--am-dark) !important;
}
html body #header .blocklink-wrap .fa{ color:var(--am-gold) !important; }
html body #header .blocklink-wrap a:hover .fa{ color:var(--am-dark) !important; }

/* --- AIR : sections espacees et epurees --- */
html body #content .best-section{
  padding-top:52px !important;
  padding-bottom:52px !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
html body #content .best-title{
  font-size:34px !important;
  margin-bottom:34px !important;
}
html body .carousel-wrap{ padding-top:6px !important; }

/* indice "defiler" sous le hero */
.am-hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; text-align:center;
}
.am-hero__scroll span{
  display:block; color:rgba(255,255,255,.7);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px;
}
.am-hero__scroll i{
  display:block; width:1px; height:40px; margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);
  animation:amPulse 1.8s ease-in-out infinite;
}
@keyframes amPulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

@media (max-width:767px){
  html body #header .blocklink-wrap ul{ display:flex !important; flex-wrap:wrap; justify-content:center; }
  html body #content .best-section{ padding-top:32px !important; padding-bottom:32px !important; }
  html body #content .best-title{ font-size:24px !important; }
}

/* ==========================================================================
   SECTION "EXPLOREZ NOTRE CATALOGUE"
   ========================================================================== */
.am-cat{ padding:70px 0 40px; }
.am-cat__head{ text-align:center; margin-bottom:44px; }
.am-cat__badge{
  display:inline-block; background:var(--am-red); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:8px 22px; border-radius:999px; margin-bottom:20px;
}
.am-cat__title{
  font-family:var(--am-serif) !important;
  font-size:clamp(30px,4.2vw,48px) !important;
  font-weight:800 !important;
  color:var(--am-dark) !important;
  margin:0 0 12px !important;
}
.am-cat__title em{ font-style:italic; color:var(--am-red) !important; }
.am-cat__sub{ color:var(--am-muted) !important; font-size:17px !important; margin:0 !important; }

.am-cat__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;
}
.am-cat__card{
  position:relative; display:block;
  min-height:230px;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,#5C2018,#A32B1F);
  background-size:cover !important; background-position:center !important;
  box-shadow:var(--am-sh);
  transition:transform .35s ease, box-shadow .35s ease;
  text-decoration:none !important;
}
.am-cat__card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,10,5,.05) 40%,rgba(20,10,5,.82) 100%);
  transition:background .35s ease;
}
.am-cat__card:hover{ transform:translateY(-8px); box-shadow:var(--am-sh-lg); }
.am-cat__card:hover::after{ background:linear-gradient(180deg,rgba(163,43,31,.35) 0%,rgba(20,10,5,.88) 100%); }

.am-cat__label{
  position:absolute; left:18px; bottom:18px; z-index:2;
  color:#fff !important; font-weight:700 !important; font-size:17px !important;
  transition:transform .35s ease;
}
.am-cat__go{
  position:absolute; left:18px; bottom:18px; z-index:2;
  color:var(--am-gold) !important; font-size:13.5px !important; font-weight:600 !important;
  opacity:0; transform:translateY(6px); transition:all .35s ease;
}
.am-cat__card:hover .am-cat__label{ transform:translateY(-22px); }
.am-cat__card:hover .am-cat__go{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   MOSAIQUE PHOTOS (bas de page)
   ========================================================================== */
.am-mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:200px;
  gap:10px;
  margin:60px 0 0;
}
.am-mosaic__cell{
  background:#E9D9C4 center/cover no-repeat;
  border-radius:12px;
  transition:transform .5s ease, filter .5s ease;
}
.am-mosaic__cell:hover{ transform:scale(1.02); filter:saturate(1.15); }
.am-mosaic__cell--1{ grid-row:span 2; }
.am-mosaic__cell--3{ grid-row:span 2; }
.am-mosaic__cell--5{ grid-row:span 2; }
.am-mosaic__cell--7{ grid-row:span 2; }

@media (max-width:767px){
  .am-cat{ padding:44px 0 24px; }
  .am-cat__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .am-cat__card{ min-height:150px; }
  .am-cat__label{ font-size:14px !important; left:12px; bottom:12px; }
  .am-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
}

/* ==========================================================================
   FOND BEIGE PARTOUT (le theme force du blanc sur les pages internes)
   ========================================================================== */
html body #wrapper, html body #main, html body #content,
html body .page-content, html body .page-home,
html body #content-wrapper, html body .best-area,
html body .best-section-inside{
  background-color:transparent !important;
}
html body #content.page-content, html body #main .page-content{
  background-color:transparent !important; box-shadow:none !important; border:none !important;
}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */
.am-cband{
  position:relative;
  background:linear-gradient(115deg,#1E1109 0%,#3A1810 45%,#A32B1F 100%);
  text-align:center;
  padding:82px 20px 74px;
  margin-bottom:46px;
}
.am-cband__badge{
  display:inline-block; background:var(--am-gold); color:var(--am-dark);
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:9px 24px; border-radius:999px; margin-bottom:22px;
}
.am-cband__title{
  font-family:var(--am-serif) !important;
  color:#fff !important;
  font-size:clamp(32px,5vw,58px) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin:0 0 16px !important;
}
.am-cband__title em{ display:block; font-style:italic; color:var(--am-gold) !important; }
.am-cband__sub{ color:rgba(255,255,255,.85) !important; font-size:17px !important; margin:0 !important; }

/* cartes coordonnees */
.am-cinfo{ margin-bottom:26px; }
.am-cinfo__card{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:16px !important;
  padding:20px !important;
  margin-bottom:14px !important;
  text-decoration:none !important;
  box-shadow:var(--am-sh) !important;
  transition:var(--am-tr) !important;
}
.am-cinfo__card:hover{
  transform:translateY(-3px);
  border-color:var(--am-red) !important;
  box-shadow:var(--am-sh-lg) !important;
}
.am-cinfo__ico{
  flex:0 0 46px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--am-red); border-radius:12px;
}
.am-cinfo__ico .fa{ color:#fff !important; font-size:18px; }
.am-cinfo__txt{ display:flex; flex-direction:column; }
.am-cinfo__txt b{ color:var(--am-dark) !important; font-size:16px !important; margin-bottom:5px; }
.am-cinfo__txt span{ color:var(--am-text) !important; font-size:14.5px !important; line-height:1.5; }
.am-cinfo__txt em{ color:var(--am-gold-dk) !important; font-style:normal; font-size:13px !important; margin-top:5px; }

/* carte Google */
.am-cmap{
  position:relative;
  border:1px solid var(--am-border);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--am-sh);
  background:#fff;
}
.am-cmap iframe{ width:100%; height:280px; border:0; display:block; }
.am-cmap__go{
  display:block; padding:13px 18px;
  color:var(--am-red) !important; font-weight:700 !important; font-size:14px !important;
  text-align:right; border-top:1px solid var(--am-border);
  text-decoration:none !important;
}
.am-cmap__go:hover{ background:var(--am-cream) !important; }

/* formulaire de contact */
html body#contact .page-content,
html body#contact #content-wrapper .card,
html body#contact form{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:16px !important;
  box-shadow:var(--am-sh) !important;
  padding:26px !important;
}
html body#contact .form-control, html body#contact textarea, html body#contact select{
  border:2px solid var(--am-border) !important; border-radius:10px !important;
}
html body#contact .form-control:focus{ border-color:var(--am-red) !important; }

/* liens cliquables du pied de page */
html body .am-footlink{ color:inherit !important; text-decoration:none !important; transition:var(--am-tr) !important; }
html body .am-footlink:hover{ color:var(--am-gold) !important; }
html body .best-copyright address span{ display:inline-block; margin-right:16px; }

@media (max-width:767px){
  .am-cband{ padding:52px 18px 46px; margin-bottom:28px; }
  .am-cmap iframe{ height:220px; }
}

/* ==========================================================================
   PLEINE LARGEUR — mes sections ne dependent plus du .container etroit du theme
   (scope : uniquement .am-cat et .am-mosaic, le reste du site n'est pas touche)
   ========================================================================== */
.am-cat > .container{
  max-width:1560px !important;
  width:100% !important;
  padding-left:clamp(16px,3.5vw,56px) !important;
  padding-right:clamp(16px,3.5vw,56px) !important;
  margin:0 auto !important;
}

.am-cat{ padding:84px 0 56px !important; }

/* Titres plus imposants */
.am-cat__title{ font-size:clamp(34px,4.6vw,60px) !important; }
.am-cat__sub{ font-size:19px !important; }
.am-cat__head{ margin-bottom:56px !important; }

/* Cartes GRANDES */
.am-cat__grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
  gap:26px !important;
}
.am-cat__card{ min-height:340px !important; border-radius:22px !important; }
.am-cat__label{ font-size:22px !important; left:24px !important; bottom:24px !important; }
.am-cat__go{ font-size:15px !important; left:24px !important; bottom:24px !important; }
.am-cat__card:hover .am-cat__label{ transform:translateY(-26px); }

/* Mosaique : pleine largeur et bien plus haute */
.am-mosaic{
  grid-auto-rows:300px !important;
  gap:14px !important;
  margin:80px auto 0 !important;
  max-width:1560px !important;
  width:100% !important;
  padding:0 clamp(16px,3.5vw,56px) !important;
  border-radius:0 !important;
}
.am-mosaic__cell{ border-radius:18px !important; }

@media (max-width:991px){
  .am-cat{ padding:56px 0 32px !important; }
  .am-cat__card{ min-height:250px !important; }
  .am-cat__label{ font-size:18px !important; }
  .am-mosaic{ grid-auto-rows:200px !important; margin-top:48px !important; }
}
@media (max-width:767px){
  .am-cat__grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .am-cat__card{ min-height:170px !important; border-radius:16px !important; }
  .am-cat__label{ font-size:14px !important; left:14px !important; bottom:14px !important; }
  .am-mosaic{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:150px !important; }
}

/* ==========================================================================
   >>> BLOC ELARGISSEMENT <<<
   Si la mise en page casse : SUPPRIMER TOUT CE BLOC (jusqu'a la fin du fichier)
   et vider le cache. Le reste du design est conserve.

   Principe : on n'elargit QUE les .container (de simples enveloppes).
   On ne touche NI aux colonnes (.col-*), NI aux .row, NI au flex.
   ========================================================================== */
@media (min-width:1200px){

  /* Header + footer : sur tout le site */
  html body #header .container,
  html body #footer .container,
  html body #header .best-section-inside,
  html body #footer .best-section-inside{
    max-width:1560px !important;
    width:auto !important;
    padding-left:clamp(16px,3.5vw,56px) !important;
    padding-right:clamp(16px,3.5vw,56px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Contenu : page d'accueil UNIQUEMENT */
  html body#index #wrapper > .container,
  html body#index #content .container,
  html body#index #content .best-section-inside{
    max-width:1560px !important;
    width:auto !important;
    padding-left:clamp(16px,3.5vw,56px) !important;
    padding-right:clamp(16px,3.5vw,56px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ==========================================================================
   MOSAIQUES PLEINE LARGEUR (bord a bord)
   ========================================================================== */
html body{ overflow-x:hidden !important; }   /* evite la barre horizontale */

.am-mosaic{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 !important;
  gap:8px !important;
  border-radius:0 !important;
}
.am-mosaic__cell{ border-radius:0 !important; }

/* Bande 1 : grande mosaique asymetrique */
.am-mosaic--big{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  grid-auto-rows:330px !important;
  margin-top:70px !important;
  margin-bottom:70px !important;
}
.am-mosaic--big .am-mosaic__cell--1{ grid-row:span 2; }
.am-mosaic--big .am-mosaic__cell--3{ grid-row:span 2; }
.am-mosaic--big .am-mosaic__cell--5{ grid-row:span 2; }
.am-mosaic--big .am-mosaic__cell--7{ grid-row:span 2; }

/* Bande 2 : bandeau de 3 photos en bas */
.am-mosaic--strip{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  grid-auto-rows:380px !important;
  margin-top:70px !important;
  margin-bottom:0 !important;
}

@media (max-width:991px){
  .am-mosaic--big{ grid-auto-rows:220px !important; margin-top:44px !important; margin-bottom:44px !important; }
  .am-mosaic--strip{ grid-auto-rows:240px !important; margin-top:44px !important; }
}
@media (max-width:767px){
  .am-mosaic--big{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:160px !important; }
  .am-mosaic--strip{ grid-template-columns:repeat(3,1fr) !important; grid-auto-rows:130px !important; }
}

/* ==========================================================================
   SECTION CATALOGUE : fond mosaique + voile sombre (effet hero)
   ========================================================================== */
.am-cat{
  position:relative !important;
  overflow:hidden !important;
  padding:96px 0 84px !important;
  background:var(--am-dark) !important;
}

/* la mosaique en fond */
.am-cat__bg{
  position:absolute; inset:0; z-index:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:0;
}
.am-cat__bg span{
  display:block;
  background:#2B1710 center/cover no-repeat;
}

/* le voile sombre — meme esprit que le hero */
.am-cat::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(20,10,5,.86) 0%,
    rgba(30,17,9,.80) 45%,
    rgba(20,10,5,.90) 100%);
}

/* le contenu passe au-dessus */
.am-cat > .container{ position:relative; z-index:2; }

/* textes en clair sur le fond sombre */
.am-cat__title{ color:#fff !important; }
.am-cat__title em{ color:var(--am-gold) !important; }
.am-cat__sub{ color:rgba(255,255,255,.82) !important; }
.am-cat__badge{ background:var(--am-gold) !important; color:var(--am-dark) !important; }

/* cartes : contour clair pour se detacher du fond */
.am-cat__card{
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
}
.am-cat__card:hover{
  border-color:var(--am-gold) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}

@media (max-width:767px){
  .am-cat{ padding:56px 0 44px !important; }
  .am-cat__bg{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,1fr); }
}

/* ==========================================================================
   1. BANDE ROUGE entre le hero et la section catalogue
   ========================================================================== */
.am-hero{
  margin-bottom:0 !important;
  border-bottom:12px solid var(--am-red) !important;
}

/* ==========================================================================
   2. PLUS AUCUN BLANC : tout le fond passe en creme
   (les cartes produits restent blanches, pour le contraste)
   ========================================================================== */
html body #wrapper,
html body #main,
html body #content,
html body #content-wrapper,
html body #left-column,
html body .best-area,
html body .best-area-inside,
html body #content .best-section,
html body #content .best-section-inside,
html body #content .best-block,
html body #content .best-block-inside,
html body .page-home,
html body .page-content{
  background-color:var(--am-cream) !important;
}

/* barres de titre grises du theme ("Nouveaux produits", "Produits Phares"...) */
html body .best-title,
html body .title_block,
html body .title_blog,
html body .block_content,
html body .ybc_block_latest,
html body .carousel-wrap,
html body .widget-carousel-title,
html body .widget-image-title{
  background-color:transparent !important;
  border-color:var(--am-border) !important;
}

/* le fil d'ariane gris */
html body .breadcrumb{ background-color:transparent !important; }

/* on protege les zones qui doivent rester sombres / rouges */
html body #header,
html body #header .logo-cart{ background-color:var(--am-red) !important; }
html body #header .best-header-info{ background-color:#1A0F08 !important; }
html body #footer,
html body #footer .best-section,
html body #footer .best-footer-info,
html body #footer .section-brand{ background-color:var(--am-dark) !important; }
html body .best-copyright{ background-color:#150C06 !important; }
html body #newsletter_block_left{
  background:linear-gradient(135deg,var(--am-red),var(--am-red-dark)) !important;
}
html body .am-cat{ background-color:var(--am-dark) !important; }
html body .product-miniature,
html body .product-miniature .caption.product-description,
html body .am-cinfo__card,
html body .am-cmap{ background-color:#fff !important; }

/* ==========================================================================
   HEADER — disposition identique a la maquette React
   ========================================================================== */

/* la bande multicolore du vieux theme */
html body #header{ border-top:none !important; background-image:none !important; }
html body .header-banner{ display:none !important; }

/* --- Barre du haut --- */
html body #header .best-header-info .section-content{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
}
html body #header .box-callphone{
  width:auto !important; max-width:none !important;
  flex:0 0 auto !important; padding:0 !important; margin:0 !important;
}
html body #header .box-callphone p{
  display:flex !important; align-items:center !important; gap:10px !important;
  color:#CBB9A6 !important; font-size:13.5px !important; margin:0 !important;
}
html body .am-sep{ color:rgba(255,255,255,.22) !important; }
html body .am-hours{ color:#CBB9A6 !important; }
html body .am-ship{
  color:var(--am-gold) !important;
  font-size:13.5px !important; font-weight:600 !important;
  white-space:nowrap;
}

/* --- Bandeau rouge --- */
html body .am-hdr{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  width:100% !important;
}
html body .am-hdr .best-block-inside{ padding:0 !important; margin:0 !important; }

/* logo + nom */
html body .am-hdr__logo{
  flex:0 0 auto !important; width:auto !important; max-width:none !important;
  padding:0 !important; margin:0 !important;
}
html body .am-hdr__logo .logo2{
  display:flex !important; align-items:center !important; gap:14px !important;
}
html body .am-hdr__logo img{
  max-height:58px !important; width:auto !important;
  background:#fff !important; border-radius:50% !important; padding:3px !important;
  border:2px solid rgba(255,255,255,.35) !important;
}
html body .am-brand{ display:flex !important; flex-direction:column !important; line-height:1.15; }
html body .am-brand b{
  font-family:var(--am-serif) !important;
  color:var(--am-gold) !important;
  font-size:22px !important; font-weight:800 !important;
}
html body .am-brand em{
  font-style:normal !important;
  color:rgba(255,255,255,.72) !important;
  font-size:10.5px !important; font-weight:600 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
}

/* menu au centre */
html body .am-hdr__nav{
  flex:1 1 auto !important; width:auto !important; max-width:none !important;
  padding:0 !important; margin:0 !important;
  display:flex !important; justify-content:flex-start !important;
}
html body .am-hdr__nav ul{ text-align:left !important; }

/* icones a droite */
html body .am-hdr__icons{
  flex:0 0 auto !important;
  display:flex !important; align-items:center !important; gap:14px !important;
  margin-left:auto !important;
}
html body .am-hdr__icons .best-block,
html body .am-hdr__icons .box-search,
html body .am-hdr__icons .box-userinfo{
  width:auto !important; max-width:none !important;
  padding:0 !important; margin:0 !important; flex:0 0 auto !important;
}
html body .am-hdr__icons #search_query_top{
  width:190px !important;
  background-color:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px 0 0 999px !important;
  color:#fff !important; padding:8px 16px !important; font-size:13.5px !important;
}
html body .am-hdr__icons #search_query_top::placeholder{ color:rgba(255,255,255,.65) !important; }
html body .am-hdr__icons .button-search{
  background-color:var(--am-gold) !important; color:var(--am-dark) !important;
  border:none !important; border-radius:0 999px 999px 0 !important; padding:8px 14px !important;
}
html body .am-hdr__icons .top-login.btn{
  background-color:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#FFF4E4 !important;
  width:40px !important; height:40px !important;
}
html body .am-hdr__icons .top-login.btn:hover{
  background-color:var(--am-gold) !important; color:var(--am-dark) !important;
}

@media (max-width:991px){
  html body .am-hdr{ flex-wrap:wrap !important; gap:12px !important; justify-content:center !important; }
  html body .am-hdr__nav{ order:3; width:100% !important; justify-content:center !important; }
  html body .am-hdr__icons{ margin-left:0 !important; }
  html body .am-brand b{ font-size:18px !important; }
  html body #header .best-header-info .section-content{ flex-wrap:wrap !important; justify-content:center !important; }
  html body .am-ship{ display:none !important; }
}

/* ==========================================================================
   PAGE BLOG (body#ybc_blog_page)
   ========================================================================== */

/* bandeau facon React */
.am-bband{
  background:linear-gradient(115deg,#1E1109 0%,#3A1810 45%,#A32B1F 100%);
  text-align:center;
  padding:74px 20px 66px;
  margin-bottom:44px;
}
.am-bband__badge{
  display:inline-block; background:var(--am-gold); color:var(--am-dark);
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:9px 24px; border-radius:999px; margin-bottom:22px;
}
.am-bband__title{
  font-family:var(--am-serif) !important; color:#fff !important;
  font-size:clamp(30px,4.6vw,54px) !important; font-weight:800 !important;
  line-height:1.12 !important; margin:0 !important;
}
.am-bband__title em{ display:block; font-style:italic; color:var(--am-gold) !important; }

/* fil d'ariane masque (le bandeau le remplace) */
body#ybc_blog_page .breadcrumb{ display:none !important; }

/* cartes d'articles */
body#ybc_blog_page .ybc-blog-list{ list-style:none !important; }
body#ybc_blog_page .ybc-blog-list > li{ margin-bottom:28px !important; }

body#ybc_blog_page .post-wrapper{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  overflow:hidden !important;
  box-shadow:var(--am-sh) !important;
  transition:var(--am-tr) !important;
  height:100%;
}
body#ybc_blog_page .post-wrapper:hover{
  transform:translateY(-6px);
  border-color:var(--am-gold) !important;
  box-shadow:var(--am-sh-lg) !important;
}

body#ybc_blog_page .post-wrapper .ybc_item_img{
  display:block !important; overflow:hidden !important; margin:0 !important;
}
body#ybc_blog_page .post-wrapper .ybc_item_img img{
  width:100% !important; height:210px !important; object-fit:cover !important;
  transition:transform .5s ease !important;
}
body#ybc_blog_page .post-wrapper:hover .ybc_item_img img{ transform:scale(1.06); }

body#ybc_blog_page .ybc-blog-wrapper-content{ padding:20px !important; }
body#ybc_blog_page .ybc_title_block{
  font-family:var(--am-serif) !important; font-weight:800 !important;
  color:var(--am-dark) !important; font-size:20px !important;
  display:block; margin-bottom:10px !important; line-height:1.3 !important;
}
body#ybc_blog_page .ybc_title_block:hover{ color:var(--am-red) !important; }

body#ybc_blog_page .be-label{ color:var(--am-muted) !important; }
body#ybc_blog_page .ybc-blog-categories a{
  color:var(--am-red) !important; font-weight:600 !important; font-size:13px !important;
}
body#ybc_blog_page .ybc-blog-latest-toolbar-views{
  color:var(--am-muted) !important; font-size:12.5px !important;
}
body#ybc_blog_page .blog_description{
  color:var(--am-text) !important; font-size:14.5px !important;
  margin:12px 0 !important; line-height:1.6 !important;
}
body#ybc_blog_page .read_more{
  display:inline-block; color:var(--am-red) !important; font-weight:700 !important;
  font-size:14px !important; text-decoration:none !important;
}
body#ybc_blog_page .read_more::after{ content:" →"; }
body#ybc_blog_page .read_more:hover{ color:var(--am-gold-dk) !important; }

/* colonne laterale */
body#ybc_blog_page .ybc_blog_sidebar .block,
body#ybc_blog_page .ybc-navigation-blog-content > .block{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:18px !important;
  margin-bottom:22px !important;
}
body#ybc_blog_page .ybc-navigation-blog{
  font-family:var(--am-serif) !important; font-weight:800 !important;
  color:var(--am-dark) !important; font-size:22px !important; margin-bottom:16px !important;
}
body#ybc_blog_page .title_blog{
  font-family:var(--am-serif) !important; color:var(--am-dark) !important;
  font-size:17px !important; position:relative; padding-bottom:10px !important;
}
body#ybc_blog_page .title_blog::after{
  content:""; position:absolute; left:0; bottom:0; width:40px; height:3px;
  background:linear-gradient(90deg,var(--am-red),var(--am-gold)); border-radius:3px;
}
body#ybc_blog_page .tree a,
body#ybc_blog_page .ybc_title_block{ transition:var(--am-tr) !important; }
body#ybc_blog_page .tree a{ color:var(--am-text) !important; }
body#ybc_blog_page .tree a:hover{ color:var(--am-red) !important; }
body#ybc_blog_page .blog_view_all, body#ybc_blog_page .view_all_link{
  display:inline-block; background:var(--am-red) !important; color:#fff !important;
  border-radius:999px !important; padding:8px 18px !important;
  font-weight:600 !important; font-size:13px !important; text-decoration:none !important;
  margin-top:10px;
}
body#ybc_blog_page .blog_view_all:hover, body#ybc_blog_page .view_all_link:hover{
  background:var(--am-red-dark) !important;
}
body#ybc_blog_page .ybc-blog-latest-post-content,
body#ybc_blog_page .ybc-blog-popular-content{ padding:8px 0 !important; }
body#ybc_blog_page .ybc_blog_sidebar .ybc_title_block{ font-size:15px !important; }

/* pagination / infos */
body#ybc_blog_page .blog-paggination{
  text-align:center !important; color:var(--am-muted) !important;
  padding:20px 0 !important; font-size:14px !important;
}

@media (max-width:767px){
  .am-bband{ padding:48px 18px 42px; margin-bottom:26px; }
  body#ybc_blog_page .post-wrapper .ybc_item_img img{ height:180px !important; }
}


/* ==========================================================================
   PAGES CATEGORIES (body#category, body#best-sales, body#new-products, body#prices-drop)
   Base : classes vp_spices connues + classes standard PrestaShop 1.7
   ========================================================================== */

/* --- En-tete de categorie --- */
body#category #left-column,
body#category #content-wrapper{ background:transparent !important; }

body#category #js-product-list-header,
body#category .block-category,
body#category #category-description{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:22px 26px !important;
  margin-bottom:26px !important;
}
body#category h1.h1,
body#category .page-title,
body#category #js-product-list-header h1{
  font-family:var(--am-serif) !important;
  color:var(--am-dark) !important;
  font-weight:800 !important;
  font-size:32px !important;
  margin:0 !important;
}

/* --- Barre de tri / nombre de produits --- */
body#category #js-product-list-top,
body#category .products-selection,
body#category .products-sort-order{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:12px 18px !important;
  margin-bottom:22px !important;
}
body#category .total-products p,
body#category .total-products{ color:var(--am-muted) !important; font-weight:600 !important; margin:0 !important; }

body#category .products-sort-order .select-title,
body#category .sort-by-row .select-title,
body#category .up{
  border:1.5px solid var(--am-border) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--am-text) !important;
  padding:8px 16px !important;
}
body#category .products-sort-order .dropdown-menu{
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh-lg) !important;
}
body#category .products-sort-order .dropdown-menu a:hover{
  background:var(--am-cream) !important; color:var(--am-red) !important;
}

/* --- Grille produits (la carte .product-miniature est deja stylee globalement) --- */
body#category #js-product-list .products,
body#category .products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
  gap:24px !important;
}
body#category .product_list.grid li,
body#category .products article{ margin:0 !important; }

/* prix en rouge, deja global mais on renforce dans ce contexte */
body#category .product-price-and-shipping,
body#category .price{ color:var(--am-red) !important; font-weight:700 !important; }

/* bouton "Ajouter au panier" au survol de la carte */
body#category .product-miniature .add-to-cart,
body#category .product-miniature .button.ajax_add_to_cart_button{
  background:var(--am-red) !important; color:#fff !important;
  border:none !important; border-radius:999px !important;
}
body#category .product-miniature .add-to-cart:hover{ background:var(--am-red-dark) !important; }

/* --- Filtres lateraux (recherche a facettes) --- */
body#category #search_filters,
body#category #search_filters_wrapper,
body#category .block-categories{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:20px !important;
}
body#category #search_filters .facet-title,
body#category #search_filters .h6{
  font-family:var(--am-serif) !important;
  color:var(--am-dark) !important; font-weight:800 !important;
  font-size:16px !important;
}
body#category #search_filters .facet .facet-label a{ color:var(--am-text) !important; }
body#category #search_filters .facet .facet-label a:hover{ color:var(--am-red) !important; }
body#category .active_filters{
  background:var(--am-cream) !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
}
body#category .active_filters .filter-block{
  background:var(--am-red) !important; color:#fff !important;
  border-radius:999px !important;
}

/* --- Pagination --- */
body#category .pagination{
  background:transparent !important;
  margin-top:26px !important;
}
body#category .pagination .page-list{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:999px !important;
  box-shadow:var(--am-sh) !important;
  padding:6px !important;
  display:inline-flex !important;
  gap:4px;
}
body#category .pagination .page-list li a,
body#category .pagination .page-list li span{
  border-radius:999px !important;
  color:var(--am-text) !important;
  border:none !important;
  min-width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
}
body#category .pagination .page-list li.current a,
body#category .pagination .page-list li a:hover{
  background:var(--am-red) !important; color:#fff !important; font-weight:700 !important;
}

@media (max-width:767px){
  body#category h1.h1, body#category .page-title{ font-size:24px !important; }
  body#category #js-product-list .products,
  body#category .products{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
}

/* ==========================================================================
   PAGE CATEGORIE : vignettes sous-categories facon "cartes accueil"
   Structure reelle : #subcategories li.col-sm-4 > .card.card-block
                      > a.subcategory-image > img  +  a.subcategory-name
   Scope STRICT sur #subcategories : ne touche JAMAIS #products.
   ========================================================================== */

body#category #subcategories{ margin-bottom:34px !important; }

body#category #subcategories .subcategory-heading{
  font-family:var(--am-serif) !important;
  color:var(--am-dark) !important;
  font-weight:800 !important;
  font-size:26px !important;
  text-align:left !important;
  margin-bottom:22px !important;
}

/* la carte : on retire le style bootstrap "card" et on fait une tuile image */
body#category #subcategories .card.card-block{
  position:relative !important;
  border:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:var(--am-sh) !important;
  padding:0 !important;
  background:#2B1710 !important;
  transition:var(--am-tr) !important;
}
body#category #subcategories .card.card-block:hover{
  transform:translateY(-8px) !important;
  box-shadow:var(--am-sh-lg) !important;
}

/* l'image en plein cadre */
body#category #subcategories .subcategory-image{
  display:block !important;
  margin:0 !important;
  overflow:hidden !important;
  line-height:0 !important;
}
body#category #subcategories .subcategory-image img{
  width:100% !important;
  height:240px !important;
  object-fit:cover !important;
  transition:transform .5s ease !important;
  display:block !important;
}
body#category #subcategories .card.card-block:hover .subcategory-image img{
  transform:scale(1.07) !important;
}

/* voile sombre par-dessus l'image (facon hero) */
body#category #subcategories .subcategory-image::after{
  content:"" !important;
  position:absolute !important; inset:0 !important; z-index:1 !important;
  background:linear-gradient(180deg,rgba(20,10,5,.05) 40%,rgba(20,10,5,.82) 100%) !important;
  transition:var(--am-tr) !important;
  pointer-events:none !important;
}
body#category #subcategories .card.card-block:hover .subcategory-image::after{
  background:linear-gradient(180deg,rgba(163,43,31,.3) 0%,rgba(20,10,5,.9) 100%) !important;
}

/* le titre : on le remonte EN OVERLAY sur l'image, en bas a gauche */
body#category #subcategories .subcategory-name{
  position:absolute !important;
  left:18px !important; bottom:16px !important; z-index:2 !important;
  color:#fff !important;
  font-family:var(--am-sans) !important;
  font-weight:700 !important;
  font-size:18px !important;
  text-align:left !important;
  padding:0 !important; margin:0 !important;
  text-decoration:none !important;
}
body#category #subcategories .subcategory-name:hover{ color:var(--am-gold) !important; }

/* espacement entre les tuiles */
body#category #subcategories ul.row{ margin-left:-11px !important; margin-right:-11px !important; }
body#category #subcategories li[class*="col-"]{ padding:11px !important; margin-bottom:0 !important; }

@media (max-width:767px){
  body#category #subcategories .subcategory-heading{ font-size:21px !important; }
  body#category #subcategories .subcategory-image img{ height:170px !important; }
  body#category #subcategories .subcategory-name{ font-size:15px !important; left:12px !important; bottom:12px !important; }
}

/* ==========================================================================
   PAGE CATEGORIE : REPARER la grille produits (cartes etirees -> grille propre)
   Structure reelle : #js-product-list .products.row > article.product-miniature
   ========================================================================== */
body#category #js-product-list .products,
body#category #js-product-list .products.row{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:22px !important;
  margin:0 !important;
}

/* chaque carte : largeur auto (la grille gere), hauteur qui s'adapte au contenu */
body#category #js-product-list .products .product-miniature,
body#category #js-product-list .products article.product-miniature{
  width:auto !important;
  max-width:none !important;
  float:none !important;
  margin:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}
body#category #js-product-list .product-miniature .thumbnail-container{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  width:100% !important;
  margin:0 !important;
}

/* image : hauteur fixe raisonnable, contenu centre */
body#category #js-product-list .product-image-container{
  background:#fff !important;
  padding:14px !important;
  text-align:center !important;
}
body#category #js-product-list .product-thumbnail img{
  max-height:180px !important;
  width:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
}

/* zone texte : pousse le bas vers le bas */
body#category #js-product-list .product-description{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  padding:14px 16px 18px !important;
}
body#category #js-product-list .product-title{ min-height:42px !important; margin-bottom:6px !important; }

@media (max-width:1199px){
  body#category #js-product-list .products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:767px){
  body#category #js-product-list .products{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  body#category #js-product-list .product-thumbnail img{ max-height:130px !important; }
}

/* ==========================================================================
   FICHE PRODUIT (body#product)
   Structure : #content .row > .col-md-6 (.images-container/.product-cover)
                              + .col-md-6 (.product-information/.product-actions)
   puis .nav-tabs + .tab-content
   ========================================================================== */

body#product #content-wrapper{ background:transparent !important; }

/* carte principale qui englobe image + infos */
body#product #content > .row,
body#product .product-container > .row{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:26px !important;
  margin:0 0 28px 0 !important;
  align-items:flex-start !important;
}

/* --- Colonne image --- */
body#product .images-container{ margin:0 !important; }
body#product .product-cover{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  overflow:hidden !important;
  box-shadow:none !important;
  padding:18px !important;
}
body#product .product-cover img{
  border-radius:8px !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
/* miniatures sous l'image */
body#product .js-qv-mask .product-images li img,
body#product .product-images li img{
  border:2px solid var(--am-border) !important;
  border-radius:8px !important;
  transition:var(--am-tr) !important;
  cursor:pointer;
}
body#product .product-images li img:hover,
body#product .product-images li.selected img{
  border-color:var(--am-red) !important;
}

/* --- Colonne infos --- */
body#product h1.h1,
body#product .product-information h1,
body#product .page-title{
  font-family:var(--am-serif) !important;
  color:var(--am-dark) !important;
  font-weight:800 !important;
  font-size:34px !important;
  margin:0 0 12px !important;
}
body#product .product-description-short,
body#product #product-description-short-144,
body#product [id^="product-description-short"]{
  color:var(--am-muted) !important;
  font-size:16px !important;
  margin-bottom:20px !important;
}

/* zone prix (prete pour quand les prix arriveront) */
body#product .product-prices,
body#product .product-price,
body#product .current-price{
  color:var(--am-red) !important;
}
body#product .product-price .current-price,
body#product .current-price span{
  font-family:var(--am-sans) !important;
  font-weight:800 !important;
  font-size:32px !important;
  color:var(--am-red) !important;
}

/* bloc actions (quantite + panier) */
body#product .product-actions{
  border-top:1px solid var(--am-border) !important;
  padding-top:20px !important;
  margin-top:6px !important;
}
body#product .product-quantity .qty .input-group,
body#product #quantity_wanted{
  border-radius:10px !important;
}
body#product #quantity_wanted{
  border:2px solid var(--am-border) !important;
  text-align:center !important;
}
body#product .product-add-to-cart .add-to-cart,
body#product .btn-add-to-cart,
body#product #add-to-cart-or-refresh .add-to-cart{
  background:var(--am-red) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:700 !important;
  padding:14px 34px !important;
  font-size:16px !important;
  transition:var(--am-tr) !important;
}
body#product .product-add-to-cart .add-to-cart:hover{
  background:var(--am-red-dark) !important;
  box-shadow:0 8px 22px rgba(163,43,31,.35) !important;
}

/* bloc "réassurance" (livraison, paiement securise...) */
body#product .blockreassurance_product{
  background:var(--am-cream) !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  padding:16px !important;
  margin-top:20px !important;
}
body#product .blockreassurance_product .block-title{ color:var(--am-dark) !important; font-weight:600 !important; }
body#product .blockreassurance_product svg path{ fill:var(--am-red) !important; }

/* lien "Cliquez-ici pour plus d'info" (le texte actuel) */
body#product .product-information a{ color:var(--am-red) !important; font-weight:600 !important; }

/* --- Onglets description --- */
body#product .product-tabs,
body#product .tabs{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:24px !important;
}
body#product .nav-tabs{ border-bottom:2px solid var(--am-border) !important; }
body#product .nav-tabs .nav-link{
  color:var(--am-muted) !important;
  border:none !important;
  font-weight:600 !important;
  font-family:var(--am-sans) !important;
}
body#product .nav-tabs .nav-link.active{
  color:var(--am-red) !important;
  background:transparent !important;
  border-bottom:3px solid var(--am-red) !important;
}
body#product .tab-content{ padding-top:18px !important; color:var(--am-text) !important; line-height:1.7 !important; }
body#product .product-description p{ color:var(--am-text) !important; }

/* produits associes / accessoires en bas */
body#product .featured-products .product-miniature,
body#product .product-accessories .product-miniature{ background:#fff !important; }

@media (max-width:767px){
  body#product #content > .row,
  body#product .product-container > .row{ padding:16px !important; }
  body#product h1.h1, body#product .product-information h1{ font-size:26px !important; }
}

/* ==========================================================================
   PAGE CATEGORIE : bandeau photo + pastilles sous-rayons (facon React)
   ========================================================================== */

/* --- Bandeau photo --- */
.am-catband{
  position:relative;
  min-height:230px;
  display:flex; align-items:center;
  background:linear-gradient(135deg,#2B1710,#7E1F16);
  background-size:cover !important;
  background-position:center !important;
  margin-bottom:0 !important;
  overflow:hidden;
}
.am-catband::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,10,5,.82) 0%,rgba(20,10,5,.5) 60%,rgba(20,10,5,.35) 100%);
}
.am-catband__inner{
  position:relative; z-index:2;
  max-width:1320px; width:100%;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}
.am-catband__crumb{
  color:rgba(255,255,255,.72) !important;
  font-size:13.5px !important;
  margin-bottom:10px !important;
}
.am-catband__title{
  font-family:var(--am-serif) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(32px,4.5vw,52px) !important;
  margin:0 !important;
  line-height:1.05 !important;
}
.am-catband__count{
  color:var(--am-gold) !important;
  font-size:15px !important;
  font-weight:600 !important;
  margin-top:8px !important;
}

/* --- Sous-rayons en pastilles --- */
body#category #subcategories,
body#category .subcategories{
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid var(--am-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:16px 0 !important;
  margin-bottom:22px !important;
}
body#category #subcategories .subcategory-heading{
  display:inline-block !important;
  font-family:var(--am-sans) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--am-muted) !important;
  margin:0 12px 0 0 !important;
  vertical-align:middle;
}
body#category #subcategories ul{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  list-style:none !important;
  padding:0 !important; margin:0 !important;
  vertical-align:middle;
}
body#category #subcategories li{
  margin:0 !important; padding:0 !important; float:none !important; width:auto !important;
}
/* on annule le style "carte image" au profit d'une pastille */
body#category #subcategories .card.card-block{
  background:transparent !important;
  border:none !important; box-shadow:none !important; padding:0 !important;
  transform:none !important;
}
body#category #subcategories .subcategory-image{ display:none !important; }
body#category #subcategories .subcategory-image::after{ display:none !important; }
body#category #subcategories .subcategory-name{
  position:static !important;
  display:inline-block !important;
  background:var(--am-cream) !important;
  border:1.5px solid var(--am-border) !important;
  color:var(--am-text) !important;
  border-radius:999px !important;
  padding:8px 18px !important;
  font-size:14px !important; font-weight:600 !important;
  transition:var(--am-tr) !important;
  left:auto !important; bottom:auto !important;
}
body#category #subcategories .subcategory-name:hover{
  background:var(--am-red) !important;
  border-color:var(--am-red) !important;
  color:#fff !important;
}

/* --- Barre recherche + tri --- */
body#category #js-product-list-top,
body#category .products-selection{
  background:#fff !important;
  border:1px solid var(--am-border) !important;
  border-radius:var(--am-r) !important;
  box-shadow:var(--am-sh) !important;
  padding:14px 18px !important;
  margin-bottom:24px !important;
  align-items:center !important;
}

@media (max-width:767px){
  .am-catband{ min-height:150px; }
  body#category #subcategories .subcategory-heading{ display:block !important; margin-bottom:10px !important; }
}

/* ==========================================================================
   PAGE CATEGORIE : pleine largeur (comme le React) + barre sous-rayons affinee
   ========================================================================== */

/* masquer la colonne laterale et passer en pleine largeur */
body#category #left-column{ display:none !important; }
body#category #content-wrapper,
body#category #content-wrapper.col-xs-12{
  flex:0 0 100% !important;
  max-width:100% !important;
  width:100% !important;
}

/* barre sous-rayons : centree, une ligne, sans cadre lourd */
body#category #subcategories,
body#category .subcategories{
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid var(--am-border) !important;
  box-shadow:none !important;
  padding:14px 0 !important;
  margin:0 0 24px 0 !important;
  text-align:center !important;
}
body#category #subcategories .subcategory-heading{
  display:inline-block !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--am-muted) !important;
  margin:0 8px 0 0 !important;
}
/* on renomme visuellement "Subcategories" -> "Sous-rayons :" n'est pas possible en CSS,
   donc on garde le heading mais on l'aligne; si le theme met "Subcategories",
   c'est le libelle du theme (modifiable en trad, pas en CSS) */
body#category #subcategories ul{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
  vertical-align:middle !important;
}


/* ==========================================================================
   "Prix en magasin" : petit badge dore (cosmetique uniquement, aucun layout)
   Scope : cartes produits + fiche produit. Propriedes sures (couleur/fond).
   ========================================================================== */
body#category .product-miniature .product-price-and-shipping,
body#category .product-miniature .price,
body#product .product-price-and-shipping,
body#product .product-prices .price{
  display:inline-block !important;
  background:var(--am-cream) !important;
  color:var(--am-gold-dk) !important;
  border:1px solid var(--am-gold) !important;
  border-radius:999px !important;
  padding:4px 12px !important;
  font-family:var(--am-sans) !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  letter-spacing:.02em !important;
  line-height:1.3 !important;
}
/* sur la fiche produit, un peu plus grand */
body#product .product-prices .price,
body#product .product-price-and-shipping{
  font-size:15px !important;
  padding:8px 18px !important;
}