/* =========================================================
   CCX — PRODUCT PAGE (PDP) — CLEAN & STABLE
   - Scoped: ne touche pas au header
   - Mobile order stable: Titre -> MAJ -> Image -> Offres
   - Compatible Divi (écrase les couleurs uniquement dans .ccx-product-page)
   ========================================================= */

/* ============ 0) Page background (extérieur des cards) ============ */
body.single-product{
  background: #f5f6f8 !important;
}

/* ============ 1) Variables + scope anti-Divi ============ */
body.single-product #page-container #main-content .ccx-product-page,
body.single-product #page-container #et-main-area .ccx-product-page{
  --ccx-card: rgba(17,21,27,.94);
  --ccx-card2: rgba(23,29,38,.88);
  --ccx-line: rgba(255,255,255,.10);
  --ccx-text: #f5f7fb;
  --ccx-muted:#a4adbb;
  --ccx-accent:#00ff6a;
  --ccx-orange:#ff7a00;

  --ccx-radius: 22px;
  --ccx-radius-sm: 18px;
  --ccx-shadow: 0 24px 70px rgba(0,0,0,.55);

  color: var(--ccx-text) !important;
}

/* Empêche Divi de recolorer en noir/blanc n’importe où DANS la PDP CCX */
body.single-product #page-container #main-content .ccx-product-page :is(p,li,span,strong,em,small,div){
  color: inherit !important;
}
body.single-product #page-container #main-content .ccx-product-page :is(h1,h2,h3,h4,h5,h6){
  color: var(--ccx-text) !important;
}
body.single-product #page-container #main-content .ccx-product-page a{
  color: var(--ccx-accent) !important;
  text-decoration: none;
}
body.single-product #page-container #main-content .ccx-product-page a:hover{
  color: var(--ccx-orange) !important;
  text-decoration: underline;
}

/* ============ 2) Container ============ */
.ccx-product-page{
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  box-sizing: border-box;
}

@media (max-width: 980px){
  .ccx-product-page{ padding: 28px 16px 64px; }
}

/* ============ 3) HERO card + grid ============ */
.ccx-product-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media summary";
  gap: 56px;
  align-items: start;

  background: linear-gradient(180deg, var(--ccx-card), var(--ccx-card2)) !important;
  border: 1px solid var(--ccx-line) !important;
  border-radius: var(--ccx-radius) !important;
  box-shadow: var(--ccx-shadow) !important;
  padding: 18px !important;

  margin-bottom: 26px !important;
}

.ccx-product-hero > *{
  min-width: 0 !important; /* anti overflow grid */
}

.ccx-product-media{ grid-area: media; }
.ccx-product-summary{ grid-area: summary; }

/* TABLET : 2 colonnes + compact */
@media (max-width: 1141px){
  .ccx-product-hero{
    grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr);
    gap: 28px;
    border-radius: var(--ccx-radius-sm) !important;
  }
}

/* MOBILE : 1 colonne, IMAGE AU DESSUS (plus de colonne implicite) */
@media (max-width: 980px){
  .ccx-product-hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "summary";
    gap: 22px;
  }
}

@media (max-width: 640px){
  .ccx-product-media .ccx-pdp-frame{
    aspect-ratio: 4 / 3;
  }
}



/* ============ 4) Titre + badge mise à jour ============ */
.ccx-product-title{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 6px !important;
}

body.single-product .ei_last_updated.ccx-pdp-updated{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;

  margin: 8px 0 14px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px);

  color: rgba(245,247,251,.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
body.single-product .ei_last_updated.ccx-pdp-updated::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--ccx-accent);
  box-shadow:0 0 0 3px rgba(0,255,106,.18);
}

/* Supprime “Détails” (Content Egg) */
#ei-disclaimer{ display:none !important; }

/* ============ 5) Zone image (uniforme, premium, jamais coupée) ============ */
.ccx-product-media{
  position: relative;
}

/* Frame carré premium */
.ccx-product-media .ccx-pdp-frame{
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;

  background: #fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

/* Image dedans */
.ccx-product-media .ccx-pdp-frame .ccx-pdp-mainimg,
.ccx-product-media .ccx-pdp-mainimg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Placeholder si pas d'image */
.ccx-product-media .ccx-pdp-placeholder{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.06) 10px,
    rgba(255,255,255,.03) 10px,
    rgba(255,255,255,.03) 20px
  );
}

/* Badge promo Woo (si présent) — visible (PAS de display:none ici) */
body.single-product.woocommerce div.product span.onsale,
body.single-product.woocommerce-page div.product span.onsale,
body.single-product div.product span.onsale{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 50 !important;

  background: linear-gradient(180deg,#22c55e,#10b981) !important;
  color: #fff !important;

  border: 0 !important;
  border-radius: 999px !important;

  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  box-shadow: 0 10px 22px rgba(16,185,129,.35) !important;
  text-transform: none !important;
}
body.single-product div.product span.onsale::before,
body.single-product div.product span.onsale::after{
  display:none !important;
  content:none !important;
}

/* ============ 6) Prix Woo éventuel dans le hero ============ */
body.single-product .ccx-product-hero .price,
body.single-product .ccx-product-hero .woocommerce-Price-amount{
  color: var(--ccx-orange) !important;
  font-weight: 900 !important;
}
body.single-product .ccx-product-hero del .woocommerce-Price-amount{
  color: var(--ccx-muted) !important;
}

/* Si tu as un prix isolé au-dessus des offres */
body.single-product .ccx-product-price{
  display:none !important;
}

/* ============ 7) Description en card premium ============ */
body.single-product .ccx-product-content{
  background: linear-gradient(180deg, var(--ccx-card), var(--ccx-card2)) !important;
  border: 1px solid var(--ccx-line) !important;
  border-radius: var(--ccx-radius) !important;
  box-shadow: var(--ccx-shadow) !important;
  padding: 18px !important;

  margin-top: 10px !important;
  color: rgba(245,247,251,.88) !important;
}
body.single-product .ccx-product-content :is(h1,h2,h3,h4,h5,h6){
  color: var(--ccx-text) !important;
}
body.single-product .ccx-product-content :is(p,li){
  color: inherit !important;
}

@media (max-width: 980px){
  body.single-product .ccx-product-content{
    border-radius: var(--ccx-radius-sm) !important;
  }
}


/* =========================================================
   FIX IMAGE PDP : l'image reste toujours entière (jamais coupée)
   ========================================================= */

.ccx-product-media .ccx-pdp-frame{
  /* on force un vrai "cadre" avec une hauteur calculable */
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;      /* cadre carré comme sur ta maquette */
  height: auto !important;

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

  padding: 14px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
  background: #fff !important;
  border-radius: 18px !important;
}

/* l'image doit remplir le cadre -> object-fit contain fait le job */
.ccx-product-media .ccx-pdp-frame img.ccx-pdp-mainimg,
.ccx-product-media img.ccx-pdp-mainimg{
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}


/* ============ Galerie AWIN (miniatures) ============ */
.ccx-pdp-thumbs{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 640px){
  .ccx-pdp-thumbs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ccx-pdp-thumb{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.ccx-pdp-thumb img{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}

.ccx-pdp-thumb.is-active{
  border-color: rgba(0,255,106,.55);
  box-shadow: 0 0 0 3px rgba(0,255,106,.18), 0 10px 22px rgba(0,0,0,.28);
}


/* ============ Specs (Caractéristiques) ============ */
.ccx-pdp-specs{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.ccx-pdp-specs__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ccx-text) !important;
}

.ccx-pdp-specs__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ccx-pdp-specs__table th{
  width: 44%;
  text-align: left;
  padding: 8px 10px;
  vertical-align: top;
  font-weight: 700;
  color: rgba(245,247,251,.78) !important;
}

.ccx-pdp-specs__table td{
  padding: 8px 10px;
  vertical-align: top;
  color: rgba(245,247,251,.92) !important;
}

.ccx-pdp-specs__table tr+tr th,
.ccx-pdp-specs__table tr+tr td{
  border-top: 1px solid rgba(255,255,255,.10);
}











/* PDP: titre au-dessus de l'image + badge mise à jour dessous */
.ccx-pdp-head{
  text-align:center;
  margin-bottom:12px;
}

.ccx-pdp-title{
  margin:0;
  font-weight:800;
  letter-spacing:-.2px;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height:1.15;
}

.ccx-pdp-updated{
  margin-top:10px;
  display:flex;
  justify-content:center;
}








/* =========================================================
   CCX — Fond du cadre image = même ambiance que la carte offers
   ========================================================= */
.ccx-product-media .ccx-pdp-frame{
  background: var(--ccx-card) !important;   /* comme les cards */
  border: 1px solid var(--ccx-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  /* centre bien l’image dans le cadre */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* petit padding pour éviter que l’image colle aux bords */
  padding: 12px !important;
}

/* l’image elle-même ne doit jamais “poser” un fond */
.ccx-product-media img.ccx-pdp-mainimg{
  background: transparent !important;
}