/* ═══════════════════════════════════════════════════════════════
   Schubnel — Fiche produit
   Tout est scopé sous .schubnel-product pour ne pas entrer en
   collision avec le design system de la home (.btn, .chip, .sbrand…).
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (scopés, n'écrasent pas le :root global) ─────────── */
.schubnel-product {
  --g900: #161616; --g800: #232323; --g700: #2c2c2c; --g600: #3a3a3a;
  --g50:  #f2f2f2; --or: #fec41b;   --or600: #e8ad00;
  --bg:   #f5f5f4; --surf: #fff;    --line: #e3e3e3;
  --ink:  #1a1a1a; --muted: #6e6e6e;
  --sh-sm: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
  --r: 14px; --rs: 10px;
  --f: "Manrope", system-ui, sans-serif;

  /* Catégories réglementaires */
  --cat-de-bg: #f0fdf4; --cat-de-bd: #86efac; --cat-de-txt: #166534; --cat-de-ac: #16a34a;
  --cat-d-bg:  #fffbeb; --cat-d-bd:  #fde68a; --cat-d-txt:  #92400e; --cat-d-ac:  #d97706;
  --cat-c-bg:  #fff7ed; --cat-c-bd:  #fed7aa; --cat-c-txt:  #9a3412; --cat-c-ac:  #ea580c;
  --cat-b-bg:  #fef2f2; --cat-b-bd:  #fecaca; --cat-b-txt:  #991b1b; --cat-b-ac:  #dc2626;
}

.schubnel-product * { box-sizing: border-box; }

/* ── Utilitaires partagés (préfixés pour éviter les collisions) ─ */
.schubnel-product .sbrand {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--g600);
}
.schubnel-product .chip {
  font-size: 11.5px; font-weight: 700; color: var(--g700);
  background: var(--g50); border: 1px solid var(--line);
  border-radius: 50px; padding: 4px 11px;
}
.schubnel-product .btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; padding: 14px 24px;
  border-radius: 50px; border: 1.5px solid transparent;
  transition: .18s; font-family: var(--f); cursor: pointer;
}
.schubnel-product .btn svg      { width: 17px; height: 17px; }
.schubnel-product .btn-or       { background: var(--or); color: #1a1a1a; }
.schubnel-product .btn-or:hover { background: var(--or600); }
.schubnel-product .pico         { opacity: .5; color: #b5b5b5; }

/* ── Fil d'Ariane ────────────────────────────────────────────── */
.schubnel-crumb { background: var(--bg); }
.schubnel-crumb .woocommerce-breadcrumb,
.schubnel-crumb .crumb-inner {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 0; font-size: 11.5px; color: #aaa;
}
.schubnel-crumb a        { color: #aaa; text-decoration: none; }
.schubnel-crumb a:hover  { color: var(--muted); }
.schubnel-crumb .sep,
.schubnel-crumb .breadcrumb_last { opacity: 1; color: var(--muted); font-weight: 500; }
.schubnel-crumb .current { color: var(--muted); font-weight: 500; }

/* ── Section produit ─────────────────────────────────────────── */
.schubnel-prod { padding: 20px 0 16px; }
.schubnel-prod .inner {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: start;
}

/* ── Galerie ─────────────────────────────────────────────────── */
.schubnel-gal .main {
  aspect-ratio: 4/3; background: var(--g50);
  border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.schubnel-gal .main > img { width: 100%; height: 100%; object-fit: cover; }
.schubnel-gal .main > svg { width: 60px; height: 60px; color: #cfcfcf; }
.schubnel-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 10px;
}
.schubnel-thumbs button {
  aspect-ratio: 1; background: var(--g50);
  border: 1.5px solid var(--line); border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  transition: .15s; cursor: pointer; overflow: hidden; padding: 0;
}
.schubnel-thumbs button img    { width: 100%; height: 100%; object-fit: cover; }
.schubnel-thumbs button:hover  { border-color: var(--g600); }
.schubnel-thumbs button.active { border-color: var(--g700); background: var(--surf); }
.schubnel-thumbs svg { width: 22px; height: 22px; color: #cfcfcf; }

/* ── Panneau d'achat ─────────────────────────────────────────── */
.schubnel-buy .brandline {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.schubnel-buy h1 {
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -.02em; margin-bottom: 0;
}

/* ── Bloc catégorie réglementaire ───────────────────────────── */
.schubnel-regblock {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  border-radius: var(--rs); border: 1px solid var(--line);
  background: var(--g50); padding: 13px 15px;
  margin: 18px 0; font-size: 13px; color: var(--muted);
}
.schubnel-regblock-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px;
  border-radius: 50px; white-space: nowrap;
}
.schubnel-reglist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; color: var(--muted);
}
.schubnel-reglist li {
  display: flex; align-items: flex-start; gap: 9px; line-height: 1.4;
}
.schubnel-reglist li::before {
  content: ""; flex: 0 0 auto; margin-top: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
}
.regblock--B  .schubnel-reglist li::before { background: var(--cat-b-ac); }
.regblock--C  .schubnel-reglist li::before { background: var(--cat-c-ac); }
.regblock--D  .schubnel-reglist li::before { background: var(--cat-d-ac); }
.regblock--De .schubnel-reglist li::before { background: var(--cat-de-ac); }
.regblock--B  .schubnel-regblock-cat { background: var(--cat-b-bg);  color: var(--cat-b-txt);  border: 1px solid var(--cat-b-bd); }
.regblock--C  .schubnel-regblock-cat { background: var(--cat-c-bg);  color: var(--cat-c-txt);  border: 1px solid var(--cat-c-bd); }
.regblock--D  .schubnel-regblock-cat { background: var(--cat-d-bg);  color: var(--cat-d-txt);  border: 1px solid var(--cat-d-bd); }
.regblock--De .schubnel-regblock-cat { background: var(--cat-de-bg); color: var(--cat-de-txt); border: 1px solid var(--cat-de-bd); }

/* ── Prix ────────────────────────────────────────────────────── */
.schubnel-priceblock {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.schubnel-priceblock .p    { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.schubnel-priceblock .p del { font-size: 20px; font-weight: 600; color: var(--muted); opacity: .7; }
.schubnel-priceblock .p ins { text-decoration: none; }
.schubnel-pdesc {
  font-size: 14px; color: #555; line-height: 1.65;
  margin-top: 18px; margin-bottom: 4px;
}
.schubnel-pdesc p { margin: 0 0 .5em; }

/* ── Badges ──────────────────────────────────────────────────── */
.schubnel-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.schubnel-bd {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--rs); padding: 8px 14px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.schubnel-bd svg  { width: 15px; height: 15px; flex: 0 0 auto; }
.schubnel-bd.info { background: var(--g50); color: var(--g700); border: 1px solid var(--line); }

/* ── Actions achat ───────────────────────────────────────────── */
.schubnel-buy-actions {
  display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap;
  margin: 0;
}
.schubnel-qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 50px; overflow: hidden;
}
.schubnel-qty button {
  width: 48px; height: 52px; border: none;
  background: var(--surf); font-size: 20px; color: var(--g700); cursor: pointer;
}
.schubnel-qty button:hover { background: var(--g50); }
.schubnel-qty input {
  width: 44px; height: 52px; border: none; text-align: center;
  font-family: var(--f); font-size: 16px; font-weight: 700;
  outline: none; background: transparent; -moz-appearance: textfield;
}
.schubnel-qty input::-webkit-outer-spin-button,
.schubnel-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-cart { flex: 1; min-width: 220px; justify-content: center; height: 52px; font-size: 16px; }

/* Repli : bouton WooCommerce natif (produits variables / non simples) */
.schubnel-native-cart .quantity { margin-right: 12px; }
.schubnel-native-cart .single_add_to_cart_button {
  background: var(--or); color: #1a1a1a; border: none;
  border-radius: 50px; padding: 14px 26px; font-weight: 700;
  font-family: var(--f); cursor: pointer;
}
.schubnel-native-cart .single_add_to_cart_button:hover { background: var(--or600); }

/* ── Fiche technique ─────────────────────────────────────────── */
.schubnel-info { padding: 16px 0 32px; }
.schubnel-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
/* Pas de « En savoir plus » : la fiche technique occupe toute la largeur */
.schubnel-info-grid--solo { grid-template-columns: 1fr; }
.schubnel-product .sec-h { font-size: clamp(18px, 2vw, 22px); font-weight: 800; margin-bottom: 18px; line-height: 1.14; letter-spacing: -.02em; }
.schubnel-spec { width: 100%; border-collapse: collapse; }
.schubnel-spec tr { border-bottom: 1px solid var(--line); }
.schubnel-spec th { text-align: left; font-weight: 600; color: var(--muted); padding: 13px 0; width: 46%; font-size: 14px; vertical-align: top; }
.schubnel-spec td { padding: 13px 0; font-weight: 700; font-size: 14px; }
.cat-cell { display: inline-flex; align-items: center; gap: 8px; }
.cat-dot  { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cat-dot--C  { background: var(--cat-c-ac); }
.cat-dot--B  { background: var(--cat-b-ac); }
.cat-dot--D  { background: var(--cat-d-ac); }
.cat-dot--De { background: var(--cat-de-ac); }
.schubnel-savoir p { color: #444; font-size: 15px; line-height: 1.7; }

/* ── Produits liés ───────────────────────────────────────────── */
.schubnel-related { padding: 0 0 36px; }
.schubnel-rel-head {
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px; margin-bottom: 26px;
}
.schubnel-carnav { display: flex; gap: 10px; }
.schubnel-carnav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surf);
  color: var(--g700); display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.schubnel-carnav button:hover { border-color: var(--g700); }
.schubnel-carnav svg { width: 20px; height: 20px; }
.schubnel-slider {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 10px;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge anciens */
}
.schubnel-slider::-webkit-scrollbar { display: none; height: 0; } /* Chrome/Safari */
.schubnel-sp { flex: 0 0 250px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.schubnel-sp .img {
  aspect-ratio: 1; background: var(--g50); border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; position: relative; overflow: hidden; transition: .18s;
}
.schubnel-sp .img > svg { width: 32px; height: 32px; transition: .25s; }
.schubnel-sp .img > img { width: 100%; height: 100%; object-fit: cover; }
.schubnel-sp:hover .img       { box-shadow: inset 0 0 0 2px var(--g700); }
.schubnel-sp:hover .img > svg { transform: scale(1.06); }
.schubnel-sp .qadd {
  position: absolute; right: 11px; bottom: 11px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--g700); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: .2s; cursor: pointer;
}
.schubnel-sp:hover .qadd { opacity: 1; transform: none; }
.schubnel-sp .qadd:hover { background: var(--or); color: #1a1a1a; }
.schubnel-sp .qadd svg   { width: 19px; height: 19px; }
.schubnel-sp h4  { font-size: 14.5px; font-weight: 700; margin: 5px 0 6px; line-height: 1.32; }
.schubnel-sp .pr { font-size: 16.5px; font-weight: 800; }
.schubnel-seeall {
  flex: 0 0 250px; scroll-snap-align: start;
  border: 1.5px dashed var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: var(--g700);
  font-weight: 700; text-align: center; padding: 24px;
  transition: .18s; text-decoration: none;
}
.schubnel-seeall:hover { border-color: var(--g700); background: var(--g50); }
.schubnel-seeall .ci {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--g50); display: flex; align-items: center; justify-content: center;
}
.schubnel-seeall svg { width: 24px; height: 24px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .schubnel-prod .inner { grid-template-columns: 1fr; gap: 30px; }
  .schubnel-info-grid   { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .schubnel-sp .qadd { opacity: 1; transform: none; }
  .btn-cart          { min-width: 0; }
}
.schubnel-product :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }