/*
Theme Name: Nostalgia Camisetas — Archivo
Description: Storefront child theme. Base de diseno (tokens, tipografia, componentes) para Nostalgia Camisetas, segun frontend-style.md.
Author: Julian
Template: storefront
Version: 0.4.4
Text Domain: nostalgia-archivo
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Color */
  --color-background: #0e0f0f;
  --color-background-soft: #151512;
  --color-surface: #1a1712;
  --color-surface-elevated: #211c14;

  --color-gold: #c89432;
  --color-gold-light: #dfa942;
  --color-gold-dark: #8b6428;

  --color-parchment: #e4d3aa;
  --color-paper: #f1e7cf;
  --color-paper-muted: #c8b58d;

  --color-leather: #704626;
  --color-leather-light: #95613a;

  --color-text-primary: #eee2c8;
  --color-text-secondary: #b9aa8c;
  --color-text-dark: #17130e;

  --color-border: rgba(200, 148, 50, 0.35);
  --color-border-strong: rgba(200, 148, 50, 0.7);

  --color-success: #667451;
  --color-error: #9b3d32;

  /* Tipografia */
  --font-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-interface: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-width: 1440px;
  --container-padding: clamp(20px, 4vw, 72px);

  /* Bordes y formas */
  --radius-small: 3px;
  --radius-medium: 6px;
  --radius-large: 10px;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* ==========================================================================
   3. LAYOUT: contenedor, zonas claras/oscuras y footer pegado abajo
   ========================================================================== */

html {
  height: 100%;
}

body {
  min-height: 100%;
}

/* Storefront le pone overflow-x:hidden a .site (este mismo elemento,
   #page) para su propio anti-scroll horizontal. overflow distinto de
   visible en un ancestro rompe el position:sticky del header (dejaba de
   pegarse, se iba con el scroll normal). "clip" tapa el desborde igual
   que "hidden" pero sin generar un contenedor de scroll, así que no
   interfiere con el sticky. Los dos ejes explícitos: si dejás uno en
   "visible" el navegador fuerza el otro a "auto" (contenedor de scroll
   de nuevo), por eso van los dos en clip. */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: clip;
}

#content {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

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

.section {
  padding-block: var(--space-8);
}

.section--dark {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.section--light {
  background: var(--color-paper);
  color: var(--color-text-dark);
}

/* ==========================================================================
   4. TEXTURA
   ========================================================================== */

.brand-texture {
  position: relative;
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.08)),
    url("assets/textures/grain-subtle.webp");
  background-size: auto, 420px;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  background:
    linear-gradient(rgba(14, 15, 15, 0.97), rgba(14, 15, 15, 0.97)),
    url("assets/textures/grain-subtle.webp");
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* !important: Storefront trae su propio ajuste nativo de "Color de
   enlace" de la cabecera (Personalizar -> Cabecera), con un selector mas
   especifico que este (tipo ".main-navigation ul li a, ..."), y quedaba
   en #333 sobre fondo oscuro, practicamente invisible. */
.site-header a {
  color: var(--color-parchment) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-header a:hover,
.site-header a[aria-current="page"] {
  color: var(--color-gold-light) !important;
}

/* El navegador pone un anillo de foco violeta por default al hacer click
   (no es CSS nuestro ni de un plugin, es el foco nativo del <a>). Se lo
   saca en click y se lo deja solo para navegacion por teclado. */
.site-header a:focus,
.nc-footer__col a:focus {
  outline: none;
}

.site-header a:focus-visible,
.nc-footer__col a:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 3px;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.site-branding {
  flex: 0 0 auto;
}

.site-header .site-branding .custom-logo {
  display: block;
  max-width: none;
  max-height: 56px;
  width: auto;
  height: auto;
}

.site-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__account svg {
  display: block;
  width: 24px;
  height: 24px;
}

.site-header-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.cart-contents svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* Los fragmentos del carrito quedan cacheados en sessionStorage del navegador
   (cart-fragments.js), asi que puede renderizarse markup viejo de Storefront:
   se oculta el contador de items por CSS, y el canastito Font Awesome se
   agranda para que sirva de icono mientras no llegue el markup nuevo (SVG). */
.site-header-cart .cart-contents .count {
  display: none;
}

.site-header-cart .cart-contents::after {
  float: none;
  font-size: 24px;
  line-height: 1;
}

.site-header-cart .cart-contents:has(svg)::after {
  content: none;
}

/* El dropdown del mini-carrito (`.widget_shopping_cart`) trae `width:100%`
   de Storefront, relativo a `.site-header-cart`. Como ese <ul> ahora vive en
   un flex y su unico hijo en flujo es el link de precio (~65px, el propio
   dropdown esta en position:absolute y no cuenta), terminaba angostisimo y
   el texto se partia letra por letra. Ancho fijo + anclado a la derecha. */
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
  width: 320px;
  left: auto;
  right: 0;
}

.site-header-cart .widget_shopping_cart {
  background: var(--color-paper);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  padding: var(--space-4);
}

.site-header-cart .woocommerce-mini-cart__empty-message {
  margin: 0;
  font-family: var(--font-interface);
}

.site-header-cart .cart_list.product_list_widget {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.site-header-cart .cart_list.product_list_widget li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(39, 29, 17, 0.14);
}

.site-header-cart .cart_list.product_list_widget li:last-child {
  border-bottom: none;
}

.site-header-cart .cart_list.product_list_widget img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-small);
  flex-shrink: 0;
}

.site-header-cart .cart_list.product_list_widget a {
  text-decoration: none;
  font-family: var(--font-interface);
}

.site-header-cart .cart_list.product_list_widget a.remove {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-error);
}

.site-header-cart .total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-interface);
  font-weight: 700;
}

.site-header-cart .woocommerce-mini-cart__buttons {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.site-header-cart .woocommerce-mini-cart__buttons a {
  flex: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-header-cart .woocommerce-mini-cart__buttons a.button {
  background: transparent;
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-strong);
}

.site-header-cart .woocommerce-mini-cart__buttons a.checkout {
  background: var(--color-gold);
  color: var(--color-text-dark);
  border: 1px solid var(--color-gold-light);
}

.site-search .woocommerce-product-search {
  display: flex;
  align-items: center;
}

.site-search input[type="search"] {
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small) 0 0 var(--radius-small);
  color: var(--color-text-primary);
  font-family: var(--font-interface);
}

.site-search input[type="search"]::placeholder {
  color: var(--color-text-secondary);
}

.site-search button[type="submit"] {
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--color-gold);
  color: var(--color-text-dark);
  border: 1px solid var(--color-gold);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  cursor: pointer;
}

/* Mismo breakpoint que Storefront (768px) para pisar sus reglas de header
   flotado (widths en %, floats y margin-bottom) que rompen el layout grid. */
@media (min-width: 768px) {
  .site-header .site-branding,
  .site-header .site-search,
  .site-header .site-header-cart,
  .woocommerce-active .site-header .site-branding,
  .woocommerce-active .site-header .main-navigation,
  .woocommerce-active .site-header .site-search,
  .woocommerce-active .site-header .site-header-cart {
    width: auto;
    float: none;
    clear: none;
    margin: 0;
  }

  .site-header .custom-logo-link {
    margin-bottom: 0;
  }

  /* logo (centrado en la franja izquierda) | nav (centro de la pantalla) |
     buscador (entre nav e iconos) | carrito + cuenta (borde derecho).
     max-width none: el header usa todo el ancho de la pantalla, no el
     contenedor de 1440px (si no, en monitores anchos los iconos quedan
     lejos del borde). */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-4);
    max-width: none;
    /* menos padding que el resto del sitio: los iconos van pegados al borde */
    padding-inline: var(--space-5);
  }

  .site-branding {
    justify-self: center;
  }

  #site-navigation.main-navigation {
    justify-self: center;
    width: auto;
    float: none;
    clear: none;
    margin: 0;
  }

  #site-navigation .menu-toggle {
    display: none;
  }

  #site-navigation ul.menu {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #site-navigation ul.menu > li {
    flex-shrink: 0;
  }

  #site-navigation ul.menu > li > a {
    display: inline-block;
    padding: var(--space-2) 0;
    font-family: var(--font-interface);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
  }

  #site-navigation ul.menu > li.current-menu-item > a {
    color: var(--color-gold-light);
  }

  /* Ocupa toda la columna derecha: el buscador se centra entre la nav y los
     iconos (margin-inline auto), y carrito + cuenta quedan al borde derecho. */
  .site-header__right {
    justify-self: stretch;
  }

  /* 3 clases: tiene que empatar en especificidad al reset de arriba
     (.woocommerce-active .site-header .site-search { margin: 0 }) para que
     gane por orden y el margin auto empuje los iconos al borde derecho. */
  .site-header .site-header__right .site-search {
    flex: 0 0 200px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   6. BOTONES
   ========================================================================== */

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;

  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-small);

  background: var(--color-gold);
  color: var(--color-text-dark);

  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  transition:
    background-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.button-primary:hover {
  background: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200, 148, 50, 0.2);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;

  background: transparent;
  color: var(--color-parchment);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);

  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  transition: border-color 160ms ease, color 160ms ease;
}

.button-secondary:hover {
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
}

/* ==========================================================================
   7. TARJETA DE PRODUCTO
   ========================================================================== */

.product-card {
  overflow: hidden;
  position: relative;
  background: var(--color-paper);
  color: var(--color-text-dark);
  border: 1px solid rgba(39, 29, 17, 0.16);
  border-radius: var(--radius-medium);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.product-card__image {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ded3bd;
}

.product-card__content {
  padding: 18px;
}

/* Ficha de producto individual sin stock. */
.product-encargo {
  margin-top: var(--space-4);
}

.product-encargo__note {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.product-encargo__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.product-encargo__button svg {
  width: 18px;
  height: 18px;
}

.product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.product-card__title {
  margin: 0 0 4px;
  font-family: var(--font-interface);
  font-size: 14px;
  color: var(--color-text-dark);
}

.product-card__price {
  margin: 0;
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-dark);
}

/* ==========================================================================
   8. ETIQUETAS DE PRODUCTO
   ========================================================================== */

.product-badge {
  display: inline-flex;
  padding: 6px 9px;
  background: var(--color-gold);
  color: var(--color-text-dark);
  border-radius: 2px;

  font-family: var(--font-interface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-badge--encargo {
  background: #d6d3c9;
  color: var(--color-text-dark);
}

/* ==========================================================================
   9. ENCABEZADOS DE SECCION
   ========================================================================== */

.section-heading__eyebrow {
  display: inline-block;
  color: var(--color-gold);
  font-family: var(--font-interface);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading h2,
.section-heading h1 {
  max-width: 800px;
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
}

/* !important: Storefront trae su propio ajuste nativo de "Color del texto"
   (Personalizar -> Cabecera) para h1-h6 en general, mas fuerte que la
   herencia normal, y dejaba los titulos siempre oscuros sin importar la
   zona -- invisibles sobre fondo oscuro. */
.section--dark .section-heading h2,
.section--dark .section-heading h1 {
  color: var(--color-text-primary) !important;
}

.section--light .section-heading h2,
.section--light .section-heading h1 {
  color: var(--color-text-dark) !important;
}

/* ==========================================================================
   10. FILTRO POR DECADAS
   ========================================================================== */

.decade-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.decade-filter button {
  padding: 10px 16px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-interface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decade-filter button:hover,
.decade-filter button[aria-pressed="true"] {
  color: var(--color-text-dark);
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* ==========================================================================
   11. ANIMACIONES
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 500ms ease,
      transform 500ms ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-background-soft);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  padding: 0;
  margin-top: var(--space-8);
}

.nc-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-7);
}

.nc-footer__logo {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.nc-footer__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-secondary);
}

.nc-footer__heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-parchment);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.nc-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-footer__col li {
  margin-bottom: var(--space-2);
}

/* !important: mismo motivo que en .site-header a, con el ajuste nativo
   de "Color de enlace" del Pie de pagina de Storefront. */
.nc-footer__col a {
  color: var(--color-parchment) !important;
  text-decoration: none;
  font-family: var(--font-interface);
  font-size: 16px;
  letter-spacing: 0.03em;
}

.nc-footer__col a:hover {
  color: var(--color-gold-light) !important;
}

.nc-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
}

.nc-footer__bottom p {
  margin: 0;
  font-family: var(--font-interface);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .nc-footer {
    grid-template-columns: 1fr 1fr;
  }

  .nc-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .nc-footer {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. FORMULARIOS
   ========================================================================== */

/* Los inputs de WooCommerce (cupon del carrito, checkout, mi cuenta) no
   traen clase propia y quedaban con el blanco de fabrica, un cuadro claro
   flotando sobre las secciones oscuras del tema. El paquete de WooCommerce
   Blocks los envuelve en su propio wrapper con clase
   (.wc-block-components-text-input input[type=text]), mas especifico que
   un simple `input[type="text"]`, asi que va con !important: es override
   de CSS de un plugin de terceros, no de nuestro propio codigo. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  min-height: 44px;
  padding: 0 var(--space-3);
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-small);
  color: var(--color-text-primary) !important;
  font-family: var(--font-interface);
  font-size: 16px;
}

textarea {
  min-height: 96px;
  padding: var(--space-3);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-gold-light) !important;
}

/* ==========================================================================
   14. HOME — HERO
   ========================================================================== */

.nc-hero {
  padding-block: var(--space-8);
}

.nc-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

.nc-hero__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.nc-hero__title {
  font-family: Lato, sans-serif;
  margin: 0 0 var(--space-4);
  font-size: clamp(40px, 6vw, 64px);
  color: var(--color-text-primary);
}

.nc-hero__desc {
  max-width: 42ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
}

.nc-hero__price {
  margin: 0 0 var(--space-5);
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
}

.nc-hero__price span {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.nc-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ponytail: caja placeholder hasta subir la foto real a
   assets/img/hero-camiseta.jpg (el background-image de abajo la toma sola,
   sin tocar CSS ni PHP). Borrar el border/label de abajo en ese momento. */
.nc-hero__art {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 860px) {
  .nc-hero__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   15. HOME — RECIEN INGRESADAS
   ========================================================================== */

/* Textura de grano generada por SVG (feTurbulence), sin archivo de imagen:
   distingue esta seccion de "Todo comienza aca" (mismo fondo claro) sin
   depender de subir un asset de textura. */
.nc-newarrivals {
  padding-block: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.27 0 0 0 0 0.15 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

/* WooCommerce trae su propia grilla vieja (float + width en %) para
   ul.products li.product, mas fuerte que el stretch por default de
   nuestra grilla CSS: la tarjeta terminaba encogida al ancho de su
   contenido en vez de ocupar la columna entera. Se anula aca, en el
   selector compartido, para que valga tanto en esta seccion del home
   como en el archivo de tienda/categoria (mismas clases .product-grid
   y .product en los dos lugares). */
.product-grid > li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* WooCommerce le pone un clearfix (::before/::after con content:"") a
   ul.products para su grilla vieja de floats. Al ser display:grid, esos
   pseudo-elementos pasan a contarse como items reales de la grilla: ocupan
   la primera celda (y una de mas al final) y corren todos los productos
   un lugar, dejando el primer casillero vacio. */
.product-grid::before,
.product-grid::after {
  content: none !important;
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ==========================================================================
   16. HOME — CAMINO DE IMPORTACION
   ========================================================================== */

.nc-steps {
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-border-strong);
}

.nc-steps__inner {
  display: flex;
  justify-content: center;
}

.nc-steps__art {
  width: 100%;
  max-width: 648px;
  height: auto;
  border-radius: var(--radius-medium);
}

/* Rompe el max-width de .col-full (Storefront), heredado del wrapper que
   abre header.php y cierra footer.php: sin esto, las zonas claras/oscuras
   de fondo completo (frontend-style.md) quedan angostas con el negro del
   body asomando a los costados en vez de llegar de punta a punta. */
.section--dark,
.section--light {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   17. HOME — QUE ESTAS ESPERANDO
   ========================================================================== */

.nc-choice {
  padding-block: var(--space-8);
}

.nc-choice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.nc-choice__card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  text-align: center;
}

.nc-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-gold);
}

.nc-choice__icon svg {
  width: 26px;
  height: 26px;
}

.nc-choice__title {
  margin: 0 0 var(--space-2);
  font-size: 22px;
  color: var(--color-text-primary) !important;
}

.nc-choice__desc {
  margin: 0 0 var(--space-5);
  max-width: 34ch;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

@media (max-width: 700px) {
  .nc-choice__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   18. HOME — REVIEWS
   ========================================================================== */

.nc-reviews {
  padding-block: var(--space-8);
}

.nc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.nc-review {
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid rgba(39, 29, 17, 0.16);
  border-radius: var(--radius-medium);
}

.nc-review__stars {
  margin: 0 0 var(--space-3);
  color: var(--color-gold);
  letter-spacing: 0.1em;
}

.nc-review__quote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-text-dark);
}

.nc-review__author {
  margin: 0;
  font-family: var(--font-interface);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-leather);
}

@media (max-width: 900px) {
  .nc-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .nc-reviews__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   19. TIENDA — FILTROS + GRILLA
   ========================================================================== */

.nc-shop,
.nc-encargo {
  padding-block: var(--space-8);
}

.nc-shop__intro {
  max-width: 680px;
  margin: 0 0 var(--space-6);
  color: var(--color-leather);
}

.nc-shop__intro a {
  color: var(--color-text-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

/* Storefront le pone bastante aire de mas al wrapper del breadcrumb
   (pensado como zona de encabezado propia); se achica para que no quede
   flotando separado del titulo de la seccion. Mismo padding-block de
   arriba: Tienda y Pedidos por encargo comparten este layout de
   filtros + grilla y tienen que verse igual de espaciados. */
.nc-shop .storefront-breadcrumb,
.nc-encargo .storefront-breadcrumb {
  padding: var(--space-3) 0;
  margin: 0;
}

.nc-shop .woocommerce-breadcrumb {
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
  font-family: var(--font-interface);
  font-size: 13px;
}

.nc-shop .woocommerce-breadcrumb a {
  color: var(--color-text-secondary);
}

.nc-shop__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.nc-shop__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.nc-shop__filter-group .section-heading__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.nc-shop__filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nc-shop__filter-list a {
  display: block;
  padding: 10px 14px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-family: var(--font-interface);
  font-size: 14px;
  text-decoration: none;
}

.nc-shop__filter-list a:hover,
.nc-shop__filter-list a.is-active {
  color: var(--color-text-dark);
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* Ambas páginas de catálogo usan el fondo claro. El tono pensado para fondo
   oscuro (--color-text-secondary) casi no se lee sobre el papel claro. */
.section--light .nc-shop__filter-list a {
  color: var(--color-leather);
  border-color: rgba(39, 29, 17, 0.16);
}

.section--light .nc-shop__filter-list a:hover,
.section--light .nc-shop__filter-list a.is-active {
  color: var(--color-text-dark);
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.section--light .nc-shop .woocommerce-breadcrumb,
.section--light .nc-shop .woocommerce-breadcrumb a,
.section--light .nc-shop__products .woocommerce-result-count {
  color: var(--color-leather);
}

.nc-shop__sort select {
  width: 100%;
}

.nc-shop__products .woocommerce-result-count {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-family: var(--font-interface);
  font-size: 14px;
}

@media (max-width: 900px) {
  .nc-shop__layout {
    grid-template-columns: 1fr;
  }

  .nc-shop__filters {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nc-shop__filter-group {
    flex: 1 1 220px;
  }
}

/* ==========================================================================
   20. FICHA DE PRODUCTO (fondo claro, igual que Pedidos por encargo)
   ========================================================================== */

body.single-product {
  background: var(--color-paper);
  color: var(--color-text-dark);
}

body.single-product .woocommerce-breadcrumb {
  color: var(--color-text-secondary);
  font-family: var(--font-interface);
  font-size: 13px;
}

body.single-product .woocommerce-breadcrumb a {
  color: var(--color-text-secondary);
}

body.single-product .summary .price {
  color: var(--color-text-dark);
}

body.single-product .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-small);
  background: var(--color-gold);
  color: var(--color-text-dark);
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.single-product .single_add_to_cart_button:hover {
  background: var(--color-gold-light);
}

.nvc-product-contact {
  margin-top: var(--space-5);
}

.nvc-product-contact__note {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.nvc-whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.nvc-whatsapp-button svg {
  width: 20px;
  height: 20px;
}