/* ===========================================================
   LA ESTEPEÑA — Tema PrestaShop (capa de identidad)
   Sobrescribe el tema classic. Paleta granate / crema / dorado.
   =========================================================== */
:root {
  --granate: #6e1423;
  --granate-oscuro: #4a0e18;
  --rosa: #e9c9c5;
  --rosa-claro: #f6e6e3;
  --crema: #faf5ee;
  --crema-papel: #f3ead9;
  --dorado: #b08a3e;
  --tinta: #2a1417;
  --gris: #8a7a75;
  --linea: #e6d9c9;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Cormorant SC", "Cormorant Garamond", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--crema);
  font-weight: 300;
  letter-spacing: .01em;
}
#wrapper { background: var(--crema); }
.page-content, #content-wrapper { background: transparent; }

h1, h2, h3, h4, .h1, .h2, .h3 { font-family: var(--serif); color: var(--granate-oscuro); font-weight: 500; }
a { color: var(--granate); }
a:hover { color: var(--granate-oscuro); text-decoration: none; }

/* ---------- Botones ---------- */
.btn-primary,
.btn-secondary,
.btn-tertiary,
button.btn-primary,
.product-add-to-cart .add-to-cart,
.btn.btn-primary {
  background: var(--granate);
  border-color: var(--granate);
  color: #fff;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  border-radius: 0;
  padding: 13px 26px;
  transition: background .25s ease, color .25s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.product-add-to-cart .add-to-cart:hover,
.btn.btn-primary:hover {
  background: var(--granate-oscuro);
  border-color: var(--granate-oscuro);
  color: #fff;
}
.btn-secondary,
.btn-tertiary {
  background: transparent;
  color: var(--granate);
  border: 1px solid var(--granate);
}
.btn-secondary:hover { background: var(--granate); color: #fff; }

/* ---------- Barra de aviso superior ---------- */
.barra-aviso {
  background: var(--granate);
  color: var(--crema);
  text-align: center;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 16px;
  font-weight: 400;
}
.barra-aviso a { color: #fff; text-decoration: underline; }

/* ---------- Cabecera ---------- */
#header {
  background: var(--crema);
  box-shadow: 0 1px 0 var(--linea);
  color: var(--tinta);
}
#header .header-nav {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  color: var(--gris);
  min-height: 0;
}
#header .header-nav a,
#header .header-top a { color: var(--tinta); }
#header .header-nav a:hover { color: var(--granate); }
#header .header-top { padding: 14px 0; }
#_desktop_logo img,
.logo { max-height: 64px; width: auto; }

/* Menú principal */
#_desktop_top_menu .top-menu a.dropdown-item,
#_desktop_top_menu .top-menu .sub-menu a,
.top-menu .top-menu-bottom a { color: var(--tinta); }
#_desktop_top_menu .top-menu > li > a {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  font-weight: 400;
  color: var(--tinta);
}
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li.active > a { color: var(--granate); }
.menu .sub-menu { border-top: 2px solid var(--granate); }

/* Iconos cabecera (buscar, usuario, carrito) */
#header .material-icons,
.blockcart .material-icons,
.user-info .material-icons { color: var(--granate); }
.blockcart.active { background: transparent; }
.cart-products-count {
  background: var(--granate);
  color: #fff;
}

/* Buscador */
.header-top .search-widget form input[type=text] {
  border: 1px solid var(--linea);
  border-radius: 0;
  background: #fff;
}
.header-top .search-widget form button[type=submit] { color: var(--granate); }

/* ---------- Pie ---------- */
#footer {
  background: var(--granate);
  color: var(--crema);
  padding-top: 56px;
}
#footer a, #footer .h3, #footer h3, #footer li a { color: var(--crema); }
#footer a:hover { color: #fff; text-decoration: underline; }
#footer .h3, #footer .title-block, #footer h3 {
  font-family: var(--serif);
  font-style: italic;
  color: #fff;
  text-transform: none;
  letter-spacing: .02em;
}
.footer-container { background: transparent; box-shadow: none; margin-top: 0; }
.footer-container li a { opacity: .9; }
#footer .links .collapse { display: block; }

/* Newsletter del footer */
.block-contact, .blockreassurance { color: inherit; }

/* ---------- Bloque de "reassurance" (beneficios) ---------- */
.blockreassurance .block-title { color: var(--granate-oscuro); font-family: var(--serif); }

/* ---------- Tarjetas de producto ---------- */
.product-miniature .thumbnail-container,
.product-miniature .card {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-miniature img { border-radius: 0; }
.product-title, .product-miniature .product-title a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--granate-oscuro);
  text-transform: none;
  letter-spacing: 0;
}
.product-price-and-shipping .price,
.product-miniature .price,
.product-prices .current-price .price {
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 500;
}

/* ---------- Encabezado de página / categoría ---------- */
#category #left-column, #category .block-category {
  background: var(--crema);
}
.page-header h1, #main .page-header h1, .h1.page-title {
  font-family: var(--serif);
  font-style: italic;
  color: var(--granate-oscuro);
}

/* ---------- Misc ---------- */
.breadcrumb a, .breadcrumb li::after { color: var(--gris); }
hr { border-color: var(--linea); }
.card { border-color: var(--linea); border-radius: 0; }

/* ===========================================================
   HOME a medida — romper contenedor classic y maquetar widgets
   =========================================================== */
body#index #wrapper { padding: 0; background: var(--crema); }
body#index #wrapper > .container { max-width: none; width: 100%; padding: 0; margin: 0; }
body#index #main { width: 100%; max-width: none; padding: 0; margin: 0; float: none; }
body#index #content-wrapper { width: 100%; max-width: none; padding: 0; margin: 0; float: none; }
body#index #content.page-home { padding: 0; box-shadow: none; border: none; background: transparent; }
body#index .laestepena-home { background: var(--crema); }
body#index .breadcrumb { display: none; }

/* títulos y enlaces propios de los módulos de producto: ocultar */
.home-productos .products-section-title,
.home-productos .section-title,
.home-productos > h2,
.home-productos .h2 { display: none !important; }
.home-productos .all-product-link,
.home-productos .featured-products .all-product-link { display: none !important; }

/* rejilla de productos al estilo del diseño */
.home-productos .featured-products,
.home-productos .products { margin: 0; }
.home-productos .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
}
.home-productos .product-miniature,
.home-productos .js-product-miniature { width: auto; max-width: none; margin: 0; padding: 0; }
.home-productos .thumbnail-container,
.home-productos .product-miniature .card {
  box-shadow: none; border: none; background: #fff; width: auto; height: auto; border-radius: 0;
}
.home-productos .thumbnail-container:hover { box-shadow: 0 18px 40px rgba(74,14,24,.10); }
.home-productos .product-thumbnail { display: block; }
.home-productos .product-thumbnail img { width: 100%; height: auto; border-radius: 0; }
.home-productos .product-description { padding: 14px 10px 22px; text-align: center; }
.home-productos .product-title { font-family: var(--serif); font-style: italic; font-size: 1.18rem; margin: 6px 0; }
.home-productos .product-title a { color: var(--granate-oscuro); }
.home-productos .product-price-and-shipping { text-align: center; }
.home-productos .price { color: var(--tinta); font-family: var(--serif); font-weight: 500; font-size: 1.05rem; }
.home-productos .highlighted-informations,
.home-productos .variant-links { display: none; }

@media (max-width: 960px) { .home-productos .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-productos .products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }