/*
Theme Name:     Studio B Child
Theme URI:      https://github.com/solbertona5/studio-b-wp
Description:    Child theme de Blocksy con la identidad visual Studio B - comercio multimarca de indumentaria. Italiana + Manrope + JetBrains Mono. Paleta Ink Warm sobre crema. Replica la estetica de los prototipos HTML del repo studio-b-web.
Author:         Studio B
Author URI:     https://studiobonline.com.ar
Template:       blocksy
Version:        1.0.0
Text Domain:    studio-b-child
*/

/* ============================================================
   STUDIO B - DESIGN TOKENS
   Variables globales de marca (color, tipografia, espaciado).
   Toda la web hereda de aca.
   ============================================================ */
:root{
  /* Paleta */
  --ink:          #3C1F08;          /* Ink Warm - sepia profundo */
  --ink-strong:   #2A1300;
  --paper:        #FFFFFF;
  --paper-2:      #F6F3ED;          /* off-white sutil para banners */
  --paper-3:      #E8E2D2;
  --line:         rgba(60,31,8,.18);
  --line-strong:  rgba(60,31,8,.42);
  --muted:        rgba(60,31,8,.55);
  --sale:         #9b3a13;          /* rojo brick para outlet / sale */

  /* Tipografias */
  --font-display: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Espaciado base */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  36px;
  --sp-2xl: 64px;
}

/* ============================================================
   BASE OVERRIDES (de Blocksy)
   ============================================================ */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; }
a:hover{ color: var(--ink-strong); }

/* Titulos en Italiana */
h1, h2, h3, h4,
.entry-title,
.widget-title{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}

/* Clase utilitaria para el logo */
.logo,
.studiob-logo{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: .28em;
  white-space: nowrap;
  display: inline-block;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga","kern";
}

/* Clase utilitaria para meta-info (badges, breadcrumbs, etiquetas) */
.meta,
.studiob-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ============================================================
   WOOCOMMERCE - OVERRIDES BASICOS
   Estilos para que la tienda respire la marca Studio B.
   Mas overrides finos los vamos sumando segun necesitemos.
   ============================================================ */

/* Botones primarios de WooCommerce (agregar al carrito, comprar, etc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 0;
  transition: background .2s, color .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover{
  background: var(--paper);
  color: var(--ink);
}

/* Precios */
.woocommerce .price,
.woocommerce-Price-amount{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: .02em;
}

/* Tarjetas de producto en la grilla */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .04em;
}

/* Outlet / Sale flash */
.woocommerce span.onsale{
  background: var(--sale);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 6px 12px;
  min-height: auto;
  min-width: auto;
}

/* ============================================================
   COMPONENTES UTILITARIOS REUTILIZABLES
   Para usar como clases en widgets de Elementor (tab Avanzado).
   ============================================================ */

/* Sub-nav editorial (Hombre / Mujer / Marcas / Outlet) */
.studiob-subnav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 14px 36px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.studiob-subnav a{ opacity: .85; }
.studiob-subnav a:hover{ opacity: 1; }
.studiob-subnav a.featured{ color: var(--sale); }
.studiob-subnav .divider{ width: 1px; height: 14px; background: var(--line-strong); }

/* Header invertido sobre Ink Warm (homepage / PDP) */
.studiob-nav-dark{
  background: var(--ink);
  color: var(--paper);
}
.studiob-nav-dark a,
.studiob-nav-dark .logo{ color: var(--paper); }

/* Badge / etiqueta editorial */
.studiob-badge{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 99px;
  display: inline-block;
}
.studiob-badge.sale{ background: var(--ink); color: var(--paper); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px){
  .studiob-subnav{
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 18px;
    font-size: 10px;
  }
  .woocommerce .price,
  .woocommerce-Price-amount{
    font-size: 20px;
  }
}