/*
Theme Name: Lopez y Ferro Libros
Theme URI: https://lopezyferrolibros.com/
Description: Tema hijo de Book Store Cart con la identidad de Lopez y Ferro Libros: paleta, tipografias y cabecera propias.
Author: Lopez y Ferro Libros
Template: book-store-cart
Version: 1.0.3
Text Domain: lopezyferro
*/

:root{
  --lyf-tinta:#111111;
  --lyf-papel:#ffffff;
  --lyf-cuero:#5d3b20;
  --lyf-crema:#f8f3ea;
  --lyf-crema-clara:#fcfaf6;
  --lyf-linea:#e0e0e0;
  --lyf-tenue:#888888;
}

body{ background:var(--lyf-papel); color:var(--lyf-tinta); }

h1,h2,h3,h4,h5,h6,.wp-block-post-title,.wp-block-site-title{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  letter-spacing:-.01em;
}

.wp-block-site-title a{ color:var(--lyf-tinta); text-decoration:none; }

/* precios y llamadas a la accion en el marron de la marca */
.woocommerce-Price-amount,.wp-block-woocommerce-product-price,
.wc-block-components-product-price{ color:var(--lyf-cuero); font-weight:600; }

.wp-block-button__link,.wp-element-button,button.single_add_to_cart_button,
.woocommerce a.button,.woocommerce button.button{
  background:var(--lyf-cuero); border-color:var(--lyf-cuero); color:#fff;
  border-radius:2px; letter-spacing:.02em;
}
.wp-block-button__link:hover,.wp-element-button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover{
  background:var(--lyf-tinta); border-color:var(--lyf-tinta); color:#fff;
}

/* tarjetas de producto sobrias, como el sitio original */
ul.products li.product,.wc-block-grid__product{
  border:1px solid var(--lyf-linea); border-radius:3px; padding:14px;
  background:var(--lyf-papel);
}
ul.products li.product:hover{ border-color:var(--lyf-cuero); }
ul.products li.product img,.wc-block-grid__product-image img{
  aspect-ratio:2/3; object-fit:contain; background:var(--lyf-crema-clara);
}
ul.products li.product .woocommerce-loop-product__title{
  font-size:.92rem; line-height:1.35; min-height:3.6em;
}

.woocommerce-message,.woocommerce-info{ border-top-color:var(--lyf-cuero); }
.woocommerce span.onsale{ background:var(--lyf-cuero); }

/* ── Banner de cabecera: el titulo del primer producto quedaba encima ── */
.inner-banner-box .wp-block-post-title,
.inner-banner .wp-block-post-title{ display:none !important; }
.inner-banner-box,.inner-banner{ min-height:150px !important; }
.inner-banner-box .wp-block-cover__inner-container,
.inner-banner .wp-block-cover__inner-container{ padding:0 !important; }

/* ── Cabecera: el logo ya dice el nombre, no repetirlo al lado ───────── */
.main-header .wp-block-site-title{ display:none; }
.main-header .wp-block-site-logo img,
.main-header .custom-logo{ max-width:260px; height:auto; }

/* ── Barra lateral ───────────────────────────────────────────────────── */
.wp-block-search__button{ background:var(--lyf-cuero); border-color:var(--lyf-cuero); color:#fff; }
.wc-block-product-categories select,.woocommerce-ordering select{
  padding:8px 10px; border:1px solid var(--lyf-linea); border-radius:3px; max-width:100%;
}
.woocommerce-result-count{ color:var(--lyf-tenue); }

/* ── Paginacion ──────────────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul{ border:0; gap:6px; display:flex; flex-wrap:wrap; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--lyf-linea); border-radius:3px; padding:8px 13px; min-width:0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--lyf-cuero); border-color:var(--lyf-cuero); color:#fff;
}

/* ── Ficha del libro ─────────────────────────────────────────────────── */
.single-product div.product .woocommerce-product-gallery img{
  aspect-ratio:2/3; object-fit:contain; background:var(--lyf-crema-clara);
}
table.lyf-ficha{ border-collapse:collapse; margin-top:18px; font-size:.92rem; }
table.lyf-ficha th{ color:var(--lyf-tenue); font-weight:500; white-space:nowrap; }
table.lyf-ficha td{ padding:4px 0; }

/* el banner de cabecera mostraba encima el titulo del primer libro */
.wp-block-cover .wp-block-post-title.has-text-align-center{ display:none !important; }
.woocommerce-placeholder{ opacity:1 !important; padding:0 !important; }

/* red de seguridad: el tema pinta algunos textos con el color de fondo claro,
   que sobre los cremas quedaban invisibles */
.has-slider-bg-1-background-color .has-background-color,
.has-slider-bg-2-background-color .has-background-color,
.has-form-bg-background-color .has-background-color,
.slider-bg .has-background-color,
.wp-block-cover.is-light .has-background-color{ color:var(--lyf-cuero) !important; }


/* ── Grilla de productos ─────────────────────────────────────────────────
   Se usa doble selector de cuerpo para ganarle a las reglas del tema padre,
   que fijaban ancho por porcentaje y dejaban las tarjetas pegadas.        */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr)) !important;
  gap:36px 28px !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; display:none !important; }

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product{
  width:auto !important; max-width:none !important;
  float:none !important; clear:none !important;
  margin:0 !important;
  padding:16px 16px 18px !important;
  border:1px solid var(--lyf-linea) !important; border-radius:4px;
  background:var(--lyf-papel);
  display:flex !important; flex-direction:column;
  text-align:center;                       /* titulo, precio y boton centrados */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--lyf-cuero) !important;
  box-shadow:0 2px 10px rgba(93,59,32,.08);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img{
  width:100% !important; height:200px !important;
  object-fit:contain !important;
  background:var(--lyf-crema-clara);
  border-radius:2px; padding:8px;
  margin:0 0 14px !important; display:block;
  box-shadow:none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
  font-family:"Playfair Display",Georgia,serif !important;
  font-size:.88rem !important; line-height:1.35; font-weight:400;
  padding:0 !important; margin:0 0 10px !important;
  min-height:3.6em; text-align:center;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.woocommerce ul.products li.product .price{
  display:block !important; text-align:center !important;
  margin:0 0 16px !important; font-size:1.02rem !important;
  color:var(--lyf-cuero) !important; font-weight:600;
}
.woocommerce ul.products li.product .price del{
  opacity:.5; font-weight:400; font-size:.88rem; margin-right:6px;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* el boton se desbordaba por la derecha: ancho al contenido y centrado */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button{
  box-sizing:border-box !important;
  width:auto !important; max-width:100% !important;
  display:inline-block !important;
  margin:auto auto 0 !important;      /* pegado abajo y centrado en la tarjeta */
  padding:10px 24px !important; border-radius:3px;
  font-size:.83rem; letter-spacing:.01em; line-height:1.2;
  text-align:center; white-space:nowrap;
}
/* la tarjeta centra su contenido en el eje horizontal */
.woocommerce ul.products li.product{ align-items:center !important; }
.woocommerce ul.products li.product > *{ max-width:100%; }
.woocommerce ul.products li.product .onsale{
  top:10px !important; right:10px !important; left:auto !important; margin:0 !important;
}

@media (max-width:600px){
  .woocommerce ul.products{
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr)) !important;
    gap:26px 16px !important;
  }
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product img{ height:165px !important; }
}