/* =====================================================================
   Braillard — Boutique WooCommerce (2 colonnes, à la charte)
   Accent boutique = NOIR (pas de pilier).
   ===================================================================== */

/* ---- Titre de page boutique ---- */
.br-shop-title{ text-align: left; }

/* Section archive en PLEINE LARGEUR, alignée sur les marges du site (comme les
   pages de contenu). Le titre .br-pagehead est rendu par le thème au-dessus.
   ⚠️ Le conteneur interne Elementor est bridé à max-width 1140px (kit) et centré
   → la colonne gauche était décalée. On le libère + on pose les marges du site. */
.elementor-element-brshsec2 > .elementor-container{
  max-width: none !important; width: 100% !important;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
/* Colonnes Elementor : padding interne par défaut (~10px) → décale la nav du bord.
   On annule le padding EXTÉRIEUR (gauche 1ʳᵉ col / droite dernière col) pour caler
   exactement sur les marges du site ; l'espace inter-colonnes reste. */
.elementor-element-brshncol > .elementor-element-populated,
.elementor-element-brshncol > .elementor-widget-wrap{ padding-left: 0 !important; }
.elementor-element-brshpcol > .elementor-element-populated,
.elementor-element-brshpcol > .elementor-widget-wrap{ padding-right: 0 !important; }

/* ---- Nav catégories (colonne gauche) ---- */
/* Colonne gauche FIXE pendant le scroll (desktop) — comme les pages 2 colonnes.
   On rend le WIDGET sticky (enfant direct de la colonne haute), pas .br-shopnav
   (dont le conteneur ne serait pas assez haut pour coller). top = header sticky. */
@media (min-width: 901px){
  .elementor-element-brshnav1{ position: sticky; top: 210px; align-self: flex-start; }
}
/* Aligné sur la charte de la nav des pages de contenu (.br-subnav) :
   Helvetica Neue, NOIR, ~18-24px, SANS majuscules, poids 400 (500 actif/parent),
   hover en opacité. Plus de gris ni de capitales (hors charte). */
.br-shopnav{ font-family: var(--br-font-body); }
.br-shopnav__list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.br-shopnav__list .br-shopnav__list{ margin: 16px 0 0 1.2em; }   /* sous-niveau indenté */
.br-shopnav__item{ margin: 0; }
.br-shopnav__item > a{
  display: inline-block; text-decoration: none;
  font-size: clamp(18px, 1.39vw, 24px); line-height: 1.2;
  font-weight: 400; color: var(--br-black); opacity: 1;
  transition: opacity .2s ease;
}
.br-shopnav__item > a:hover{ opacity: .55; }
/* niveau 1 (catégories racines) = poids 500, comme un titre de section */
.br-shopnav > .br-shopnav__list > .br-shopnav__item > a{ font-weight: 500; }
/* terme courant / branche active = poids 500 */
.br-shopnav__item.is-active > a,
.br-shopnav__item.is-ancestor > a{ font-weight: 500; }

/* ---- Grille produits (widget Elementor « Archive Products ») ---- */
.elementor-widget-woocommerce-archive-products ul.products,
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  /* espacement entre chaque produit = 33px (demande client). !important : le widget
     Elementor impose ses propres column-gap/row-gap (20/40) avec forte spécificité. */
  column-gap: 33px !important; row-gap: 33px !important;
  list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products li.product{
  width: auto !important; margin: 0 !important; float: none !important;
  text-align: left; font-family: var(--br-font-body);
  /* cartes de hauteur égale (grille stretch) → flex colonne pour aligner en bas.
     !important : Elementor impose display:block + reset des marges (spécificité forte). */
  display: flex !important; flex-direction: column !important; height: 100%;
}
/* Le lien (image + titre + prix) occupe l'espace ; le PRIX est poussé en BAS,
   le BOUTON suit juste dessous → prix + bouton alignés d'une carte à l'autre. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
  display: flex !important; flex-direction: column !important; flex: 1 1 auto;
}
.woocommerce ul.products li.product .price{ margin-top: auto !important; }
.woocommerce ul.products li.product a{ text-decoration: none; color: inherit; }
.woocommerce ul.products li.product a img{
  /* couverture ENTIÈRE, ratio naturel (hauteur auto) — comme get.braillard.ch.
     Plus de aspect-ratio/crop : on montre l'image telle quelle (format « large »). */
  width: 100%; height: auto; display: block; margin: 0 0 clamp(14px, 1.4vw, 22px);
  background: #f2f1ef;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  /* !important : le Kit Elementor impose sa typo display (PP Eiko) aux h2 avec
     une forte spécificité — on force la charte carte (Helvetica Neue sans-serif). */
  font-family: var(--br-font-body) !important; font-weight: 500 !important; font-style: normal !important;
  font-size: clamp(17px, 1.3vw, 21px); line-height: 1.25; color: var(--br-black);
  letter-spacing: 0; padding: 0; margin: 0 0 8px;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product span.price .amount{
  font-family: var(--br-font-body); font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px); color: #6b6660;  /* gris méta, comme la carte Programme
                                                           (span.price/.amount : le kit Elementor
                                                           repasse en noir à spécificité égale) */
}
.woocommerce ul.products li.product .price del{ color: #9a948d; margin-right: 6px; opacity: 1; }
.woocommerce ul.products li.product .price ins{ text-decoration: none; }

/* Boutons Woo génériques (hors cartes) — filaire noir → plein au survol */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  display: inline-block; margin-top: 12px;
  font-family: var(--br-font-body); font-size: 14px; letter-spacing: .02em;
  color: var(--br-black); background: transparent;
  border: 1px solid var(--br-black); border-radius: 0;
  padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background: var(--br-black); color: var(--br-white);
}

/* Bouton « ajouter au panier » des CARTES : plein noir pleine largeur,
   centré, icône ⊕ — même ligne que la carte module du Programme
   (demande client 13.07 : « reprendre plus ou moins le même style »). */
.woocommerce ul.products li.product .button{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 14px;
  font-family: var(--br-font-body); font-size: clamp(14px, 1.02vw, 16px);
  letter-spacing: .01em; text-transform: none;
  color: var(--br-white); background: var(--br-black);
  border: 1px solid var(--br-black); border-radius: 0;
  padding: 14px 20px; text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.woocommerce ul.products li.product .button::before{
  content: ""; flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid currentColor; border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 10px 1px no-repeat,
    linear-gradient(currentColor 0 0) center / 1px 10px no-repeat;
}
.woocommerce ul.products li.product .button:hover{
  background: transparent; color: var(--br-black);
}
.woocommerce .added_to_cart{ display: inline-block; margin-top: 8px; font-size: 13px; color: var(--br-black); text-decoration: underline; }

/* Badge promo */
.woocommerce span.onsale{
  background: var(--br-black); color: var(--br-white); border-radius: 0;
  font-family: var(--br-font-body); font-weight: 500; font-size: 12px;
  padding: 4px 10px; min-height: 0; min-width: 0; line-height: 1.2; top: 8px; left: 8px;
}

/* Résultats / tri (barre au-dessus de la grille) — sobre */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ font-family: var(--br-font-body); font-size: 14px; color: #6b6660; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{ border: 0; }
.woocommerce nav.woocommerce-pagination ul li{ border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family: var(--br-font-body); color: #8a857e; background: none; border: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ color: var(--br-black); font-weight: 500; background: none; }

/* =====================================================================
   Fiche produit (single) — 2 colonnes : galerie + infos | description + achat
   ===================================================================== */
/* Sections en PLEINE LARGEUR + marges du site (le conteneur Elementor est bridé
   à 1140px comme l'archive). Colonne gauche calée au bord. */
.elementor-element-brpsec1 > .elementor-container,
.elementor-element-brprsec > .elementor-container{
  max-width: none !important; width: 100% !important;
  padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px);
}
.elementor-element-brpncol > .elementor-element-populated,
.elementor-element-brpncol > .elementor-widget-wrap{ padding-left: 0 !important; }

/* Bouton « ajouter au panier » de la fiche (widget Elementor) — plein noir
   avec icône ⊕, même ligne que les cartes boutique/Programme (demande
   client 13.07 « idem sur la page single »). */
.woocommerce div.product .single_add_to_cart_button,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button,
.elementor-widget-woocommerce-product-add-to-cart button[type="submit"]{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--br-black) !important; color: var(--br-white) !important;
  border: 1px solid var(--br-black) !important; border-radius: 0 !important;
  font-family: var(--br-font-body) !important; font-weight: 400 !important;
  font-size: clamp(14px, 1.02vw, 16px);
  text-transform: none; letter-spacing: .01em;
  padding: 14px 24px !important; box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
.woocommerce div.product .single_add_to_cart_button::before,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button::before,
.elementor-widget-woocommerce-product-add-to-cart button[type="submit"]::before{
  content: ""; flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid currentColor; border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 10px 1px no-repeat,
    linear-gradient(currentColor 0 0) center / 1px 10px no-repeat;
}
.woocommerce div.product .single_add_to_cart_button:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:hover{
  background: transparent !important; color: var(--br-black) !important;
}

/* Colonne image FIXE à 380px (largeur de la couverture, maquette), le contenu
   prend le reste ; gouttière de 170px entre l'image et le texte. On abandonne
   les largeurs % Elementor (42/58) au profit d'un flex fixe pour un rendu stable
   quelle que soit la largeur d'écran. Desktop uniquement. */
@media (min-width: 901px){
  .elementor-element-brpimgc{
    width: 380px !important; max-width: 380px !important; flex: 0 0 380px !important;
  }
  .elementor-element-brpimgc > .elementor-element-populated{ padding: 0 !important; }
  .elementor-element-brpdetc{
    width: auto !important; max-width: none !important; flex: 1 1 auto !important;
  }
  .elementor-element-brpdetc > .elementor-element-populated{ padding-left: 170px !important; }
}

/* Galerie WooCommerce (colonne gauche) — couverture entière, sobre */
.woocommerce div.product .woocommerce-product-gallery{ width: 100% !important; margin: 0; float: none; }
.woocommerce div.product .woocommerce-product-gallery img{ width: 100%; height: auto; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{ margin: 0; }

/* Infos « Livres » (ACF) — SANS encadré, liste inline sobre sous la description. */
.br-bookinfo{
  list-style: none; margin: clamp(20px, 2.4vw, 34px) 0 0; padding: 0;
  border: 0; font-family: var(--br-font-body);
}
.br-bookinfo__row{ font-size: clamp(15px, 1.05vw, 17px); line-height: 1.9; color: var(--br-black); }
.br-bookinfo__label{ font-weight: 600; }

/* Colonne droite : description LONGUE (widget « product content ») + prix + achat */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p,
.elementor-widget-woocommerce-product-content,
.elementor-widget-woocommerce-product-content p{
  font-family: var(--br-font-body); font-size: clamp(16px, 1.16vw, 20px); line-height: 1.55; color: var(--br-black);
}
.elementor-widget-woocommerce-product-content p{ margin: 0 0 1em; }
.elementor-widget-woocommerce-product-content p:last-child{ margin-bottom: 0; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: var(--br-font-body); font-weight: 400; color: var(--br-black);
  font-size: clamp(18px, 1.5vw, 24px); margin: clamp(24px, 2.6vw, 40px) 0 clamp(10px, 1vw, 16px);
}
.woocommerce div.product .stock{ font-family: var(--br-font-body); font-size: 15px; color: #5f5a54; margin-bottom: 14px; }
.woocommerce div.product form.cart{ display: flex; align-items: center; gap: 14px; margin: 0; }
/* WooCommerce ajoute un clearfix .cart::before/::after (content:" ") qui, en
   contexte flex, devient un faux item et décale la boîte quantité de 14px (le gap).
   On le neutralise pour tout aligner sur le bord gauche de la colonne. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after{ content: none !important; display: none !important; }
.woocommerce div.product form.cart .quantity{ flex: 0 0 auto; margin: 0; }
/* Produit à 1 exemplaire : WooCommerce masque le sélecteur (input hidden) mais
   laisse une .quantity vide qui, en flex, ajoute un gap → bouton décalé de 14px.
   On la retire du flux pour que le bouton s'aligne au bord gauche. */
.woocommerce div.product form.cart .quantity:has(input[type="hidden"]){ display: none; }
.woocommerce div.product form.cart .quantity input.qty{
  width: 64px; height: 46px; text-align: center; border: 1px solid var(--br-black); border-radius: 0;
  font-family: var(--br-font-body); font-size: 16px;
}

/* Produits liés (pleine largeur) — réutilise la grille .products.
   ⚠️ Le widget Elementor rend le h2 sous .elementor-widget-woocommerce-product-related
   (pas .related.products > h2) et le Kit force PP Eiko → on cible large + !important
   pour l'aligner sur la charte des H2 de contenu (Helvetica Neue sans-serif). */
/* Produits similaires : désormais DANS la colonne de droite, sous l'image+détails.
   On garde un grand espace vertical (comme la respiration du screenshot de réf). */
.elementor-widget-woocommerce-product-related{ margin-top: clamp(48px, 5vw, 88px); }
/* dans la colonne (75%), 3 produits suffisent et respirent mieux que 4 */
.related.products ul.products,
.elementor-widget-woocommerce-product-related ul.products{ grid-template-columns: repeat(3, 1fr) !important; }

.woocommerce .related.products h2,
.woocommerce .upsells.products h2,
.elementor-widget-woocommerce-product-related h2{
  font-family: var(--br-font-body) !important; font-weight: 500 !important;
  font-style: normal !important; text-transform: uppercase;
  font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .02em; color: var(--br-black);
  margin: 0 0 clamp(24px, 2.6vw, 40px);
}

/* Méta (auteur/parution) + extrait du loop : rendus par le module 70,
   affichés seulement en mobile (carte façon Dialogues). */
.br-loop-meta, .br-loop-excerpt{ display: none; }

/* Responsive : 1 produit par rangée + carte façon DIALOGUES (retour client
   14.07, réf Figma mobile Dialogues) : petite couverture à GAUCHE, auteur +
   parution à droite calés au bas de l'image, puis titre / extrait / prix /
   bouton panier pleine largeur en dessous. */
@media (max-width: 900px){
  .elementor-widget-woocommerce-archive-products ul.products,
  .woocommerce ul.products{ grid-template-columns: 1fr; }

  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    display: grid !important;
    grid-template-columns: 135px minmax(0, 1fr);
    column-gap: 16px;
    align-items: end;
  }
  .woocommerce ul.products li.product a img{
    grid-column: 1; grid-row: 1;
    width: 135px; margin: 0;
  }
  .br-loop-meta{
    display: flex; flex-direction: column; gap: 2px;
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 14px; line-height: 1.35; color: var(--br-black);
    padding-bottom: 2px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    grid-column: 1 / -1;
    margin: 16px 0 8px;
    font-size: 24px;
  }
  .br-loop-excerpt{
    display: block; grid-column: 1 / -1;
    font-size: 16px; line-height: 1.45; color: var(--br-black);
    margin: 0 0 12px;
  }
  .woocommerce ul.products li.product .price{ grid-column: 1 / -1; }
}

/* =====================================================================
   Notifications WooCommerce à la charte (info / message / erreur).
   Retire l'icône + le rose par défaut ; fond sobre, filet noir, liens noirs.
   ===================================================================== */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews{
  font-family: var(--br-font-body); font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: var(--br-black);
  background: #f6f5f3; border: 0; border-top: 2px solid var(--br-black); border-radius: 0;
  padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.7vw, 24px);
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before{ content: none !important; display: none !important; }
.woocommerce-error{ border-top-color: #b3261e; }
.woocommerce-error li{ list-style: none; margin: 0; }
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a{ color: var(--br-black) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover{ opacity: .6; }
.woocommerce-message .button,
.woocommerce-info .button{
  margin-left: auto; background: transparent; color: var(--br-black) !important;
  border: 1px solid var(--br-black); border-radius: 0; text-decoration: none !important;
  padding: 8px 16px; font-size: 14px;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover{ background: var(--br-black); color: var(--br-white) !important; }