/*
Theme Name: HAYDN7 Shop
Author: HAYDN7
Version: 2.4
Description: Custom WooCommerce theme (premium minimal)
*/

:root{
  --bg:#07080b;
  --fg:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12);
  --panel:rgba(0,0,0,.22);
  --shadow:0 28px 120px rgba(0,0,0,.60);
  --r:18px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(1200px 900px at 28% 12%, rgba(77,226,255,.08), transparent),
    radial-gradient(900px 700px at 78% 28%, rgba(168,85,247,.08), transparent),
    var(--bg);
  color:var(--fg);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: rgba(77,226,255,.25); }

.wrap{ width:min(1120px, 92vw); margin:0 auto; }

.site{ min-height:100vh; display:flex; flex-direction:column; }
.site main{ flex:1; }

/* =========================
   Header
========================= */
.h7Header{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,8,11,.82), rgba(7,8,11,.46));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.h7Header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.brand__name{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}
.brand__sub{
  margin-top:2px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
}

.nav{ display:flex; align-items:center; gap:12px; }
.nav a{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.80);
  padding:10px 10px; border-radius:999px;
  border:1px solid transparent;
  transition: .2s ease;
}
.nav a:hover{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}

.cartBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.cartCount{
  min-width:20px; height:20px; padding:0 6px;
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  font-size:11px; font-weight:800;
}

/* =========================
   Shop grid
========================= */
.hero{ padding:62px 0 18px; text-align:center; }

.kicker{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:800;
  font-size:12px;
  color:rgba(255,255,255,.62);
}
.h1{
  margin:14px 0 0;
  font-weight:800;
  letter-spacing:-.05em;
  font-size:clamp(30px, 4vw, 54px);
  text-shadow:0 24px 120px rgba(0,0,0,.85);
}
.lead{
  margin:12px auto 0;
  max-width:62ch;
  line-height:1.7;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding-bottom:64px;
}
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

.card{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .22s ease, border-color .22s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color: rgba(255,255,255,.18);
}

.media{
  position:relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(900px 600px at 50% 25%, rgba(255,255,255,.06), transparent),
    rgba(255,255,255,.02);
  display:grid;
  place-items:center;
  padding:18px;
}
.media img{
  width:100%;
  height:100%;
  object-fit: contain;
  filter: contrast(1.05) saturate(1.02);
}

.badge{
  position:absolute; left:12px; top:12px;
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.86);
}

.body{ padding:16px; }
.title{
  margin:0;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:18px;
}
.meta{
  margin-top:6px;
  color:rgba(255,255,255,.68);
  line-height:1.6;
  font-size:13px;
}

.row{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.price{ font-weight:800; letter-spacing:.02em; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  transition: transform .2s ease, background .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background: rgba(255,255,255,.14);
}

/* =========================
   Footer
========================= */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:28px 0;
  color:rgba(255,255,255,.60);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer a{ color: rgba(255,255,255,.78); }

/* =========================================================
   PRODUCT PAGE
========================================================= */
.pWrap{ padding: 26px 0 72px; }

.pTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
  padding: 12px 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.pCrumb{
  color: rgba(255,255,255,.70);
  font-size: 11px;
  letter-spacing:.14em;
  text-transform: uppercase;
}
.pCrumb a{ color: rgba(255,255,255,.90); }
.pSep{ opacity:.45; padding: 0 10px; }

.pPill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 11px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
}

.pGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .pGrid{ grid-template-columns:1fr; }
}

/* Gallery */
.pGallery{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.pStage{
  position: relative;
  height: min(72vh, 720px);
  min-height: 420px;
  padding: 18px;
  background:
    radial-gradient(900px 600px at 50% 25%, rgba(255,255,255,.06), transparent),
    rgba(255,255,255,.02);
}
.pStage img{
  position:absolute;
  inset: 18px;
  margin:auto;
  width:auto;
  height:auto;
  max-width: calc(100% - 36px);
  max-height: calc(100% - 36px);
  object-fit: contain;
  transition: opacity .25s ease, transform .35s ease;
}
.pStage img.is-hidden{
  opacity:0;
  transform: scale(.985);
  pointer-events:none;
}

/* thumbs */
.pThumbs{
  display:flex;
  gap:10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  overflow:auto;
}
.pThumb{
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  padding: 8px;
  flex: 0 0 auto;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.pThumb:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.pThumb.is-active{
  border-color: rgba(77,226,255,.35);
  background: rgba(77,226,255,.08);
}
.pThumb img{ width:100%; height:100%; object-fit: contain; }

/* Info */
.pInfo{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 92px;
}
@media (max-width: 980px){ .pInfo{ position: static; } }

.pName{
  margin: 6px 0 0;
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
}
.pPrice{ margin-top: 12px; font-weight: 800; font-size: 18px; }
.pDesc{ margin-top: 12px; color: var(--muted); line-height: 1.75; }

.pFine{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.pBack{
  display:inline-block;
  font-size: 11px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.pBack:hover{ color: rgba(255,255,255,.92); }

/* Woo cleanup */
.woocommerce a.reset_variations{ display:none !important; }
.woocommerce .stock{ display:none !important; }
.woocommerce-variation-availability{ display:none !important; }

/* Remove duplicate default "Size" label */
.woocommerce table.variations td.label,
.woocommerce table.variations th.label,
.woocommerce table.variations .label{
  display:none !important;
}
.woocommerce table.variations td.value{
  padding-left: 0 !important;
}

/* Hide dropdowns hard */
.woocommerce form.variations_form table.variations select,
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart table.variations select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Cart box */
.woocommerce form.cart{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
}

/* ===== Size row aligned ===== */
.h7VarRow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 10px;
}
.h7VarLabel{
  font-size: 12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  min-width: 52px;
}

/* pills */
.h7Var{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.h7Opt{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  padding: 12px 14px;
  min-width: 52px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.h7Opt:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.h7Opt.is-active{
  background: rgba(77,226,255,.10);
  border-color: rgba(77,226,255,.35);
}
.h7Opt.is-disabled{
  opacity: .32;
  cursor:not-allowed;
  pointer-events:none;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ===== Quantity: small + perfectly centered + display only ===== */
.woocommerce div.product form.cart div.quantity{
  width: auto;
  margin-top: 12px;
}

.h7Qty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.h7QtyBtn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease;
}
.h7QtyBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.woocommerce .quantity input.qty{
  width: 44px !important;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .06em;

  /* PERFECT CENTERING */
  text-align: center;
  line-height: 28px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;

  outline: none;

  /* display-only */
  pointer-events: none !important;
  user-select: none !important;
}

/* CTA */
.single_add_to_cart_button,
.woocommerce button.button{
  width:100%;
  padding: 14px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.single_add_to_cart_button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
}
/* =========================================================
   CART — PREMIUM V2 (Layout + spacing + totals button)
========================================================= */

.woocommerce-cart .woocommerce{
  width:min(1120px,92vw);
  margin:0 auto;
  padding:14px 0 64px;
}

/* --- Main two-column layout --- */
.woocommerce-cart .woocommerce-cart-form{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .woocommerce-cart .woocommerce-cart-form{
    grid-template-columns: 1fr;
  }
}

/* Make the table behave like a card list (not a table) */
.woocommerce-cart .woocommerce-cart-form table.shop_table{
  width:100%;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
  border-collapse: separate !important;
  border-spacing:0 !important;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table thead{ display:none; }

/* Body = stack */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody{
  display:block;
}

/* Only cart items are blocks */
.woocommerce-cart .woocommerce-cart-form tr.cart_item{
  display:grid !important;
  grid-template-columns: 46px 86px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.woocommerce-cart .woocommerce-cart-form tr.cart_item:last-of-type{
  border-bottom:none;
}

/* Reset cells */
.woocommerce-cart .woocommerce-cart-form tr.cart_item td{
  padding:0 !important;
  border:none !important;
  background: transparent !important;
}

/* Remove price/subtotal columns */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal{
  display:none !important;
}

/* Remove button on far left */
.woocommerce-cart td.product-remove a.remove{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86) !important;
  display:grid;
  place-items:center;
  text-decoration:none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.woocommerce-cart td.product-remove a.remove:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
}

/* Thumb */
.woocommerce-cart td.product-thumbnail{
  width:86px;
}
.woocommerce-cart td.product-thumbnail a{
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  padding:8px;
}
.woocommerce-cart td.product-thumbnail img{
  width:100%;
  height:70px;
  object-fit:contain;
}

/* Title + variation */
.woocommerce-cart td.product-name{
  min-width:0;
}
.woocommerce-cart td.product-name a{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:15px;
  display:inline-block;
}
.woocommerce-cart td.product-name dl.variation{
  margin:6px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.70);
}
.woocommerce-cart td.product-name dt,
.woocommerce-cart td.product-name dd{
  display:inline;
  margin:0;
}
.woocommerce-cart td.product-name dt{ opacity:.65; }
.woocommerce-cart td.product-name dd{ margin-left:6px; margin-right:10px; }

/* Quantity cell aligned right */
.woocommerce-cart td.product-quantity{
  justify-self:end;
}

/* Hide Woo qty arrows; your custom +/- stays */
.woocommerce-cart .quantity{
  margin:0 !important;
}
.woocommerce-cart .quantity input.qty{
  width:44px !important;
  height:28px !important; 
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(0,0,0,.18) !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-align:center !important;
  line-height:28px !important;
  padding:0 !important;
}

/* --- Actions row: kill coupon + make it clean --- */
.woocommerce-cart td.actions .coupon{ display:none !important; }

/* Hide update cart button (we'll auto-update with JS) */
.woocommerce-cart button[name="update_cart"]{
  display:none !important;
}

/* Keep actions row but minimal padding */
.woocommerce-cart td.actions{
  padding: 12px 14px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* --- Totals card on the right --- */
.woocommerce-cart .cart-collaterals{
  position:sticky;
  top:92px;
}
@media (max-width: 980px){
  .woocommerce-cart .cart-collaterals{ position:static; }
}

.woocommerce-cart .cart-collaterals .cart_totals{
  float:none !important;
  width:100% !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
  padding:16px;
}

.woocommerce-cart .cart_totals h2{
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:20px;
}

.woocommerce-cart .cart_totals table{
  border:none !important;
  margin:0 0 14px !important;
  width:100%;
}

.woocommerce-cart .cart_totals tr{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0;
}
.woocommerce-cart .cart_totals tr:last-child{ border-bottom:none; }

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{
  border:none !important;
  padding:0 !important;
  color:rgba(255,255,255,.78);
  font-size:13px;
}

.woocommerce-cart .cart_totals td{
  color:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.02em;
}

/* Checkout button premium */
.woocommerce-cart .wc-proceed-to-checkout{
  padding:0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  width:100%;
  padding:14px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  text-align:center;
  transition: transform .18s ease, background .18s ease !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  transform:translateY(-1px);
  background: rgba(255,255,255,.16) !important;
}

/* Hide the “added to cart” big notice button styling to be slimmer */
.woocommerce .woocommerce-message{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.woocommerce .woocommerce-message a.button{
  width:auto !important;
  padding:10px 12px !important;
  font-size:10px !important;
}

/* =========================================================
   SHOP HOME — 2 produits visibles sans scroll (desktop)
   Objectif : cartes compactes + hero plus court
   ========================================================= */

/* 1) Réduire l'espace global de la page boutique */
body.post-type-archive-product .wrap{
  padding-top: 18px !important;
  padding-bottom: 24px !important;
}

/* 2) Hero plus court (si ton template a une section hero) */
.shop-hero,
.h7shop-hero,
.woocommerce-products-header{
  padding: 18px 0 10px !important;
  margin: 0 !important;
}

/* Si tu as un gros H1 + sous-texte */
.shop-hero h1,
.h7shop-hero h1,
.woocommerce-products-header__title{
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.05 !important;
  margin: 8px 0 8px !important;
}
.shop-hero p,
.h7shop-hero p,
.woocommerce-products-header p{
  margin: 0 !important;
  opacity: .75 !important;
}

/* 3) Grille : moins de gap + remonte la grille */
body.post-type-archive-product .woocommerce ul.products{
  gap: 14px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

/* 4) Carte (la "bulle") beaucoup plus compacte */
body.post-type-archive-product .woocommerce ul.products li.product{
  padding: 12px !important;
  border-radius: 16px !important;
}

/* 5) L'image : hauteur contrôlée, sinon elle force la card à être énorme */
body.post-type-archive-product .woocommerce ul.products li.product img{
  height: clamp(150px, 22vh, 220px) !important; /* clé pour éviter le scroll */
  width: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  margin: 0 0 8px !important;
  border-radius: 14px !important;
}

/* 6) Détails sous l'image : compacts */
body.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin: 6px 0 2px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}
body.post-type-archive-product .woocommerce ul.products li.product .price{
  margin: 4px 0 10px !important;
  font-size: 13px !important;
  opacity: .9 !important;
}

/* 7) Bouton : moins haut pour gagner de la place */
body.post-type-archive-product .woocommerce ul.products li.product .button{
  width: 100% !important;
  padding: 10px 12px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
}

/* 8) Badge "CORE / LIMITED" : un peu plus petit */
body.post-type-archive-product .woocommerce ul.products li.product .h7-badge,
body.post-type-archive-product .woocommerce ul.products li.product .badge,
body.post-type-archive-product .woocommerce ul.products li.product .tag{
  transform: scale(.92);
  transform-origin: top left;
}

/* 9) Ultra important : sur les écrans moyens, on raccourcit encore */
@media (max-height: 820px){
  body.post-type-archive-product .woocommerce ul.products li.product img{
    height: 170px !important;
  }
}

/* 10) Mobile : tu gardes 1 colonne, mais ça reste compact */
@media (max-width: 820px){
  body.post-type-archive-product .woocommerce ul.products{
    gap: 12px !important;
  }
  body.post-type-archive-product .woocommerce ul.products li.product img{
    height: 200px !important;
  }
}