/* Magasin CVC — grille catégorie + fiche produit
   Coller dans Elementor > Site Settings > Custom CSS (global)
   Remplacer .cvc-* par les classes réelles du thème si différentes */

:root {
  --cvc-ink: #0F2B3D;
  --cvc-accent: #2563EB;
  --cvc-accent-soft: rgba(37, 99, 235, 0.08);
  --cvc-border: #D7DEE4;
  --cvc-border-strong: #AEB9C2;
  --cvc-muted: #5B6B78;
  --cvc-bg-sunken: #F4F6F8;
  --cvc-warn: #993C1D;
  --cvc-warn-bg: #FAECE7;
}

/* 0. Bloquer tout débordement horizontal — corrige P1.1 */
body,
.woocommerce,
.woocommerce-page {
  overflow-x: hidden;
}

/* 0b. Fond blanc forcé sur la partie boutique — écrase le gris par défaut
   du thème UiCore Pro sur l'archive produits. Si un fond gris persiste
   après avoir collé ceci, inspecter l'élément en DevTools pour trouver
   le vrai wrapper (souvent .uicore-content-wrapper ou .site-content sur
   UiCore) et l'ajouter à la liste ci-dessous. */
body.woocommerce-page,
body.woocommerce-page .site-content,
body.woocommerce-page .content-area,
body.woocommerce-page main,
.woocommerce,
.woocommerce-page,
ul.products,
.cvc-grid {
  background-color: #FFFFFF !important;
}

/* 1. Toolbar sticky — P2.5 */
.cvc-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(244, 246, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cvc-border);
}

.cvc-toolbar__search { flex: 2; min-width: 0; }
.cvc-toolbar__sort { flex: 1; min-width: 140px; }
.cvc-toolbar__count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--cvc-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Tablette portrait/landscape (iPad 768–1024) : garder la ligne unique mais
   laisser le compteur rétrécir plutôt que forcer un overflow — corrige le
   cas iPad portrait (768px) où compteur width fixe cassait la recherche. */
@media (max-width: 1024px) {
  .cvc-toolbar__count { min-width: 0; }
}

@media (max-width: 767px) {
  .cvc-toolbar { flex-wrap: wrap; }
  .cvc-toolbar__search { flex: 1 1 100%; }
  .cvc-toolbar__sort, .cvc-toolbar__count { flex: 1 1 calc(50% - 6px); }
}

/* 2. Catégories — P2.6. Scroll horizontal sur desktop si jamais ça dépasse
   (rare, une seule ligne suffit d'habitude) ; sous 1024px, retour à la
   ligne en chips propres plutôt que du scroll — plus lisible pour parcourir
   les 10 catégories d'un coup sur tablette/mobile. */
.cvc-cat-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 16px;
}
.cvc-cat-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 1024px) {
  .cvc-cat-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 8px;
  }
}

.cvc-cat-chip {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--cvc-border-strong);
  color: var(--cvc-muted);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cvc-cat-chip.is-active,
.cvc-cat-chip:hover {
  border-color: var(--cvc-accent);
  color: var(--cvc-accent);
  background: var(--cvc-accent-soft);
}

/* Cible tactile ≥40px sur tablette/mobile (pas de hover fiable au doigt) */
@media (max-width: 1024px) {
  .cvc-cat-chip { padding: 10px 16px; min-height: 40px; display: inline-flex; align-items: center; }
  .cvc-filter-tag button { width: 24px; height: 24px; }
}

/* 3. Filtres actifs (diamètre) — P2.7 */
.cvc-filter-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
}

.cvc-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cvc-accent-soft);
  color: var(--cvc-accent);
  border-radius: 999px;
  padding: 4px 8px 4px 12px;
  font-size: 12.5px;
}

.cvc-filter-tag button {
  all: unset;
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cvc-filter-tag button:hover { background: rgba(37, 99, 235, 0.18); }
.cvc-filter-tag button:focus-visible { outline: 2px solid var(--cvc-accent); outline-offset: 1px; }

/* 4. Grille produits — hauteur carte fixe par breakpoint, P2.8 */
.cvc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding: 0 16px 24px;
}

/* Borne tablette à 1024px (pas 1023) : iPad paysage = 1024px de large pile,
   sans ce +1 il tombait dans le palier 4 colonnes desktop, trop serré au doigt. */
@media (max-width: 1279px) { .cvc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .cvc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .cvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.cvc-card {
  height: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cvc-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (max-width: 1024px) { .cvc-card { height: 260px; } }
@media (max-width: 767px)  { .cvc-card { height: 240px; } }

.cvc-card:hover { border-color: var(--cvc-border-strong); }

.cvc-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cvc-bg-sunken);
  overflow: hidden;
}

.cvc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder si aucune image produit — jamais un espace blanc, P1.2 */
.cvc-card__media--empty {
  background-image: repeating-linear-gradient(135deg, var(--cvc-bg-sunken), var(--cvc-bg-sunken) 6px, var(--cvc-border) 6px, var(--cvc-border) 7px);
}

.cvc-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cvc-accent-soft);
  color: var(--cvc-accent);
}

.cvc-card__badge--featured { background: var(--cvc-ink); color: #fff; }

.cvc-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.cvc-card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cvc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cvc-card__ref {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  color: var(--cvc-muted);
}

.cvc-card__variants {
  font-size: 12px;
  color: var(--cvc-muted);
  margin-top: auto;
}

.cvc-card__stock {
  font-size: 11.5px;
  color: var(--cvc-warn);
  background: var(--cvc-warn-bg);
  border-radius: 4px;
  padding: 2px 6px;
  width: fit-content;
}

/* 5. Bouton "Voir plus" — P1.4 */
.cvc-load-more {
  display: block;
  margin: 8px auto 0;
  padding: 10px 24px;
  border: 1px solid var(--cvc-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--cvc-ink);
  font-size: 13.5px;
  cursor: pointer;
}

.cvc-load-more:hover { border-color: var(--cvc-ink); }
.cvc-load-more[disabled] { opacity: 0.5; cursor: default; }

/* 6. Compteur devis sticky — P1.3 */
.cvc-quote-badge {
  position: sticky;
  top: 12px;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cvc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
}

.cvc-quote-badge__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--cvc-accent);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.cvc-quote-badge__count:empty,
.cvc-quote-badge__count[data-count="0"] { display: none; }

@media (max-width: 767px) {
  .cvc-quote-badge {
    position: fixed;
    top: auto;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

.cvc-quote-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--cvc-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 43, 61, 0.12);
  padding: 12px;
  display: none;
}

.cvc-quote-popover.is-open { display: block; }

/* 7. Sélecteur de variante fiche produit — P3.12, jamais grille de boutons */
.cvc-variant-select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cvc-border-strong);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
}

/* 8. CTA sticky mobile fiche produit */
@media (max-width: 767px) {
  .cvc-product-cta-sticky {
    position: sticky;
    bottom: 0;
    background: var(--cvc-ink);
    padding: 12px 16px;
    z-index: 20;
  }
  .cvc-product-cta-sticky a {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
  }
}