/* ============================================================
   Crinex Dental — habillage du Barn2 Product Table (Direction A)
   Repris fidèlement du prototype (design_handoff/catalog.css).
   ============================================================ */

.wc-product-table{
  width:100%; min-width:1000px; border-collapse:collapse;
  font-size:14px; color:var(--ink);
}

/* En-têtes de colonnes : sobres, gris, majuscules. */
.wc-product-table thead th{
  background:var(--surface-2); text-align:left;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:11px 16px; border-bottom:1px solid var(--line);
}
.wc-product-table thead th.col-price,
.wc-product-table thead th.col-ttc,
.wc-product-table thead th.crinex-col-ttc{ text-align:right; white-space:nowrap; }

/* Lignes. */
.wc-product-table tbody td{
  padding:17px 16px; border-bottom:1px solid var(--line-2);
  vertical-align:middle;
}
/* Désignation plus large (texte sur plusieurs lignes) ; conditionnement resserré. */
.wc-product-table td.col-designation{ min-width:270px; }
.wc-product-table td.col-conditionnement{ width:150px; }
.wc-product-table tbody tr:hover{ background:var(--surface-2); }
/* Liens dans les cellules : encre, pas de rouge ni de soulignement. */
.wc-product-table tbody a{ color:var(--ink); text-decoration:none; }
.wc-product-table tbody a:hover{ color:var(--accent-d); }

/* Image : vignette encadrée, fond blanc, fusion multiply. */
.wc-product-table td.col-image{ width:75px; }
/* Marge gauche de la 1re colonne (en-tête + vignette) = 15px, alignée sur les bandeaux
   catégorie « KITS DENTAIRES » (Barn2 la met à 10px -> !important). */
.wc-product-table thead th.col-image,
.wc-product-table tbody td.col-image{ padding-left:15px!important; }
.wc-product-table td.col-image img{
  width:50px; height:50px; object-fit:contain; mix-blend-mode:multiply;
  border:1px solid var(--line); border-radius:9px; background:#fff; padding:4px;
}

/* Réf : puce mono. */
.wc-product-table td.col-sku{ width:96px; }
.wc-product-table td.col-sku a,
.wc-product-table td.col-sku{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2);
}
.wc-product-table td.col-sku a{
  display:inline-block; background:var(--surface-2); padding:3px 7px; border-radius:6px;
}

/* Désignation : nom + gamme (accent) + description (muted). */
.wc-product-table td.crinex-col-designation{ line-height:1.3; }
.wc-product-table .name-link{
  display:block; font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-.01em;
}
.wc-product-table .name-link:hover{ color:var(--accent-d); }
.wc-product-table .gamme{
  display:inline-block; font-size:11.5px; font-weight:600; color:var(--accent-d); margin:2px 8px 0 0;
}
.wc-product-table .desc{
  display:block; font-size:12.5px; color:var(--muted); margin-top:2px; max-width:46ch;
}

/* Marque : tag coloré. */
.wc-product-table td.crinex-col-brand{ width:110px; }
/* Tag de marque : pastille « teinte douce » dans une couleur de la charte produits
   (fond très clair + encre saturée, sans puce). Touche de couleur discrète et lisible.
   La couleur de chaque marque est portée par --c (cf. mapping ci-dessous). */
.brand-tag{
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; line-height:1.4; white-space:nowrap;
  --c:var(--pal-blue);
  color:color-mix(in oklab, var(--c) 72%, #11272F);
  background:color-mix(in oklab, var(--c) 13%, #fff);
  border:1px solid color-mix(in oklab, var(--c) 26%, #fff);
}
.brand-VITIS{ --c:var(--pal-blue); }
.brand-Interprox{ --c:var(--pal-lime); }
.brand-PHB{ --c:var(--pal-sky); }
.brand-Halita{ --c:var(--pal-purple); }
.brand-Opalescence{ --c:var(--pal-teal); }
.brand-Crinex{ --c:var(--pal-orange); }

/* Pastille de remise (sous la désignation). */
.wc-product-table .disc-pill{
  display:inline-flex; align-items:center; gap:4px; margin-top:6px; white-space:nowrap;
  font-size:11px; font-weight:700; color:var(--accent-d);
  background:var(--accent-t); padding:3px 9px; border-radius:999px;
}
.wc-product-table .disc-pill svg{ flex:none; }

/* Conditionnement : texte discret. */
.wc-product-table td.col-att-conditionnement,
.wc-product-table td.col-att-conditionnement a{ width:160px; color:var(--ink-2); }

/* Prix HT (accent) et TTC (muted), alignés à droite, chiffres tabulaires. */
.wc-product-table td.col-price,
.wc-product-table td.crinex-col-ttc{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; width:92px;
}
.wc-product-table td.col-price{ color:var(--accent-d); font-weight:700; font-size:14.5px; }
.wc-product-table td.crinex-col-ttc{ color:var(--ink-2); }
.wc-product-table td.col-price .amount,
.wc-product-table td.crinex-col-ttc .amount{ font-weight:inherit; color:inherit; }

/* Colonne Acheter : quantité (carré) + bouton ICÔNE panier (carré, même taille). */
.wc-product-table td.col-buy{ width:120px; }
.wc-product-table td.col-buy form.cart{ margin:0; }
.wc-product-table td.col-buy .add-to-cart-button{
  display:flex!important; align-items:center; gap:8px; flex-wrap:nowrap;
}
.wc-product-table td.col-buy .quantity{ margin:0!important; }
.wc-product-table td.col-buy .quantity input.qty{
  height:44px!important; min-height:0!important; width:48px; box-sizing:border-box!important;
  padding:0 4px!important; margin:0; line-height:normal!important;
  border:1px solid var(--line); border-radius:calc(var(--radius)*.6);
  text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
}
/* Bouton "Ajouter au panier" : carré, icône panier blanche, texte masqué. */
.wc-product-table td.col-buy .button,
.wc-product-table td.col-buy button[type="submit"],
.wc-product-table .single_add_to_cart_button,
.wc-product-table td.col-buy .add_to_cart_button{
  width:44px!important; height:44px!important; min-width:44px; flex:none; box-sizing:border-box!important;
  padding:0!important; margin:0!important; font-size:0!important; line-height:0!important; color:transparent!important;
  border:1px solid var(--accent)!important; border-radius:calc(var(--radius)*.6)!important;
  background-color:var(--accent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:center!important; background-size:21px!important;
  box-shadow:none!important; text-transform:none!important; letter-spacing:0!important;
}
.wc-product-table td.col-buy .button:hover,
.wc-product-table td.col-buy button[type="submit"]:hover,
.wc-product-table .single_add_to_cart_button:hover,
.wc-product-table td.col-buy .add_to_cart_button:hover{
  background-color:var(--accent-d)!important; border-color:var(--accent-d)!important;
}

/* Barre du BAS (length + info + pagination) : inutile (tout sur une page).
   On masque tout le conteneur — supprime aussi le trait disgracieux en bas. */
.wc-product-table-controls.wc-product-table-below{ display:none!important; }
/* Dernière rangée : pas de séparateur en bas (le cadre suffit). */
.wc-product-table.dataTable tbody tr:last-child td{ border-bottom:0!important; }

/* Barre du HAUT : pills (pleine largeur) puis recherche À GAUCHE (large) + Marque à sa droite,
   comme la maquette. !important pour neutraliser le float/text-align par défaut de DataTables/Barn2. */
.wc-product-table-controls.wc-product-table-above{
  display:flex!important; align-items:center; justify-content:flex-start!important; gap:12px;
  padding:0; margin:0 0 22px!important; flex-wrap:wrap; text-align:left!important;
}
.wc-product-table-controls.wc-product-table-above .crinex-pills{ order:-1; flex-basis:100%; }
.wc-product-table-controls.wc-product-table-above .dataTables_filter{ order:1; float:none!important; margin:0!important; }
.wc-product-table-controls.wc-product-table-above .wc-product-table-select-filters{ order:2; flex:0 0 auto; float:none!important; margin:0!important; }

/* Pills de catégorie (Tous + 7 catégories) — sur leur propre ligne, au-dessus.
   margin:0!important pour annuler le `.wc-product-table-controls > div{margin-left:25px}` de Barn2
   (sinon les pills sont décalées de 25px vs la recherche/le tableau). */
.crinex-pills{ display:flex; flex-wrap:wrap; gap:7px; flex-basis:100%; margin:0!important; }
.crinex-pill{
  border:1px solid var(--line)!important; background:var(--surface)!important; color:var(--ink-2)!important;
  font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:999px;
  cursor:pointer; transition:all .14s; text-decoration:none!important;
}
.crinex-pill:hover,
.crinex-pill:focus{ border-color:var(--accent)!important; color:var(--accent-d)!important; background:var(--surface)!important; }
.crinex-pill.on,
.crinex-pill.on:hover{
  background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important;
  box-shadow:0 3px 9px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* Sous-en-têtes par catégorie (bandeau accent). */
.wc-product-table tr.group td,
.wc-product-table tr.dtrg-group td,
.wc-product-table tr.crinex-group td{
  background:linear-gradient(90deg,var(--accent-t),transparent)!important;
  padding:10px 15px!important; border-bottom:1px solid var(--line)!important; border-top:0!important;
  font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--accent-d);
  text-transform:uppercase; box-shadow:none!important;
}
.wc-product-table tr.crinex-group td span{
  margin-left:8px; font-size:11.5px; font-weight:700; color:var(--muted);
  background:var(--surface); padding:1px 8px; border-radius:999px; text-transform:none;
}
.wc-product-table tr.crinex-group:hover td{ box-shadow:none!important; } /* pas de hover sur les bandeaux */
/* Liseré vertical multicolore (charte) à gauche de chaque bandeau de catégorie. */
.wc-product-table tr.crinex-group td:first-child{ position:relative; }
.wc-product-table tr.crinex-group td:first-child::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brandstrip-v);
}

/* Colonne technique de regroupement : cachée (sert au tri + au JS). */
.wc-product-table th[data-name="catorder"],
.wc-product-table td.crinex-col-catorder{ display:none!important; }

/* ============================================================
   Overrides DataTables (quadrillage / striping / hover / tri)
   DataTables applique le striping/tri/hover via box-shadow:inset gris
   (rgba(0,0,0,.0x), SANS !important) → un simple !important suffit.
   ============================================================ */
/* Bordures : pas de lignes verticales ; séparateurs horizontaux fins. */
table.wc-product-table.dataTable,
table.wc-product-table.dataTable td,
table.wc-product-table.dataTable th{ border-left:0!important; border-right:0!important; }
table.wc-product-table.dataTable thead th{ border-top:0!important; border-bottom:1px solid var(--line)!important; }
table.wc-product-table.dataTable tbody td{ border-top:0!important; border-bottom:1px solid var(--line-2)!important; }

/* Rangées blanches : neutralise le striping ET la surbrillance de colonne triée. */
table.wc-product-table.dataTable tbody td,
table.wc-product-table.dataTable tbody td.sorting_1,
table.wc-product-table.dataTable tbody td.sorting_2,
table.wc-product-table.dataTable tbody td.sorting_3{ box-shadow:none!important; }
/* Hover : teinte cyan légère (plus bleu, comme la maquette). */
table.wc-product-table.dataTable tbody tr:hover td{
  box-shadow:inset 0 0 0 9999px var(--accent-t)!important;
}

/* VRAIE source du striping gris : Hello Elementor reset.css met un fond gris
   sur les <td> des rangées impaires (table tbody>tr:nth-child(odd)>td).
   On force le blanc (sauf bandeaux de catégorie, plus spécifiques). */
table.wc-product-table tbody td{ background-color:var(--surface)!important; }

/* ============================================================
   Cadre du tableau : carte arrondie + bordure + ombre (maquette .table-wrap)
   ============================================================ */
/* La carte (bordure/ombre/arrondi) enveloppe le TABLEAU seul (via .crinex-table-card,
   posé en JS) ; la toolbar reste au-dessus, hors du cadre, comme la maquette. */
.crinex-table-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-m); overflow-x:auto;
}

/* ============================================================
   Barre d'outils — repris de la maquette (.tb-search / .tb-select)
   Recherche = boîte blanche avec loupe interne (sans libellé « Recherche : »,
   retiré en JS) ; Marque = select propre avec chevron sur-mesure.
   ============================================================ */
/* Recherche : la <label> de DataTables sert de boîte ; l'input est sans bordure. */
.wc-product-table-above .dataTables_filter{ flex:1 1 320px!important; max-width:520px!important; margin:0!important; }
.wc-product-table-above .dataTables_filter label{
  display:flex; align-items:center; margin:0; box-sizing:border-box;
  background:var(--surface) no-repeat 13px center; border:1px solid var(--line); border-radius:10px;
  padding:0 12px 0 40px; min-height:44px; transition:border .15s, box-shadow .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235E7884' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size:18px;
}
.wc-product-table-above .dataTables_filter label:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-t2); }
.wc-product-table-above .dataTables_filter input,
.wc-product-table-above input[type="search"]{
  flex:1; width:100%; min-width:0; box-sizing:border-box; margin:0; padding:11px 0; height:auto;
  border:0!important; background:transparent!important; box-shadow:none!important; outline:none!important;
  font-family:inherit; font-size:14.5px; color:var(--ink);
}
.wc-product-table-above .dataTables_filter input::placeholder,
.wc-product-table-above input[type="search"]::placeholder{ color:var(--muted); }

/* Filtre Marque (maquette .tb-select) : le CONTENEUR est la boîte blanche, avec un libellé
   « Marque » (ajouté en JS) + le <select> sans bordure montrant « Toutes les marques ». */
.wc-product-table-above .wc-product-table-select-filters,
.wc-product-table-above .wcpt-filter,
.wc-product-table-above .wcpt-filters{
  display:flex!important; align-items:center; gap:8px; box-sizing:border-box;
  background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:10px!important;
  min-height:44px; padding:0 14px!important; margin:0!important; transition:border .15s, box-shadow .15s;
}
.wc-product-table-above .wc-product-table-select-filters:focus-within,
.wc-product-table-above .wcpt-filter:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-t2); }
/* Libellé « Marque » (span ajouté en JS) + éventuel label natif de Barn2. */
.wc-product-table-above .crinex-filter-label,
.wc-product-table-above .filter-label,
.wc-product-table-above .wc-product-table-select-filters > label{
  font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; flex:none; margin:0;
}
/* Le <select> à l'intérieur : sans bordure, chevron sur-mesure, valeur en gras encre. */
.wc-product-table-above .wc-product-table-select-filters select,
.wc-product-table-above .wcpt-filter select,
.wc-product-table-above select{
  -webkit-appearance:none; appearance:none; cursor:pointer; margin:0!important; box-sizing:border-box;
  border:0!important; background-color:transparent!important; box-shadow:none!important; outline:none;
  min-height:42px; padding:0 26px 0 4px; min-width:140px;
  font-family:inherit; font-size:14.5px; font-weight:700; color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23013D77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:16px;
}
.wc-product-table-wrapper .dataTables_filter label{ font-weight:600; color:var(--ink-2); }

/* ============================================================
   Lightbox image sur-mesure (carte centrée, taille limitée)
   ============================================================ */
.crinex-lb-backdrop{
  position:fixed; inset:0; z-index:99999; padding:24px;
  background:rgba(7,28,34,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:grid; place-items:center; animation:crinexLbFade .18s ease;
}
@keyframes crinexLbFade{ from{ opacity:0; } }
.crinex-lb{
  position:relative; display:grid; grid-template-columns:1.05fr 1fr;
  width:min(1150px,92vw); max-height:min(880px,90vh);
  background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-l);
}
.crinex-lb-close{
  position:absolute; top:14px; right:14px; z-index:4; width:38px; height:38px; padding:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .12s,border-color .12s;
}
.crinex-lb-close svg{ width:16px; height:16px; stroke:var(--ink-2); stroke-width:2.2; display:block; }
.crinex-lb-close:hover{ background:var(--accent-t); border-color:var(--accent); }
.crinex-lb-close:hover svg{ stroke:var(--accent-d); }
/* Hauteur FIXE de la zone image : la popup a sa taille finale AVANT le chargement de
   l'image (plus d'effet « la popup grandit quand l'image arrive »). L'image s'insère dedans. */
.crinex-lb-img{ background:#fff; display:grid; place-items:center; padding:40px; border-right:1px solid var(--line); height:min(460px,62vh); box-sizing:border-box; }
.crinex-lb-img img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.crinex-lb-info{ padding:40px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.crinex-lb-gamme{ display:inline-block; align-self:flex-start; font-size:13px; color:var(--muted); font-weight:600; }
/* En badge coloré (mêmes codes couleur que les tags Marque du tableau) quand la marque est connue. */
.crinex-lb-gamme.is-brand{
  color:#fff; font-weight:700; font-size:12.5px; line-height:1.4;
  padding:5px 13px; border-radius:999px; margin-bottom:12px;
}
.crinex-lb-name{ font-size:28px; font-weight:800; letter-spacing:-.02em; margin:6px 0 4px; color:var(--ink); }
.crinex-lb-desc{ font-size:15px; color:var(--ink-2); line-height:1.55; margin:14px 0; }
.crinex-lb-prices{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:10px 0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.crinex-lb-prices > div{ background:var(--surface); padding:14px 16px; }
/* Uniquement le LIBELLÉ (span direct), pas les spans du montant injectés en .html(). */
.crinex-lb-prices > div > span{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.crinex-lb-prices b{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.crinex-lb-prices .ttc{ background:var(--accent-t); }
.crinex-lb-prices .ttc b{ color:var(--accent-d); }
/* Remise : prix barré (del) discret, prix actuel (ins) en évidence, texte verbeux masqué. */
.crinex-lb-prices del{ color:var(--muted); font-weight:400; font-size:14px; text-decoration:line-through; margin-right:8px; }
.crinex-lb-prices del bdi, .crinex-lb-prices del .woocommerce-Price-amount{ color:var(--muted); }
.crinex-lb-prices ins{ text-decoration:none; font-weight:800; }
.crinex-lb-prices .screen-reader-text{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:860px){
  .crinex-lb{ grid-template-columns:1fr; overflow:hidden auto; -webkit-overflow-scrolling:touch; max-height:92vh; }
  .crinex-lb-img{ border-right:0; border-bottom:1px solid var(--line); padding:22px; cursor:zoom-in; height:min(300px,36vh); }
  .crinex-lb-img img{ max-height:100%; }
  .crinex-lb-hint{ display:none; }            /* pas de loupe au survol sur tactile */
  .crinex-lb-info{ padding:24px 26px 28px; }
  .crinex-lb-name{ font-size:22px; }
  .crinex-lb-close{ top:10px; right:10px; }
  .crinex-lb-buy-row{ flex-wrap:wrap; }
  .crinex-lb-buy .single_add_to_cart_button{ min-width:160px; }
}

/* Lightbox : loupe au survol (lentille qui suit le curseur) + zoom plein écran au clic. */
.crinex-lb-img{ position:relative; cursor:crosshair; overflow:hidden; }
.crinex-lens{
  position:absolute; pointer-events:none; display:none;
  width:220px; height:220px; border-radius:50%; border:3px solid #fff; background-color:#fff;
  background-repeat:no-repeat; z-index:3;
  box-shadow:0 8px 26px rgba(7,28,34,.30), 0 0 0 1px var(--line);
}
.crinex-lb-hint{
  position:absolute; bottom:14px; right:14px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-s); pointer-events:none;
}
.crinex-lb-hint svg{ stroke:var(--accent-d); }
.crinex-zoom-backdrop{
  position:fixed; inset:0; z-index:100000; padding:20px; cursor:zoom-out;
  background:rgba(7,28,34,.9); display:grid; place-items:center; animation:crinexLbFade .15s ease;
}
.crinex-zoom-backdrop img{ max-width:96vw; max-height:94vh; object-fit:contain; }

/* Lightbox : quantité + Ajouter au panier (bouton complet, pas l'icône). */
.crinex-lb-buy{ margin-top:18px; }
.crinex-lb-buy-row{ display:flex; align-items:center; gap:12px; }
.crinex-lb-buy .quantity{ margin:0; }
.crinex-lb-buy .quantity input.qty{
  height:50px; width:76px; box-sizing:border-box; padding:0 8px; margin:0;
  border:1px solid var(--line); border-radius:10px; text-align:center;
  font-family:inherit; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink);
}
.crinex-lb-buy .quantity input.qty:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-t2); }
.crinex-lb-buy .single_add_to_cart_button{
  flex:1; height:50px; padding:0 26px; background:var(--accent)!important; color:#fff!important;
  border:1px solid var(--accent)!important; border-radius:10px!important; box-shadow:none!important;
  font-family:inherit!important; font-weight:700!important; font-size:15px!important; letter-spacing:0; cursor:pointer;
  transition:background .12s,border-color .12s;
}
.crinex-lb-buy .single_add_to_cart_button:hover{ background:var(--accent-d)!important; border-color:var(--accent-d)!important; }
.crinex-lb-buy .single_add_to_cart_button.is-added{ background:var(--ok,#1f9e6b)!important; border-color:var(--ok,#1f9e6b)!important; }

/* ============================================================
   RESPONSIVE — iPad & iPhone (≤ 1200px)
   Le tableau riche devient une liste « vignette · désignation · prix ».
   Un appui sur la rangée ouvre la popup (toutes les infos + ajout panier).
   Seuil à 1200px : couvre la plage où le tableau complet ne tient pas
   (en deçà, Barn2 repliait les colonnes avec un « + »).
   ============================================================ */
@media (max-width:1200px){
  /* Plus de défilement horizontal : la carte enveloppe une pile de rangées. */
  .crinex-table-card{ overflow-x:visible; border-radius:14px; }

  /* On casse la sémantique « table » pour empiler des rangées-cartes. */
  table.wc-product-table{ display:block; min-width:0!important; width:100%; }
  table.wc-product-table.dataTable{ min-width:0!important; }
  .wc-product-table thead{ display:none!important; }
  .wc-product-table tbody{ display:block; }

  /* Colonnes secondaires masquées (toutes visibles dans la popup). */
  .wc-product-table td.col-sku,
  .wc-product-table td.col-brand, .wc-product-table td.crinex-col-brand,
  .wc-product-table td.col-conditionnement, .wc-product-table td.col-att-conditionnement,
  .wc-product-table td.col-ttc, .wc-product-table td.crinex-col-ttc,
  .wc-product-table td.col-buy{ display:none!important; }

  /* Défense anti « DataTables Responsive » : si Barn2 repliait quand même des colonnes,
     on neutralise l'expander « + » et les lignes-détail, et on force nos 3 colonnes. */
  .wc-product-table td.dtr-control::before,
  .wc-product-table tr.child,
  .wc-product-table tr.dtr-expanded + tr.child,
  .wc-product-table .dtr-details{ display:none!important; }
  .wc-product-table tbody tr:not(.crinex-group) td.col-image,
  .wc-product-table tbody tr:not(.crinex-group) td.col-designation,
  .wc-product-table tbody tr:not(.crinex-group) td.col-price{ display:block!important; }

  /* Rangée = carte tappable : vignette | désignation | prix | chevron. */
  .wc-product-table tbody tr:not(.crinex-group){
    display:grid!important; grid-template-columns:54px minmax(0,1fr) auto 12px;
    align-items:center; gap:13px; cursor:pointer;
    padding:13px 15px; background:var(--surface)!important; box-shadow:none!important;
    border-bottom:1px solid var(--line-2);
  }
  .wc-product-table.dataTable tbody tr:not(.crinex-group):last-child{ border-bottom:0; }
  .wc-product-table tbody tr:not(.crinex-group):active{ background:var(--surface-2)!important; }
  .wc-product-table tbody tr:not(.crinex-group) td{
    display:block; padding:0!important; border:0!important; width:auto!important;
    box-shadow:none!important; background:transparent!important;
  }
  /* Chevron « › » : la rangée est cliquable. */
  .wc-product-table tbody tr:not(.crinex-group)::after{
    content:""; justify-self:end; width:8px; height:8px; margin-right:1px;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg);
  }

  /* Vignette un peu plus grande, cadrée. */
  .wc-product-table td.col-image{ width:auto; }
  .wc-product-table td.col-image img{ width:54px; height:54px; }

  /* Désignation : nom + gamme (+ pastille) ; description masquée (présente dans la popup). */
  .wc-product-table td.col-designation .desc{ display:none; }
  .wc-product-table td.col-designation .name-link{ font-size:15px; }
  .wc-product-table td.col-designation .gamme{ margin-top:1px; }

  /* Prix HT mis en avant, aligné à droite, avec le suffixe « HT ». */
  .wc-product-table td.col-price{ text-align:right; white-space:nowrap; font-size:15px; }
  .wc-product-table td.col-price::after{
    content:" HT"; font-size:.7em; font-weight:700; color:var(--muted); margin-left:1px;
  }

  /* Bandeaux de catégorie : pleine largeur. */
  .wc-product-table tbody tr.crinex-group{ display:block; }
  .wc-product-table tbody tr.crinex-group td{ display:block; width:auto!important; }

  /* Hover desktop neutralisé (tactile). */
  table.wc-product-table.dataTable tbody tr:hover td{ box-shadow:none!important; }
}

/* ----- Téléphones (≤ 640px) : toolbar empilée, pills défilantes ----- */
@media (max-width:640px){
  .wc-product-table-controls.wc-product-table-above{ flex-direction:column; align-items:stretch; gap:10px; }
  /* En colonne, flex-basis = hauteur : on annule le flex:1 1 320px (sinon grand vide).
     !important pour battre le flex:1 1 320px!important de la recherche (mode desktop). */
  .wc-product-table-above .dataTables_filter,
  .wc-product-table-above .wc-product-table-select-filters{ flex:0 0 auto!important; }
  .wc-product-table-above .dataTables_filter{ max-width:none; }
  .wc-product-table-above .dataTables_filter,
  .wc-product-table-above .wc-product-table-select-filters,
  .wc-product-table-above .wcpt-filter,
  .wc-product-table-above .wcpt-filters,
  .wc-product-table-above select{ width:100%; min-width:0; box-sizing:border-box; }

  /* Pills : elles s'empilent (wrap) sur plusieurs lignes — surtout PAS une seule ligne
     qui déborde l'écran (provoquait un scroll horizontal de toute la page sur mobile). */
  .crinex-pills{ flex-wrap:wrap; overflow:visible; gap:6px; }
  .crinex-pill{ padding:7px 12px; font-size:13px; }

  /* Vignette un peu plus petite sur petit écran. */
  .wc-product-table td.col-image img{ width:48px; height:48px; }
  .wc-product-table tbody tr:not(.crinex-group){ grid-template-columns:48px minmax(0,1fr) auto 10px; gap:11px; padding:12px 13px; }
}

/* Lien « Voir le panier » ajouté après un ajout ajax (.added_to_cart) : inutile — le tiroir
   panier s'ouvre automatiquement — et il décalait la colonne Acheter. On le masque. */
.wc-product-table a.added_to_cart,
.wc-product-table-wrapper a.added_to_cart,
.wc-product-table .col-buy .added_to_cart,
td.col-buy a.added_to_cart{ display:none!important; }