/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ==========================================================
   KAWA — noir & rose néon, version améliorée
   ========================================================== */

:root {
  --neon: 255 79 203;
  --neon-soft: 255 140 225;
  --neon-dark: 192 25 143;
  --neon-glow: 0 0 22px rgba(255, 79, 203, .35);
  --neon-glow-strong: 0 0 30px rgba(255, 79, 203, .55), 0 0 70px rgba(255, 79, 203, .18);
}

::selection { background: rgb(var(--neon)); color: #fff; }

[data-scheme="dark"] body {
  background-image: radial-gradient(700px 420px at 100% 45%, rgba(192, 25, 143, .08), transparent 60%);
  background-attachment: fixed;
}

.hl-accent .mk { -webkit-text-fill-color: rgb(var(--neon)); }

.sa-section-title {
  background: linear-gradient(180deg, #fff 0%, #b9aebd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}

/* ---------- Hero ---------- */
.sa-hero > .wrap { padding-top: 4.5rem; padding-bottom: 2.5rem; }
.sa-hero .wrap > div { max-width: 60rem; }

/* Grands symboles flous à gauche et à droite (à la place de personnages) */
.sa-hero::before,
.sa-hero::after {
  position: absolute;
  top: 6%;
  font-size: clamp(14rem, 24vw, 24rem);
  line-height: 1;
  color: rgb(var(--neon));
  opacity: .07;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
}
.sa-hero::before {
  content: "\f3a5"; /* gem */
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900;
  left: -3rem; transform: rotate(-14deg);
}
.sa-hero::after {
  content: "\f0e7"; /* bolt */
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900;
  right: -2rem; transform: rotate(12deg);
}
@media (max-width: 1023px) { .sa-hero::before, .sa-hero::after { display: none; } }

/* Pastille d'info au-dessus du badge */
.sa-hero .wrap > div::before {
  content: "Livraison instantanée · Support 24/7";
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9999px;
  background: rgba(255, 255, 255, .04);
  color: rgb(var(--cl-t-muted));
  font-size: .75rem;
}

.sa-hero-eyebrow {
  border-color: rgba(var(--neon), .45) !important;
  background: rgba(var(--neon), .07) !important;
  color: #fff !important;
  font-weight: 600;
  margin-bottom: 1.75rem !important;
}
.sa-hero-eyebrow span:first-child {
  background: linear-gradient(135deg, rgb(var(--neon)), rgb(var(--neon-dark))) !important;
}

/* Titre : 2 lignes nettes, la 2e en rose */
.sa-hero-title {
  font-size: clamp(2.2rem, 6.4vw, 4.6rem) !important;
  line-height: 1.04 !important;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 15%, #a79cab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sa-hero-title .mk {
  display: block;
  margin-top: .05em;
  background: linear-gradient(90deg, rgb(var(--neon)), rgb(var(--neon-soft)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sa-hero-subtitle { max-width: 38rem; margin-inline: auto; line-height: 1.7; }
.sa-hero-actions { margin-top: 2rem; }

/* ---------- Boutons ---------- */
.sa-btn { transition: all .2s ease; font-weight: 600; }

.sa-btn--primary.sa-btn--solid,
.sa-add-to-cart {
  background: linear-gradient(135deg, rgb(var(--neon-dark)), rgb(var(--neon))) !important;
  border: 1px solid rgba(var(--neon-soft), .5) !important;
  color: #fff !important;
  box-shadow: var(--neon-glow);
}
.sa-btn--primary.sa-btn--solid:hover,
.sa-add-to-cart:hover { box-shadow: var(--neon-glow-strong); transform: translateY(-1px); filter: brightness(1.08); }
.sa-btn--primary.sa-btn--solid::after { content: "\2192"; }

.sa-btn--primary.sa-btn--outline {
  background: rgba(var(--neon), .08);
  border-color: rgba(var(--neon), .5) !important;
  color: rgb(var(--neon-soft)) !important;
}
.sa-btn--primary.sa-btn--outline:hover { background: rgba(var(--neon), .16); box-shadow: var(--neon-glow); }
.sa-btn--secondary.sa-btn--solid { background: rgba(255, 255, 255, .05); }
.sa-btn--secondary .fa-discord { color: #5865F2; }

/* ---------- Stats : 3 cartes égales, icône + valeur + label ---------- */
.sa-stats { padding-top: 0 !important; }

.sa-stats--cards .sa-stats-items {
  max-width: 50rem;
  margin-inline: auto;
  gap: 1rem;
}

.sa-stats--cards .sa-stats-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  text-align: left;
  background: rgb(var(--cl-surface));
}

.sa-stats--cards .sa-stats-item::before {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--neon), .35);
  background: rgba(var(--neon), .1);
  color: rgb(var(--neon));
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1rem;
}
.sa-stats--cards .sa-stats-item:nth-child(1)::before { content: "\f0e7"; }
.sa-stats--cards .sa-stats-item:nth-child(2)::before { content: "\f590"; }
.sa-stats--cards .sa-stats-item:nth-child(3)::before { content: "\f3a5"; }

.sa-stats--cards .sa-stats-item span { grid-column: 2; font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.sa-stats--cards .sa-stats-item p { grid-column: 2; margin: .15rem 0 0; font-size: .78rem; }

/* ---------- Header / navigation ---------- */
.sa-header, .sa-navbar {
  background: rgba(8, 5, 10, .72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--neon), .14);
}
.sa-navbar-link:hover { color: rgb(var(--neon-soft)); }

/* ---------- Produits & composants ---------- */
.sa-product-card {
  background: linear-gradient(180deg, rgb(var(--cl-surface-raised)), rgb(var(--cl-surface))) !important;
  border: 1px solid rgba(var(--neon), .16) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sa-product-card:hover { border-color: rgba(var(--neon-soft), .55) !important; box-shadow: var(--neon-glow); }
.sa-product-card-price { color: rgb(var(--neon-soft)); font-weight: 700; }

.sa-cart-panel, .sa-searchbar, .sa-feedback-card, .sa-faq-item, [role="dialog"] {
  border: 1px solid rgba(var(--neon), .2) !important;
}
.sa-cart-panel, [role="dialog"] { box-shadow: 0 20px 60px rgba(0, 0, 0, .7), var(--neon-glow); }

input:focus, textarea:focus, select:focus {
  border-color: rgb(var(--neon)) !important;
  box-shadow: 0 0 0 3px rgba(var(--neon), .22) !important;
  outline: none !important;
}

.sa-footer { border-top: 1px solid rgba(var(--neon), .16); }
.sa-footer-link:hover { color: rgb(var(--neon-soft)); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #08050a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(var(--neon)), rgb(var(--neon-dark)));
  border-radius: 10px;
  border: 2px solid #08050a;
}