/* ============================================
   33 Norte — Brand Design Tokens
   ============================================ */

:root {
  /* Paleta de color */
  --norte-brown:     #3A2A1F;
  --norte-camel:     #6B4A2D;
  --norte-sand:      #9B7A5B;
  --norte-gray:      #6B6B6B;
  --norte-gray-light:#A2A2A2;
  --norte-cream:     #DDDBD7;
  --norte-off-white: #FAF8F5;
  --norte-black:     #212121;

  /* Tipografía */
  --norte-font-heading: 'Coinage Humphrey', 'Georgia', serif;
  --norte-font-body:    'Lora', 'Georgia', serif;
  --norte-font-editorial: 'Cormorant Garamond', 'Georgia', serif;
  --norte-font-ui:      'Lato', 'Arial', sans-serif;

  /* Escala tipográfica */
  --norte-text-xs:   0.75rem;   /* 12px */
  --norte-text-sm:   0.875rem;  /* 14px */
  --norte-text-base: 1rem;      /* 16px */
  --norte-text-lg:   1.125rem;  /* 18px */
  --norte-text-xl:   1.5rem;    /* 24px */
  --norte-text-2xl:  2rem;      /* 32px */
  --norte-text-3xl:  3rem;      /* 48px */

  /* Espaciado */
  --norte-space-xs:  0.25rem;   /* 4px */
  --norte-space-sm:  0.5rem;    /* 8px */
  --norte-space-md:  1rem;      /* 16px */
  --norte-space-lg:  2rem;      /* 32px */
  --norte-space-xl:  4rem;      /* 64px */
  --norte-space-2xl: 6rem;      /* 96px */

  /* Bordes — sobrios, sin exceso de redondeo */
  --norte-radius-sm:   2px;
  --norte-radius-base: 4px;
  --norte-radius-lg:   8px;

  /* Transiciones */
  --norte-transition: 200ms ease;
}

/* ============================================
   Tipografía global
   ============================================ */

body {
  font-family: var(--norte-font-body);
  color: var(--norte-black);
  background-color: var(--norte-off-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--norte-font-heading);
  color: var(--norte-black);
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* ============================================
   WooCommerce — Botones
   ============================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit {
  background-color: var(--norte-black) !important;
  color: var(--norte-off-white) !important;
  border-radius: var(--norte-radius-base) !important;
  font-family: var(--norte-font-ui) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: var(--norte-text-sm) !important;
  transition: background-color var(--norte-transition) !important;
  border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--norte-gray) !important;
}

/* ============================================
   WooCommerce — Tarjetas de producto
   ============================================ */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--norte-font-body);
  color: var(--norte-black);
  font-size: var(--norte-text-lg);
}

.woocommerce ul.products li.product .price {
  font-family: var(--norte-font-ui);
  color: var(--norte-gray);
  font-weight: 300;
}

/* Ficha: «También te recomendamos» y «Productos relacionados».
   Usaban la rejilla de la tienda (3 / 2 / 1 columnas, más abajo) y, con uno o
   dos productos, las tarjetas quedaban enormes. Aquí 4 / 3 / 2 columnas
   (cortes de Blocksy: 1000 px y 690 px); !important porque la rejilla general
   también lo lleva. */
.single-product :is(.related, .up-sells) ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.single-product .up-sells + .related {
  margin-top: 3rem;
}
@media (max-width: 999.98px) {
  .single-product :is(.related, .up-sells) ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 689.98px) {
  .single-product :is(.related, .up-sells) ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem 1rem !important;
  }
  .single-product :is(.related, .up-sells) .woocommerce-loop-product__title {
    font-size: var(--norte-text-base);
  }
  .single-product .up-sells + .related {
    margin-top: 2rem;
  }
}

/* ============================================
   WooCommerce — Inputs y formularios
   ============================================ */

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {
  border: 1px solid var(--norte-cream) !important;
  border-radius: var(--norte-radius-sm) !important;
  background: var(--norte-off-white) !important;
  font-family: var(--norte-font-body) !important;
  color: var(--norte-black) !important;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus {
  border-color: var(--norte-gray-light) !important;
  outline: none !important;
}

/* ============================================
   WooCommerce — Badges
   ============================================ */

.woocommerce span.onsale {
  background-color: var(--norte-gray) !important;
  border-radius: var(--norte-radius-sm) !important;
  font-family: var(--norte-font-ui) !important;
  font-weight: 300 !important;
  font-size: var(--norte-text-xs) !important;
  letter-spacing: 0.08em !important;
}

/* ============================================
   Tipografía — Coinage en títulos y navegación
   (el CSS de Blocksy carga después: forzar)
   ============================================ */

h1, h2, h3, h4, h5, h6,
.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-post-title {
  font-family: var(--norte-font-heading) !important;
  font-weight: normal !important;
}

.ct-header .menu > li > a {
  font-family: var(--norte-font-heading) !important;
  letter-spacing: 0.06em;
}

/* ============================================
   Color de texto — casi negro legible en todo
   ============================================ */

body,
.entry-content,
.woocommerce-product-details__short-description,
.woocommerce div.product div.summary,
.woocommerce-Tabs-panel,
.woocommerce-page p,
.woocommerce-page li {
  color: var(--norte-black);
}

/* ============================================
   Precios — tonalidad propia (cámel sobre casi negro)
   ============================================ */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-variation-price .price,
.woocommerce-Price-amount {
  color: var(--norte-gray) !important;
  font-family: var(--norte-font-ui) !important;
  font-weight: 400 !important;
}

/* Ofertas: el tachado en arena claro, el vigente en cámel */
.woocommerce del .woocommerce-Price-amount {
  color: var(--norte-gray-light) !important;
  font-weight: 300 !important;
}
.woocommerce ins { text-decoration: none; }
.woocommerce ins .woocommerce-Price-amount { color: var(--norte-gray) !important; }

/* ============================================
   Paleta de Blocksy — forzar a colores de marca
   (Blocksy pinta títulos en crema y texto en arena
   desde sus variables; las redefinimos con !important)
   ============================================ */

:root {
  --theme-text-color: var(--norte-black) !important;
  --theme-headings-color: var(--norte-black) !important;
  --theme-link-initial-color: var(--norte-black) !important;
  --theme-link-hover-color: var(--norte-gray) !important;
}

h1, h2, h3, h4, h5, h6,
.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--norte-black) !important;
}

/* Secciones oscuras: sus títulos siguen en claro */
.norte-hero__title,
.norte-page-hero--image .norte-page-hero__title {
  color: var(--norte-off-white) !important;
}

.ct-header .menu > li > a { color: var(--norte-black) !important; }
.ct-header .menu > li > a:hover { color: var(--norte-gray) !important; }

/* Franja de título de archivo/página de Blocksy (hero-section):
   heredaba el casi negro de la paleta como fondo — a crema de marca */
.hero-section {
  background: #F3F0EB !important;
  border-bottom: 1px solid var(--norte-cream);
}
.hero-section .page-title,
.hero-section .entry-header { color: var(--norte-black) !important; }

/* ============================================
   Caza de marrones (auditoría 2026-09-12):
   textos de lectura a casi negro en Blocksy/Woo
   ============================================ */

/* Desplegable del menú: todos los niveles legibles sobre fondo claro */
.ct-header .menu .sub-menu {
  background: var(--norte-off-white) !important;
  border: 1px solid var(--norte-cream);
}
.ct-header .menu .sub-menu a {
  color: var(--norte-black) !important;
  font-family: var(--norte-font-heading) !important;
}
.ct-header .menu .sub-menu a:hover { color: var(--norte-gray) !important; }

/* Migas de pan */
.ct-breadcrumbs, .ct-breadcrumbs a, .ct-breadcrumbs span {
  color: var(--norte-black) !important;
}
.ct-breadcrumbs a:hover { color: var(--norte-gray) !important; }

/* Pestañas de la ficha (Descripción / Valoraciones) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--norte-black) !important;
}

/* Títulos de producto en carrito y checkout (bloques Woo) */
.wc-block-grid__product-title,
.wc-block-components-product-name,
.wc-block-cart-item__wrap a,
.woocommerce-cart-form .product-name a {
  color: var(--norte-black) !important;
}

/* «Editar» de las líneas personalizadas (vuelve a la ficha precargada):
   fila propia bajo el desglose, sin el separador « / » del dato anterior */
.wc-block-components-product-details .norte-pers-editar-fila { display: block; margin-top: 0.45rem; }
.wc-block-components-product-details span:has(+ .norte-pers-editar-fila) > [aria-hidden="true"] { display: none; }
a.norte-pers-editar {
  color: var(--norte-black) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.norte-pers-editar:hover { color: var(--norte-gray) !important; }

/* ============================================
   Footer claro — cierre en la gama crema/gris
   (sustituye la franja oscura por defecto)
   ============================================ */

footer.ct-footer [data-row] {
  background: #F3F0EB !important;
  border-top: 1px solid var(--norte-cream);
}

footer.ct-footer .ct-footer-copyright {
  color: var(--norte-gray) !important;
  font-family: var(--norte-font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 1.8rem 0;
}

footer.ct-footer .ct-footer-copyright a {
  color: var(--norte-black) !important;
  text-decoration: none;
  font-family: var(--norte-font-heading);
  letter-spacing: 0.06em;
}

/* ============================================
   Tienda — tarjetas al estilo de la portada
   (3 columnas, imagen 4:5 grande, tipografía)
   ============================================ */

.woocommerce ul.products,
ul.products[data-products] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2.5rem 2rem !important;
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product img {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: var(--norte-radius-base);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.2rem !important;
  margin-top: 0.9rem !important;
}

.woocommerce ul.products li.product .price {
  font-size: 0.95rem !important;
}

/* Botón de la tarjeta: contorno discreto, negro al hover */
.woocommerce ul.products li.product .button {
  background: transparent !important;
  color: var(--norte-black) !important;
  border: 1px solid var(--norte-black) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  padding: 0.7rem 1.4rem !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--norte-black) !important;
  color: var(--norte-off-white) !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products, ul.products[data-products] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .woocommerce ul.products, ul.products[data-products] { grid-template-columns: 1fr !important; }
}

/* Zoom suave de la imagen al pasar el ratón (como en la portada) */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure {
  overflow: hidden;
  border-radius: var(--norte-radius-base);
}

.woocommerce ul.products li.product img {
  transition: transform 0.6s ease !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ── Banner de cookies (Complianz) ──────────────────────────────
   Siempre por encima de cualquier popup, y el popup de LeadPopup
   espera a que se conteste el banner (ver assets/js/consent.js). */
.cmplz-cookiebanner { z-index: 2147483000 !important; }
body.norte-consent-pending #lpai-popup-root { display: none !important; }

/* ============================================
   Carrito — «Te faltan X € para el envío gratis»
   (inc/envio-gratis.php + assets/js/envio-gratis.js)
   ============================================ */
.norte-envio-gratis {
  background: #F3F0EB;
  border-radius: var(--norte-radius-base);
  padding: 0.9rem 1.1rem 0.8rem;
  margin: 0 0 1.4rem;
  font-family: var(--norte-font-ui);
  color: var(--norte-black);
}
.norte-envio-gratis p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.norte-envio-gratis strong { font-weight: 700; }
.norte-envio-gratis__barra {
  height: 6px;
  background: #FFFFFF;
  border-radius: 99px;
  overflow: hidden;
  margin: 0.55rem 0 0.45rem;
}
.norte-envio-gratis__barra span {
  display: block;
  height: 100%;
  background: var(--norte-black);
  border-radius: 99px;
  transition: width 400ms ease;
}
.norte-envio-gratis.is-ok .norte-envio-gratis__barra span { background: #3E7B4F; }
.norte-envio-gratis .norte-envio-gratis__nota { font-size: 0.76rem; color: var(--norte-gray); }