/* NightBudz — boutique : filtres, grille, cartes produit, add-to-cart WooCommerce. */

/* Boutique / catégories */
.nb-shop-archive { padding-top: clamp(24px,4vw,44px); }
.nb-shop-archive-title { margin: 0 0 10px; }
.nb-shop-archive-desc { color: var(--text-secondary); max-width: 640px; margin-bottom: 20px; line-height: 1.6; }
.nb-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 8px 0 26px; }
.nb-shop-toolbar .woocommerce-result-count { color: var(--text-tertiary); font: var(--text-body-sm); margin: 0; }
.nb-shop-toolbar .woocommerce-ordering { margin: 0; }
.nb-shop-toolbar .woocommerce-ordering select { background: var(--nb-obsidian-4); color: var(--text-primary); border: 1px solid rgba(138,43,226,0.5); padding: 9px 30px 9px 12px; }

/* Sections curées de l'accueil */
.nb-home-section { padding-top: clamp(40px,6vw,64px); }
.nb-home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.nb-home-section-head h2 { margin: 0; }
.nb-home-section-link { font: var(--text-label); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--nb-green); white-space: nowrap; padding-bottom: 6px; }
.nb-home-section-link:hover { text-shadow: var(--glow-green-sm); }
.nb-home-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border: 1px solid rgba(57,255,20,0.35); padding: 26px 30px; margin-top: clamp(40px,6vw,60px); }
.nb-home-cta-title { font: var(--text-h2); font-family: var(--font-heading); color: var(--text-primary); }

.nb-shop-home { padding-top: clamp(40px,6vw,64px); }
.nb-shop-home-title { margin: 0 0 10px; }
.nb-shop-home-sub { margin: 0 0 24px; font: var(--text-body-lg); color: var(--text-secondary); max-width: 560px; }

/* Filtres */
.nb-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }

/* Menu de filtres boutique « maison » (panneau glass avec groupes) */
.nb-filtermenu { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin: 4px 0 26px; padding: 16px 20px;
  background: linear-gradient(160deg, rgba(26,26,34,0.5), rgba(8,8,12,0.42)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(138,43,226,0.35); box-shadow: var(--glow-purple-sm);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.nb-filtergroup { display: flex; align-items: center; gap: 10px; }
.nb-filtergroup--promo { margin-left: auto; }
.nb-filtergroup-label { display: inline-flex; align-items: center; gap: 6px; font: var(--text-label); font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); white-space: nowrap; }
.nb-filtergroup-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font: var(--text-label); font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); text-decoration: none;
  border: 1px solid rgba(138,43,226,0.45); background: var(--nb-obsidian-4);
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition: all var(--duration-base) var(--ease-out); }
.nb-filter-chip:hover { border-color: var(--nb-purple); color: var(--text-primary); box-shadow: var(--glow-purple-sm); }
.nb-filter-chip.is-active { border-color: var(--nb-green); color: var(--nb-green); box-shadow: var(--glow-green-sm); text-shadow: var(--text-glow-green); }
.nb-filter-chip--promo { border-color: rgba(255,0,127,0.5); color: var(--nb-magenta); }
.nb-filter-chip--promo.is-active { border-color: var(--nb-magenta); color: var(--nb-magenta); box-shadow: var(--glow-magenta-sm); text-shadow: var(--text-glow-magenta); background: rgba(255,0,127,0.08); }
.nb-filter-reset { font: var(--text-body-sm); color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.nb-filter-reset:hover { color: var(--nb-green); }

/* Tri restylé pour matcher le menu */
.nb-shop-toolbar .woocommerce-ordering select,
.woocommerce-ordering select { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 12px;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }

@media (max-width: 860px) {
  .nb-filtermenu { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .nb-filtergroup { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nb-filtergroup--promo { margin-left: 0; }
  .nb-filtergroup-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .nb-filtergroup-chips::-webkit-scrollbar { display: none; }
  .nb-filter-chip { flex: 0 0 auto; }
}

/* Grille responsive */
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 24px; }
.nb-grid.woocommerce-loop { list-style: none; margin: 0; padding: 0; }

/* ============ CARTE PRODUIT ============ */
.nb-card { display: flex; flex-direction: column; border: 1px solid rgba(138,43,226,0.5); box-shadow: var(--glow-purple-sm);
  transition: all var(--duration-base) var(--ease-out); overflow: hidden; }
.nb-card:hover { border-color: var(--nb-magenta); box-shadow: var(--glow-neon-mix-lg); transform: translateY(-4px); }
/* Pas d'effet vert sur les textes de la carte au survol. */
.nb-card a:hover, .nb-card a:hover * { color: inherit !important; text-shadow: none !important; }

.nb-card-media { position: relative; display: block; height: 186px; overflow: hidden; }
.nb-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.2) contrast(1.05) brightness(0.82);
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out); }
.nb-card:hover .nb-card-media img { transform: scale(1.07); filter: saturate(1.25) contrast(1.1) brightness(0.95); }
.nb-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(5,5,7,0.92)); }
/* Badge produit (best-seller / promo / perso) — pastille pleine, lisible et animée. */
.nb-card-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 7px 13px; border-radius: 999px; overflow: hidden;
  font: 900 11.5px/1 var(--font-heading); letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55); }
/* Reflet qui balaie la pastille (dynamisme). */
.nb-card-tag::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: nb-tag-shine 3.2s ease-in-out infinite; }
@keyframes nb-tag-shine { 0%, 60% { left: -70%; } 100% { left: 140%; } }

.nb-card-tag.nb-badge--success { color: #06180a; background: linear-gradient(135deg, #9dff7e, #23d40a);
  animation: nb-tag-glow-green 2.6s ease-in-out infinite; }
.nb-card-tag.nb-badge--danger  { color: #fff; text-shadow: 0 1px 2px rgba(90,0,10,0.7); background: linear-gradient(135deg, #ff2e52, #b70d2c);
  animation: nb-tag-glow-red 1.7s ease-in-out infinite; }
.nb-card-tag.nb-badge--purple  { color: #fff; text-shadow: 0 1px 2px rgba(30,0,60,0.6); background: linear-gradient(135deg, #b877ff, #7c3aed); box-shadow: 0 4px 16px rgba(138,43,226,0.45); }
.nb-card-tag.nb-badge--magenta { color: #fff; text-shadow: 0 1px 2px rgba(70,0,40,0.6); background: linear-gradient(135deg, #ff5db4, #e60073); box-shadow: 0 4px 16px rgba(255,0,127,0.45); }

@keyframes nb-tag-glow-green { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 0 rgba(57,255,20,0.5); } 50% { box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 16px 2px rgba(57,255,20,0.65); } }
@keyframes nb-tag-glow-red { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 0 rgba(255,51,88,0.55); transform: scale(1); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 18px 3px rgba(255,51,88,0.75); transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .nb-card-tag, .nb-card-tag::after { animation: none !important; }
}

.nb-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nb-card-head { text-decoration: none; display: block; }
.nb-card-head .nb-eyebrow { margin-bottom: 5px; }
.nb-card-name { font: var(--text-h3); font-family: var(--font-heading); color: var(--text-primary); margin-bottom: 4px; }
.nb-card-specs { font: var(--text-body-sm); color: var(--text-secondary); }

.nb-card-price { display: flex; align-items: baseline; gap: 10px; }
.nb-card-price .price,
.nb-card-price .amount { font: 800 24px/1 var(--font-mono); color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-card-price del { opacity: 1; }
.nb-card-price del .amount { font: 600 15px/1 var(--font-mono); color: var(--text-tertiary); text-shadow: none; }
.nb-card-price ins { text-decoration: none; }

.nb-card-per { font: var(--text-caption); color: var(--text-tertiary); margin-left: auto; }
.nb-card-ppg { font: var(--text-caption); color: var(--text-tertiary); letter-spacing: .02em; margin-top: -4px; }
/* Prix « à partir de X€/g » en avant sur la carte (aucun grammage pré-sélectionné). */
.nb-card-ppg-main { font: 800 20px/1 var(--font-mono); color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-card-controls { display: flex; gap: 10px; margin-top: auto; }
.nb-card-controls .nb-select-wrap { flex: 1; }
.nb-card-add { margin-top: 2px; }
.nb-card-add.is-loading { opacity: 0.7; pointer-events: none; }
.nb-card-cta { margin-top: auto; }

/* Bouton add-to-cart natif WooCommerce restylé en CTA */
.nb-card-cta .button,
.nb-card-cta .added_to_cart {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 13px; cursor: pointer; text-decoration: none;
  font: var(--text-label-lg); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background: var(--nb-lime); color: var(--text-on-accent); border: 1px solid var(--nb-lime);
  box-shadow: var(--glow-green-sm); clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition: all var(--duration-base) var(--ease-out);
}
.nb-card-cta .button:hover { background: var(--nb-green); box-shadow: var(--glow-green-md); }
.nb-card-cta .button.loading { opacity: 0.7; }
.nb-card-cta .added_to_cart { margin-top: 8px; background: transparent; color: var(--nb-green); border-color: var(--nb-green); box-shadow: none; }


/* Titre de section boutique WooCommerce */
.woocommerce-products-header__title { font: var(--text-display-m); font-family: var(--font-display); color: var(--text-primary); text-shadow: var(--text-glow-white); }
.woocommerce-result-count { color: var(--text-tertiary); font: var(--text-body-sm); }
.woocommerce-ordering select { background: var(--nb-obsidian-4); color: var(--text-primary); border: 1px solid rgba(138,43,226,0.5); padding: 8px 12px; }

/* Pagination */
.nb-main .woocommerce-pagination ul, .nb-post-pagination .nav-links { display: flex; gap: 8px; list-style: none; padding: 0; justify-content: center; margin-top: 30px; }
.nb-main .woocommerce-pagination a, .nb-main .woocommerce-pagination span { display: inline-flex; padding: 8px 14px; border: 1px solid var(--border-default); color: var(--text-secondary); }
.nb-main .woocommerce-pagination .current { border-color: var(--nb-green); color: var(--nb-green); box-shadow: var(--glow-green-sm); }

@media (max-width: 640px) {
  .nb-grid { grid-template-columns: 1fr; }

  /* Sections de l'accueil : carousel horizontal (swipe latéral) au lieu d'une colonne. */
  .nb-home-section .nb-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; gap: 14px; scroll-snap-type: x mandatory; padding-bottom: 8px;
    scrollbar-width: none;
    /* déborde légèrement pour un vrai effet carousel */
    margin-left: calc(var(--container-pad) * -1); margin-right: calc(var(--container-pad) * -1);
    padding-left: var(--container-pad); padding-right: var(--container-pad);
  }
  .nb-home-section .nb-grid::-webkit-scrollbar { display: none; }
  .nb-home-section .nb-grid > .nb-card { flex: 0 0 80%; scroll-snap-align: start; }

  /* En-tête de section + bandeau CTA centrés sur mobile. */
  .nb-home-section-head { flex-direction: column; align-items: center; text-align: center; }
  .nb-home-cta { flex-direction: column; text-align: center; align-items: center; }
}
