/* ==========================================================================
   NovaShop — Tokens de diseño
   Equivalencias de la paleta Tailwind usada en el diseño original
   (stone + emerald) para no depender de Tailwind en WordPress.
   ========================================================================== */

:root {
  /* Neutros (stone) */
  --ns-stone-50:  #fafaf9;
  --ns-stone-100: #f5f5f4;
  --ns-stone-200: #e7e5e4;
  --ns-stone-300: #d6d3d1;
  --ns-stone-400: #a8a29e;
  --ns-stone-500: #78716c;
  --ns-stone-600: #57534e;
  --ns-stone-700: #44403c;
  --ns-stone-800: #292524;
  --ns-stone-900: #1c1917;

  /* Acento (emerald) */
  --ns-emerald-50:  #ecfdf5;
  --ns-emerald-100: #d1fae5;
  --ns-emerald-500: #10b981;
  --ns-emerald-600: #059669;
  --ns-emerald-700: #047857;

  /* Apoyo */
  --ns-amber-400: #fbbf24;
  --ns-red-500:   #ef4444;
  --ns-red-600:   #dc2626;

  /* Bordes translúcidos del diseño original (stone-200/60) */
  --ns-border:       rgba(231, 229, 228, 0.6);
  --ns-border-solid: var(--ns-stone-200);

  /* Tipografía */
  --ns-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radios */
  --ns-radius-sm:   0.5rem;
  --ns-radius-md:   0.75rem;
  --ns-radius-lg:   1rem;
  --ns-radius-xl:   1.5rem;
  --ns-radius-pill: 9999px;

  /* Sombras */
  --ns-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ns-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ns-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ns-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --ns-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Layout */
  --ns-container: 1280px;
  --ns-gutter: 1rem;

  /* Transiciones */
  --ns-t-fast: 200ms ease-out;
  --ns-t-base: 300ms ease;
}

@media (min-width: 640px) {
  :root { --ns-gutter: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --ns-gutter: 2rem; }
}

/* Puente con las variables de Blocksy para que header, footer, botones y
   enlaces del tema padre usen la misma identidad sin tocar el Customizer. */
:root {
  --theme-font-family: var(--ns-font);
  --theme-palette-color-1: var(--ns-emerald-600); /* acento */
  --theme-palette-color-2: var(--ns-emerald-700); /* acento hover */
  --theme-palette-color-3: var(--ns-stone-900);   /* títulos */
  --theme-palette-color-4: var(--ns-stone-600);   /* texto */
  --theme-palette-color-5: var(--ns-border);      /* bordes */
  --theme-palette-color-6: var(--ns-stone-50);
  --theme-palette-color-7: var(--ns-stone-100);
  --theme-palette-color-8: #ffffff;
  --theme-button-border-radius: var(--ns-radius-pill);
  --theme-content-spacing: 1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body.ns-theme {
  font-family: var(--ns-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ns-stone-600);
}

.ns-theme h1, .ns-theme h2, .ns-theme h3, .ns-theme h4 {
  color: var(--ns-stone-900);
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Utilidades compartidas por todas las plantillas
   -------------------------------------------------------------------------- */

.ns-container {
  max-width: var(--ns-container);
  margin-inline: auto;
  padding-inline: var(--ns-gutter);
  width: 100%;
}

.ns-container--narrow { max-width: 64rem; }

/* Eyebrow: la etiqueta verde en mayúsculas sobre los títulos de sección */
.ns-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ns-emerald-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ns-section-head { text-align: center; margin-bottom: 3rem; }

.ns-section-head h1,
.ns-section-head h2 {
  font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0.5rem 0 0;
}

.ns-section-head p {
  color: var(--ns-stone-500);
  margin: 0.75rem auto 0;
  max-width: 36rem;
}

/* Botones ------------------------------------------------------------------ */

.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--ns-radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ns-t-base), color var(--ns-t-base),
              border-color var(--ns-t-base), transform var(--ns-t-base);
}

.ns-btn:focus-visible {
  outline: 2px solid var(--ns-emerald-600);
  outline-offset: 2px;
}

.ns-btn--dark {
  background: var(--ns-stone-900);
  color: #fff;
  box-shadow: var(--ns-shadow-lg);
}
.ns-btn--dark:hover { background: var(--ns-emerald-600); color: #fff; transform: scale(1.02); }

.ns-btn--accent { background: var(--ns-emerald-600); color: #fff; }
.ns-btn--accent:hover { background: var(--ns-emerald-700); color: #fff; }

.ns-btn--outline {
  background: transparent;
  color: var(--ns-stone-800);
  border-color: var(--ns-stone-300);
}
.ns-btn--outline:hover {
  border-color: var(--ns-stone-900);
  background: var(--ns-stone-900);
  color: #fff;
}

.ns-btn--block { width: 100%; }
.ns-btn[disabled] { opacity: 0.6; pointer-events: none; }

/* Estados del botón "Añadir al carrito": etiqueta normal ⇄ confirmación */
.ns-btn__label { display: inline-flex; align-items: center; gap: 0.5rem; }
.ns-btn__done  { display: none; align-items: center; gap: 0.5rem; }
.ns-btn.is-added .ns-btn__label { display: none; }
.ns-btn.is-added .ns-btn__done  { display: inline-flex; }
.ns-btn.is-loading { opacity: 0.7; pointer-events: none; }

/* Iconos ------------------------------------------------------------------- */

.ns-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ns-icon--sm { width: 1rem; height: 1rem; }
.ns-icon--xs { width: 0.875rem; height: 0.875rem; }
.ns-icon--lg { width: 1.5rem; height: 1.5rem; }

/* Estrellas de valoración -------------------------------------------------- */

.ns-stars { display: inline-flex; align-items: center; gap: 0.125rem; }
.ns-stars .ns-icon { fill: var(--ns-amber-400); stroke: var(--ns-amber-400); width: 1rem; height: 1rem; }
.ns-stars .ns-icon.is-empty { fill: none; stroke: var(--ns-stone-300); }
.ns-rating-text { font-size: 0.875rem; color: var(--ns-stone-600); }
.ns-rating-count { font-size: 0.875rem; color: var(--ns-stone-400); }

/* Píldora de cantidad ------------------------------------------------------ */

.ns-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ns-stone-300);
  border-radius: var(--ns-radius-pill);
}
.ns-qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: none;
  border: 0;
  color: var(--ns-stone-600);
  cursor: pointer;
  border-radius: var(--ns-radius-pill);
  transition: background-color var(--ns-t-fast);
}
.ns-qty button:hover { background: var(--ns-stone-100); }
.ns-qty input {
  width: 3rem;
  text-align: center;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--ns-stone-900);
  font-family: inherit;
  -moz-appearance: textfield;
  padding: 0;
}
.ns-qty input::-webkit-outer-spin-button,
.ns-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Etiquetas sobre imagen --------------------------------------------------- */

.ns-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--ns-emerald-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ns-radius-pill);
  z-index: 2;
}
.ns-badge--discount {
  left: auto;
  right: 0.75rem;
  background: var(--ns-stone-900);
  letter-spacing: 0;
}

/* Precios ------------------------------------------------------------------ */

.ns-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ns-price ins { text-decoration: none; }
.ns-price del,
.ns-price__compare {
  color: var(--ns-stone-400);
  text-decoration: line-through;
  font-weight: 400;
}
.ns-price__now { font-weight: 700; color: var(--ns-stone-900); }

/* Animaciones -------------------------------------------------------------- */

@keyframes ns-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes ns-scale-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes ns-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.ns-float { animation: ns-float 3s ease-in-out infinite; }
.ns-pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ns-emerald-500);
  animation: ns-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ns-float, .ns-pulse-dot { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbar ---------------------------------------------------------------- */

.ns-theme ::-webkit-scrollbar { width: 8px; height: 8px; }
.ns-theme ::-webkit-scrollbar-track { background: transparent; }
.ns-theme ::-webkit-scrollbar-thumb { background: var(--ns-stone-300); border-radius: 4px; }
.ns-theme ::-webkit-scrollbar-thumb:hover { background: var(--ns-stone-400); }