/*
Theme Name: Zibreka
Description: Boutique de pijamas y lencería — tema hijo de Storefront, fiel a la identidad Zibreka (crema, serif clásica y la mariposa). Nada de WordPress genérico.
Author: Zibreka
Template: storefront
Version: 1.0
Text Domain: zibreka
*/

/* ===================== Identidad ===================== */
:root {
  --cream:      #f2ebe1;  /* fondo principal (del logo) */
  --cream-2:    #ece3d5;  /* fondo alterno / secciones */
  --cream-3:    #f7f2ea;  /* tarjetas claras */
  --ink:        #15110c;  /* tinta / negro del logo */
  --ink-soft:   #4a4035;  /* texto de lectura */
  --muted:      #8a7f70;  /* metadatos, bajadas */
  --accent:     #9c7b63;  /* taupe cálido, acentos sobrios */
  --accent-dk:  #7d6150;
  --line:       rgba(21,17,12,.14);
  --line-strong:rgba(21,17,12,.28);

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

/* ===================== Base ===================== */
body,
body.woocommerce,
.site {
  background-color: var(--cream);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .product_title,
.widget-title, .section-title {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  text-wrap: balance;
}

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
a:hover { color: var(--accent); }

/* Etiquetas, menú, precios, botones: sans fina para contraste boutique */
.site-header,
.main-navigation ul li a,
.storefront-handheld-footer-bar,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce .price,
.button, button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.added_to_cart,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-name,
.price del, .price ins,
.widget_shopping_cart .total,
.site-info {
  font-family: var(--sans);
  font-weight: 400;
}

/* ===================== Cabecera ===================== */
.site-header {
  background-color: var(--cream) !important;
  border-bottom: 1px solid var(--line);
  padding-top: 1.4em;
  padding-bottom: 1.2em;
}
.site-branding .custom-logo { max-height: 56px; width: auto; }
.site-title a, .site-title { color: var(--ink) !important; font-family: var(--serif); letter-spacing: .14em; }
.site-header .site-branding + * { color: var(--ink); }

/* Navegación principal */
.main-navigation ul li a {
  color: var(--ink) !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 400;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--accent) !important; }
.main-navigation,
.secondary-navigation { background-color: transparent; }

/* Icono de carrito / buscador en header */
.site-header-cart .cart-contents,
.site-search .widget_product_search button { color: var(--ink); }

/* ===================== Botones ===================== */
.button, button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  padding: .85em 1.6em;
  transition: background-color .2s ease, color .2s ease, border-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 a.button.alt:hover, .woocommerce button.button.alt:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ===================== Grilla de productos ===================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { text-align: center; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  padding: .7em 0 .25em;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce ul.products li.product a img {
  border-radius: 3px;
  transition: transform .5s ease, box-shadow .3s ease;
  background: var(--cream-3);
}
.woocommerce ul.products li.product a:hover img {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(21,17,12,.10);
}
.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-size: .98rem;
  letter-spacing: .02em;
}
.woocommerce ul.products li.product .price del { color: var(--muted); opacity: .8; }
.woocommerce ul.products li.product .price ins { color: var(--accent-dk); text-decoration: none; }

/* Botón "Añadir al carrito" en loop: contorno, se rellena al hover */
.woocommerce ul.products li.product .button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  margin-top: .6em;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* Etiqueta de oferta: discreta */
.woocommerce span.onsale {
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: .55em .9em;
}

/* ===================== Producto individual ===================== */
.woocommerce div.product .product_title { font-size: 2.2rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ink); font-size: 1.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--cream-3); }
.woocommerce .star-rating span::before { color: var(--accent); }

/* ===================== Avisos / mensajes ===================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--accent);
  background-color: var(--cream-3);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }

/* ===================== Pie ===================== */
.site-footer {
  background-color: var(--cream-2);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--accent); }
.site-info {
  background-color: var(--cream-2);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .04em;
  text-align: center;
}

/* Botones sociales del pie */
.zibreka-social {
  display: flex;
  justify-content: center;
  gap: .9rem;
  margin: 0 0 1.2rem;
}
.zibreka-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.zibreka-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.zibreka-social svg { width: 20px; height: 20px; display: block; }

/* Enlaces legales del pie */
.zibreka-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  margin: 0 auto 1.1rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.zibreka-legal a { color: var(--muted); text-decoration: none; }
.zibreka-legal a:hover { color: var(--accent); }

/* ===================== Detalles finos ===================== */
::selection { background: var(--accent); color: #fff; }
hr, .storefront-product-section + .storefront-product-section { border-color: var(--line); }
input, textarea, select {
  border: 1px solid var(--line-strong) !important;
  border-radius: 2px;
  background: var(--cream-3);
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product a img { transition: none; }
}

/* ===================== Home de pre-lanzamiento ===================== */
body.home .storefront-breadcrumb,
body.home .entry-header,
body.home .page-title,
body.page-template-template-fullwidth.home .entry-title { display: none !important; }

/* Portada "próxima a lanzar": sin navegación, carrito ni buscador */
body.home .main-navigation,
body.home .site-header-cart,
body.home .site-search,
body.home .secondary-navigation,
body.home .storefront-handheld-footer-bar { display: none !important; }
body.home .site-header { text-align: center; }
body.home .site-branding { float: none; display: inline-block; }

.zibreka-home { text-align: center; max-width: 660px; margin: 3.2rem auto 4.5rem; padding: 0 1rem; }
.zibreka-home__mark {
  width: 118px; height: auto; margin: 0 auto 1.7rem; display: block;
  animation: zb-float 6s ease-in-out infinite;
}
@keyframes zb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.zibreka-home__eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .42em;
  font-size: .72rem; color: var(--muted); margin: 0 0 1.1rem;
}
.zibreka-home__title {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.12;
  margin: 0 auto 1.1rem; max-width: 18ch;
}
.zibreka-home__lead {
  font-family: var(--serif); color: var(--ink-soft);
  font-size: 1.18rem; line-height: 1.6; max-width: 48ch; margin: 0 auto 1.9rem;
}
.zibreka-home__cats {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .24em;
  font-size: .82rem; color: var(--ink);
  display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 0 0 2.1rem;
}
.zibreka-home__cats .dot { color: var(--accent); }
.zibreka-home__rule { width: 56px; height: 1px; background: var(--line-strong); margin: 0 auto 1.6rem; }
.zibreka-home__foot {
  font-family: var(--sans); letter-spacing: .12em; font-size: .8rem; color: var(--muted); margin: 0;
}
@media (prefers-reduced-motion: reduce) { .zibreka-home__mark { animation: none; } }