/* =============================================================================
   GreenVisuaLED Nature Vivante — PAGE CATEGORIE (shop 3)
   Destination LIVE : themes/greenvisualednv/assets/css/category.css
   A declarer dans config/theme.yml sous css: -> category (media all, priority 210),
   idealement etendu aux listings freres (prices-drop, new-products, best-sales,
   search, manufacturer, supplier) pour styler les cartes partout.

   Scope : body#category (largeur + grille 2-zones) + #gvl-category (entete, chips,
   grille produit, reassurance). Reutilise au maximum les tokens --gvl-* et les
   styles globaux (.product-miniature, #search_filters, .pagination,
   .products-sort-order, .active_filters dans theme-global.css).
   Le correctif largeur du mega menu reste dans header.css (priority 200), PAS ici.
   ============================================================================= */

/* =========================================================
   1. LARGEUR 1360 + MISE EN PAGE ADAPTATIVE (pleine largeur / 2-zones)
   PIEGE STRUCTUREL VERIFIE : #left-column (col-md-4 col-lg-3) et #content-wrapper
   (col-md-8 col-lg-9) sont SIBLINGS dans .row dans .container. On neutralise la
   largeur du .container UNIQUEMENT sur la page categorie (markup INTACT, hooks
   displayLeftColumn / ContentWrapper preserves).

   ETAT REEL VERIFIE (04/06) : ps_facetedsearch ne rend AUCUN filtre a facettes sur
   ces categories (aucun template de filtre assigne en BO) et l'arbre block-categories
   est masque (redondant avec les chips + fuite TerraLED). La colonne de gauche est
   donc VIDE => une grille 2-zones laisserait 300px de gouttiere morte. On part donc
   en PLEINE LARGEUR par defaut. Garde-fou :has(.facet) : si des filtres a facettes
   sont configures plus tard, la sidebar 2-zones se REACTIVE automatiquement, sans
   retoucher le theme. ========================================================= */
body#category #wrapper > .container{
  max-width:var(--gvl-wrap);
  width:100%;
  padding-inline:24px;
}
/* Neutralisation Bootstrap des deux colonnes (scope body#category, ne fuit jamais). */
body#category #left-column,
body#category #content-wrapper{
  width:auto;
  max-width:none;
  flex:none;
  float:none;
  padding:0;
  margin:0;
}
/* DEFAUT = pleine largeur : la rangee est un simple bloc, la colonne de gauche
   (vide) est retiree du flux. On annule les marges negatives Bootstrap de .row
   (sinon le contenu deborde de ~15px vs le header) : alignement exact sur 1312. */
body#category #wrapper > .container > .row{display:block;margin-left:0;margin-right:0;}
body#category #left-column{display:none;}

/* UPGRADE AUTO 2-ZONES : seulement si la colonne de gauche contient un vrai filtre
   a facettes. La sidebar reapparait et la grille produit repasse a 3 colonnes. */
body#category #wrapper > .container > .row:has(#left-column .facet){
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:32px;
  align-items:start;
}
body#category #left-column:has(.facet){display:block;}

/* Garde-fou anti debordement (html a deja overflow-x:clip global). */
body#category #gvl-category{overflow-x:clip;}

/* =========================================================
   2. ENTETE CATEGORIE editorialisee (#gvl-category .gvl-cat-head)
   Bandeau vert doux, eyebrow mono + H1 display + description. Cover affichee
   SEULEMENT si presente (l'override .tpl ne rend rien sinon : plus de cadre "?").
   ========================================================= */
#gvl-category .gvl-wrap{width:100%;max-width:var(--gvl-wrap);margin-inline:auto;padding-inline:0;}
#gvl-category{margin-bottom:8px;}

#gvl-category .gvl-cat-head{
  position:relative;
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(120deg,var(--gvl-tint) 0%,#fff 72%);
  border:1px solid var(--gvl-line);
  border-radius:var(--r-lg);
  padding:28px 30px;
  overflow:hidden;
}
#gvl-category .gvl-cat-head__text{flex:1 1 auto;min-width:0;}
#gvl-category .gvl-cat-head .gvl-eyebrow{margin:0 0 8px;}
#gvl-category .gvl-cat-title{
  font-family:var(--gvl-display);
  font-weight:800;
  font-size:clamp(26px,4vw,40px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--gvl-green-deep);
  margin:0;
}
#gvl-category .gvl-cat-desc{
  margin:14px 0 0;
  color:var(--gvl-muted);
  font-size:15.5px;
  line-height:1.6;
  max-width:70ch;
}
#gvl-category .gvl-cat-desc p:last-child{margin-bottom:0;}
#gvl-category .gvl-cat-head__cover{
  flex:0 0 auto;
  width:clamp(160px,22vw,240px);
  border-radius:var(--r-md);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--gvl-line);
  box-shadow:var(--sh-1);
}
#gvl-category .gvl-cat-head__cover img{
  display:block;width:100%;height:100%;
  object-fit:contain;background:#fff;
  aspect-ratio:16/11;
}

/* =========================================================
   3. SOUS-CATEGORIES EN CHIPS (.gvl-subchip) — SANS IMAGES
   Coherent avec .gvl-pill-mini (home) et les onglets mega menu.
   ========================================================= */
#gvl-category + .gvl-subcats-wrap,
.gvl-subcats-wrap{margin:18px 0 6px;}
.gvl-subcats-wrap .gvl-wrap{width:100%;max-width:var(--gvl-wrap);margin-inline:auto;padding-inline:0;}
.gvl-subcats .gvl-eyebrow{margin:0 0 10px;}
.gvl-subcats__row{display:flex;flex-wrap:wrap;gap:10px;}
.gvl-subchip{
  display:inline-flex;align-items:center;
  font-family:var(--gvl-text);
  font-size:13.5px;font-weight:600;line-height:1;
  color:var(--gvl-green-deep);
  background:#fff;
  border:1px solid var(--gvl-line);
  border-radius:var(--r-pill);
  padding:9px 16px;
  text-decoration:none;
  transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease,color .14s ease;
}
.gvl-subchip:hover{
  background:var(--gvl-tint);
  border-color:var(--gvl-green);
  color:var(--gvl-green-700);
  transform:translateY(-1px);
  box-shadow:var(--sh-1);
}
.gvl-subchip.is-active,
.gvl-subchip[aria-current="page"]{
  background:var(--gvl-green-deep);
  border-color:var(--gvl-green-deep);
  color:#fff;
}

/* =========================================================
   4. SIDEBAR ALLEGEE : ps_facetedsearch seul, ps_categorytree masque
   Habillage CSS uniquement (markup #search_filters INTACT). Sticky leger.
   .block-categories masque = repli au retrait BO de ps_categorytree (fuite TerraLED).
   ========================================================= */
body#category #left-column .block-categories{display:none;}
body#category #left-column #search_filters{
  position:sticky;
  top:calc(var(--gvl-header-h) + 12px);
}
body#category #left-column #search_filters{padding:6px 4px;}
/* On etend l'habillage existant (theme-global.css L333-339) : accordeon doux. */
body#category #search_filters .facet{border-top:1px solid var(--gvl-line);padding:14px 14px 6px;}
body#category #search_filters .facet:first-child{border-top:0;}
body#category #search_filters .facet-title{font-size:14px;letter-spacing:.01em;}
body#category #search_filters .facet .facet-label{margin:4px 0;}

/* =========================================================
   5. ZONE CONTENU : products-top (compteur + tri + toggler) puis grille produit
   ========================================================= */
#gvl-category .products-selection,
body#category #content-wrapper .products-selection{
  align-items:center;
  margin:0 0 14px;
  padding:10px 0;
  border-bottom:1px solid var(--gvl-line);
}

/* GRANDE GRILLE PRODUIT : on neutralise les classes Bootstrap (col-xs-12 col-sm-6
   col-xl-4) portees par chaque .js-product (productlist.tpl) et on pose une CSS grid.
   On vise .products (conteneur de productlist.tpl) DANS #js-product-list pour ne pas
   toucher la grille de l'entete ni du panier.
   PLEINE LARGEUR (defaut, pas de sidebar) => 4 colonnes (carte ~322px, identique a
   l'ancien 3-col en 2-zones). Repasse a 3 colonnes si la sidebar a facettes est active. */
body#category #content-wrapper #js-product-list .products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin:0;
}
body#category .container:has(#left-column .facet) #content-wrapper #js-product-list .products{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body#category #content-wrapper #js-product-list .products > .js-product{
  width:auto;
  max-width:none;
  flex:none;
  float:none;
  padding:0;
  margin:0;
}

/* =========================================================
   6. CARTE PRODUIT (.gvl-cat-card) — grammaire .gvl-mmp sans le prefixe ETS
   La carte herite deja du style global .product-miniature (theme-global.css L272+).
   Ici on cale la signature .gvl-mmp (hover, radius 14, media object-fit) + on ajoute
   stock, declinaisons habillees, slot 3x, nom line-clamp 2.
   ========================================================= */
.gvl-cat-card{
  border:1px solid var(--gvl-line);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.gvl-cat-card:hover{
  border-color:var(--gvl-green);
  box-shadow:var(--sh-1);
  transform:translateY(-2px);
}
/* MEDIA EN HAUT / CORPS EN BAS.
   PIEGE STRUCTUREL classic VERIFIE (04/06) : .product-description (le corps) est
   imbrique DANS .thumbnail-container, que theme-global traite en zone image flex-row.
   Sans correction, l'image (petite) et le corps se retrouvent COTE A COTE (carte
   horizontale). On force la colonne : media pleine largeur en haut, corps dessous. */
.gvl-cat-card .thumbnail-container{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  aspect-ratio:auto;height:auto;padding:0;overflow:hidden;
}
/* Le gradient global (::before inset:0) couvrait toute la carte : on le neutralise. */
.gvl-cat-card .thumbnail-container::before{content:none;}
/* Zone media : hauteur fixe, image centree contain, halo doux, separateur. */
.gvl-cat-card .thumbnail-top{
  position:relative;height:200px;padding:16px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#F1F6E9 0%,#fff 64%);
  border-bottom:1px solid var(--gvl-line);
}
.gvl-cat-card .thumbnail-top .product-thumbnail{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;
}
.gvl-cat-card .thumbnail-top img{
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}
/* Overlay quick-view : en absolu (hors flux, sinon il pousse la grille). On masque
   les declinaisons dupliquees ici (deja affichees et stylees dans le corps). */
.gvl-cat-card .highlighted-informations{
  position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
}
.gvl-cat-card .highlighted-informations .variant-links{display:none;}

.gvl-cat-card__body{padding:14px 16px 16px;gap:9px;}

/* [2 NOM] line-clamp 2 lignes (remplace truncate:30 du classic). */
.gvl-cat-card__name{
  font-family:var(--gvl-display);
  font-size:15px;line-height:1.3;font-weight:700;
  margin:0;
}
.gvl-cat-card__name a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--gvl-green-deep);
  min-height:2.6em;
}
.gvl-cat-card__name a:hover{color:var(--gvl-green-700);}

/* [3 DECLINAISONS] swatches natifs (variant-links.tpl) habilles en pastilles rondes. */
.gvl-cat-card__variants{margin:2px 0 0;}
.gvl-cat-card__variants .variant-links{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0;background:none;border:0;box-shadow:none;
}
.gvl-cat-card__variants .variant-links > a{
  display:inline-block;
  width:20px;height:20px;
  border-radius:50%;
  border:1px solid var(--gvl-line);
  background-size:cover;background-position:center;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.gvl-cat-card__variants .variant-links > a:hover{
  transform:scale(1.12);
  border-color:var(--gvl-green);
  box-shadow:0 0 0 2px var(--gvl-tint);
}
.gvl-cat-card__variants .variant-links .js-count{
  font-family:var(--gvl-mono);font-size:11px;color:var(--gvl-muted);margin-left:2px;
}

/* [4 PRIX] aligne la grammaire .gvl-mmp__foot : prix display gras + barre + %eco. */
.gvl-cat-card__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin-top:2px;padding-top:0;justify-content:flex-start;
}
.gvl-cat-card__price .price{
  font-family:var(--gvl-display);font-weight:800;font-size:19px;color:var(--gvl-green-deep);
}
.gvl-cat-card__price .regular-price{
  font-size:13px;color:var(--gvl-muted);text-decoration:line-through;font-weight:600;
}
.gvl-cat-card__price .discount-percentage,
.gvl-cat-card__price .discount-amount{
  font-family:var(--gvl-mono);font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(216,71,43,.12);color:#b3261e;border-radius:var(--r-pill);padding:2px 8px;
}

/* [5 PASTILLE STOCK] DUPLICATION des modificateurs header.css L249-252 en scope
   listing (factorisation possible plus tard en .gvl-stock--{availability} partagee). */
.gvl-cat-card__stock{
  align-self:flex-start;
  margin-top:2px;
  font-family:var(--gvl-mono);font-size:10px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  display:inline-block;
}
.gvl-cat-card .gvl-mmp__stock--available{background:rgba(111,180,58,.18);color:var(--gvl-green-text);}
.gvl-cat-card .gvl-mmp__stock--last_remaining_items{background:rgba(214,150,40,.18);color:#8a5d00;}
.gvl-cat-card .gvl-mmp__stock--unavailable,
.gvl-cat-card .gvl-mmp__stock--out_of_stock{background:rgba(216,71,43,.12);color:#b3261e;}

/* [6 SLOT 3x] pastille mono discrete. Le markup n'est rendu que si le flag est actif
   (gvl_pay_3x_enabled). display masque par defaut en filet de securite. */
.gvl-cat-card__pay3x{
  display:inline-block;
  align-self:flex-start;
  margin-top:2px;
  font-family:var(--gvl-mono);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gvl-green-text);
  background:var(--gvl-tint);
  border:1px solid var(--gvl-line);
  border-radius:var(--r-pill);
  padding:3px 9px;
}

/* =========================================================
   7. BANDE REASSURANCE HORTICOLE (bas de grille, avant footer)
   ========================================================= */
.gvl-cat-reassurance{margin:34px 0 0;}
.gvl-cat-reassurance .gvl-wrap{width:100%;max-width:var(--gvl-wrap);margin-inline:auto;padding-inline:0;}
.gvl-cat-reassurance__row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  list-style:none;margin:0;padding:18px;
  background:var(--gvl-surface);border:1px solid var(--gvl-line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.gvl-cat-reassurance__item{display:flex;align-items:center;gap:13px;}
.gvl-cat-reassurance__item .ic{
  flex:none;width:42px;height:42px;border-radius:var(--r-pill);
  background:var(--gvl-tint);display:flex;align-items:center;justify-content:center;color:var(--gvl-green-700);
}
.gvl-cat-reassurance__item .ic svg{width:21px;height:21px;}
.gvl-cat-reassurance__item .tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.gvl-cat-reassurance__item .tt{font-family:var(--gvl-display);font-weight:700;font-size:13.5px;color:var(--gvl-green-deep);line-height:1.2;}
.gvl-cat-reassurance__item .ds{font-family:var(--gvl-mono);font-size:11px;color:var(--gvl-muted);letter-spacing:.02em;}

/* =========================================================
   8. RESPONSIVE — grille produit pleine largeur (defaut 4 col)
   1280 : 4 col -> 3 col (cartes plus confortables).
   980  : 3 -> 2 col ; si sidebar a facettes active, elle repasse en drawer natif.
   760  : 2 col resserrees, chips wrap.
   560  : 1 col, cibles tactiles >=44px.
   ========================================================= */
@media (max-width:1280px){
  body#category #content-wrapper #js-product-list .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
}
@media (max-width:1100px){
  .gvl-cat-reassurance__row{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:980px){
  /* Si la sidebar a facettes est active (garde-fou :has), elle repasse en 1 colonne
     (drawer #search_filter_toggler natif). En pleine largeur, rien a basculer. */
  body#category #wrapper > .container > .row:has(#left-column .facet){grid-template-columns:1fr;gap:18px;}
  body#category #left-column:has(.facet){order:-1;}
  body#category #left-column #search_filters{position:static;top:auto;}
  body#category #content-wrapper #js-product-list .products{grid-template-columns:repeat(2,minmax(0,1fr));}
  #gvl-category .gvl-cat-head{flex-direction:column;align-items:flex-start;gap:18px;}
}

@media (max-width:760px){
  body#category #wrapper > .container{padding-inline:16px;}
  body#category #content-wrapper #js-product-list .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .gvl-cat-card .thumbnail-top{height:170px;}
  .gvl-subcats__row{flex-wrap:wrap;}
  #gvl-category .gvl-cat-head{padding:22px 20px;}
}

@media (max-width:560px){
  body#category #content-wrapper #js-product-list .products{grid-template-columns:1fr;}
  .gvl-cat-card .thumbnail-top{height:200px;}
  .gvl-cat-reassurance__row{grid-template-columns:1fr;}
  /* Cibles tactiles : chips et swatches >=44px de zone cliquable. */
  .gvl-subchip{padding:11px 16px;}
  .gvl-cat-card__variants .variant-links > a{width:24px;height:24px;}
}

/* Mouvement reduit : on respecte la preference utilisateur. */
@media (prefers-reduced-motion:reduce){
  .gvl-subchip,
  .gvl-cat-card,
  .gvl-cat-card__variants .variant-links > a{transition:none;}
  .gvl-cat-card:hover,
  .gvl-subchip:hover{transform:none;}
}