/*!
 * Pierre & Âme — Habillage Boutique (feuille de style du plugin)
 * Habille UNIQUEMENT les pages WooCommerce. Chargée par le plugin
 * pierre-et-ame-habillage-boutique.php. Ne pas modifier le thème.
 */

/* ----------------------------------------------------------------------
   1. JETONS DE DESIGN (surchargés par l'Outil de personnalisation)
   ---------------------------------------------------------------------- */
:root{
  --pa-accent:        #b0764f;
  --pa-accent-deep:   #8a5a38;
  --pa-bg:            #f4efe6;
  --pa-surface:       #fffdf8;
  --pa-ink:           #2a241e;
  --pa-muted:         #8c8273;
  --pa-soft:          #f1ece1;
  --pa-line:          rgba(60,45,30,.13);
  --pa-heading:       'Cormorant Garamond', Georgia, serif;
  --pa-body:          'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --pa-btn-radius:    999px;
  --pa-card-radius:   18px;
  --pa-card-border:   1px solid transparent;
  --pa-card-shadow:   0 20px 44px -26px rgba(70,45,20,.42);
}

/* ----------------------------------------------------------------------
   2. TYPO & FOND — appliqués seulement sur les pages WooCommerce
   ---------------------------------------------------------------------- */
.woocommerce-page,
.woocommerce{
  background: var(--pa-bg);
  color: var(--pa-ink);
  font-family: var(--pa-body);
}
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce .product_title,
.woocommerce-loop-product__title,
.woocommerce-products-header__title{
  font-family: var(--pa-heading);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pa-ink);
}
.woocommerce ::selection{ background: rgba(176,118,79,.22); }

/* ----------------------------------------------------------------------
   3. BANDEAU RÉASSURANCE (injecté via functions.php)
   ---------------------------------------------------------------------- */
.pa-reassurance{
  background: var(--pa-accent);
  color: #fdf6ee;
}
.pa-reassurance__inner{
  max-width: 1280px; margin: 0 auto;
  padding: 9px 32px;
  display: flex; justify-content: center; align-items:center; gap: 38px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.pa-reassurance__sep{ opacity:.55; }

/* ----------------------------------------------------------------------
   4. EN-TÊTE DE PAGE BOUTIQUE (hero)
   ---------------------------------------------------------------------- */
.woocommerce-products-header{
  max-width: 1280px; margin: 0 auto; padding: 52px 32px 8px;
}
.woocommerce-products-header__title{
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.02; margin: 0 0 14px;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-breadcrumb{
  color: var(--pa-muted);
}
.woocommerce .woocommerce-breadcrumb{
  font-size: 12.5px; letter-spacing: .04em; margin-bottom: 18px;
}

/* ----------------------------------------------------------------------
   5. BARRE D'OUTILS (résultats + tri)
   ---------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin-bottom: 26px;
}
.woocommerce .woocommerce-ordering select{
  font-family: inherit; font-size: 13.5px; color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line); border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
}

/* ----------------------------------------------------------------------
   6. GRILLE CATALOGUE — cartes produit
   ---------------------------------------------------------------------- */
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 26px;
  max-width: 1280px; margin: 0 auto 70px !important; padding: 0 32px;
}
.woocommerce ul.products li.product{
  position: relative;
  background: var(--pa-surface);
  border-radius: var(--pa-card-radius);
  border: var(--pa-card-border);
  box-shadow: var(--pa-card-shadow);
  overflow: hidden;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
  transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-7px);
  box-shadow: 0 30px 56px -28px rgba(70,45,20,.5);
}
.woocommerce ul.products li.product a img{
  margin: 0 !important; border-radius: 0;
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
}
/* étiquette catégorie (injectée) */
.pa-card-cat{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--pa-ink); background: rgba(255,253,248,.82);
  padding: 5px 11px; border-radius: 999px;
}
/* bouton favori (injecté) */
.pa-card-wish{
  position: absolute; top: 11px; right: 11px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,253,248,.82); border: none; cursor: pointer;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 23px !important; line-height: 1.1; padding: 16px 20px 0 !important; margin: 0;
}
.woocommerce ul.products li.product .pa-card-sub{
  padding: 2px 20px 0; margin: 0;
  font-family: var(--pa-heading); font-style: italic; font-size: 12.5px; color: var(--pa-muted);
}
/* puces « vertus » (injectées depuis l'attribut produit) */
.pa-vertus{
  display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0;
}
.pa-vertus span{
  font-size: 11.5px; color: var(--pa-ink); background: var(--pa-soft);
  padding: 4px 10px; border-radius: 999px;
}
.woocommerce ul.products li.product .price{
  color: var(--pa-ink) !important; font-family: var(--pa-body);
  font-size: 19px !important; font-weight: 600;
  padding: 14px 20px 18px; margin-top: auto;
}
.woocommerce ul.products li.product .price del{ color: var(--pa-muted); font-weight: 400; }

/* ----------------------------------------------------------------------
   7. BOUTONS
   ---------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button{
  background: var(--pa-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pa-btn-radius) !important;
  font-family: var(--pa-body) !important;
  font-weight: 600 !important; letter-spacing: .02em;
  padding: 11px 22px !important;
  transition: filter .2s, transform .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover{
  filter: brightness(1.07); transform: translateY(-1px);
}
.woocommerce a.button.alt.added,
.woocommerce .added_to_cart{ border-radius: var(--pa-btn-radius) !important; }
/* bouton « ajouter » sur la carte */
.woocommerce ul.products li.product .button{
  position: absolute; right: 16px; bottom: 16px; margin: 0;
  font-size: 13px !important; padding: 10px 16px !important;
}

/* ----------------------------------------------------------------------
   8. FICHE PRODUIT
   ---------------------------------------------------------------------- */
.woocommerce div.product{
  max-width: 1180px; margin: 0 auto; padding: 28px 32px 0;
}
.single-product.woocommerce div.product{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery{
  position: relative; margin: 0 !important; width: 100% !important; float: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__wrapper{ border-radius: 22px; overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery img{ border-radius: 22px; }

.woocommerce div.product .summary{
  margin: 0 !important; width: 100% !important; float: none !important;
}
.woocommerce div.product .product_title{
  font-size: clamp(34px, 4vw, 50px) !important; line-height: 1.02; margin: 4px 0 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--pa-ink) !important; font-family: var(--pa-body);
  font-size: 30px !important; font-weight: 600; margin: 16px 0 4px;
}
.woocommerce div.product .woocommerce-product-rating{ margin-bottom: 14px; }
.woocommerce .star-rating span::before,
.woocommerce div.product .stars a::before{ color: var(--pa-accent); }
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size: 16px; line-height: 1.7; color: #544c41; max-width: 48ch; margin: 18px 0;
}
/* tableau d'attributs (Chakra, Élément, Origine, Taille des perles…) */
.woocommerce div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes,
.woocommerce-product-attributes{
  border: 1px solid var(--pa-line); border-radius: 14px; overflow: hidden;
}
.woocommerce-product-attributes th{ background: var(--pa-surface); color: var(--pa-muted);
  text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.woocommerce-product-attributes td{ background: var(--pa-surface); color: var(--pa-ink); font-style: normal; }

/* sélecteur de quantité + ajout panier */
.woocommerce div.product form.cart{ display: flex; gap: 13px; align-items: stretch; margin: 26px 0; }
.woocommerce .quantity .qty{
  border: 1px solid rgba(60,45,30,.2); border-radius: var(--pa-btn-radius);
  height: 54px; width: 90px; text-align: center; font-weight: 600; background: var(--pa-surface);
}
.woocommerce div.product form.cart .single_add_to_cart_button{ flex: 1; height: 54px; font-size: 15px; }

/* puces « vertus » sur la fiche (injectées) */
.pa-single-vertus{ display: flex; gap: 9px; flex-wrap: wrap; margin: 22px 0 0; }
.pa-single-vertus span{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--pa-ink); background: var(--pa-surface);
  border: 1px solid var(--pa-line); padding: 8px 14px; border-radius: 999px;
}
.pa-single-vertus span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pa-accent); }

/* réassurance sous le bouton (injectée) */
.pa-trust{ display: flex; gap: 22px; flex-wrap: wrap; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--pa-line); }
.pa-trust span{ display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #544c41; }
.pa-trust svg{ stroke: var(--pa-accent); }

/* ----------------------------------------------------------------------
   9. SCEAU « FAIT MAIN » (injecté sur la galerie, voir functions.php)
   ---------------------------------------------------------------------- */
.pa-seal{
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 96px; height: 96px; transform: rotate(-9deg);
  filter: drop-shadow(0 7px 16px rgba(60,40,20,.3));
  pointer-events: none;
}

/* ----------------------------------------------------------------------
   10. ONGLETS & AVIS
   ---------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs{ grid-column: 1 / -1; margin-top: 40px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: transparent; border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color: var(--pa-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family: var(--pa-heading); font-size: 20px; font-weight: 600;
}
#reviews .commentlist li{
  background: var(--pa-surface); border: 1px solid var(--pa-line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; list-style: none;
}
#reviews .comment-text .meta strong{ font-weight: 600; }
#reviews .star-rating span::before{ color: var(--pa-accent); }
.woocommerce #review_form #respond input#submit{ margin-top: 10px; }

/* ----------------------------------------------------------------------
   11. PRODUITS ASSOCIÉS / VENTES CROISÉES
   ---------------------------------------------------------------------- */
.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-family: var(--pa-heading); font-size: 30px; font-weight: 600; margin-bottom: 20px;
}

/* ----------------------------------------------------------------------
   12. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 860px){
  .single-product.woocommerce div.product{ grid-template-columns: 1fr; gap: 28px; }
  .woocommerce ul.products{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .pa-reassurance__inner{ gap: 16px; font-size: 11px; }
}

/* ----------------------------------------------------------------------
   13. FILET DE SÉCURITÉ — neutralise tout résidu de markup Mystik
        (.post_item / .post_featured / .post_data). Normalement inutile :
        le plugin retire déjà ces wrappers. Présent par prudence.
   ---------------------------------------------------------------------- */
.woocommerce ul.products li.product .post_item,
.woocommerce ul.products li.product .post_featured,
.woocommerce ul.products li.product .post_data,
.woocommerce ul.products li.product .post_data_inner,
.woocommerce ul.products li.product .post_header{
  display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.woocommerce ul.products li.product .post_featured .mask,
.woocommerce ul.products li.product .post_tags{ display: none; }