/** Shopify CDN: Minification failed

Line 844:0 Unexpected "}"
Line 2047:1 Expected "}" to go with "{"

**/
/* =========================================
   VISTILLION — Force Trade Gothic partout
   (fix Shopify "Heading size" / classes .h1 .h2 etc)
   ========================================= */

/* 1) Si ton thème utilise des variables de police (vu tes screens: --g-font-1/2) */
:root{
  --g-font-1: "trade-gothic-next", sans-serif !important; /* headings (souvent) */
  --g-font-2: "trade-gothic-next", sans-serif !important; /* body (souvent) */
}

/* 2) Base texte (au cas où des styles plus spécifiques écrasent) */
body,
p,
span,
li,
a,
button,
input,
textarea{
  font-family: "trade-gothic-next", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

/* 3) Headings NATIFS */
h1,h2{
  font-family: "trade-gothic-next", sans-serif !important;
  font-weight: 800 !important;
}
h3,h4{
  font-family: "trade-gothic-next", sans-serif !important;
  font-weight: 700 !important;
}
h5,h6{
  font-family: "trade-gothic-next", sans-serif !important;
  font-weight: 400 !important;
}

/* 4) Headings "Heading size" (classes de taille Shopify / thèmes) */
.h0,.h1,.h2,.h3,.h4,.h5,.h6,
.heading,.title,.section-title,.section-heading{
  font-family: "trade-gothic-next", sans-serif !important;
  font-style: normal !important;
}

/* 5) Matching des weights pour les classes de taille (proche de ton mapping) */
.h0,.h1,.h2{ font-weight: 800 !important; }
.h3,.h4{     font-weight: 700 !important; }
.h5,.h6{     font-weight: 400 !important; }

/* 6) Italique */
em,i{
  font-family: "trade-gothic-next", sans-serif !important;
  font-style: italic !important;
}
@media (max-width: 768px) {
  .product-single__meta .product-block.product__text {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  } /* If the block is inside a wrapper */
  .product-single__meta .product-block {
    margin-bottom: 10px !important;
  }
}
.vistillion-limited {
  display: inline;
  padding: 6px 10px;
  border-radius: 8px;
  color: #090909;
  background-color: rgba(227, 185, 39, 0.8);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.product-single__info-wrapper hr {
  margin-top: 22px;
}
p.product__text.vistillion-limited,
p.product__text.vistillion-limited * {
  font-weight: 700 !important;
}
/* VISTILLION — Space under limited release badge */
p.product__text.vistillion-limited{
  margin-bottom: 22px !important;
}
p.product__text.vistillion-limited + *{
  margin-top: 15px !important;
}
/* VISTILLION — Subtle gold halo (premium, no texture) */
.template-product #MainContent{
  background:
    radial-gradient(900px 600px at 70% 25%, rgba(227,185,39,0.06), rgba(255,255,255,0) 60%),
    radial-gradient(800px 500px at 20% 70%, rgba(0,0,0,0.03), rgba(255,255,255,0) 55%),
    #ffffff;
}
/* ===============================
   REMOVE left floating buttons (Compare + Get 15% Off)
   =============================== */

/* 1) Compare (bouton vertical) */
button.site-header__compare,
button.js-compareproduct,
.site-header__compare{
  display: none !important;
}

/* 2) Get 15% Off (newsletter) */
button.btn-newsletter,
.btn.btn-newsletter{
  display: none !important;
}

/* 3) Si ton thème ajoute un wrapper / séparateur vertical entre les deux */
.site-header__compare-wrap,
.site-header__compare-container,
.newsletter-float,
.compare-float,
.floating-buttons,
.floating-actions{
  display: none !important;
}
/* ===============================
   REMOVE floating "Get 15% Off" (exact target)
   =============================== */

/* Cache le bouton */
button[data-target="#jsPopupNewsletterpnewsletter"]{
  display: none !important;
}

/* Cache aussi le conteneur flottant qui le porte (et qui affiche la ligne) */
header .group-fixed{
  display: none !important;
}
/* SUPPRIME totalement le rail (Get 15% Off / Compare) + sa ligne */
.group-fixed.d-lg-flex.d-none{
  display: none !important;
}

/* Sécurité si le trait est un pseudo-élément */
.group-fixed.d-lg-flex.d-none::before,
.group-fixed.d-lg-flex.d-none::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* =========================================================
   VISTILLION — Headings underline: single source of truth
   (nuclear reset + 1 underline rule)
   Colle tout en bas du CSS
   ========================================================= */

/* A) RESET: on tue TOUS les traits que le thème ajoute */
:where(h2,h3,.h2,.h3,.title,.heading,.section-title,.section__title,[class*="title"],[class*="heading"]) {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Si le thème met une “ligne” via pseudo-élément */
:where(h2,h3,.h2,.h3,.title,.heading,.section-title,.section__title,[class*="title"],[class*="heading"])::before,
:where(h2,h3,.h2,.h3,.title,.heading,.section-title,.section__title,[class*="title"],[class*="heading"])::after{
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Et si la ligne est sur un enfant (span/a) */
:where(h2,h3,.h2,.h3,.title,.heading,.section-title,.section__title,[class*="title"],[class*="heading"]) *{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* B) UNDERLINE: on l’applique UNIQUEMENT aux titres que tu veux */
:where(h2,.h2){
  position: relative !important;
  padding-bottom: 10px !important;
}

/* Ligne premium (arrondie + dégradé) */
:where(h2,.h2)::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    rgba(227,185,39,0.18),
    rgba(227,185,39,0.95),
    rgba(227,185,39,0.18)
  ) !important;

  border-radius: 999px !important;
  pointer-events: none !important;
}
/* ===============================
   VISTILLION — H2 underline clean & stable
   =============================== */

/* Reset total : aucun underline ailleurs */
.title,
.heading,
.section-title,
.section__title,
.h2,
.h3{
  background: none !important;
  background-image: none !important;
  text-decoration: none !important;
}

/* Underline UNIQUEMENT sur les vrais H2 */
h2{
  position: relative;
}

/* Ligne élégante, arrondie, sans décalage */
h2::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.35em;

  background: linear-gradient(
    90deg,
    rgba(227,185,39,0.15),
    rgba(227,185,39,0.9),
    rgba(227,185,39,0.15)
  );

  border-radius: 999px;
}
/* ===============================
   VISTILLION — Product info premium card
   (cadre autour infos produit UNIQUEMENT)
   =============================== */

.template-product .product__info-wrapper,
.template-product .product-single__info-wrapper{
  position: relative;

  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;

  padding: 28px 28px 30px;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.06);

  transition: none !important; /* ⚠️ très important */
}

/* Mobile : on allège un peu */
@media (max-width: 768px){
  .template-product .product__info-wrapper,
  .template-product .product-single__info-wrapper{
    padding: 22px 18px;
    border-radius: 16px;
  }
}
/* VISTILLION — Premium CTA */
button[name="add"],
.product-form__submit,
.btn--add-to-cart,
.shopify-payment-button__button {
  background: #090909 !important;
  border-radius: 14px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button[name="add"]:hover,
.product-form__submit:hover,
.btn--add-to-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  opacity: .96;
}

/* VISTILLION — Luxury dividers */
hr, .divider, .separator, .product__divider {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(9,9,9,0),
    rgba(227,185,39,.45),
    rgba(9,9,9,0)
  ) !important;
  opacity: .9;
}
/* VISTILLION — FAQ premium feel */
.faq, .accordion, .collapsible {
  max-width: 980px;
  margin: 0 auto;
}

.faq summary, .accordion summary, .collapsible summary {
  padding: 18px 8px !important;
  letter-spacing: .02em;
}

.faq details[open] summary,
.accordion details[open] summary {
  color: #090909;
}

.faq details,
.accordion details {
  border-bottom: 1px solid rgba(9,9,9,.08);
}
/* VISTILLION — Recently viewed cleanup */
.recently-viewed h2,
.recently-viewed .section-title {
  font-size: 44px !important;
  letter-spacing: -.01em;
  opacity: .92;
}
/* ===============================
   VISTILLION — Statement (QUOTE CARD) — FIX
   =============================== */
/* Base neutre — phrase courte inchangée */
.product__text.vistillion-statement{
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Grand paragraphe premium */
.product__text.vistillion-statement + .product__text.vistillion-statement{
  position: relative;
  padding: 24px 28px 24px 68px;

  /* Fond ivoire chaud */
  background: linear-gradient(
    180deg,
    rgba(255,252,245,0.95),
    rgba(255,248,230,0.90)
  );

  border-radius: 20px;

  /* Ombre plus présente mais douce */
  box-shadow:
    0 18px 48px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Guillemets premium */
.product__text.vistillion-statement + .product__text.vistillion-statement::before{
  content: "“";
  position: absolute;
  top: 16px;
  left: 28px;

  font-size: 44px;
  font-weight: 800;
  line-height: 1;

  /* Or plus visible mais élégant */
  color: rgba(227,185,39,0.95);
}
/* =========================================================
   MOBILE FIX — Sold out button inside product card
   ========================================================= */
@media (max-width: 768px){

  /* Le bouton SOLD OUT */
  .template-product .btn[disabled],
  .template-product .btn.sold-out,
  .template-product button[disabled]{
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* On réduit légèrement le padding pour éviter le débordement */
  .template-product .btn[disabled]{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

}
/* Sold out badge premium */
.badge--soldout, .sold-out, .product-badge--soldout {
  background: rgba(9,9,9,.92) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* ===== VISTILLION — Premium WAITLIST button ===== */
span.js-btn.btn-waitlist.btn-theme,
.btn-waitlist.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 52px;
  padding: 14px 18px;

  background: #090909;
  color: #ffffff;

  border: 1px solid rgba(9, 9, 9, 0.12);
  border-radius: 12px;

  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Hover / focus (premium subtle) */
span.js-btn.btn-waitlist.btn-theme:hover,
.btn-waitlist.btn-theme:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(9, 9, 9, 0.14);
}

span.js-btn.btn-waitlist.btn-theme:active,
.btn-waitlist.btn-theme:active {
  transform: translateY(0px);
  box-shadow: 0 6px 18px rgba(9, 9, 9, 0.10);
}

/* Optional: tiny gold halo on hover (subtle, premium) */
span.js-btn.btn-waitlist.btn-theme:hover,
.btn-waitlist.btn-theme:hover {
  box-shadow:
    0 10px 30px rgba(9, 9, 9, 0.14),
    0 0 0 3px rgba(227, 185, 39, 0.10);
}
/* ==========================================
   VISTILLION — Dropdown capsules (2nd level)
   Cible: li.site-nav__dropdown-container--second-level
   ========================================== */

/* Base capsule (link inside the li) */
.site-nav__dropdown-container--second-level > a,
.site-nav__dropdown-container--second-level > a.site-nav__link,
.site-nav__dropdown-container--second-level > a.meganav__link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: transparent !important;
  border: 1px solid transparent !important;

  text-decoration: none !important;
  box-shadow: none !important;

  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease !important;
}

/* Hover via le LI (fiable) */
.site-nav__dropdown-container--second-level:hover > a,
.site-nav__dropdown-container--second-level:hover > a.site-nav__link,
.site-nav__dropdown-container--second-level:hover > a.meganav__link{
  background-color: rgba(227,185,39,0.10) !important;
  border-color: rgba(227,185,39,0.65) !important;
  box-shadow: 0 10px 26px rgba(227,185,39,0.16) !important;
  transform: translateY(-1px) !important;
  color: #090909 !important;
}

/* Focus clavier aussi (premium) */
.site-nav__dropdown-container--second-level > a:focus-visible{
  background-color: rgba(227,185,39,0.10) !important;
  border-color: rgba(227,185,39,0.65) !important;
  box-shadow: 0 10px 26px rgba(227,185,39,0.16) !important;
  outline: none !important;
}

/* Aligner la flèche si SVG */
.site-nav__dropdown-container--second-level > a svg,
.site-nav__dropdown-container--second-level > a .icon,
.site-nav__dropdown-container--second-level > a .icon-caret{
  display: inline-block !important;
  vertical-align: middle !important;
  transform: translateY(1px) !important;
}
/* ===============================
   VISTILLION — Remove dropdown underline/trait
   (2nd + 3rd level)
   =============================== */

.site-nav__dropdown-container--second-level > a,
.site-nav__dropdown-container--third-level > a,
.site-nav__dropdown-container--second-level > a.meganav__link,
.site-nav__dropdown-container--third-level > a.meganav__link{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Si le thème dessine la ligne via pseudo-élément */
.site-nav__dropdown-container--second-level > a::before,
.site-nav__dropdown-container--second-level > a::after,
.site-nav__dropdown-container--third-level > a::before,
.site-nav__dropdown-container--third-level > a::after,
.site-nav__dropdown-container--second-level > a span::before,
.site-nav__dropdown-container--second-level > a span::after,
.site-nav__dropdown-container--third-level > a span::before,
.site-nav__dropdown-container--third-level > a span::after{
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
/* ===============================
   VISTILLION — Capsules dropdown 3rd level
   =============================== */

.site-nav__dropdown-container--third-level > a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: transparent !important;
  border: 1px solid transparent !important;

  text-decoration: none !important;
  box-shadow: none !important;

  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease !important;
}

.site-nav__dropdown-container--third-level:hover > a{
  background-color: rgba(227,185,39,0.10) !important;
  border-color: rgba(227,185,39,0.65) !important;
  box-shadow: 0 10px 26px rgba(227,185,39,0.16) !important;
  transform: translateY(-1px) !important;
  color: #090909 !important;
}
/* ===============================
   DISCOVER NOW (.btn-theme)
   Noir par défaut -> Doré au hover/click
   =============================== */

a.btn.btn-theme{
  /* état normal = noir */
  background: #090909 !important;
  color: #ffffff !important;

  /* on réserve la bordure sans la voir (évite tout déplacement) */
  border: 1px solid transparent !important;

  /* capsule */
  border-radius: 999px !important;

  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
}

/* Hover = premium doré */
a.btn.btn-theme:hover{
  background: rgba(227,185,39,0.44) !important;
  border-color: rgba(227,185,39,0.85) !important;
  color: #090909 !important;
  box-shadow: 0 10px 26px rgba(227,185,39,0.16) !important;
  transform: translateY(-1px);
}

/* Click (active) = un peu plus “press” */
a.btn.btn-theme:active{
  transform: translateY(0px) !important;
  box-shadow: 0 6px 18px rgba(227,185,39,0.20) !important;
}

/* Focus clavier (propre) */
a.btn.btn-theme:focus-visible{
  outline: none !important;
  border-color: rgba(227,185,39,0.95) !important;
  box-shadow: 0 0 0 3px rgba(227,185,39,0.22) !important;
}
/* ===============================
   VISTILLION — BTN OUTLINE premium hover animation
   (HOME + site global, sans casser PhotoSwipe)
   =============================== */

/* On cible large: btn-outline + variantes courantes */
a.btn.btn-outline,
button.btn.btn-outline,
.btn.btn-outline,
a.btn-outline,
button.btn-outline{
  transform: translateZ(0) !important;
  will-change: transform, box-shadow, border-color, background-color, color;

  transition:
    background-color .26s cubic-bezier(.22,.61,.36,1),
    border-color     .26s cubic-bezier(.22,.61,.36,1),
    box-shadow       .26s cubic-bezier(.22,.61,.36,1),
    color            .26s cubic-bezier(.22,.61,.36,1),
    transform        .26s cubic-bezier(.22,.61,.36,1);
}

/* Hover premium (outline -> léger wash doré + lift) */
a.btn.btn-outline:hover,
button.btn.btn-outline:hover,
.btn.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover{
  background-color: rgba(227,185,39,0.10) !important;
  border-color: rgba(227,185,39,0.85) !important;
  color: #090909 !important;

  box-shadow:
    0 10px 26px rgba(227,185,39,0.14),
    0 8px 18px rgba(0,0,0,0.08) !important;

  transform: translateY(-1px) !important;
}

/* Active (click) */
a.btn.btn-outline:active,
button.btn.btn-outline:active,
.btn.btn-outline:active,
a.btn-outline:active,
button.btn-outline:active{
  transform: translateY(0) scale(0.99) !important;
  box-shadow:
    0 6px 18px rgba(227,185,39,0.16),
    0 6px 14px rgba(0,0,0,0.06) !important;
}

/* Focus visible (clavier) */
a.btn.btn-outline:focus-visible,
button.btn.btn-outline:focus-visible,
.btn.btn-outline:focus-visible,
a.btn-outline:focus-visible,
button.btn-outline:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(227,185,39,0.22),
    0 10px 26px rgba(227,185,39,0.10) !important;
}

/* Sécurité : on exclut explicitement PhotoSwipe */
.pswp .btn-outline,
.pswp .btn.btn-outline,
.pswp a.btn-outline,
.pswp button.btn-outline{
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  background-color: transparent !important;
}
/* ==============================
   VISTILLION — Quantity control (Premium)
   ============================== */

/* Container (tries multiple themes/selectors safely) */
.quantity,
.quantity-selector,
.product-qty,
.product-single__quantity,
.qty,
.js-qty,
.quantity__wrapper,
.quantity-wrapper {
  border-radius: 14px !important;
}

/* The input itself */
.quantity input,
.quantity-selector input,
.product-qty input,
.product-single__quantity input,
.qty input,
.js-qty input,
.quantity__input,
input.qty,
input[name="quantity"] {
  border: 1px solid rgba(9, 9, 9, 0.12) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #090909 !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px rgba(9, 9, 9, 0.04) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

/* Focus (clean + premium) */
.quantity input:focus,
.quantity-selector input:focus,
.product-qty input:focus,
.product-single__quantity input:focus,
.qty input:focus,
.js-qty input:focus,
.quantity__input:focus,
input.qty:focus,
input[name="quantity"]:focus {
  outline: none !important;
  border-color: rgba(227, 185, 39, 0.55) !important;
  box-shadow: 0 14px 40px rgba(227, 185, 39, 0.10) !important;
}

/* Minus / Plus buttons */
.quantity button,
.quantity-selector button,
.product-qty button,
.product-single__quantity button,
.qty button,
.js-qty button,
.quantity__button,
button.qtybtn,
button[name="minus"],
button[name="plus"] {
  border: 1px solid rgba(9, 9, 9, 0.12) !important;
  background: #ffffff !important;
  color: #090909 !important;
  border-radius: 12px !important;
  transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Hover */
.quantity button:hover,
.quantity-selector button:hover,
.product-qty button:hover,
.product-single__quantity button:hover,
.qty button:hover,
.js-qty button:hover,
.quantity__button:hover,
button.qtybtn:hover,
button[name="minus"]:hover,
button[name="plus"]:hover {
  background-color: rgba(227, 185, 39, 0.08) !important;
  border-color: rgba(227, 185, 39, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Active click */
.quantity button:active,
.quantity-selector button:active,
.product-qty button:active,
.product-single__quantity button:active,
.qty button:active,
.js-qty button:active,
.quantity__button:active,
button.qtybtn:active,
button[name="minus"]:active,
button[name="plus"]:active {
  transform: translateY(0px) scale(0.98) !important;
}

/* Make sure the group looks like one “unit” */
.quantity,
.quantity-selector,
.product-qty,
.product-single__quantity,
.qty,
.js-qty {
  gap: 10px !important;
}
/* Mobile tightening (optional but recommended) */
@media (max-width: 768px) {
  .quantity input,
  .quantity__input,
  input[name="quantity"] {
    border-radius: 12px !important;
  }
  .quantity button,
  .quantity__button {
    border-radius: 10px !important;
  }
}
/* Utility links under CTA — make premium */
.gr-btjs.mt-4 a,
.gr-btjs.mt-4 span {
  font-size: 13px !important;
  opacity: .78 !important;
  letter-spacing: .02em !important;
}

.gr-btjs.mt-4 a:hover {
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Reduce vertical emptiness on FAQ / Recently viewed */
#shopify-section-faq, .faq, .faqs {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.recently-viewed, .recently__title, .recently-viewed__title {
  margin-top: 40px !important;
}
/* Sold Out badge — premium */
.badge--soldout, .sold-out, .product-badge.soldout {
  background: #090909 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
}
/* Product image — gallery feel */
.product-single img, .product__media img {
  transition: transform .35s ease, box-shadow .35s ease !important;
}

@media (hover: hover) {
  .product-single img:hover, .product__media img:hover {
    transform: scale(1.012) !important;
    box-shadow: 0 20px 60px rgba(9,9,9,.12) !important;
  }
}
}
/* === VISTILLION — Remove the long baseline under tabs (keep capsules) === */
#nav-tab-info .nav-tabs,
#nav-tab-info ul.nav-tabs {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Au cas où le thème dessine la ligne via pseudo-élément */
#nav-tab-info .nav-tabs::before,
#nav-tab-info .nav-tabs::after,
#nav-tab-info ul.nav-tabs::before,
#nav-tab-info ul.nav-tabs::after {
  content: none !important;
  display: none !important;
}

/* Si le thème remet une bordure sur les items/liens */
#nav-tab-info .nav-tabs .nav-item,
#nav-tab-info .nav-tabs .nav-link {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* ===== VISTILLION — Product tabs (capsules premium) ===== */

/* Base targets (ton code montre: ul.nav.nav-tabs ... + a.nav-link) */
#producttabs-1 .nav-tabs .nav-link,
#producttabs-2 .nav-tabs .nav-link,
[class*="producttabs-"] .nav-tabs .nav-link,
.nav-tabs .nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;

  padding: 10px 16px !important;
  margin: 0 10px 0 0 !important;

  border-radius: 999px !important;
  border: 1px solid rgba(227, 185, 39, 0.40) !important;

  background: rgba(227, 185, 39, 0.09) !important;
  color: #090909 !important;

  text-decoration: none !important;
  box-shadow: none !important;

  transition: background .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}

/* Supprime les effets “arc/underline” du thème */
#producttabs-1 .nav-tabs .nav-link::before,
#producttabs-1 .nav-tabs .nav-link::after,
#producttabs-2 .nav-tabs .nav-link::before,
#producttabs-2 .nav-tabs .nav-link::after,
.nav-tabs .nav-link::before,
.nav-tabs .nav-link::after {
  content: none !important;
  display: none !important;
}

/* Hover */
#producttabs-1 .nav-tabs .nav-link:hover,
#producttabs-2 .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
  background: rgba(227, 185, 39, 0.10) !important;
  border-color: rgba(227, 185, 39, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Active (ton thème met "active" sur le <a>) */
#producttabs-1 .nav-tabs .nav-link.active,
#producttabs-2 .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  background: rgba(227, 185, 39, 0.28) !important;
  border-color: rgba(227, 185, 39, 0.70) !important;
  font-weight: 650 !important;
}

/* Optionnel: virer les bordures du container d’onglets si ça fait double-ligne */
#producttabs-1 .nav-tabs,
#producttabs-2 .nav-tabs,
.nav-tabs {
  border-bottom: none !important;
}

/* Mobile: capsules plus compactes + retour à la ligne propre */
@media (max-width: 768px) {
  #producttabs-1 .nav-tabs,
  #producttabs-2 .nav-tabs,
  .nav-tabs {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #producttabs-1 .nav-tabs .nav-link,
  #producttabs-2 .nav-tabs .nav-link,
  .nav-tabs .nav-link {
    padding: 9px 14px !important;
    margin-right: 0 !important;
  }
}
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
/* ===== VISTILLION — Product tabs premium polish ===== */
#nav-tab-info .nav-tabs {
  gap: 12px;                 /* espace régulier */
  border-bottom: 0 !important; /* on enlève la ligne globale si elle revient */
  padding-bottom: 6px;
}

#nav-tab-info .nav-tabs .nav-link {
  border: 1px solid rgba(227,185,39,0.35) !important;
  background: rgba(227,185,39,0.06);
  color: #090909;
  border-radius: 999px;
  padding: 10px 18px;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

#nav-tab-info .nav-tabs .nav-link:hover {
  background: rgba(227,185,39,0.10);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(9,9,9,0.10);
}

/* état actif = plus “assumé” */
#nav-tab-info .nav-tabs .nav-link.active,
#nav-tab-info .nav-tabs .nav-item.show .nav-link {
  background: rgba(227,185,39,0.14);
  border-color: rgba(227,185,39,0.55) !important;
  box-shadow: 0 12px 28px rgba(9,9,9,0.12);
}

/* mobile: capsules plus compactes */
@media (max-width: 768px){
  #nav-tab-info .nav-tabs .nav-link{
    padding: 9px 14px;
    font-size: 14px;
  }
}
/* ===== VISTILLION — Tab content as luxury card ===== */
#nav-tab-info + .tab-content,
#nav-tab-info .tab-content {
  background: #ffffff;
  border: 1px solid rgba(9,9,9,0.06);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 18px 50px rgba(9,9,9,0.06);
  margin-top: 18px;
}

@media (max-width: 768px){
  #nav-tab-info + .tab-content,
  #nav-tab-info .tab-content{
    padding: 18px 16px;
    border-radius: 16px;
  }
}
/* =========================
   VISTILLION — Step 1: Premium tab content typography
   Targets: #nav-tab-info (vu dans ton inspecteur) + fallback
========================= */

/* 1) Contrainte de largeur + respiration */
#nav-tab-info .tab-content,
#nav-tab-info .tab-pane,
.product-content #nav-tab-info .tab-content {
  max-width: 980px;
  padding-top: 18px;
}

/* 2) Paragraphes: lisibilité luxe */
#nav-tab-info .tab-content p,
#nav-tab-info .tab-pane p {
  font-size: 16.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(9, 9, 9, 0.86);
  margin: 0 0 14px 0;
}

/* 3) Première phrase “lead” (ton intro) */
#nav-tab-info .tab-content p:first-of-type,
#nav-tab-info .tab-pane p:first-of-type {
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(9, 9, 9, 0.92);
}

/* 4) Gras: éviter le “trop noir” (plus premium) */
#nav-tab-info .tab-content strong,
#nav-tab-info .tab-pane strong {
  font-weight: 650;
  color: rgba(9, 9, 9, 0.95);
}

/* 5) Listes: bullets plus élégantes */
#nav-tab-info .tab-content ul,
#nav-tab-info .tab-pane ul {
  margin: 12px 0 18px 0;
  padding-left: 0;
  list-style: none;
}

#nav-tab-info .tab-content li,
#nav-tab-info .tab-pane li {
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  color: rgba(9, 9, 9, 0.84);
  line-height: 1.7;
}

#nav-tab-info .tab-content li::before,
#nav-tab-info .tab-pane li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(227, 185, 39, 0.85);
}

/* 6) Sous-titres si tu en as (h2/h3/h4 dans les pages des tabs) */
#nav-tab-info .tab-content h2,
#nav-tab-info .tab-content h3,
#nav-tab-info .tab-content h4,
#nav-tab-info .tab-pane h2,
#nav-tab-info .tab-pane h3,
#nav-tab-info .tab-pane h4 {
  margin: 22px 0 10px 0;
  letter-spacing: 0.01em;
}

#nav-tab-info .tab-content h3,
#nav-tab-info .tab-pane h3 {
  font-size: 18px;
}

/* 7) Mobile: garder le côté premium sans écraser */
@media (max-width: 768px) {
  #nav-tab-info .tab-content,
  #nav-tab-info .tab-pane {
    padding-top: 14px;
    max-width: 100%;
  }

  #nav-tab-info .tab-content p,
  #nav-tab-info .tab-pane p {
    font-size: 15.8px;
    line-height: 1.7;
  }
}
/* ===============================
   VISTILLION — STEP 2 (Tab content premium)
   =============================== */

/* Zone de contenu : rythme + lisibilité */
#nav-tab-info .tab-content,
#nav-tab-info .tab-pane {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(9, 9, 9, 0.86);
}

/* Un peu plus “luxe” sur desktop */
@media (min-width: 768px){
  #nav-tab-info .tab-content,
  #nav-tab-info .tab-pane {
    font-size: 17px;
    line-height: 1.8;
  }
}

/* Espacements propres (évite le “mur de texte”) */
#nav-tab-info .tab-pane p{
  margin: 0 0 14px 0;
}
#nav-tab-info .tab-pane p + p{
  margin-top: 10px;
}

/* Titres dans les contenus (si tu en as) */
#nav-tab-info .tab-pane h1,
#nav-tab-info .tab-pane h2,
#nav-tab-info .tab-pane h3{
  letter-spacing: -0.01em;
  margin: 18px 0 10px;
  color: #090909;
}

/* Listes: plus premium + marqueurs dorés subtils */
#nav-tab-info .tab-pane ul,
#nav-tab-info .tab-pane ol{
  padding-left: 1.15em;
  margin: 10px 0 16px;
}
#nav-tab-info .tab-pane li{
  margin: 6px 0;
}
#nav-tab-info .tab-pane li::marker{
  color: rgba(227, 185, 39, 0.85);
}

/* Met en valeur les “strong” sans faire gourou */
#nav-tab-info .tab-pane strong{
  color: #090909;
  font-weight: 650;
}

/* Sépare visuellement la barre d’onglets du contenu sans grosse ligne */
#nav-tab-info .tab-content{
  padding-top: 14px;
  border-top: 1px solid rgba(9,9,9,0.06);
}

/* Mobile: évite que ça colle trop */
@media (max-width: 767px){
  #nav-tab-info .tab-content{
    padding-top: 12px;
  }
}
/* ===============================
   PRODUCT TABS — Mobile layout premium (scroll horizontal)
   =============================== */
@media (max-width: 768px){

  /* Le conteneur des tabs (on cible large au cas où le thème varie) */
  .nav-tabs,
  .tabs,
  .tab-nav,
  .tab-header,
  .product-tabs,
  .product__tabs,
  .tab-buttons{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 6px 6px 10px !important;
    margin: 0 0 10px !important;

    /* petit “snap” propre */
    scroll-snap-type: x mandatory;
  }

  /* Chaque onglet = taille fixe + snap */
  .nav-tabs > li,
  .tabs > li,
  .tab-nav > li,
  .product-tabs > li,
  .product__tabs > li{
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  /* Le bouton/lien de l’onglet */
  .nav-tabs a,
  .tabs a,
  .tab-nav a,
  .tab-header a,
  .product-tabs a,
  .product__tabs a,
  .tab-buttons a,
  .tab-buttons button{
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content !important;
  }

  /* On cache la scrollbar (look premium) */
  .nav-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar,
  .tab-header::-webkit-scrollbar,
  .product-tabs::-webkit-scrollbar,
  .product__tabs::-webkit-scrollbar,
  .tab-buttons::-webkit-scrollbar{
    height: 0 !important;
  }
}
/* ===============================
   MOBILE — Tabs swipe hint (fade sur les bords)
   Robuste même sans ::after
   =============================== */
@media (max-width: 768px){

  /* Le conteneur qui scrolle (on cible large) */
  .nav-tabs,
  ul[role="tablist"],
  .tablist,
  .product-tabs,
  .product__tabs,
  .nav-tab-info-vertical .card-header,
  .nav-tab-info-vertical .nav{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    /* On masque la scrollbar (elle sert à rien dans ton cas) */
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar,
  ul[role="tablist"]::-webkit-scrollbar,
  .tablist::-webkit-scrollbar,
  .product-tabs::-webkit-scrollbar,
  .product__tabs::-webkit-scrollbar,
  .nav-tab-info-vertical .card-header::-webkit-scrollbar,
  .nav-tab-info-vertical .nav::-webkit-scrollbar{
    display: none;
  }

  /* ✅ Indice visuel : fade sur les bords (gauche/droite) */
  .nav-tabs,
  ul[role="tablist"],
  .tablist,
  .product-tabs,
  .product__tabs,
  .nav-tab-info-vertical .card-header,
  .nav-tab-info-vertical .nav{
    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,1) 20px,
      rgba(0,0,0,1) calc(100% - 56px),
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      90deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,1) 20px,
      rgba(0,0,0,1) calc(100% - 56px),
      rgba(0,0,0,0) 100%
    );
  }

  /* Bonus premium : “snap” discret (le scroll se cale proprement) */
  .nav-tabs > *,
  ul[role="tablist"] > *,
  .tablist > *,
  .product-tabs > *,
  .product__tabs > *,
  .nav-tab-info-vertical .card-header > *,
  .nav-tab-info-vertical .nav > *{
    scroll-snap-align: start;
  }

  .nav-tabs,
  ul[role="tablist"],
  .tablist,
  .product-tabs,
  .product__tabs,
  .nav-tab-info-vertical .card-header,
  .nav-tab-info-vertical .nav{
    scroll-snap-type: x mandatory;
  }
}
/* ===============================
   PRODUCT TABS — spacing premium (WORKING SELECTOR)
   Cible #nav-tab-info + .tab-pane
   =============================== */

#nav-tab-info .tab-pane{
  line-height: 1.65 !important;
}

/* Titres de sections dans les onglets (si tu utilises H5) */
#nav-tab-info .tab-pane h5{
  margin: 60px 0 10px !important; /* top / bottom */
  font-weight: 700 !important;
}

/* Si certains titres sont en H3/H4 (vu sur ton screenshot) */
#nav-tab-info .tab-pane h3,
#nav-tab-info .tab-pane h4{
  margin: 34px 0 12px !important;
  font-weight: 800 !important;
}

/* Paragraphes + listes */
#nav-tab-info .tab-pane p{
  margin: 0 0 18px !important;
}

#nav-tab-info .tab-pane ul,
#nav-tab-info .tab-pane ol{
  margin: 0 0 18px !important;
  padding-left: 1.1rem !important;
}

#nav-tab-info .tab-pane li{
  margin: 10px 0 !important; /* espace entre bullets */
}

/* Pas de gros blanc au tout début */
#nav-tab-info .tab-pane > :first-child{
  margin-top: 0 !important;
}
/* ===== VISTILLION — FAQ premium + -> - animation ===== */

/* Le rond à droite */
.faq-heading .faq-icon{
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(227,185,39,.55);
  background: rgba(227,185,39,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);

  display: inline-block;
}

/* 2) On masque l’icône du thème (le + “moche”) */
.faq-heading .faq-icon i,
.faq-heading .faq-icon svg{
  display: none !important;
}

/* 3) On recrée le + en CSS */
.faq-heading .faq-icon::before,
.faq-heading .faq-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #090909;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .18s ease;
}

/* barre verticale (le +) */
.faq-heading .faq-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 4) État ouvert : la barre verticale se couche puis disparaît => vrai “−” */
.card-faqs-heading.active-acc .faq-icon::after,
.faq-heading.active-acc .faq-icon::after,
.card-faqs-heading[aria-expanded="true"] .faq-icon::after,
.faq-heading[aria-expanded="true"] .faq-icon::after{
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* petit feedback hover premium */
.card-faqs-heading:hover .faq-icon,
.faq-heading:hover .faq-icon{
  background: rgba(227,185,39,.10);
  border-color: rgba(227,185,39,.75);
}
/* ==============================
   VISTILLION — FAQ premium cards
   (append-only)
============================== */

/* Base card */
.card-faqs{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(227,185,39,0.28);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(9,9,9,0.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* Hover premium */
.card-faqs:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(9,9,9,0.08);
  border-color: rgba(227,185,39,0.42);
}

/* Header spacing */
.card-faqs-heading{
  position: relative;
  padding-right: 72px; /* laisse la place au bouton + */
}

/* Question text */
.card-faqs-heading h4,
.card-faqs-heading .mb-0{
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Content text (réponse) */
.card-faqs .faq-content,
.card-faqs .faq-body,
.card-faqs .collapse,
.card-faqs .card-body{
  line-height: 1.6;
  color: rgba(9,9,9,0.82);
}


/* Responsive */
@media (max-width: 768px){
  .card-faqs{
    padding: 18px 18px;
    border-radius: 16px;
  }
  .card-faqs-heading{
    padding-right: 64px;
  }
}
/* ===============================
   VISTILLION — FAQ compact closed / premium open
   (append-only, à coller à la toute fin)
   =============================== */

/* 1) Carte fermée : compacte */
.card-faqs{
  padding: 14px 18px !important;   /* réduit la “grosse” case */
  margin-bottom: 14px !important;
}

/* 2) Header (la ligne question) : compact par défaut */
.card-faqs-heading,
.faq-heading{
  padding: 12px 72px 12px 14px !important;  /* top right bottom left */
  border-radius: 14px !important;
  background: transparent !important;
  transition: background .25s ease, padding .25s ease;
}

/* 3) Fond “jaune” UNIQUEMENT quand c'est ouvert */
.card-faqs-heading.active-acc,
.faq-heading.active-acc,
.card-faqs-heading[aria-expanded="true"],
.faq-heading[aria-expanded="true"]{
  background: rgba(227,185,39,.10) !important;
  padding: 14px 72px 14px 14px !important; /* un peu + “premium” ouvert */
}

/* 4) Icône : un peu plus petite pour éviter d’agrandir la carte fermée */
.faq-heading .faq-icon{
  width: 40px !important;
  height: 40px !important;
  right: 16px !important;
}

/* 5) Les barres du + : centrées + petites (plus clean) */
.faq-heading .faq-icon::before,
.faq-heading .faq-icon::after{
  width: 14px !important;
  height: 2px !important;
}
/* === FIX double fond FAQ : fond UNIQUEMENT sur .faq-heading (pas sur le wrapper) === */

/* 1) Le wrapper ne doit JAMAIS avoir de fond */
.card-faqs-heading,
.card-faqs-heading.active-acc,
.card-faqs-heading[aria-expanded="true"]{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 2) La ligne cliquable prend toute la largeur */
.faq-heading{
  display: flex !important;
  width: 100% !important;
  position: relative !important;
  padding: 14px 72px 14px 16px !important; /* left + place pour l’icône */
  border-radius: 14px !important;
  background: transparent !important;
  transition: background .22s ease, box-shadow .22s ease;
}

/* 3) Fond jaune seulement quand ouvert */
.faq-heading.active-acc,
.faq-heading[aria-expanded="true"]{
  background: rgba(227,185,39,.10) !important;
}

/* 4) Sécurité : l’icône reste à droite */
.faq-heading .faq-icon{
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* === VISTILLION — Global gold divider === */
.v-divider,
.section-divider,
hr {
  border: none !important;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(227,185,39,0.6),
    transparent
  );
  margin: 48px 0;
}
/* Open / active */
details[open],
.accordion.active,
.toggle.active,
.faq-item.active {
  border-color: rgba(227,185,39,0.75);
  background: rgba(255,255,255,0.96);
}
/* ===============================
   VISTILLION — Global hover: fond doré, texte NOIR
   =============================== */

:root{
  --v-gold: #e3b927;
  --v-black: #090909;
}

/* Tous les éléments cliquables (liens, boutons) -> texte reste noir */
a:hover,
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  color: var(--v-black) !important;
}

/* Si tu as des icônes en SVG qui devenaient dorées aussi */
a:hover svg,
button:hover svg,
.btn:hover svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* ===============================
   VISTILLION — Buttons global pill shape
   =============================== */

button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
.shopify-payment-button__button{
  border-radius: 999px !important;
}

/* Optionnel : hover premium doré (fond) sans changer la typo */
button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.shopify-payment-button__button:hover{
  background-color: rgba(227,185,39,0.44) !important;
  border-color: rgba(227,185,39,0.75) !important;
  color: #090909 !important;
}
/* =======================================================
   VISTILLION — Product page collapsible rows (FAQ style)
   Cible: .accordion .tabcustom (Shipping information / Size Guide)
   ======================================================= */

/* 0) Scope product (évite de casser d'autres accordéons du site) */
.template-product .accordion .tabcustom,
.template-product .accordion [data-toggle="collapse"].tabcustom{
  position: relative !important;
  display: flex !important;
  align-items: center !important;

  /* carte */
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(227,185,39,0.28) !important;
  border-radius: 18px !important;

  /* spacing */
  padding: 14px 72px 14px 18px !important; /* place pour l’icône à droite */
  margin: 0 0 14px 0 !important;

  /* enlève les séparateurs moches du thème */
  border-bottom: 0 !important;

  /* micro luxe */
  box-shadow: 0 10px 30px rgba(9,9,9,0.05) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;

  cursor: pointer !important;
}

/* 1) Hover = “lift” comme FAQ */
.template-product .accordion .tabcustom:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 44px rgba(9,9,9,0.08) !important;
  border-color: rgba(227,185,39,0.42) !important;
}

/* 2) État ouvert (quand ce n’est PAS .collapsed) = léger fond doré */
.template-product .accordion .tabcustom:not(.collapsed){
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(227,185,39,0.55) !important;
}

/* 3) On masque l’icône du thème si elle existe dans le header */
.template-product .accordion .tabcustom i,
.template-product .accordion .tabcustom svg{
  display: none !important;
}

/* 4) On crée le bouton rond à droite */
.template-product .accordion .tabcustom::before{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(227,185,39,.55);
  background: rgba(227,185,39,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: background .22s ease, border-color .22s ease;
}

/* 5) Le “+” (2 barres) */
.template-product .accordion .tabcustom::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
  /* on dessine les 2 barres via background */
  background:
    linear-gradient(#090909,#090909) center/14px 2px no-repeat,
    linear-gradient(#090909,#090909) center/2px 14px no-repeat;
  transition: opacity .18s ease;
}

/* 6) Quand ouvert => on enlève la barre verticale = vrai “−” */
.template-product .accordion .tabcustom:not(.collapsed)::after{
  background:
    linear-gradient(#090909,#090909) center/14px 2px no-repeat;
}

/* 7) On retire les lignes de séparation internes typiques Bootstrap */
.template-product .accordion .tabcustom + .collapse,
.template-product .accordion .tabcustom + .collapsing{
  border-top: 0 !important;
}

/* 8) (Optionnel) texte un peu plus premium */
.template-product .accordion .tabcustom{
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}

/* Mobile */
@media (max-width: 768px){
  .template-product .accordion .tabcustom{
    padding: 13px 66px 13px 16px !important;
    border-radius: 16px !important;
  }
  .template-product .accordion .tabcustom::before,
  .template-product .accordion .tabcustom::after{
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
  }
}
/* ==================================================
   VISTILLION — Header capsules WITHOUT link transition
   (capsule drawn with ::before to avoid ghost)
   ================================================== */

/* 0) IMPORTANT : aucune transition sur le lien lui-même */
.header__menu-item a,
.site-nav__link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  transition: none !important; /* <- le point clé */
}

/* 1) La capsule (fond + border + halo) vit ici */
.header__menu-item a::before,
.site-nav__link::before{
  content: "";
  position: absolute;
  inset: 0;                 /* prend exactement la taille du lien */
  border-radius: 999px;

  background: rgba(227,185,39,0);           /* invisible par défaut */
  border: 1px solid rgba(227,185,39,0);     /* border “réservée” */
  box-shadow: 0 10px 26px rgba(227,185,39,0);

  transform: translateY(0);
  opacity: 1;

  transition: background-color .22s ease,
              border-color .22s ease,
              box-shadow .22s ease,
              transform .22s ease !important;
  pointer-events: none;
}

/* 2) Hover : on anime le pseudo-élément uniquement */
.header__menu-item a:hover::before,
.site-nav__link:hover::before{
  background: rgba(227,185,39,0.10);
  border-color: rgba(227,185,39,0.65);
  box-shadow: 0 10px 26px rgba(227,185,39,0.16);

/* 3) Texte : pas de transition (évite repaint bizarre) */
.header__menu-item a:hover,
.site-nav__link:hover{
  color: #090909 !important;
}

/* 4) Active state : capsule visible sans transition sur le lien */
.header__menu-item--active a::before,
.site-nav__link--active::before{
  background: rgba(227,185,39,0.14);
  border-color: rgba(227,185,39,0.75);
  box-shadow: 0 10px 26px rgba(227,185,39,0.12);
}
.header__menu-item--active a,
.site-nav__link--active{
  font-weight: 600 !important;
}
/* === Dropdown menu – capsules dorées === */
.site-nav__dropdown a,
.site-nav__dropdown-link {
  padding: 8px 14px;
  border-radius: 999px;
  transition: all .22s ease;
}

/* Hover dropdown */
.site-nav__dropdown a:hover,
.site-nav__dropdown-link:hover {
  background: rgba(227,185,39,0.10);
  border: 1px solid rgba(227, 185, 39, 0.45);
  box-shadow:
    0 6px 18px rgba(227,185,39,0.22),
    0 2px 6px rgba(227,185,39,0.15);
  text-decoration: none !important;
}

/* ===============================
   FIX — Ombre uniquement sur la capsule (pas sur le texte)
   =============================== */

/* 1) On interdit toute ombre/effet sur le texte (span) */
.site-nav__title,
.site-nav__link .site-nav__title,
.header__menu-item a span,
.site-nav__link span,
.meganav__link span,
.site-nav__dropdown a span{
  box-shadow: none !important;
  background: transparent !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* 2) La capsule = le lien <a> (on force un vrai “pill”) */
.header__menu-item a,
.site-nav__link,
.meganav__link,
.site-nav__dropdown a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important; /* par défaut */
}

/* 3) Ombre “vers le haut” UNIQUEMENT sur la capsule au hover */
.header__menu-item a:hover,
.site-nav__link:hover,
.meganav__link:hover,
.site-nav__dropdown a:hover{
  box-shadow:
    0 -10px 24px rgba(0,0,0,0.08),
    0 -6px 18px rgba(227,185,39,0.20) !important;
}
/* ===============================
   HEADER — Smooth capsule (sans toucher aux ombres)
   À coller tout en bas
   =============================== */

/* 1) On prépare la transition sur l’élément qui reçoit la capsule (tes <a>) */
.site-nav__link,
.header__menu-item a{
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    color .22s ease !important;
  will-change: transform, box-shadow, background-color;
}

/* 2) Micro “lift” + adoucissement (ne modifie pas tes box-shadow: juste la transition) */
.site-nav__link:hover,
.header__menu-item a:hover{
  transform: translateY(-1px);
}

/* 3) Si ton thème applique la capsule sur le span du texte (site-nav__title),
      on le rend smooth aussi, sans modifier ton style */
.site-nav__link .site-nav__title{
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    color .22s ease !important;
  will-change: transform, box-shadow, background-color;
}
.site-nav__link:hover .site-nav__title{
  transform: translateY(-1px);
}
/* ===============================
   VISTILLION — FIX icônes SVG (wishlist / quickshop / compare)
   Les SVG sont en stroke="currentColor" -> on pilote via color
   =============================== */

/* Base : on s'assure que le SVG suit la couleur du bouton */
.product-card__overlay-btn,
.product-card__overlay-btn svg{
  color: #090909 !important;
}

/* Hover : capsule dorée + icône (SVG) bien noire */
.product-card__overlay-btn:hover{
  background-color: rgba(227,185,39,0.44) !important;
  border-color: rgba(227,185,39,0.75) !important;
  color: #090909 !important;
}

/* Le SVG suit currentColor (outline + fill) */
.product-card__overlay-btn:hover svg{
  stroke: currentColor !important;
  fill: none !important; /* icônes outline */
}

/* Sécurité : si certaines icônes ont du fill */
.product-card__overlay-btn:hover svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}
/* ===============================
   PhotoSwipe — premium soft fade (LIGHTBOX ONLY)
   (à coller tout en bas)
   =============================== */

/* 1) On coupe l'effet "slide" (translate3d) visuellement : on garde le move interne,
      mais la perception sera un fondu doux */
.pswp .pswp__container,
.pswp .pswp__zoom-wrap{
  transition: none !important;
}

/* 2) Fondu premium sur les slides (PhotoSwipe utilise aria-hidden) */
.pswp .pswp__item{
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity;
}

.pswp .pswp__item[aria-hidden="false"]{
  opacity: 1;
}

/* 3) Petit plus : fondu sur l'image elle-même (encore plus smooth) */
.pswp .pswp__img{
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity;
}

/* 4) Évite les flashes/artefacts */
.pswp .pswp__item[aria-hidden="true"] .pswp__img{
  opacity: 0;
}
.pswp .pswp__item[aria-hidden="false"] .pswp__img{
  opacity: 1;
}
/* PhotoSwipe — ralentir la transition (lightbox uniquement) */
.pswp{
  --pswp-transition-duration: 650ms !important;
  --pswp-transition-easing: cubic-bezier(.22,.61,.36,1) !important;
}
/* ===============================
   VISTILLION — Product page polish (SAFE)
   (sans impacter PhotoSwipe / lightbox)
   =============================== */

/* 1) Right column as a soft card (OK) */
.template-product .product-single__info-wrapper,
.template-product .product__info-wrapper{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(6px);
}

/* 2) Product media hover (OK page produit uniquement) */
.template-product .product-single__media,
.template-product .product__media{
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.template-product .product-single__media:hover,
.template-product .product__media:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* 3) Fade-in luxury (OK) */
.fade-in{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* 4) Luxury text rhythm (OK) */
.product__description,
.rte p{
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* 5) Gallery hover on images (OK page produit uniquement)
   -> Important : on EXCLUT PhotoSwipe (.pswp) */
.template-product .product__media img,
.template-product .product-single__media img,
.template-product .media img{
  transition: transform .35s ease, filter .35s ease;
  transform: translateZ(0);
}

.template-product .product__media:hover img,
.template-product .product-single__media:hover img,
.template-product .media:hover img{
  transform: scale(1.015);
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.12));
}
/* ===============================
   IMPORTANT : on NE MET PLUS le bloc "Premium CTA" global
   (button, .btn) car ça casse PhotoSwipe.
   =============================== */

/* Si tu veux garder un micro-hover premium sur les CTA,
   on le limite aux CTA du site, et on exclut PhotoSwipe. */
body:not(.pswp) .shopify-payment-button__button:hover,
body:not(.pswp) a.btn:hover,
body:not(.pswp) .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(227,185,39,0.35);
}
/* TEST VISUEL — si ça ne change rien, le CSS n’est pas appliqué ou pas le bon sélecteur */
#nav-tab-info,
#nav-tab-info *{
  outline: 2px solid red !important;
}
#nav-tab-info .tab-pane{
  background: rgba(227,185,39,.18) !important;
}