/* ==========================================================================
   BH² Group — Composants réutilisables
   ========================================================================== */

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn[aria-disabled="true"] {
  background: var(--color-grey-300);
  color: var(--color-ink-soft);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn-primary {
  background: var(--gradient-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-rest);
}

.btn-primary:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-violet-deep-1);
  border: 1.5px solid var(--color-grey-300);
}

.btn-secondary:hover {
  border-color: var(--color-violet-medium);
  color: var(--color-violet-medium);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-whatsapp[aria-disabled="true"] {
  background: var(--color-grey-300);
  color: var(--color-ink-soft);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--color-white);
  position: relative;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.btn-icon[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-icon[aria-disabled="true"]:hover {
  background: transparent;
  transform: none;
}

.btn-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

/* ---- Badge (compteur panier) ---- */
.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-magenta-1);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-violet-deep-1);
}

/* ---- Tags / badges produit (utilisés plus tard sur les cartes produit) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tag-promo {
  background: var(--color-magenta-1);
  color: var(--color-white);
}

.tag-new {
  background: var(--color-violet-medium);
  color: var(--color-white);
}

/* ---- Barre de recherche ---- */
.search-form {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 320px;
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.search-form:focus-within {
  box-shadow: 0 0 0 3px rgba(193, 63, 145, 0.35);
}

.search-form input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
  background: transparent;
}

.search-form input::placeholder {
  color: var(--color-ink-soft);
}

.search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-white);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.search-form button:hover {
  transform: scale(1.06);
}

.search-form button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ---- Placeholder visuel (produits/photos non fournis) ---- */
.visual-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-rose-pale-soft), var(--color-rose-pale));
  color: var(--color-violet-medium);
  overflow: hidden;
}

.visual-placeholder::after {
  content: attr(data-placeholder-label);
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-violet-deep-1);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.visual-placeholder svg {
  width: 38%;
  height: 38%;
  stroke: var(--color-violet-medium);
  fill: none;
  stroke-width: 1.2;
  opacity: 0.65;
}

/* ---- Carte produit ---- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.product-card:hover,
.product-card:focus-within {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
}

.product-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__stock {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

.product-card__stock--out {
  color: #b3261e;
  font-weight: 700;
}

.product-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__name a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-standard);
}

.product-card__name a:hover {
  color: var(--color-violet-medium);
}

.product-card__badges {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-card__quick-actions {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.product-card:hover .product-card__quick-actions,
.product-card:focus-within .product-card__quick-actions {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .product-card__quick-actions {
    opacity: 1;
    transform: none;
  }
}

.product-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-violet-deep-1);
  box-shadow: var(--shadow-rest);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.product-card__icon-btn:hover {
  background: var(--gradient-brand);
  color: var(--color-white);
  transform: scale(1.06);
}

.product-card__icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.product-card__icon-btn[aria-pressed="true"] svg {
  fill: currentColor;
}

.product-card__icon-btn.is-confirmed svg {
  animation: badge-pop var(--duration-fast) var(--ease-standard);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.product-card__category {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

.product-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--color-ink);
  line-height: 1.35;
}

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.product-card__price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-violet-deep-1);
}

.product-card__price-old {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-decoration: line-through;
}

.product-card__add {
  margin-top: 0.4rem;
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
}

.product-card__add.is-added,
.product-info__add.is-added {
  background: #1e8449;
}

/* ---- Carrousel produits (accueil "populaires", fiche produit "similaires") ---- */
.carousel-wrap {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-block: 0.3rem var(--space-sm);
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track .product-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

.carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-violet-deep-1);
  box-shadow: var(--shadow-hover);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  color: var(--color-magenta-1);
}

.carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.carousel-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.carousel-arrow--prev {
  left: -6px;
}

.carousel-arrow--next {
  right: -6px;
}

@media (max-width: 720px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .carousel-arrow--prev {
    left: -2px;
  }

  .carousel-arrow--next {
    right: -2px;
  }
}

/* ---- Modal Aperçu rapide ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(43, 15, 73, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-section) var(--ease-standard), visibility var(--duration-section);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.quickview-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-section) var(--ease-standard),
              opacity var(--duration-section) var(--ease-standard);
}

.modal-overlay.is-open .quickview-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.quickview-modal__media {
  aspect-ratio: 1 / 1;
}

.quickview-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quickview-modal__stock {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.quickview-modal__stock--out {
  color: #b3261e;
  font-weight: 700;
}

.quickview-modal__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quickview-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-violet-deep-1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-rest);
}

.quickview-modal__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.quickview-modal__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--color-grey-300);
  border-radius: 999px;
  width: fit-content;
}

.quickview-modal__qty button {
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-violet-deep-1);
}

.quickview-modal__qty input {
  width: 42px;
  text-align: center;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  background: transparent;
}

@media (max-width: 720px) {
  .quickview-modal {
    grid-template-columns: 1fr;
  }
}

/* ---- Mini-panier (drawer latéral) ---- */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 390;
  background: rgba(43, 15, 73, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-section) var(--ease-standard), visibility var(--duration-section);
}

.cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  width: min(420px, 92vw);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-section) var(--ease-standard);
  box-shadow: -12px 0 32px rgba(43, 15, 73, 0.18);
  /* Filet de sécurité : si l'en-tête + la liste + le formulaire de commande
     dépassent ensemble la hauteur de l'écran (petits écrans, plusieurs
     articles, ou formulaire de paiement plus long), tout le tiroir devient
     scrollable plutôt que de laisser le bouton de paiement inaccessible
     sous le bas de l'écran. */
  overflow-y: auto;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-grey-200);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 1;
}

.cart-drawer__header h2 {
  font-size: 1.2rem;
}

.cart-drawer__body {
  /* Pas de scroll interne ni de flex:1 ici : ça créait une deuxième zone de
     défilement, trop petite, qui coupait le dernier article juste avant le
     sous-total. Le corps garde sa hauteur naturelle (tous les articles
     visibles) et c'est .cart-drawer dans son ensemble qui défile — un seul
     scroll, plus simple et plus fiable. */
  padding: var(--space-md);
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-sm);
  align-items: start;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-grey-100);
}

.cart-item__media {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
}

.cart-item__media svg {
  width: 40%;
  height: 40%;
}

.cart-item__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cart-item__name {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--color-grey-300);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  width: fit-content;
}

.cart-item__qty button {
  width: 28px;
  height: 28px;
  font-weight: 700;
  color: var(--color-violet-deep-1);
}

.cart-item__price {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin-top: 0.35rem;
}

.cart-item__remove {
  color: var(--color-ink-soft);
  padding: 0.3rem;
  transition: color var(--duration-fast) var(--ease-standard);
}

.cart-item__remove:hover {
  color: var(--color-magenta-1);
}

.cart-item__remove svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.cart-empty {
  text-align: center;
  color: var(--color-ink-soft);
  padding: var(--space-2xl) 0;
}

.cart-drawer__footer {
  border-top: 1px solid var(--color-grey-200);
  padding: var(--space-md);
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-sm);
  font-family: var(--font-title);
}

.cart-subtotal-row strong {
  font-size: 1.25rem;
  color: var(--color-violet-deep-1);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.checkout-form label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.checkout-form input {
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.checkout-form input:focus-visible {
  outline: none;
  border-color: var(--color-magenta-1);
}

.checkout-form button {
  margin-top: 0.4rem;
  width: 100%;
  justify-content: center;
}

/* Logos des opérateurs Mobile Money affichés juste avant le bouton de
   paiement en ligne — pas de sélecteur à choisir soi-même, CinetPay laisse
   le client choisir son opérateur sur sa propre page. */
.payment-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.4rem 0;
}

.payment-badge {
  height: 48px;
  width: auto;
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 6px 10px;
  box-shadow: 0 0 0 1.5px var(--color-grey-300), var(--shadow-rest);
}

.checkout-confirmation {
  text-align: center;
  color: #1e8449;
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--space-md) 0;
}

/* Bannière affichée en haut de page au retour de CinetPay (succès/échec) —
   voir js/checkout.js bh2InitCinetPayReturn. */
.checkout-return-banner {
  max-width: 600px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md);
  text-align: center;
  font-weight: 700;
  color: var(--color-violet-deep-1);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-rest);
}

/* ---- Modal Mon compte (Phase 2 : téléphone + OTP) ---- */
.auth-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  padding: var(--space-lg);
  position: relative;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-section) var(--ease-standard),
              opacity var(--duration-section) var(--ease-standard);
}

.modal-overlay.is-open .auth-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.auth-modal h3 {
  margin-bottom: var(--space-sm);
}

.auth-modal__intro {
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}

.auth-modal__back {
  color: var(--color-violet-medium);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  margin-top: 0.4rem;
}

.auth-modal__back:hover {
  text-decoration: underline;
}

.auth-order {
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.auth-order__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

/* ---- Page "Mon compte" (mon-compte.html) ---- */
.account-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-lg);
  box-shadow: var(--shadow-rest);
}

.account-panel h1 {
  /* h1 hérite par défaut d'une taille "hero" (clamp jusqu'à 3.75rem, voir
     base.css) pensée pour les titres de section pleine largeur — beaucoup
     trop grande pour ce petit encart, où "Administration" débordait. */
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
}

/* Écrans admin à action unique (connexion, accès refusé, indisponible) —
   centre le texte et la carte verticalement dans la page, plutôt que de la
   laisser collée en haut. */
.admin-auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.account-panel--center {
  text-align: center;
}

/* Le titre et les textes d'info restent centrés, mais le formulaire de
   connexion lui-même repasse en alignement normal — un champ email/mot de
   passe centré serait bizarre pendant la saisie. */
.account-panel--center .checkout-form {
  text-align: left;
}

.account-panel .btn {
  width: 100%;
  justify-content: center;
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.account-header__subtitle {
  color: var(--color-ink-soft);
  margin-top: 0.3rem;
}

.account-section {
  margin-bottom: var(--space-2xl);
}

.account-section h2 {
  margin-bottom: var(--space-md);
}

.account-section__hint {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

/* ---- Page "Administration" (admin.html) ---- */
.admin-header {
  background: var(--gradient-header);
  padding-block: var(--space-sm);
}

.admin-header__inner {
  display: flex;
  align-items: center;
}

/* Le texte du logo est plus long ici que sur le site principal
   ("Administration" vs "BH² Group") — autorise le retour à la ligne
   pour ne jamais déborder du header, contrairement à .site-logo__text
   qui reste en nowrap ailleurs (contexte avec nav/hamburger à côté). */
.admin-header__inner .site-logo__text {
  white-space: normal;
}

.admin-tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-grey-200);
  margin-bottom: var(--space-lg);
}

.admin-tab {
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.admin-tab:hover {
  color: var(--color-violet-medium);
}

.admin-tab.is-active {
  color: var(--color-violet-deep-1);
  border-color: var(--color-magenta-1);
}

.admin-tabs--site .admin-tab {
  font-size: 1.05rem;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.admin-chart-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
  padding: var(--space-md);
}

.admin-chart {
  width: 100%;
  height: auto;
}

.admin-chart__bar {
  fill: var(--color-violet-deep-1);
}

.admin-chart__axis {
  stroke: var(--color-grey-200);
  stroke-width: 1;
}

.admin-chart__value,
.admin-chart__label {
  font-size: 9px;
  fill: var(--color-ink-soft);
}

.admin-chart-card__delta {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
  min-height: 1.1em;
}

.admin-recommendations {
  margin-top: var(--space-lg);
}

.admin-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.admin-reco-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
  padding: var(--space-md);
}

.admin-reco-card h3 {
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
}

.admin-reco-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.admin-reco-card li {
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--color-grey-200);
}

.admin-reco-card li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.admin-panel__toolbar {
  margin-bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
}

.admin-panel__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.admin-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-filter-label select,
.admin-filter-label input {
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink);
  min-width: 180px;
}

.admin-filter-label input:focus-visible {
  outline: none;
  border-color: var(--color-magenta-1);
}

.admin-product-form {
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.admin-field--full {
  grid-column: 1 / -1;
}

.admin-product-form textarea,
.admin-product-form select {
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  width: 100%;
}

.admin-product-form textarea {
  resize: vertical;
  min-height: 90px;
}

.admin-image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.admin-media-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--color-grey-300);
}

.admin-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-media-thumb__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-video-preview video {
  max-width: 240px;
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 0.5rem;
}

.admin-form-actions {
  display: flex;
  gap: var(--space-sm);
}

.admin-form-actions .btn {
  flex: 1;
  justify-content: center;
}

.admin-checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
}

.admin-table-wrap {
  overflow-x: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-grey-200);
  white-space: nowrap;
}

.admin-table td {
  white-space: normal;
}

.admin-table th {
  color: var(--color-ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table__actions {
  display: flex;
  gap: 0.5rem;
}

.admin-table__actions .btn {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}

.admin-table__hint {
  color: var(--color-ink-soft);
  font-size: 0.82rem;
}

.admin-table select {
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink);
}

.admin-table__group-row td {
  background: var(--color-violet-deep-1);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85rem;
}

.admin-table__group-row .admin-table__hint {
  color: rgba(255, 255, 255, 0.75);
}

.admin-table__subgroup-row td {
  background: var(--color-grey-100);
  font-weight: 700;
  font-size: 0.82rem;
  padding-left: 1.5rem;
}