/*
 Theme Name: Pop Artelier Shop
 Theme URI: https://exemple.com
 Author: Elodie GONZALES
 Author URI: https://exemple.com
 Description: Thème personnalisé pour la boutique Pop Artelier
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: popartelier-shop
*/

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #ffffff;
  color: #1f2933;
}

/* Conteneur centré */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================
   HEADER
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #ffe4f5;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.site-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f472b6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
}

.site-logo-text {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #f472b6, #a855f7);
  -webkit-background-clip: text;
  color: transparent;
}

/* Menu principal */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .main-menu {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Liens du menu de premier niveau */
.site-nav .main-menu > li > a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  padding: 8px 4px;
  display: inline-block;
}

.site-nav .main-menu > li > a:hover {
  color: #ec4899;
}

/* Sous-menus */
.site-nav .main-menu li {
  position: relative;
}

.site-nav .main-menu li .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #ffe4f5;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  display: none;
  z-index: 100;
}

/* Affichage au survol */
.site-nav .main-menu li:hover > .sub-menu {
  display: block;
}

/* Empêcher le clic sur les parents de sous-menu (comme "À propos") */
.site-nav .main-menu > li.menu-item-has-children > a[href="#"] {
  pointer-events: none;
  cursor: default;
}

/* Liens du sous-menu */
.site-nav .main-menu .sub-menu li a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #4b5563;
  text-decoration: none;
}

.site-nav .main-menu .sub-menu li a:hover {
  background: #fdf2f8;
  color: #ec4899;
}

/* Barre d'annonce */
.announcement-bar {
  background: linear-gradient(90deg, #f472b6, #c084fc, #f472b6);
  color: white;
  text-align: center;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
}

/* =========================
   HERO HOME
   ========================= */

.home-main {
  padding-top: 0;
}

.hero {
  padding: 40px 0 40px;
  background: radial-gradient(circle at top left, #fce7f3 0, transparent 60%),
              radial-gradient(circle at bottom right, #e0f2fe 0, transparent 55%),
              #ffffff;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

/* Bloc texte */
.hero-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ec4899;
  font-weight: 600;
  margin-bottom: 8px;
}

.hero-title {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #111827;
}

.hero-title span {
  background: linear-gradient(90deg, #f472b6, #a855f7);
  -webkit-background-clip: text;
  color: transparent;
}

.hero-text {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(90deg, #f472b6, #a855f7);
  color: #ffffff;
  border-color: transparent;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  background: #ffffff;
  color: #ec4899;
  border-color: #fecdd3;
}

.btn-ghost:hover {
  background: #fdf2f8;
}

.hero-note {
  font-size: 12px;
  color: #6b7280;
}

/* Bloc visuel */
.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-visual-card {
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid #fecdd3;
  position: relative;
}

.hero-visual-badge {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfccb;
  color: #4d7c0f;
  font-weight: 600;
}

.hero-visual-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  background: linear-gradient(135deg, #f9a8d4, #a855f7, #38bdf8);
  margin-bottom: 12px;
}

.hero-visual-text {
  font-size: 12px;
  color: #6b7280;
}

/* Section contenu sous le hero */
.home-content {
  padding: 24px 0 40px;
}

/* Responsive hero */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hero {
    padding: 24px 0 32px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-visual-card {
    max-width: 260px;
  }
}

/* =========================
   SECTIONS CATEGORIES HOME
   ========================= */

.home-category-section {
  padding: 32px 0 36px;
  background: #ffffff;
}

.home-category-section.alt {
  background: #fdf2ff;
}

.home-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.home-category-header h2 {
  font-size: 20px;
  margin: 0;
  color: #111827;
}

.home-category-seeall {
  font-size: 13px;
  color: #ec4899;
  text-decoration: none;
  font-weight: 600;
}

.home-category-seeall:hover {
  text-decoration: underline;
}

/* Grille de produits */
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .product-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Card produit */
.product-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffe4f5;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
}

/* Image + overlay */
.product-card-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.product-card-image {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.25s ease;
  object-fit: cover;
}

.product-card-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(
    135deg,
    #fee2e2,
    #fee2e2 10px,
    #fef2f2 10px,
    #fef2f2 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #9ca3af;
}

.product-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,23,42,0) 40%, rgba(15,23,42,0.6));
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  transition: opacity 0.2s ease;
}

.product-card-details-btn {
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* Effet au survol : zoom + overlay */
.product-card:hover .product-card-image {
  transform: scale(1.05);
}

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

/* Infos produit */
.product-card-info {
  padding: 8px 10px 10px;
}

.product-card-title {
  font-size: 14px;
  margin: 0 0 4px;
  color: #111827;
}

.product-card-price {
  font-size: 13px;
  color: #ec4899;
  font-weight: 600;
}

/* Texte "aucun produit" */
.no-products {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #6b7280;
}

/* =========================
   PAGE PRODUIT
   ========================= */

/* Fond général de la page produit */
body.woocommerce.single-product {
  background: #fff7fb;
}

/* =========================
   PAGE PRODUIT : GALERIE
   ========================= */

.single-product .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Conteneur de l'image principale */
.product-main-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image principale : on montre TOUTE l'image */
.single-product .woocommerce-product-gallery__wrapper .main-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Bande de vignettes sous l'image */
.single-product .woocommerce-product-gallery__thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Vignettes de la galerie produit : même taille pour toutes */
.single-product .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image.thumbnail {
  width: 70px !important;
  height: 70px !important;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f9fafb;
  margin: 0;
  padding: 0;
}

/* On force le lien intérieur à remplir la vignette */
.single-product .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image.thumbnail a {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* L'image remplit complètement le carré */
.single-product .woocommerce-product-gallery__thumbnails img.product-thumb {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}

/* Vignette active (optionnel) */
.single-product img.product-thumb.is-active {
  outline: 2px solid #ec4899;
  outline-offset: 2px;
}

/* =========================
   PAGE PRODUIT : LAYOUT 2 COLONNES
   ========================= */

/* Reset des floats WooCommerce */
.woocommerce.single-product div.product div.images,
.woocommerce.single-product div.product div.summary {
  width: 100%;
  float: none;
  margin: 0;
}

/* Grille 2 colonnes */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}

/* Colonne images à gauche */
.single-product .woocommerce-product-gallery {
  grid-column: 1;
}

/* Colonne infos à droite : flex pour pouvoir pousser le panier en bas */
.single-product .summary.entry-summary {
  grid-column: 2;
  display: flex;
  flex-direction: column;
}

/* Titre d'article au-dessus des colonnes : on le cache */
body.single-product article > h2:first-of-type {
  display: none;
}

/* Espacement entre le menu et le bloc produit (page produit uniquement) */
body.single-product main > .container {
  margin-top: 40px;
}


/* Nouveau titre produit dans la colonne de droite */
.single-product .summary.entry-summary .pop-product-title {
  margin-top: 25px;
  margin-bottom: 2px; /* espace réduit avec le prix */
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}

/* Prix du produit : proche du titre */
.single-product .summary.entry-summary .price {
  margin-top: 0px;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  color: #ec4899;
}

/* Description courte */
.single-product .summary.entry-summary .woocommerce-product-details__short-description {
  margin-bottom: 12px;
  text-align: justify;
  font-size: 14px;
  color: #4b5563;
}

/* =========================
   BOUTONS DE COLLECTION
   ========================= */

.collection-switcher {
  margin-bottom: 16px;
  text-align: center;
}

/* On cache le texte "Collection : ..." */
.collection-label {
  display: none;
}

.collection-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center; /* centrage horizontal */
}

.collection-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #fecdd3;
  background: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #4b5563;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.collection-button:hover {
  background: #fdf2f8;
  color: #ec4899;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

/* Bouton correspondant au produit actuel */
.collection-button.is-current {
  background: linear-gradient(90deg, #f472b6, #a855f7);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Bloc quantité + bouton panier :
   on le pousse en bas de la colonne avec margin-top:auto
   et on centre horizontalement le contenu */
.single-product .summary.entry-summary form.cart {
  margin-top: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Champ quantité */
.single-product .summary.entry-summary form.cart .qty {
  width: 60px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Bouton "Ajouter au panier" */
.single-product .summary.entry-summary .single_add_to_cart_button {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #f472b6, #a855f7);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.single-product .summary.entry-summary .single_add_to_cart_button:hover {
  filter: brightness(1.05);
}

/* Cacher le texte de stock et les catégories */
.single-product .summary.entry-summary .stock,
.single-product .summary.entry-summary .product_meta {
  display: none;
}

/* Layout responsive : une seule colonne sur mobile.
   On revient à un comportement plus classique pour éviter un énorme vide. */
@media (max-width: 768px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .single-product .summary.entry-summary {
    display: block;
  }

  .single-product .summary.entry-summary form.cart {
    margin-top: 16px;
    justify-content: flex-start;
  }
}

/* =========================
   BAS DE PAGE PRODUIT : LAYOUT
   ========================= */

/* Chaque bloc (icônes, onglets, PSSST) doit revenir à la ligne
   et prendre toute la largeur */
.single-product .product-values-band,
.single-product .woocommerce-tabs.wc-tabs-wrapper,
.single-product .pssst-related {
  clear: both;
  width: 100%;
}

/* Section icônes : fond transparent, carte blanche au milieu */
.single-product .product-values-band {
  background: transparent;
  padding: 32px 0;
}

/* Carte blanche des icônes */
.single-product .product-values-band-inner {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Bloc PSSST : bande blanche pleine largeur, même les marges */
.single-product .pssst-related {
  background: #ffffff;
  padding: 40px 0 32px;
}

/* Section PSSST : contenu toujours dans le container,
   mais on ajoute une bande blanche pleine largeur derrière */
body.woocommerce.single-product .pssst-related {
  position: relative;
  padding: 40px 0 48px;
  background: transparent;   /* on enlève le fond éventuel */
}

/* Bande blanche qui dépasse du .container pour couvrir tout l'écran */
body.woocommerce.single-product .pssst-related::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;

  /* on centre le bloc puis on l'étire à la largeur du viewport */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: #ffffff;
}

/* ---- Bande des 3 valeurs ---- */

.product-values-band {
  margin-top: 32px;
  padding: 24px 0;
  background: #fff7fb; /* léger rose */
}

.product-values-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: nowrap;          /* ❗ ne plus autoriser le retour à la ligne */
}

.product-value {
  display: flex;
  flex-direction: column;     /* icône au-dessus du texte */
  align-items: center;        /* centrer tout */
  text-align: center;
  gap: 8px;
  max-width: 260px;           /* limite la largeur du texte */
}

.product-value-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffe4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.product-value-text h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.product-value-text p {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
}

@media (max-width: 800px) {
  .product-value-text p {
    font-size: 12px;
  }
}

/* =========================
   ONGLET PERSONNALISÉ "POP-TABS"
   ========================= */

/* Section globale */
.pop-tabs-section {
  margin-top: 32px;
}

/* Conteneur des onglets */
.pop-tabs {
  width: 100%;
}

/* --- BARRE D'ONGLETS --- */
.pop-tabs-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid #d4d4d4;  /* ligne grise sur toute la largeur */
  position: relative;
  margin-bottom: 0;
  width: 100%;
}

/* Chaque onglet = 1 "colonne" */
.pop-tab-label {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;              /* texte en gras */
  cursor: pointer;
  color: #111827;
  background: transparent;
  border: none;
  position: relative;
  transition: color 0.2s ease;
}

.pop-tab-label:hover {
  color: #ec4899;
}

/* Barre noire sous l’onglet actif (préparée pour tous, mais invisible par défaut) */
.pop-tab-label::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -2px;
  height: 2px;
  background: #111827;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --- CONTENU DES ONGLETS --- */

/* On enlève complètement la bordure autour du contenu */
.pop-tabs-panels {
  border: none;
  margin-top: 40px;
  width: 100%;
}

/* Les panneaux prennent toute la largeur, sans cadre */
.pop-tab-panel {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.pop-tab-panel p,
.pop-tab-panel ul {
  max-width: none;
  text-align: justify;      /* justification du texte dans le contenu */
}

/* --- LOGIQUE D’ONGLETS AVEC LES RADIOS --- */
/* On masque les inputs radios */
.pop-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Par défaut, on cache tous les panneaux… */
.pop-tabs .pop-tab-panel {
  display: none;
}

/* …sauf celui dont l'onglet est activé */
#pop-tab-description:checked ~ .pop-tabs-panels .pop-tab-panel-description,
#pop-tab-order:checked        ~ .pop-tabs-panels .pop-tab-panel-order,
#pop-tab-return:checked       ~ .pop-tabs-panels .pop-tab-panel-return {
  display: block;
}

/* Styles de l’onglet actif (couleur + barre noire visible) */
#pop-tab-description:checked ~ .pop-tabs-nav label[for="pop-tab-description"],
#pop-tab-order:checked        ~ .pop-tabs-nav label[for="pop-tab-order"],
#pop-tab-return:checked       ~ .pop-tabs-nav label[for="pop-tab-return"] {
  color: #000000;
}

#pop-tab-description:checked ~ .pop-tabs-nav label[for="pop-tab-description"]::after,
#pop-tab-order:checked        ~ .pop-tabs-nav label[for="pop-tab-order"]::after,
#pop-tab-return:checked       ~ .pop-tabs-nav label[for="pop-tab-return"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ---- Bloc PSSST, TU AIMERAS AUSSI ---- */

.pssst-related {
  margin-top: 40px;
  padding-bottom: 32px;
}

.pssst-related-title {
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ec4899;
  margin: 0 0 16px;
}

/* On force le UL de la zone PSSST à se comporter comme un simple flex,
   aligné à gauche, et on enlève tout padding/marge par défaut. */
body.woocommerce .pssst-related ul.products {
  display: flex !important;        /* remplace la grille columns-4 */
  flex-wrap: wrap;
  justify-content: flex-start;     /* la première card commence bien à gauche */
  padding: 0 !important;
  margin: 16px 0 0 0 !important;
  list-style: none;
}

/* Cards produits dans la zone PSSST */
body.woocommerce .pssst-related ul.products li.product {
  float: none !important;          /* neutralise les floats WooCommerce */
  margin: 0 24px 0 0 !important;   /* petit espace entre les cards */
  width: 220px;
  vertical-align: top;
}

/* Responsive : 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 700px) {
  body.woocommerce .pssst-related ul.products li.product {
    width: 48%;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  body.woocommerce .pssst-related ul.products li.product {
    width: 100%;
  }
}

/* =========================
   BAS DE PAGE PRODUIT : ICÔNES + ONGLETS
   ========================= */

/* La bande d'icônes doit prendre toute la largeur sous les 2 colonnes */
.single-product div.product .product-values-band {
  grid-column: 1 / -1;      /* occupe les 2 colonnes du grid produit */
  width: 100%;
  float: none;
}

/* On recentre bien l’intérieur au milieu de la page */
.single-product div.product .product-values-band-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* On s’assure que les icônes sont bien alignées sur une seule ligne */
.product-values-band-inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
}

/* Sur mobile : icônes les unes sous les autres */
@media (max-width: 768px) {
  .product-values-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Le bloc d’onglets WooCommerce doit lui aussi être sur toute la largeur */
.woocommerce.single-product .woocommerce-tabs.wc-tabs-wrapper {
  clear: both;
  width: 100%;
  float: none;
  margin-top: 24px;
}

.single-product div.product .pssst-related {
  grid-column: 1 / -1;   /* occupe toutes les colonnes */
  width: 100%;
  clear: both;
  margin-top: 32px;
}

/* Les panneaux personnalisés doivent prendre 100 % de la largeur,
   sans max-width ni centrage forcé. */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--order_contents,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--order_and_return {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* On enlève aussi toute éventuelle limite sur les paragraphes internes */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--order_contents p,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--order_and_return p {
  max-width: none !important;
}

/* La section d'onglets personnalisés doit occuper toute la largeur
   de la grille produit */
.single-product div.product .pop-tabs-section {
  grid-column: 1 / -1;
  width: 100%;
}

/* =========================
   PSSST : STYLE DES CARTES PRODUITS
   ========================= */

/* Lien + contenu de la carte : tout à gauche */
.pssst-related ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-align: left;
}

/* Titre du produit recommandé : même style que les titres de cartes */
.pssst-related ul.products li.product .woocommerce-loop-product__title {
  margin: 8px 0 4px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  color: #111827;
}

.pssst-related ul.products li.product .woocommerce-loop-product__title:hover {
  color: #ec4899;
}

/* Prix : même rose que sur la fiche produit */
.pssst-related ul.products li.product .price,
.pssst-related ul.products li.product .price .amount,
.pssst-related ul.products li.product .woocommerce-Price-amount {
  color: #ec4899 !important;
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Bouton "Ajouter au panier" : centré et même style que le bouton principal */
.pssst-related ul.products li.product .button {
  display: block;
  margin: 20px auto 0;        /* centrage horizontal */
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #f472b6, #a855f7);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.pssst-related ul.products li.product .button:hover {
  filter: brightness(1.05);
}

/* =========================
   FOOTER
   ========================= */

.site-footer {
  background: linear-gradient(to bottom, #fdf2ff, #fce7f3);
  padding-top: 40px;
}

/* Bloc newsletter */
.footer-newsletter {
  padding: 0 16px 32px;
}

.footer-newsletter-inner {
  max-width: 800px;
  margin: 0 auto 32px;
  background: #ffffff;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #ffe4f5;
}

.footer-newsletter-inner h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #1f2933;
}

.footer-newsletter-inner p {
  margin: 0;
  margin-bottom: 16px;
  color: #4b5563;
  font-size: 14px;
}

.footer-newsletter-inner .highlight {
  color: #ec4899;
  font-weight: 600;
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}

.footer-newsletter-form input[type="email"] {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #fecdd3;
  font-size: 14px;
}

.footer-newsletter-form button {
  padding: 10px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #f472b6, #a855f7);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.footer-newsletter-form button:hover {
  filter: brightness(1.05);
}

.footer-newsletter-note {
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af;
}

/* Section principale du footer */
.footer-main {
  padding: 16px 0 24px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

.footer-col h4 {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #1f2933;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 6px;
}

.footer-col a {
  font-size: 13px;
  color: #4b5563;
  text-decoration: none;
}

.footer-col a:hover {
  color: #ec4899;
}

/* Colonne brand */
.footer-brand-text {
  font-size: 13px;
  color: #4b5563;
  margin: 8px 0 12px;
}

.footer-socials {
  display: flex;
  gap: 8px;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #ffe4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ec4899;
  text-decoration: none;
}

.footer-socials a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* Bas de page */
.footer-bottom {
  border-top: 1px solid #fecdd3;
  padding: 12px 0 16px;
  text-align: center;
}

.footer-bottom p {
  font-size: 12px;
  color: #6b7280;
}

.footer-bottom .heart {
  color: #ec4899;
}

/* Responsive footer */
@media (min-width: 768px) {
  .footer-newsletter-inner {
    padding: 32px 40px;
  }

  .footer-columns {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}