/* VET-607 — Fiche produit : ajustements CSS au-delà des styles inline des templates.
   (Les sections sont stylées inline avec les variables Bootstrap ; ici, les états
   et le responsive que l'inline ne peut pas porter.) */

/* Conteneur des rangées (ex-<table>). */
.single-product .vt-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* margin entre les variations */
}

/* Ligne de poids sélectionnée (quantité > 0) — encadrée en PRIMAIRE façon mockup.
   !important car la bordure inline de la ligne a une spécificité supérieure. */
/* Toutes les variations sont encadrées, MÊME gabarit : bordure 2px (grise par
   défaut) + padding. Seule la COULEUR de bordure change à l'activation → aucun
   décalage. box-sizing border-box pour garder la taille stable. */
.single-product .vt-rows .prod_line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px !important;
  border: 2px solid var(--bs-border-color) !important;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Ligne sélectionnée : bordure primaire + fond teinté (taille inchangée). */
.single-product .vt-rows .prod_line.vt-row--active {
  border-color: var(--bs-primary) !important;
  background: color-mix(in srgb, var(--bs-primary) 5%, #fff) !important;
}

/* Galerie : pas de flèches de carrousel dans le mockup (navigation par vignettes). */
.single-product .flex-direction-nav,
.single-product .woocommerce-product-gallery .flex-direction-nav {
  display: none !important;
}

/* Vignettes de la galerie — plugin nSwiper / nickx (pas flexslider).
   Bordure grise arrondie + image entière ; vignette active en primaire. */
/* La diapo (slide) centre la vignette ; évite que l'image dépasse la hauteur fixe. */
.single-product .product_thumbnail_item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}
.single-product .product_thumbnail_item img {
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important; /* ne dépasse jamais la hauteur fixe du conteneur */
  display: block !important; /* supprime l'espace baseline sous l'image */
  vertical-align: top;
  object-fit: contain !important;
  padding: 6px !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.single-product .product_thumbnail_item img:hover {
  border-color: var(--bs-primary) !important;
}
.single-product .product_thumbnail_item.nswiper-slide-thumb-active img,
.single-product .product_thumbnail_item.nswiper-slide-active img {
  border: 2px solid var(--bs-primary) !important;
}

/* Neutralise le zébrage des rangées hérité de l'ancien tableau. */
/* Non sélectionnées : fond blanc (annule le zébrage hérité) ; la bordure grise
   de la règle de base reste → box grise. */
.single-product .vt-rows .prod_line:not(.vt-row--active) {
  background-color: #fff !important;
}

/* Bloc Total (récap) — ex-inline. */
.single-product .vt-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--bs-gray-100);
  margin-top: 28px; /* espace avec la dernière variation */
}

/* ---- Classes du bloc prix (ex styles inline) ---- */
.single-product .vt-rows .vt-weight-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.single-product .vt-rows .vt-rowcol-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.single-product .vt-rows .vt-rowcol-right { display: flex; flex-direction: column; align-items: flex-end; min-width: 88px; }
.single-product .vt-rows .vt-promo { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--bs-secondary); color: #fff; }
.single-product .vt-rows .pricing_p { font-size: 15px; font-weight: 700; }
.single-product .vt-rows .vt-perkg { font-size: 12px; color: #435F71; }
.single-product .vt-rows .vt-price-wrap { display: inline-flex; align-items: baseline; gap: 8px; }
.single-product .vt-rows .vt-oldprice { font-size: 15px; }
.single-product .vt-rows .vt-price { font-size: 16px; font-weight: 700; color: var(--bs-primary); }
.single-product .vt-rows .vt-pts { font-size: 13px; color: var(--bs-secondary-color); }
.single-product .vt-rows .vt-from { font-size: 13px; }
.single-product .vt-rows .vt-stepper { display: flex; align-items: center; border: 1px solid var(--bs-border-color); border-radius: 50rem; background: #fff; }
.single-product .vt-rows .oos-notif { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* Bloc Total : lignes internes + livraison */
.single-product .vt-summary .vt-total-label { font-weight: 600; }
.single-product .vt-summary .vt-points-line { margin: 0; text-align: center; font-size: 14px; }
.single-product .ship_free { gap: 16px; }
.single-product .vt-ship-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; }

/* ---- Produits similaires (ex styles inline) ---- */
.single-product .vt-related { display: flex; flex-direction: column; gap: 32px; }
.single-product .vt-related-title { margin: 0; display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: 700; color: var(--bs-primary); }
.single-product .vt-related-bar { width: 4px; height: 32px; border-radius: 2px; background: var(--bs-primary); }
.single-product .vt-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.single-product .vt-card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--bs-body-color); background: #fff; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08); }
.single-product .vt-card-imgwrap { height: 340px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.single-product .vt-card-img { width: 100%; height: 100%; object-fit: contain; }
.single-product .vt-card-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 20px 24px; flex: 1 1 auto; }
.single-product .vt-card-brand { font-size: 16px; color: var(--bs-primary-active); }
.single-product .vt-card-name { font-size: 16px; font-weight: 600; line-height: 1.35; text-transform: uppercase; flex: 1 1 auto; display: flex; align-items: center; }
.single-product .vt-card-price { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.single-product .vt-card-from { font-size: 13px; color: var(--bs-secondary); }
.single-product .vt-card-amount { font-size: 20px; font-weight: 700; color: var(--bs-secondary); }

/* ---- Haut du résumé : bannière remise, description, chips, garantie (ex inline) ---- */
.single-product .vt-remise { padding: 14px 20px; border-radius: 6px; background: var(--bs-secondary); color: #fff; text-align: center; font-size: 13px; letter-spacing: .03em; }
.single-product .woocommerce-product-details__short-description { font-size: 14px; color: var(--bs-body-color); }
.single-product .vt-chips { gap: 8px; }
.single-product .vt-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.single-product .vt-chip--accent { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.single-product .vt-chip--neutral { background: #f1f3f4; color: #435F71; }
.single-product .vt-guarantee-badge { width: 120px; height: auto; display: block; margin-top: 8px; margin-bottom: 8px; }

/* ---- Titre produit (ex inline) ---- */
.single-product .product_title.entry-title { font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--bs-body-color); }

/* ---- Accordéon onglets (ex inline + bloc <style>) ---- */
.single-product .vt-acc-wrap { display: flex; flex-direction: column; border-top: 1px solid var(--bs-border-color); }
.single-product .vt-acc { border-bottom: 1px solid var(--bs-border-color); }
.single-product .vt-acc > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 64px; cursor: pointer; font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #435F71; }
.single-product .vt-acc > summary::-webkit-details-marker { display: none; }
.single-product .vt-acc-chevron { font-size: 14px; color: var(--bs-secondary-color); transition: transform .2s ease; }
.single-product .vt-acc[open] > summary .vt-acc-chevron { transform: rotate(180deg); }
.single-product .wc-tab-content { padding: 0 0 24px; }

/* ---- Formulaire question (ex inline) ---- */
.single-product .product-faq-submission { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 40px; border-radius: 16px; background: var(--bs-primary-bg-subtle); }
.single-product .vt-faq-intro { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.single-product .vt-faq-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--bs-primary-text-emphasis); }
.single-product .vt-faq-sub { margin: 0; color: var(--bs-body-color); }
.single-product .faq-submission-form { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.single-product .vt-faq-label { font-size: 14px; font-weight: 600; color: var(--bs-primary-text-emphasis); }
.single-product #faq-question { box-sizing: border-box; width: 100%; padding: 12px 16px; border: 1px solid var(--bs-border-color); border-radius: 6px; background: #fff; resize: vertical; }
.single-product .vt-faq-row { gap: 12px; }
.single-product .vt-faq-count { margin: 0; font-size: 14px; color: var(--bs-body-color); }
.single-product #faq-submit-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 50rem; background: var(--bs-primary-text-emphasis); color: #fff; font-weight: 700; cursor: pointer; }

/* Stepper quantité +/- : boutons ronds dans une pilule (façon mockup). */
.single-product .vt-rows .add_ic,
.single-product .vt-rows .remove_ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 !important; /* annule me-2 / ms-2 */
  border-radius: 50%;
  font-size: 15px;
  color: var(--bs-body-color);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.single-product .vt-rows .add_ic:hover,
.single-product .vt-rows .remove_ic:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.single-product .vt-rows .qty_vetorino {
  width: 36px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-weight: 700;
  color: var(--bs-body-color);
}

/* Bouton « Ajouter au panier » : pilule pleine secondaire, texte blanc.
   Surcharge .btn-secondary{color:#333!important} et les règles .band du thème. */
.single-product .vt-summary .add-to-cart-checker,
.single-product .vt-summary .add-to-cart-checker.band {
  background: var(--bs-secondary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50rem !important;
  width: 100% !important;
  padding: 14px 24px !important;
  font-weight: 700;
}
.single-product .vt-summary .add-to-cart-checker:hover {
  filter: brightness(0.95);
  color: #fff !important;
}

/* Barre flottante (#atc-fixed-bar, bouton cloné hors de .vt-summary) :
   même bouton pilule secondaire, texte blanc. Surcharge .btn-secondary{color:#333}
   et les règles .band du thème qui le recoloreraient. */
#atc-fixed-bar .add-to-cart-checker,
#atc-fixed-bar .add-to-cart-checker.band {
  background: var(--bs-secondary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50rem !important;
  width: auto !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
#atc-fixed-bar .add-to-cart-checker:hover {
  filter: brightness(0.95);
  color: #fff !important;
}

/* Fil d'Ariane. */
.single-product .woocommerce-breadcrumb {
  font-size: 14px;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 8px;
}
.single-product .woocommerce-breadcrumb a {
  color: var(--bs-primary);
  text-decoration: none;
}
.single-product .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* Bouton « Ajouter au panier » plein (survol : légère atténuation, jamais transparent). */
.single-product .add-to-cart-checker:hover {
  filter: brightness(0.95);
}

/* Responsive : sous 480px, le stepper passe à la ligne sous le prix. */
@media (max-width: 480px) {
  .single-product .vt-rows .prod_line {
    flex-wrap: wrap;
  }
}

/* ---------- Mobile (≤ 767px) : tailles réduites ---------- */
@media (max-width: 767.98px) {
  /* Prix unitaire : 13px */
  .single-product .vt-rows .vt-price {
    font-size: 13px !important;
  }
  /* Prix au kilo : 11px */
  .single-product .vt-rows .vt-perkg {
    font-size: 11px !important;
  }
  /* Description courte : 12px */
  .single-product .woocommerce-product-details__short-description {
    font-size: 12px !important;
  }
  /* Bouton « Ajouter au panier » (résumé + barre flottante) : 14px */
  .single-product .vt-summary .add-to-cart-checker,
  #atc-fixed-bar .add-to-cart-checker {
    font-size: 14px !important;
  }
  /* Tag marque + gamme : 13px. */
  .single-product .brand-gamme a,
  .single-product .brand-gamme .text-primary {
    font-size: 13px !important;
  }
}