/* ============================================================
   CREACO — Identidad visual (porteada del WP smtpchile-creaco)
   PrestaShop 9 / classic theme — sólo COLORES + TIPOGRAFÍAS
   NO toca layout (Bootstrap 4 grid se mantiene intacto)
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;700&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --olivo:   #6B7A2E;
  --bosque:  #4A5520;
  --arcilla: #C8A881;
  --hueso:   #F7F4ED;
  --tinta:   #2A2820;
  --muted:   #5a5750;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── BASE — solo color + fuentes ─────────────────────────── */
body {
  font-family: var(--font-body) !important;
  color: var(--tinta);
  background: var(--hueso) !important;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 60px, rgba(107,122,46,0.020) 60px, rgba(107,122,46,0.020) 61px),
    radial-gradient(circle at 1px 1px, rgba(42,40,32,0.04) 1px, transparent 0) !important;
  background-size: 100% 100%, 32px 32px !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display) !important;
  color: #1f1d18;
  letter-spacing: -0.3px;
}

a { color: var(--bosque); transition: color .2s; }
a:hover { color: var(--olivo); }

/* ── HEADER NAV (top oscuro) ─────────────────────────────── */
.header-nav {
  background: var(--tinta) !important;
  color: var(--hueso);
}
.header-nav,
.header-nav a,
.header-nav .text,
.header-nav .currency-selector,
.header-nav .language-selector,
.header-nav .user-info a,
.header-nav .header-nav__signin {
  color: var(--hueso) !important;
}
.header-nav a:hover { color: var(--arcilla) !important; }

/* ── HEADER TOP (logo + menú) ────────────────────────────── */
.header-top {
  background: var(--hueso);
  border-bottom: 1px solid rgba(42,40,32,0.10);
}

/* ── MENU PRINCIPAL ──────────────────────────────────────── */
#_desktop_top_menu .top-menu .category > a {
  font-family: var(--font-body) !important;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta) !important;
  text-transform: none;
  letter-spacing: 0;
  transition: color .2s;
}
#_desktop_top_menu .top-menu .category > a:hover {
  color: var(--olivo) !important;
}

/* ── BOTONES — solo color, NO tamaño ─────────────────────── */
.btn-primary, .btn.btn-primary, button.btn-primary, a.btn-primary,
.add-to-cart {
  background-color: var(--olivo) !important;
  border-color: var(--olivo) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  border-radius: 999px !important;
}
.btn-primary:hover, .btn.btn-primary:hover, .add-to-cart:hover {
  background-color: var(--bosque) !important;
  border-color: var(--bosque) !important;
}

.btn-secondary, .btn.btn-secondary, .btn-outline-primary {
  background: transparent !important;
  border-color: var(--olivo) !important;
  color: var(--olivo) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--olivo) !important;
  color: #fff !important;
}

/* ── BADGES / FLAGS ──────────────────────────────────────── */
.product-flags li.product-flag,
.product-flag {
  background: var(--olivo) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  border-radius: 999px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.product-flags li.product-flag.new {
  background: var(--arcilla) !important;
  color: var(--tinta) !important;
}

/* ── PRODUCT CARDS — solo color y tipografía, sin layout ─── */
.product-miniature .product-title {
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.product-miniature .product-title a {
  color: #1f1d18 !important;
}
.product-miniature .product-title a:hover {
  color: var(--olivo) !important;
}
.product-miniature .thumbnail-container {
  background: var(--hueso);
  border-radius: 8px;
  overflow: hidden;
}
/* Modo cotización: ocultar precios */
.product-miniature .product-price-and-shipping,
.product-miniature .price,
.product-miniature .regular-price,
.product-miniature .product-prices,
.product-miniature .price-detail-stocks {
  display: none !important;
}

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.product__product-name,
#product .h1, #product h1 {
  font-family: var(--font-display) !important;
  color: var(--tinta) !important;
  font-weight: 500;
}
.current-price, .product-prices, .product-price {
  display: none !important;  /* modo cotización */
}
.product-add-to-cart .add-to-cart {
  background-color: var(--olivo) !important;
  border-color: var(--olivo) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.product-add-to-cart .add-to-cart:hover {
  background-color: var(--bosque) !important;
  border-color: var(--bosque) !important;
  box-shadow: 0 6px 18px rgba(107,122,46,0.30);
}

/* ── CATEGORIA HEADER ────────────────────────────────────── */
#category h1, .page-header h1, .category-cover h1 {
  font-family: var(--font-display) !important;
  color: var(--bosque) !important;
  font-weight: 500;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  font-family: var(--font-body);
}
.breadcrumb a, .breadcrumb li { color: var(--muted) !important; }
.breadcrumb li.active { color: var(--olivo) !important; }

/* ── SEARCH ──────────────────────────────────────────────── */
#search_widget input[type=text] {
  background: #fff !important;
  border: 1px solid rgba(42,40,32,0.12) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
}
#search_widget button[type=submit] {
  background: var(--olivo) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
#footer, .footer-container,
.footer-container .links,
.footer-container .block-contact,
.footer-container .block_newsletter {
  background: var(--tinta) !important;
  color: var(--hueso) !important;
  border: none !important;
}
#footer h3, #footer h4, #footer .h3, #footer .h4,
.footer-container h3, .footer-container h4,
.footer-container .h3, .footer-container .h4 {
  color: var(--arcilla) !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#footer a, .footer-container a {
  color: rgba(247,244,237,0.75) !important;
}
#footer a:hover, .footer-container a:hover {
  color: var(--arcilla) !important;
}
#footer p, .footer-container p {
  color: rgba(247,244,237,0.60) !important;
}
.block_newsletter input[type=email] {
  background: #fff !important;
  border-radius: 999px !important;
  color: var(--tinta) !important;
}
.block_newsletter button {
  background: var(--olivo) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
}

/* ── HOME — sección destacados ───────────────────────────── */
#index .featured-products .h2,
#index .featured-products h2,
.featured-products .h2 {
  font-family: var(--font-display) !important;
  color: var(--bosque) !important;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.5px;
}

/* ── BLOCK WISHLIST (corazoncitos) — esconder por ahora ─── */
.product-miniature .wishlist-button-product,
.product-miniature .wishlist-button-add {
  background: rgba(247,244,237,0.92) !important;
  border-radius: 50% !important;
}

/* ── CART / FORMS ────────────────────────────────────────── */
.form-control, input.form-control, textarea.form-control, select.form-control {
  border-radius: 8px;
  border: 1px solid rgba(42,40,32,0.12);
  font-family: var(--font-body);
}
.form-control:focus {
  border-color: var(--olivo) !important;
  box-shadow: 0 0 0 3px rgba(107,122,46,0.15) !important;
}

/* ── HELPERS ─────────────────────────────────────────────── */
.text-olivo { color: var(--olivo) !important; }
.bg-hueso { background: var(--hueso) !important; }
.bg-tinta { background: var(--tinta) !important; color: var(--hueso) !important; }

/* ── MENU TOP — quitar fondo blanco que tapa el patrón ───── */
.js-top-menu, .top-menu, #_desktop_top_menu {
  background: transparent !important;
}

/* ── LOGO size — más legible ─────────────────────────────── */
.logo, #_desktop_logo img, .header-top .logo img {
  max-height: 80px !important;
  width: auto !important;
}

/* ============================================================
   FIX LAYOUT — grid de productos con flex (compatible Bootstrap)
   El grid del classic theme está roto en PS9, lo arreglo con flex
   ============================================================ */

.featured-products .products.row,
#products .products.row,
.product-list .products.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}

.featured-products .js-product.product,
#products .js-product.product,
.product-list .js-product.product,
.products > .js-product {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1199px) {
  .featured-products .js-product.product,
  #products .js-product.product,
  .product-list .js-product.product,
  .products > .js-product {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }
}

@media (max-width: 991px) {
  .featured-products .js-product.product,
  #products .js-product.product,
  .product-list .js-product.product,
  .products > .js-product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

@media (max-width: 575px) {
  .featured-products .js-product.product,
  #products .js-product.product,
  .product-list .js-product.product,
  .products > .js-product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* La card en sí — sin restricciones de ancho */
.product-miniature.js-product-miniature {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(42,40,32,0.06) !important;
  transition: transform .25s, box-shadow .25s !important;
  display: block !important;
}
.product-miniature.js-product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(42,40,32,0.14) !important;
}

/* Imagen del producto */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-top {
  width: 100% !important;
  position: relative !important;
}
.product-miniature .thumbnail-container .product-thumbnail {
  display: block !important;
  width: 100% !important;
}
.product-miniature .thumbnail-container picture,
.product-miniature .thumbnail-container picture img,
.product-miniature .thumbnail-container img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Texto debajo */
.product-miniature .product-description {
  padding: 16px 18px 18px !important;
  width: 100% !important;
}
.product-miniature .product-title {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
}
.product-miniature .product-title a {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.product-miniature .thumbnail-container .thumbnail-top { position: relative; }