/*
Theme Name: BONÉ Child
Template: storefront
Version: 1.0
Description: Tema hijo de Storefront con el diseño BONÉ UY
*/

/* =============================================
   VARIABLES Y BASE
   ============================================= */
:root {
  --bg: #f7f5f2;
  --white: #fff;
  --black: #1f1a17;
  --muted: #6f665f;
  --line: #e4ddd6;
  --pink: #d9a0c7;
  --red: #e32c2c;
  --whatsapp: #25D366;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  background: var(--bg) !important;
  color: var(--black) !important;
  letter-spacing: .01em;
}

/* =============================================
   HEADER
   ============================================= */
.site-header,
.storefront-primary-navigation {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}

.site-branding img {
  height: 72px !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

.site-header-cart .cart-contents,
.storefront-handheld-footer-bar .cart-contents {
  color: var(--black) !important;
}

/* Nav */
.main-navigation ul li a,
.storefront-primary-navigation ul li a {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #3b342f !important;
}

.main-navigation ul li a:hover {
  color: #000 !important;
}

/* =============================================
   HERO / BANNER
   ============================================= */
.hero-bone {
  height: 560px;
  background: url('https://images.unsplash.com/photo-1496747611176-843222e1e57c?q=80&w=1800&auto=format&fit=crop') center/cover;
}

@media (max-width: 950px) {
  .hero-bone { height: 260px; }
}

/* =============================================
   TIPOGRAFÍA GENERAL
   ============================================= */
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important;
  color: var(--black) !important;
}

button, .btn, input[type="submit"], .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
label, .eyebrow, .badge {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
}

/* =============================================
   PRODUCTOS — GRILLA
   ============================================= */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px 22px !important;
}

@media (max-width: 950px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 10px !important;
  }
}

.woocommerce ul.products li.product {
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Imagen del producto */
.woocommerce ul.products li.product a img {
  height: 380px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  transition: transform .35s !important;
  display: block !important;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.045) !important;
}

/* Nombre */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 18px !important;
  font-weight: 400 !important;
  margin: 14px 0 8px !important;
  padding: 0 !important;
}

/* Precio */
.woocommerce ul.products li.product .price {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  color: var(--black) !important;
}

.woocommerce ul.products li.product .price del {
  font-size: 13px !important;
  color: #8a8179 !important;
}

/* Badge Sale */
.woocommerce ul.products li.product .onsale {
  background: var(--black) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  min-width: auto !important;
  min-height: auto !important;
  top: 14px !important;
  left: 14px !important;
}

/* Botón agregar al carrito */
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--black) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 22px !important;
  transition: background .2s !important;
}

.woocommerce ul.products li.product .button:hover {
  background: #3b342f !important;
}

/* =============================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================= */
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: 8px !important;
  object-fit: cover !important;
}

.woocommerce div.product .product_title {
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 22px !important;
  color: var(--black) !important;
}

/* Variaciones (colores, talles) */
.woocommerce div.product form.cart .variations td.label label {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
}

/* =============================================
   CARRITO Y CHECKOUT
   ============================================= */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
  background: var(--black) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  font-size: 15px !important;
}

/* =============================================
   CATEGORÍAS (bloque home)
   ============================================= */
.bone-categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 0 5%;
  margin-bottom: 60px;
}

.bone-cat {
  height: 238px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: #ddd;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.bone-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.46), transparent 72%);
}

.bone-cat span {
  position: absolute;
  left: 18px;
  bottom: 17px;
  color: #fff;
  z-index: 2;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .2px;
}

@media (max-width: 950px) {
  .bone-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 4.5%;
  }
  .bone-cat { height: 140px; }
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

.site-footer a {
  color: #4d4640 !important;
  font-size: 14px !important;
}

.site-footer a:hover { color: #000 !important; }

/* =============================================
   FONDO GENERAL
   ============================================= */
.site-content,
.storefront-primary-navigation,
#page {
  background: var(--bg) !important;
}

.woocommerce-page .site-main,
.site-main {
  background: var(--bg) !important;
}

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 768px) {
  body { overflow-x: clip; overflow-y: auto; }

  .woocommerce ul.products li.product a img {
    height: 240px !important;
  }
}