/*
Theme Name: Kuyen Dark Botanical
Theme URI: https://kuyencosmetics.cl
Author: Kuyen Cosmetics
Author URI: https://kuyencosmetics.cl
Description: Child theme de Storefront para KUYEN Cosmetics. Estetica editorial "Dark Botanical": espacio negativo extremo, polaridad absoluta blanco/negro, acentos botanicos ocultos, tipografia Montserrat. Basado en el Manual de Marca Kuyen 2026 (La Luna y la Tierra).
Template: storefront
Version: 1.0.0
Text Domain: kuyen-dark-botanical
*/

/* =========================================================================
   KUYEN DARK BOTANICAL — CUSTOM CSS
   Fuente tipografica: Montserrat (300/400/700/800)
   Paleta oficial (Manual de Marca Kuyen 2026, pag. 8):
     Negro profundo #000000 · Blanco puro #FFFFFF
     Rojo Merquen #92231A · Violeta Maqui #35152D · Verde Rica-Rica #586754
   Regla 60-30-10: blanco/negro cubren el 90%, acentos solo en hover /
   micro-etiquetas, nunca como fondo masivo.
   ========================================================================= */

:root{
  --kuyen-black: #000000;
  --kuyen-white: #ffffff;
  --kuyen-merquen: #92231a;   /* rojo merquen — acento oculto */
  --kuyen-maqui: #35152d;     /* violeta maqui — acento oculto */
  --kuyen-rica-rica: #586754; /* verde rica-rica — acento oculto */
  --kuyen-price-gray: #cfcfcf; /* gris "invisible" para el signo monetario */

  --kuyen-font-display: "Montserrat", sans-serif;
  --kuyen-font-body: "Montserrat", sans-serif;

  --kuyen-max-width: 1440px;
  --kuyen-section-padding: 8rem;
  --kuyen-letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
   1. ARQUITECTURA DEL ESPACIO — el vacio como lujo
   ------------------------------------------------------------------------- */
html{ background:var(--kuyen-white); }

body{
  background:var(--kuyen-white);
  color:var(--kuyen-black);
  font-family:var(--kuyen-font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.site{
  max-width:none;
}

.storefront-full-width-content .col-full,
.site-content .col-full,
.col-full{
  max-width:var(--kuyen-max-width);
}

/* Ritmo vertical amplio entre secciones */
.content-area,
.site-content,
main#main{
  padding-top:var(--kuyen-section-padding);
  padding-bottom:var(--kuyen-section-padding);
}

section,
.storefront-homepage > *{
  margin-bottom:var(--kuyen-section-padding);
}

/* Catalogo: productos flotando, sin cajas ni bordes ni sombras */
ul.products li.product,
.storefront-product-section li.product{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 0 3rem 0 !important;
  margin-bottom:0 !important;
  text-align:left;
}

ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:4rem 3rem;
}

ul.products li.product img{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* -------------------------------------------------------------------------
   2. HERO BANNER — primera impresion editorial
   ------------------------------------------------------------------------- */
.kuyen-hero{
  position:relative;
  height:100vh;
  min-height:640px;
  width:100%;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background-color:var(--kuyen-black);
  background-size:cover;
  background-position:center;
  margin-bottom:0;
}

.kuyen-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  background-image:inherit;
  filter:brightness(0.6);
  z-index:0;
}

.kuyen-hero__content{
  position:relative;
  z-index:1;
  padding:0 4rem 6rem;
  max-width:var(--kuyen-max-width);
  margin:0 auto;
  width:100%;
}

.kuyen-hero__title{
  color:var(--kuyen-white);
  font-family:var(--kuyen-font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:5rem;
  line-height:1.0;
  letter-spacing:0.01em;
  margin:0 0 1.5rem;
  max-width:18ch;
}

.kuyen-hero__subtitle{
  color:var(--kuyen-white);
  font-weight:300;
  font-size:1.1rem;
  letter-spacing:0.05em;
  max-width:45ch;
  margin:0 0 2.5rem;
}

@media (max-width:768px){
  .kuyen-hero__title{ font-size:2.75rem; }
  .kuyen-hero__content{ padding:0 1.5rem 4rem; }
}

/* -------------------------------------------------------------------------
   3. NAVEGACION MINIMALISTA — header
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:var(--kuyen-white);
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding:1.25rem 0;
  transition:background 0.4s ease, border-color 0.4s ease;
}

/* Portada: header transparente flotando sobre el hero hasta hacer scroll */
body.kuyen-has-hero .site-header{
  position:fixed;
  width:100%;
  background:transparent;
  border-bottom-color:transparent;
}

body.kuyen-has-hero .site-header .site-title a,
body.kuyen-has-hero .site-header .main-navigation ul.menu > li > a,
body.kuyen-has-hero .site-header .icon{
  color:var(--kuyen-white);
  stroke:var(--kuyen-white);
}

body.kuyen-has-hero.kuyen-scrolled .site-header{
  background:var(--kuyen-white);
  border-bottom-color:rgba(0,0,0,0.08);
}

body.kuyen-has-hero.kuyen-scrolled .site-header .site-title a,
body.kuyen-has-hero.kuyen-scrolled .site-header .main-navigation ul.menu > li > a,
body.kuyen-has-hero.kuyen-scrolled .site-header .icon{
  color:var(--kuyen-black);
  stroke:var(--kuyen-black);
}

body.kuyen-has-hero:not(.kuyen-scrolled) .kuyen-hero{
  margin-top:-1px;
}

.site-header .col-full{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.site-branding .site-title,
.site-branding .site-title a{
  font-family:var(--kuyen-font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-size:1.4rem;
  color:var(--kuyen-black);
}

.main-navigation ul.menu{
  display:flex;
  gap:2.5rem;
}

.main-navigation ul.menu > li > a{
  font-family:var(--kuyen-font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:var(--kuyen-letter-spacing);
  color:var(--kuyen-black);
  border-bottom:none;
  padding:0.25rem 0;
  transition:color 0.3s ease;
}

.main-navigation ul.menu > li > a:hover{
  color:var(--kuyen-merquen);
}

/* Iconos funcionales: trazo fino, a los extremos */
.site-header-cart .amount,
.site-search,
.site-header-cart{
  display:flex;
  align-items:center;
}

.site-header-cart a.cart-contents,
.site-search a,
.header-cart-icon,
.storefront-handheld-footer-bar svg,
.site-header svg{
  stroke-width:1px;
}

.site-header-cart .cart-contents svg,
.site-header .icon{
  width:18px;
  height:18px;
  stroke:var(--kuyen-black);
  fill:none;
}

/* -------------------------------------------------------------------------
   4. SISTEMA CROMATICO DINAMICO
   ------------------------------------------------------------------------- */
.kuyen-section--narrative{
  background:var(--kuyen-black);
  color:var(--kuyen-white);
  padding:var(--kuyen-section-padding) 2rem;
}

.kuyen-section--narrative h2,
.kuyen-section--narrative h3{
  color:var(--kuyen-white);
}

.kuyen-section--shop{
  background:var(--kuyen-white);
  color:var(--kuyen-black);
}

/* Etiquetas flotantes sobre imagenes: unico lugar donde aparece el color botanico */
.kuyen-badge{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:2;
  font-family:var(--kuyen-font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:0.65rem;
  letter-spacing:0.08em;
  padding:0.35rem 0.7rem;
  color:var(--kuyen-white);
  background:var(--kuyen-merquen);
}

.kuyen-badge--nuevo{ background:var(--kuyen-rica-rica); }
.kuyen-badge--bestseller{ background:var(--kuyen-maqui); }

/* -------------------------------------------------------------------------
   5. BOTONES Y CTAs — discrecion elegante
   ------------------------------------------------------------------------- */
.button,
a.button,
button.button,
input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.added_to_cart{
  background:transparent;
  color:var(--kuyen-black);
  border:1px solid var(--kuyen-black);
  border-radius:0;
  text-transform:uppercase;
  font-family:var(--kuyen-font-display);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.08em;
  padding:1rem 2.25rem;
  box-shadow:none;
  transition:all 0.4s ease;
}

.button:hover,
a.button:hover,
button.button:hover,
input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--kuyen-black);
  color:var(--kuyen-white);
}

/* CTA "solido" alternativo: negro puro / texto blanco desde el inicio */
.button.kuyen-button--solid,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--kuyen-black);
  color:var(--kuyen-white);
  border:1px solid var(--kuyen-black);
}

.button.kuyen-button--solid:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit.alt:hover{
  background:transparent;
  color:var(--kuyen-black);
}

/* -------------------------------------------------------------------------
   6. PRECIOS — signo monetario reducido y en gris casi invisible
   ------------------------------------------------------------------------- */
.woocommerce-Price-amount{
  color:var(--kuyen-black);
  font-weight:400;
}

.woocommerce-Price-currencySymbol{
  font-size:0.6em;
  color:var(--kuyen-price-gray);
  font-weight:300;
  margin-right:0.05em;
}

/* -------------------------------------------------------------------------
   7. FICHA DE PRODUCTO — limpieza clinica, galeria de arte
   ------------------------------------------------------------------------- */
.single-product div.product{
  display:flex;
  flex-wrap:wrap;
  gap:4rem;
  align-items:flex-start;
}

.single-product div.product .woocommerce-product-gallery{
  width:60%;
  flex:0 0 60%;
}

.single-product div.product .summary.entry-summary{
  width:calc(40% - 4rem);
  flex:0 0 calc(40% - 4rem);
  padding-top:1rem;
}

.single-product div.product .summary .product_title{
  font-family:var(--kuyen-font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:2.75rem;
  line-height:1.05;
  margin-bottom:1.5rem;
}

.single-product div.product .summary .woocommerce-product-details__short-description{
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  margin-bottom:2rem;
  max-width:38ch;
}

.single-product div.product .summary .price{
  font-size:1.1rem;
  margin-bottom:2rem;
  display:block;
}

/* Ocultar ruido operativo de WooCommerce por defecto */
.single-product div.product .sku_wrapper,
.single-product div.product .posted_in,
.single-product div.product .product_meta,
.single-product div.product .stock,
.woocommerce-product-rating,
.single-product .woocommerce-tabs,
.related.products{
  display:none;
}

@media (max-width:900px){
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary{
    width:100%;
    flex:0 0 100%;
  }
}

/* -------------------------------------------------------------------------
   8. TIPOGRAFIA GENERAL
   ------------------------------------------------------------------------- */
h1, h2, h3{
  font-family:var(--kuyen-font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:1.05;
  letter-spacing:0.01em;
}

h4, h5, h6{
  font-family:var(--kuyen-font-display);
  font-weight:700;
}

p, li, span, a{
  font-family:var(--kuyen-font-body);
}

/* -------------------------------------------------------------------------
   9. FOOTER — wordmark sobre fondo claro
   ------------------------------------------------------------------------- */
#colophon.site-footer{
  background:var(--kuyen-white);
  color:var(--kuyen-black);
  border-top:1px solid rgba(0,0,0,0.08);
  padding:var(--kuyen-section-padding) 0 3rem;
}

#colophon.site-footer a{
  color:var(--kuyen-black);
}

#colophon.site-footer a:hover{
  color:var(--kuyen-merquen);
}


/* =========================================================================
   KUYEN — Header global siempre visible + Mi Cuenta + Footer completo
   (añadido: logo y categorías visibles en todas las páginas, sin ocultarse
   sobre el banner ni al hacer scroll)
   ========================================================================= */

/* Header sólido y visible SIEMPRE, incluida la portada sobre el hero.
   Se anula el comportamiento transparente/blanco-sobre-blanco. */
.site-header,
body.kuyen-has-hero .site-header,
body.kuyen-has-hero.kuyen-scrolled .site-header{
  position: sticky !important;
  top: 0;
  width: 100%;
  background: var(--kuyen-white) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  z-index: 1000;
}

/* Logo y menú SIEMPRE en color oscuro y legibles sobre fondo blanco. */
.site-header .site-title a,
.site-header .main-navigation ul.menu > li > a,
.site-header .icon,
body.kuyen-has-hero .site-header .site-title a,
body.kuyen-has-hero .site-header .main-navigation ul.menu > li > a,
body.kuyen-has-hero .site-header .icon{
  color: var(--kuyen-black) !important;
  stroke: var(--kuyen-black) !important;
}

/* El menú principal (Catálogo / Manifiesto / Estudio) siempre visible. */
.site-header .main-navigation,
.site-header .main-navigation ul.menu{
  display: flex !important;
}

/* Enlace Mi Cuenta en el header, junto a buscador y carrito. */
.kuyen-account-link{
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
}
.kuyen-account-link a{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--kuyen-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: var(--kuyen-letter-spacing);
  color: var(--kuyen-black) !important;
  border-bottom: none;
  transition: opacity 0.3s ease;
}
.kuyen-account-link a:hover{ opacity: 0.6; }
.kuyen-account-icon{ font-size: 1rem; line-height: 1; }

/* ---------------- Footer completo ---------------- */
.kuyen-footer{
  background: var(--kuyen-black);
  color: var(--kuyen-white);
  padding: 4rem 0 2rem;
}
.kuyen-footer__inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.kuyen-footer__title{
  font-family: var(--kuyen-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--kuyen-white);
  margin: 0 0 0.75rem;
}
.kuyen-footer__tagline{
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.75;
  margin: 0;
}
.kuyen-footer__heading{
  font-family: var(--kuyen-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: var(--kuyen-letter-spacing);
  color: var(--kuyen-white);
  margin: 0 0 1rem;
}
.kuyen-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.kuyen-footer__list li{ margin-bottom: 0.6rem; }
.kuyen-footer__list a{
  color: var(--kuyen-white) !important;
  opacity: 0.8;
  font-size: 0.85rem;
  border-bottom: none;
  transition: opacity 0.3s ease;
}
.kuyen-footer__list a:hover{ opacity: 1; }
.kuyen-footer__bottom{
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
}
.kuyen-footer__bottom p{
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
}
@media (max-width: 768px){
  .kuyen-footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .kuyen-footer__inner{ grid-template-columns: 1fr; }
}


/* =========================================================================
   KUYEN — v2: Top bar rotativa, logo imagen y footer rectángulo negro
   ========================================================================= */

/* ---- Franja negra superior con anuncios rotativos ---- */
.kuyen-topbar{
  background: var(--kuyen-black);
  color: var(--kuyen-white);
  width: 100%;
  text-align: center;
  font-family: var(--kuyen-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  position: relative;
  z-index: 1001;
}
.kuyen-topbar__track{
  position: relative;
  height: 2.6em;
}
.kuyen-topbar__msg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.kuyen-topbar__msg.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- Logo por imagen: siempre arriba a la izquierda ---- */
.kuyen-branding{
  display: flex;
  align-items: center;
}
.kuyen-logo-link{
  display: inline-block;
  line-height: 0;
  border-bottom: none;
}
.kuyen-logo-img{
  display: block;
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 200px;
}
/* Asegurar alineación del header: logo a la izquierda, resto a la derecha */
.site-header .col-full{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site-header .site-branding,
.site-header .kuyen-branding{
  order: -10;
  margin-right: auto;
}

/* ---- Footer: rectángulo negro sólido, sin bordes/márgenes blancos ---- */
.site-footer,
#colophon,
#colophon.site-footer{
  background: var(--kuyen-black) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.kuyen-footer{
  background: var(--kuyen-black);
  border: none;
  color: var(--kuyen-white);
  padding: 4rem 0 2rem;
}
.kuyen-footer__inner{
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2rem;
  align-items: start;
}
.kuyen-footer__bottom{
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
}
@media (max-width: 992px){
  .kuyen-footer__inner{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px){
  .kuyen-footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px){
  .kuyen-footer__inner{ grid-template-columns: 1fr; }
}


/* =========================================================================
   KUYEN — v3: Logo a la izquierda a la altura de las categorías,
   carrito siempre a la derecha, y todo en franjas/rectángulos.
   ========================================================================= */

/* Fila de navegación primaria: logo + menú a la izquierda, cuenta + carrito a la derecha */
.storefront-primary-navigation{
  width: 100%;
}
.storefront-primary-navigation .col-full{
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2rem;
}

/* El logo (movido a esta fila) va primero, pegado a la izquierda */
.storefront-primary-navigation .kuyen-branding{
  order: 0;
  margin: 0;
  flex: 0 0 auto;
}
.storefront-primary-navigation .kuyen-branding .kuyen-logo-img{
  max-height: 44px;
  max-width: 170px;
}

/* El menú de categorías, junto al logo */
.storefront-primary-navigation .main-navigation{
  order: 1;
  flex: 0 1 auto;
  width: auto !important;
  float: none !important;
}

/* Empujar "Mi Cuenta" y el carrito al extremo derecho */
.storefront-primary-navigation .kuyen-account-link{
  order: 8;
  margin-left: auto;   /* empuja todo lo siguiente a la derecha */
  flex: 0 0 auto;
}
.storefront-primary-navigation .site-header-cart{
  order: 9;            /* el carrito SIEMPRE al final, a la derecha */
  float: none !important;
  margin: 0 0 0 1.5rem !important;
  flex: 0 0 auto;
}

/* Primera fila del header: solo el buscador, alineado a la derecha, sin ocupar de más */
.site-header > .col-full{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* La branding original de la fila 1 ya no se usa (el logo se movió abajo);
   por si Storefront la reintrodujera, se oculta en la fila superior */
.site-header > .col-full > .site-branding:not(.kuyen-branding){
  display: none;
}

/* Contenedores siempre en franja/rectángulo de ancho completo, sin cuadrados */
.kuyen-topbar,
.site-header,
.storefront-primary-navigation,
.site-footer,
#colophon,
.kuyen-footer{
  width: 100%;
  box-sizing: border-box;
  border-radius: 0 !important;
}

@media (max-width: 768px){
  .storefront-primary-navigation .col-full{
    flex-wrap: wrap;
    gap: 1rem;
  }
  .storefront-primary-navigation .kuyen-account-link{ margin-left: auto; }
}


/* =========================================================================
   KUYEN — v3.1: Fix ancho del branding en la fila de navegación
   ========================================================================= */

/* El contenedor del logo NO debe expandirse: solo el ancho de la imagen */
.storefront-primary-navigation .kuyen-branding{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.storefront-primary-navigation .kuyen-branding .kuyen-logo-img{
  max-height: 44px;
  max-width: 170px;
  width: auto;
}

/* Menú de categorías junto al logo, sin ancho expandido */
.storefront-primary-navigation .main-navigation{
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}
.storefront-primary-navigation .main-navigation ul.menu{
  margin: 0 !important;
}

/* Mi Cuenta empuja el bloque derecho; carrito siempre al final derecho */
.storefront-primary-navigation .kuyen-account-link{
  margin-left: auto !important;
  margin-right: 0 !important;
}
.storefront-primary-navigation .site-header-cart{
  margin: 0 0 0 1.5rem !important;
}

/* Evitar cualquier desbordamiento horizontal (no cuadrados/franjas rotas) */
.storefront-primary-navigation .col-full{
  max-width: var(--kuyen-max-width, 1440px);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}