/* =========================================================
   Iliade Digital — Single Product (WooCommerce) — Premium
   File: /assets/css/single-product.css
   Dépendances: variables.css + styles.css
   Scope: .wpz-sp
   ========================================================= */

.wpz-sp{
  background: var(--bg);
}

/* Container aligné sur ton système (container + gutter) */
.wpz-sp .wpz-sp-wrap{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 24px 48px;
}

/* Grid */
.wpz-sp .wpz-sp-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .wpz-sp .wpz-sp-grid{ grid-template-columns: 1fr; }
}

/* Cards base (évite doublon avec .il-card mais sans dépendre d'elle) */
.wpz-sp .wpz-sp-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
}

/* HERO */
.wpz-sp .wpz-sp-hero{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wpz-sp .wpz-sp-hero__inner{
  padding: 18px;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

@media (max-width: 720px){
  .wpz-sp .wpz-sp-hero__inner{
    grid-template-columns: 1fr;
  }
}

.wpz-sp .wpz-sp-hero__media img{
  width: 100%;
  border-radius: var(--r-16);
  border: 1px solid var(--line);
  background: var(--surface);
}

.wpz-sp .wpz-sp-thumb-fallback{
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  min-height: 160px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
}

.wpz-sp .wpz-sp-title{
  margin: 0;
  font-family: var(--font-head);
  line-height: 1.12;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.02em;
}

.wpz-sp .wpz-sp-short{
  margin-top: 10px;
}
.wpz-sp .woocommerce-product-details__short-description p{
  margin-bottom: 10px;
}

/* Badges */
.wpz-sp .wpz-sp-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.wpz-sp .wpz-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--pill-soft-brd);
  background: var(--pill-soft-bg);
  color: var(--text);
  font-weight: 800;
  font-size: var(--fs-14);
}

/* Links row (hero) */
.wpz-sp .wpz-sp-links{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Meta line */
.wpz-sp .wpz-sp-meta{
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--fs-14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.wpz-sp .wpz-sp-meta strong{ color: var(--text); }
.wpz-sp .wpz-sp-meta__sep{ margin-left: 0; }

/* Sidebar (sticky) */
.wpz-sp .wpz-sp-side{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  position: sticky;
  top: 16px;
}

@media (max-width: 980px){
  .wpz-sp .wpz-sp-side{ position: relative; top: auto; }
}

/* Price */
.wpz-sp .wpz-sp-side .price{
  margin: 2px 0 10px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 32px);
  color: var(--text);
}
.wpz-sp .wpz-sp-side .price del{ opacity: .6; }
.wpz-sp .wpz-sp-side .price ins{ text-decoration: none; }

/* CTA row */
.wpz-sp .wpz-side-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Harmonisation des boutons WooCommerce DANS .wpz-sp
   (sans casser le reste du site) */
.wpz-sp a.button,
.wpz-sp button.button,
.wpz-sp .button{
  height: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: var(--btn-r);
  border: 1px solid transparent;
  font-weight: 900;
  font-family: var(--font-head);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wpz-sp a.button:active,
.wpz-sp button.button:active,
.wpz-sp .button:active{ transform: translateY(1px); }

/* Primary buy button */
.wpz-sp .wpz-sp-buy,
.wpz-sp .wpz-sp-buy.button,
.wpz-sp a.wpz-sp-buy.button{
  background: var(--brand-green);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(23, 160, 81, .20);
}
@media (hover:hover){
  .wpz-sp .wpz-sp-buy:hover{
    box-shadow: 0 16px 34px rgba(23, 160, 81, .26);
  }
}

/* Secondary ghost button */
.wpz-sp .wpz-sp-ghost,
.wpz-sp .wpz-sp-ghost.button{
  background: transparent;
  border-color: var(--line-2);
  color: var(--text);
}
@media (hover:hover){
  .wpz-sp .wpz-sp-ghost:hover{
    border-color: var(--brand-green);
    color: var(--brand-green);
    background: rgba(23,160,81,.06);
  }
}

/* Side blocks */
.wpz-sp .wpz-sp-side-block{
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.wpz-sp .wpz-sp-side-title{
  font-family: var(--font-head);
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--text);
}
.wpz-sp .wpz-sp-side-info{
  color: var(--muted);
  font-size: var(--fs-14);
  line-height: 1.6;
}
.wpz-sp .wpz-sp-side-links{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Tabs */
.wpz-sp .wpz-tabs{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wpz-sp .wpz-tabs__nav{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-bg);
}

.wpz-sp .wpz-tabbtn{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wpz-sp .wpz-tabbtn:active{ transform: translateY(1px); }

.wpz-sp .wpz-tabbtn.is-active{
  border-color: rgba(23,160,81,.35);
  box-shadow: var(--focus);
}

.wpz-sp .wpz-tabs__panel{
  display:none;
  padding: 14px;
}
.wpz-sp .wpz-tabs__panel.is-active{ display:block; }

/* Key/Value grid */
.wpz-sp .wpz-kv{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .wpz-sp .wpz-kv{ grid-template-columns: 1fr; }
}
.wpz-sp .wpz-kv__item{
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  padding: 10px;
  background: var(--surface);
}
.wpz-sp .wpz-kv__k{
  font-size: var(--fs-12);
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 900;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.wpz-sp .wpz-kv__v{
  font-weight: 900;
  color: var(--text);
}

/* Lists (scopé pour éviter doublons WP) */
.wpz-sp .wpz-list{
  margin: 0;
  padding-left: 1.1em;
}
.wpz-sp .wpz-list li{ margin: 8px 0; }

/* Changelog */
.wpz-sp .wpz-sp-changelog-item{
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  padding: 12px;
  margin: 0 0 10px;
  background: var(--surface);
}
.wpz-sp .wpz-sp-changelog-title{
  font-weight: 900;
  font-family: var(--font-head);
  margin-bottom: 8px;
}
.wpz-sp .wpz-sp-changelog-date{
  color: var(--muted);
  font-size: var(--fs-14);
  margin-bottom: 8px;
}

/* Reviews spacing */
.wpz-sp .wpz-sp-reviews{
  margin-top: 14px;
}

/* WooCommerce reviews: limiter débordements, garder clean */
.wpz-sp .woocommerce-Reviews,
.wpz-sp #reviews{
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}






/* =========================================================
   Woo Gallery block (between hero and tabs)
   ========================================================= */
.wpz-sp .wpz-sp-gallery{
  margin-top: 14px;
}

.wpz-sp .wpz-sp-gallery__card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wpz-sp .wpz-sp-gallery__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-bg);
}

.wpz-sp .wpz-sp-gallery__title{
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--text);
}

.wpz-sp .wpz-sp-gallery__body{
  padding: 14px;
}

/* WooCommerce gallery styling (scoped) */
.wpz-sp .wpz-sp-gallery__body .woocommerce-product-gallery{
  margin: 0;
}

.wpz-sp .wpz-sp-gallery__body .woocommerce-product-gallery__wrapper{
  margin: 0;
}

/* Thumbnails spacing */
.wpz-sp .wpz-sp-gallery__body .flex-control-nav{
  margin: 12px 0 0;
  padding: 0;
}

/* Prevent overflow on small screens */
.wpz-sp .wpz-sp-gallery__body .woocommerce-product-gallery,
.wpz-sp .wpz-sp-gallery__body .woocommerce-product-gallery__image{
  max-width: 100%;
}


/* =========================================================
   WooCommerce Gallery — 1 grande image + thumbs en grille
   Scope: .wpz-sp
   ========================================================= */

/* S'assure que la galerie prend toute la largeur */
.wpz-sp .woocommerce-product-gallery{
  width: 100%;
  margin: 0;
}

/* Grande image : card premium */
.wpz-sp .woocommerce-product-gallery__image{
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface);
}

.wpz-sp .woocommerce-product-gallery__image img{
  width: 100%;
  height: auto;
  display: block;
}

/* === THUMBNAILS : la vraie "galerie" Woo === */
.wpz-sp .flex-control-nav.flex-control-thumbs{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Chaque thumb */
.wpz-sp .flex-control-nav.flex-control-thumbs li{
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}

/* Image thumb : carré propre */
.wpz-sp .flex-control-nav.flex-control-thumbs img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  opacity: 1 !important;
  border: 0 !important;
}

/* Thumb active */
.wpz-sp .flex-control-nav.flex-control-thumbs li.flex-active,
.wpz-sp .flex-control-nav.flex-control-thumbs img.flex-active{
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(23,160,81,.35);
}

/* Hover premium */
@media (hover:hover){
  .wpz-sp .flex-control-nav.flex-control-thumbs li:hover{
    border-color: rgba(23,160,81,.35);
    box-shadow: var(--shadow-sm);
  }
}

/* Desktop only (pour l'instant) */
@media (max-width: 980px){
  .wpz-sp .flex-control-nav.flex-control-thumbs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* =========================================================
   FIX MOBILE — Tabs: pas de coupe, scroll horizontal
   ========================================================= */
@media (max-width: 720px){

  /* Autorise la nav à scroller au lieu d'être coupée */
  .wpz-sp .wpz-tabs__nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 10px 12px;
  }

  /* Chaque bouton devient "non compressible" */
  .wpz-sp .wpz-tabbtn{
    flex: 0 0 auto;
  }

  /* Bonus: masquer la scrollbar (sans casser le scroll) */
  .wpz-sp .wpz-tabs__nav::-webkit-scrollbar{ height: 0; }
}

/* Option wrap: éviter que le parent coupe les tabs */
.wpz-sp .wpz-tabs{ overflow: visible; }

/* =========================================================
   SAFETY — Empêcher les débordements dans les contenus
   ========================================================= */
.wpz-sp .wpz-tabs__panel *{
  max-width: 100%;
}

.wpz-sp .wpz-tabs__panel img,
.wpz-sp .wpz-tabs__panel video,
.wpz-sp .wpz-tabs__panel iframe{
  max-width: 100%;
  height: auto;
}

.wpz-sp .wpz-tabs__panel{
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* =========================================================
   FIX SAFE — Woo Reviews / Comment form overflow (mobile+desktop)
   Scope: .wpz-sp uniquement
   Objectif: AUCUN champ / contenu ne doit dépasser
   ========================================================= */

/* 1) Ceinture globale anti scroll-x parasite */
.wpz-sp,
.wpz-sp .wpz-sp-wrap,
.wpz-sp .wpz-sp-grid,
.wpz-sp .wpz-sp-main,
.wpz-sp .wpz-sp-side{
  max-width: 100%;
}
.wpz-sp{ overflow-x: clip; } /* mieux que hidden (quand supporté) */
@supports not (overflow: clip){
  .wpz-sp{ overflow-x: hidden; }
}

/* 2) Dans la zone Reviews, tout élément doit pouvoir "rétrécir" */
.wpz-sp #reviews,
.wpz-sp .woocommerce-Reviews{
  min-width: 0;
}
.wpz-sp #reviews * ,
.wpz-sp .woocommerce-Reviews *{
  min-width: 0; /* crucial contre les débordements en flex/grid */
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) Champs du formulaire: width 100% + pas de min-width + pas de débordement */
.wpz-sp #reviews input[type="text"],
.wpz-sp #reviews input[type="email"],
.wpz-sp #reviews input[type="url"],
.wpz-sp #reviews input[type="tel"],
.wpz-sp #reviews input[type="number"],
.wpz-sp #reviews input[type="search"],
.wpz-sp #reviews textarea,
.wpz-sp #review_form input[type="text"],
.wpz-sp #review_form input[type="email"],
.wpz-sp #review_form input[type="url"],
.wpz-sp #review_form textarea,
.wpz-sp .comment-respond input[type="text"],
.wpz-sp .comment-respond input[type="email"],
.wpz-sp .comment-respond input[type="url"],
.wpz-sp .comment-respond textarea{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block;
}

/* 4) Sécurité: les très longues chaînes (URL, emails, tokens) doivent casser */
.wpz-sp #reviews,
.wpz-sp #reviews .commentlist,
.wpz-sp #reviews .comment-text,
.wpz-sp #reviews .description,
.wpz-sp #reviews .comment-text p,
.wpz-sp #reviews .comment-text a,
.wpz-sp #reviews .comment-text code,
.wpz-sp #reviews .comment-text pre{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) pre/code (souvent responsables du scroll horizontal) */
.wpz-sp #reviews pre{
  white-space: pre-wrap;
  overflow-x: auto; /* si vraiment nécessaire, scroll interne seulement */
  max-width: 100%;
}
.wpz-sp #reviews code{
  word-break: break-word;
}

/* 6) Layout Woo "form-row" parfois en 2 colonnes => on sécurise le wrap */
.wpz-sp #reviews .comment-form,
.wpz-sp #review_form .comment-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 7) Boutons: éviter qu’ils débordent par texte trop long */
.wpz-sp #reviews .form-submit,
.wpz-sp #reviews .comment-form-cookies-consent{
  max-width: 100%;
}
.wpz-sp #reviews input[type="submit"],
.wpz-sp #reviews button,
.wpz-sp #reviews .button{
  max-width: 100%;
  white-space: normal; /* autorise retour à la ligne si besoin */
}

.wpz-sp .wpz-sp-reviews__inner{ min-width: 0; max-width: 100%; }

/* Safety global contenu sur la page produit */
.wpz-sp .wpz-sp-main *{
  max-width: 100%;
}
.wpz-sp .wpz-sp-main img,
.wpz-sp .wpz-sp-main iframe,
.wpz-sp .wpz-sp-main video{
  max-width: 100%;
  height: auto;
}
.wpz-sp .wpz-sp-main{
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}