/*
Theme Name: KLWK (Storefront Child)
Theme URI: https://klwk.shop
Description: Tema hijo de Storefront con la identidad visual de KLWK — inspirado en Grailed, bilingüe, minimalista. Fondo crema, negro y acento terracota.
Author: KLWK
Template: storefront
Version: 1.0.0
Text Domain: klwk-child
*/

/* ==========================================================================
   KLWK — DESIGN TOKENS
   Tomados del prototipo de diseño (Main.dc.html, Shop.dc.html, etc.)
   ========================================================================== */

:root{
  --klwk-bg: #FAFAF8;
  --klwk-ink: #0A0A0A;
  --klwk-accent: #C4432B;
  --klwk-muted: #6B6B66;
  --klwk-card: #EFEEEA;
  --klwk-card-alt: #E4E2DB;
  --klwk-line: rgba(10,10,10,0.1);
  --klwk-line-soft: rgba(10,10,10,0.08);
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

body,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--klwk-ink);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce div.product .product_title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--klwk-ink);
}

.site-title { font-weight: 900; letter-spacing: 0.5px; text-transform: none; }

/* Etiquetas pequeñas tipo "monospace uppercase" del prototipo */
.klwk-eyebrow,
.woocommerce span.onsale,
.site-branding .site-description {
  font-family: 'Inter', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--klwk-muted);
}

/* ==========================================================================
   BASE / FONDO
   ========================================================================== */

body { background-color: var(--klwk-bg); }
.site-header, .site-footer { background-color: var(--klwk-bg); border-color: var(--klwk-line); }
a { color: var(--klwk-ink); }
a:hover { color: var(--klwk-accent); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */

.site-header { border-bottom: 1px solid var(--klwk-line); box-shadow: none; }

.main-navigation ul li a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--klwk-ink);
  position: relative;
}
.main-navigation ul li a::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--klwk-ink);
  transition:width .2s ease;
}
.main-navigation ul li a:hover::after{ width:100%; }

/* ==========================================================================
   BOTONES / CTAs
   ========================================================================== */

.button, button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--klwk-ink) !important;
  color: var(--klwk-bg) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0 !important;
  border: 1px solid var(--klwk-ink) !important;
  padding: 14px 26px !important;
  transition: background .2s ease, color .2s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--klwk-bg) !important;
  color: var(--klwk-ink) !important;
}

/* CTA "fantasma" (outline), útil en secciones oscuras */
.klwk-cta-outline {
  display: inline-block;
  border: 1px solid var(--klwk-bg);
  color: var(--klwk-bg);
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 26px;
}

/* ==========================================================================
   PRODUCTOS — GRID / TARJETAS
   ========================================================================== */

.woocommerce ul.products li.product {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 40px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 2px;
  color: var(--klwk-ink);
}

.woocommerce ul.products li.product .price {
  font-family: 'Inter', monospace;
  font-size: 12px;
  color: var(--klwk-ink);
}

.woocommerce ul.products li.product img {
  background-color: var(--klwk-card);
  border-radius: 0 !important;
  transition: opacity .25s ease;
}

.woocommerce span.onsale {
  background-color: var(--klwk-bg) !important;
  color: var(--klwk-accent) !important;
  font-family: 'Inter', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 0;
  min-height: auto;
  min-width: auto;
  padding: 4px 8px;
  line-height: 1;
}

/* ==========================================================================
   PÁGINA DE PRODUCTO
   ========================================================================== */

.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--klwk-ink);
  font-family: 'Inter', monospace;
  font-size: 20px;
}

.woocommerce div.product .woocommerce-product-gallery {
  background-color: var(--klwk-card);
}

/* ==========================================================================
   CARRITO / CHECKOUT
   ========================================================================== */

.woocommerce-cart table.cart, .woocommerce-checkout table.cart {
  border: none;
}
.woocommerce table.shop_table {
  border: 1px solid var(--klwk-line);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  font-family: 'Inter', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--klwk-muted);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--klwk-line);
}
.site-footer, .site-footer a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--klwk-muted);
}

/* ==========================================================================
   SECCIÓN OSCURA REUTILIZABLE (para usar en la portada vía bloque HTML)
   Clase: klwk-dark-section
   ========================================================================== */

.klwk-dark-section {
  background: linear-gradient(135deg, #16160f 0%, #0A0A0A 55%, #1c1c14 100%);
  color: var(--klwk-bg);
  padding: 76px 56px;
}
.klwk-dark-section .klwk-eyebrow { color: var(--klwk-accent); }
.klwk-dark-section h2 { color: var(--klwk-bg); }
.klwk-dark-section p { color: #C9C8C2; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .woocommerce ul.products li.product { margin-bottom: 24px !important; }
  .klwk-dark-section { padding: 48px 24px; }
}