/* ============================================
   DAMMI DI PIÙ — Custom CSS
   PrestaShop 8 · Child Theme
   
   Colores:
   - Azul:       #2c3e50
   - Beige:      #eadbcb
   - Café:       #654a39
   - Blanco:     #f5efe9
   - Beige claro:#f0e6da
   ============================================ */


/* Cuerpo: Lato (Google) — el @import debe ir antes del resto de reglas */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ------------------------------------------
   0. FUENTES locales (Degalena)
   ------------------------------------------ */

@font-face {
  font-family: 'Degalena';
  src: url('../fonts/Degalena-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Degalena';
  src: url('../fonts/Degalena-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Degalena solo trae peso 400 (Regular/Italic). Si pides 700, el navegador inventa
 * negrita (faux bold) y suele verse como trazo doble o “borde” raro → usamos 400 real.
 */


/* ------------------------------------------
   1. BASE / GLOBAL
   ------------------------------------------ */

body {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5efe9;
  color: #654a39;
}

/* Classic fuerza #f6f6f6 en #wrapper → franja distinta al body */
#wrapper {
  background-color: #f5efe9;
}

/* Títulos con fuente serif */
h1, h2, h3,
.h1, .h2, .h3 {
  font-family: 'Degalena', Georgia, serif;
  color: #2c3e50;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.02em;
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-family: 'Lato', Arial, sans-serif;
  color: #654a39;
  font-weight: 700;
}

/* Links */
a {
  color: #2c3e50;
  transition: color 0.2s ease;
}
a:hover {
  color: #654a39;
  text-decoration: none;
}

/* Selección de texto */
::selection {
  background-color: #2c3e50;
  color: #eadbcb;
}


/* ------------------------------------------
   2. HEADER
   ------------------------------------------ */

#header {
  background-color: #2c3e50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Barra superior (contacto, idioma, moneda) */
.header-nav {
  background-color: #243342 !important;
  border-bottom: 1px solid rgba(234, 219, 203, 0.1);
  color: #eadbcb;
}
.header-nav a,
.header-nav .material-icons {
  color: #eadbcb;
}
.header-nav a:hover {
  color: #fff;
}

/* Zona del logo */
.header-top {
  background-color: #2c3e50;
  padding: 1rem 0;
}
.header-top .logo {
  max-height: 65px;
}

/* Iconos del header (carrito, usuario) */
.header-top a,
.header-top .material-icons {
  color: #eadbcb;
}
.header-top a:hover {
  color: #fff;
}

/* Contador del carrito */
.blockcart .cart-products-count {
  background-color: #654a39;
  color: #eadbcb;
}


/* ------------------------------------------
   3. BARRA DE BÚSQUEDA
   ------------------------------------------ */

#search_widget input[type="text"] {
  background-color: rgba(234, 219, 203, 0.15);
  border: 1px solid rgba(234, 219, 203, 0.3);
  color: #eadbcb;
  border-radius: 25px;
}
#search_widget input[type="text"]::placeholder {
  color: rgba(234, 219, 203, 0.6);
}
#search_widget input[type="text"]:focus {
  background-color: rgba(234, 219, 203, 0.25);
  border-color: #eadbcb;
  box-shadow: none;
}
#search_widget button {
  color: #eadbcb;
}

/* Asegura contraste del icono/botón en hover/focus */
#search_widget button:hover,
#search_widget button:focus {
  color: #fff;
}


/* ------------------------------------------
   4. MENÚ DE NAVEGACIÓN
   ------------------------------------------ */

/*
 * El fondo del bloque ya es #2c3e50 (#header / .header-top): no hace falta repetirlo
 * en cada <a> (Classic lo deja como “caja” más baja que la barra y se ve desalineado).
 * Classic también pone border-bottom #f6f6f6 en data-depth="0" → línea rara sobre azul.
 */
#header .header-top #_desktop_top_menu .top-menu > li > a[data-depth="0"],
#_desktop_top_menu .top-menu > li > a {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: #eadbcb;
  background-color: transparent;
  border-bottom: none !important;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  padding: 0.75rem 1rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li > a.active {
  color: #fff;
  background-color: rgba(234, 219, 203, 0.12);
}

/* Mejor foco visible (accesibilidad) en header/menú */
#_desktop_top_menu .top-menu > li > a:focus-visible,
.header-nav a:focus-visible,
.header-top a:focus-visible {
  outline: 2px solid rgba(234, 219, 203, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Submenú dropdown (mismo azul que la barra principal) */
.top-menu .sub-menu {
  background-color: #2c3e50;
  border: 1px solid rgba(234, 219, 203, 0.2);
  border-top: 3px solid #eadbcb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 10px 0 0 0;
}

.top-menu .sub-menu li > a {
  background-color: #2c3e50;
  color: #eadbcb !important;
  border-bottom: 1px solid rgba(234, 219, 203, 0.15) !important;
}

.top-menu .sub-menu li > a:hover,
.top-menu .sub-menu li > a:focus {
  color: #fff !important;
  background-color: rgba(234, 219, 203, 0.12) !important;
}

/* Classic pone float:left en depth 1 → ítems en fila; columna vertical */
.top-menu .sub-menu ul[data-depth="1"] > li {
  float: none;
  margin-left: 0;
  margin-right: 0;
}


/* ------------------------------------------
   5. BOTONES
   ------------------------------------------ */

/* Botón primario */
.btn-primary {
  background-color: #2c3e50;
  border-color: #2c3e50;
  color: #eadbcb;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1a2a38;
  border-color: #1a2a38;
  color: #fff;
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

/* Botón secundario / outline */
.btn-secondary,
.btn-outline-primary {
  background-color: transparent;
  border: 2px solid #2c3e50;
  color: #2c3e50;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
}
.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: #2c3e50;
  color: #eadbcb;
}

/* Botón "Añadir al carrito" */
.add-to-cart {
  background-color: #654a39;
  border-color: #654a39;
  color: #eadbcb;
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.add-to-cart:hover {
  background-color: #4e3828;
  border-color: #4e3828;
  color: #fff;
  box-shadow: 0 4px 12px rgba(101, 74, 57, 0.3);
}


/* ------------------------------------------
   6. CARDS DE PRODUCTO (Listado)
   ------------------------------------------ */

.product-miniature {
  background-color: #f5efe9;
  border: 1px solid #f0e6da;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(44, 62, 80, 0.08);
}

/* Imagen del producto */
.product-miniature .thumbnail-container {
  background-color: #eadbcb;
}

/* Zona de info */
.product-miniature .product-description {
  padding: 1rem;
}

/* Nombre del producto */
.product-miniature .product-title a {
  font-family: 'Degalena', Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
  color: #2c3e50;
  font-size: 1.05rem;
}
.product-miniature .product-title a:hover {
  color: #654a39;
}

/* Precio */
.product-miniature .product-price-and-shipping .price,
.product-miniature .price {
  font-family: 'Degalena', Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
  color: #2c3e50;
  font-size: 1.25rem;
}

/* Precio tachado (descuento) */
.product-miniature .regular-price {
  color: #8b7565;
  text-decoration: line-through;
}

/* Badges */
.product-flag.discount,
.discount-percentage,
.discount-amount,
.product-flag.on-sale {
  background-color: #654a39;
  color: #eadbcb;
}
.product-flag.new {
  background-color: #2c3e50;
  color: #eadbcb;
}

/* Espacio entre tarjetas en listados (Classic usa flex en .products) */
@media (max-width: 991px) {
  #products .products,
  .featured-products .products,
  .product-accessories .products {
    row-gap: 1rem;
    column-gap: 0.75rem;
  }
}

@media (max-width: 575px) {
  #products .products,
  .featured-products .products,
  .product-accessories .products {
    row-gap: 1.25rem;
  }
}


/* ------------------------------------------
   7. PÁGINA DE PRODUCTO (Detalle)
   ------------------------------------------ */

/* Imagen principal */
.product-cover {
  background-color: #eadbcb;
  border-radius: 8px;
  overflow: hidden;
}

/* Miniaturas */
.product-thumbs .thumb-container {
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
}
.product-thumbs .thumb-container.selected,
.product-thumbs .thumb-container:hover {
  border-color: #2c3e50;
}

/* Nombre del producto */
h1.product-detail-name,
.h1.product-detail-name {
  font-family: 'Degalena', Georgia, serif;
  color: #2c3e50;
  font-size: 2rem;
  font-weight: 400;
  font-synthesis: none;
}

/* Precio grande */
.product-prices .current-price .price,
.product-prices .current-price span[itemprop="price"] {
  font-family: 'Degalena', Georgia, serif;
  font-size: 2rem;
  color: #2c3e50;
  font-weight: 400;
  font-synthesis: none;
}

/* Descripción */
.product-description {
  color: #654a39;
  line-height: 1.7;
}

/* Tabs de información */
.product-tabs .nav-tabs {
  border-bottom: 2px solid #eadbcb;
}
.product-tabs .nav-tabs .nav-link {
  font-weight: 700;
  color: #8b7565;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.product-tabs .nav-tabs .nav-link.active {
  color: #2c3e50;
  border-bottom: 3px solid #2c3e50;
  background: transparent;
}

/* Selector de cantidad */
.product-quantity .qty .input-group .form-control {
  border-color: #eadbcb;
  color: #2c3e50;
  font-weight: 700;
}
.product-quantity .qty .input-group .btn {
  border-color: #eadbcb;
  color: #2c3e50;
}
.product-quantity .qty .input-group .btn:hover {
  background-color: #eadbcb;
}


/* ------------------------------------------
   8. CHECKOUT (Proceso de Compra)
   ------------------------------------------ */

.checkout-step {
  border: 1px solid #eadbcb;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  background-color: #f5efe9;
}

.checkout-step .step-title {
  font-family: 'Degalena', Georgia, serif;
  color: #2c3e50;
  font-weight: 400;
  font-synthesis: none;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eadbcb;
}

.checkout-step .step-number {
  background-color: #2c3e50;
  color: #eadbcb;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 0.75rem;
}

/* Step activo */
.checkout-step.-current {
  border-color: #2c3e50;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.1);
}

/* Step completado */
.checkout-step.-complete .step-title {
  color: #654a39;
  opacity: 0.7;
}

/* Resumen del carrito en checkout */
.cart-summary {
  background-color: #eadbcb;
  border-radius: 8px;
  padding: 1.5rem;
}
.cart-summary .cart-summary-line .value {
  font-weight: 700;
  color: #2c3e50;
}
.cart-summary .cart-total {
  font-family: 'Degalena', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  font-synthesis: none;
  border-top: 2px solid #2c3e50;
  padding-top: 1rem;
}


/* ------------------------------------------
   9. FORMULARIOS
   ------------------------------------------ */

.form-control {
  border-color: #f0e6da;
  background-color: #fff;
  color: #654a39;
  border-radius: 4px;
}
.form-control:focus {
  border-color: #2c3e50;
  box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.15);
}

label {
  color: #654a39;
  font-weight: 700;
  font-size: 0.9rem;
}


/* ------------------------------------------
   10. BREADCRUMB
   ------------------------------------------ */

.breadcrumb {
  background-color: #f0e6da;
  border-radius: 4px;
  padding: 0.75rem 1rem;
}
.breadcrumb li a {
  color: #654a39;
}
.breadcrumb li.active {
  color: #2c3e50;
  font-weight: 700;
}
.breadcrumb li::after {
  color: #8b7565;
}

/* Sidebar: bloque de categorías (Classic suele usar #fff) */
.block-categories {
  padding: 1.563rem 1.25rem;
  margin-bottom: 1.563rem;
  background-color: #f5efe9;
  border: 1px solid #f0e6da;
  border-radius: 8px;
}

/* Listado categoría: bloque de subcategorías */
#subcategories {
  margin-bottom: 20px;
  border-top: none;
}

/* Miniaturas en subcategorías (ocultas si no se usan) */
#subcategories ul li .subcategory-image {
  padding: 0 0 8px;
  display: none;
}

/* Descripción de categoría: tipografía y azul marca (#2c3e50), sobre Classic #232323 */
.block-category .block-category-inner #category-description p,
.block-category .block-category-inner #category-description .page-content.page-cms ul,
.page-content.page-cms .block-category .block-category-inner #category-description ul,
.block-category-inner #category-description p {
  font-weight: 400;
  margin-bottom: 0;
  color: #2c3e50 !important;
  word-break: break-word;
}


/* ------------------------------------------
   11. PAGINACIÓN
   ------------------------------------------ */

.pagination .page-link {
  color: #2c3e50;
  border-color: #f0e6da;
  background-color: #f5efe9;
}
.pagination .page-link:hover {
  background-color: #eadbcb;
  border-color: #eadbcb;
  color: #2c3e50;
}
.pagination .page-item.active .page-link {
  background-color: #2c3e50;
  border-color: #2c3e50;
  color: #eadbcb;
}


/* ------------------------------------------
   12. FOOTER
   ------------------------------------------ */

#footer {
  background-color: #2c3e50;
  color: #eadbcb;
}

#footer .footer-container {
  padding: 3rem 0 1.5rem;
}

/* Títulos del footer */
#footer h4,
#footer .h4 {
  font-family: 'Degalena', Georgia, serif;
  color: #eadbcb;
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Links del footer */
#footer a {
  color: rgba(234, 219, 203, 0.8);
  transition: color 0.2s ease;
}
#footer a:hover {
  color: #fff;
}

/* Copyright */
.footer-after {
  background-color: #243342;
  border-top: 1px solid rgba(234, 219, 203, 0.1);
  padding: 1rem 0;
  font-size: 0.85rem;
  color: rgba(234, 219, 203, 0.6);
}


/* ------------------------------------------
   13. ALERTAS Y NOTIFICACIONES
   ------------------------------------------ */

.alert-success {
  background-color: rgba(74, 140, 92, 0.1);
  border-color: #4a8c5c;
  color: #4a8c5c;
}
.alert-warning {
  background-color: rgba(212, 145, 74, 0.1);
  border-color: #d4914a;
  color: #654a39;
}
.alert-danger {
  background-color: rgba(192, 57, 43, 0.1);
  border-color: #c0392b;
  color: #c0392b;
}
.alert-info {
  background-color: rgba(44, 62, 80, 0.08);
  border-color: #2c3e50;
  color: #2c3e50;
}


/* ------------------------------------------
   14. MISCELÁNEOS
   ------------------------------------------ */

/* Separador decorativo (rayas de la marca) */
.dammi-divider {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #2c3e50 0,
    #2c3e50 8px,
    #eadbcb 8px,
    #eadbcb 16px
  );
  margin: 2rem 0;
  border-radius: 2px;
}

/* Cards genéricas */
.card {
  background-color: #f5efe9;
  border-color: #f0e6da;
  border-radius: 8px;
}
.card-header {
  background-color: #eadbcb;
  border-bottom-color: #f0e6da;
}

/* Tabla genérica */
.table thead th {
  background-color: #2c3e50;
  color: #eadbcb;
  border-color: #2c3e50;
  font-weight: 700;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(234, 219, 203, 0.3);
}
.table td,
.table th {
  border-color: #f0e6da;
}

/* Spinner / loading */
.spinner-border {
  color: #2c3e50;
}

/* Selección en dropdown / select */
select.form-control {
  border-color: #f0e6da;
  color: #654a39;
}


/* ------------------------------------------
   15. RESPONSIVE TWEAKS
   ------------------------------------------ */

@media (max-width: 767px) {
  /* Panel menú hamburguesa: mismo azul y enlaces que escritorio */
  #mobile_top_menu_wrapper {
    padding: 15px;
    background-color: #2c3e50 !important;
  }

  #mobile_top_menu_wrapper .top-menu {
    color: #eadbcb !important;
  }

  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    color: #eadbcb !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(234, 219, 203, 0.15) !important;
  }

  #mobile_top_menu_wrapper .top-menu .sub-menu {
    background-color: #2c3e50 !important;
    box-shadow: none !important;
  }

  #mobile_top_menu_wrapper .top-menu .sub-menu li > a {
    background-color: #2c3e50 !important;
    color: #eadbcb !important;
    border-bottom: 1px solid rgba(234, 219, 203, 0.15) !important;
  }

  #mobile_top_menu_wrapper .top-menu .sub-menu li > a:hover,
  #mobile_top_menu_wrapper .top-menu .sub-menu li > a:focus {
    color: #fff !important;
    background-color: rgba(234, 219, 203, 0.12) !important;
  }

  #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="0"] > li {
    border-bottom-color: rgba(234, 219, 203, 0.2) !important;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom a {
    color: #eadbcb !important;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom a:hover {
    color: #fff !important;
  }

  #mobile_top_menu_wrapper .collapse-icons .material-icons {
    color: #eadbcb;
  }

  /* Header mobile más compacto */
  .header-top .logo {
    max-height: 45px;
  }

  /* Producto título más pequeño en mobile */
  h1.product-detail-name,
  .h1.product-detail-name {
    font-size: 1.5rem;
  }

  /* Precio mobile */
  .product-prices .current-price .price {
    font-size: 1.5rem;
  }

  /* Footer padding */
  #footer .footer-container {
    padding: 2rem 0 1rem;
  }

  /* Anula fondo gris del acordeón de enlaces (Classic); sin fondo queda alineado al resto del footer */
  .footer-container .links ul {
    margin-bottom: 0;
    background-color: transparent !important;
  }
}


/* ------------------------------------------
   16. FIXES (Classic/PS8 overrides)
   ------------------------------------------ */

/* Evita deformación del logo por width/height inline */
#header #_desktop_logo img,
#header .logo img,
#header img.logo {
  width: auto !important;
  height: auto !important;
  max-height: 65px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  #header #_desktop_logo img,
  #header .logo img,
  #header img.logo {
    max-height: 45px;
    max-width: 180px;
  }
}

/* Unifica bloques del header (carrito/usuario/idioma/moneda) para evitar “parches” claros */
#header .header-nav .blockcart,
#header .header-nav .user-info,
#header .header-nav .currency-selector,
#header .header-nav .language-selector,
#header .header-nav .cart-preview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Chip suave para el carrito en header-nav */
#header .header-nav .blockcart {
  background: rgba(234, 219, 203, 0.10) !important;
}

/* Afinado de contraste: textos del header-nav y contador */
#header .header-nav,
#header .header-nav a,
#header .header-nav .material-icons {
  color: #eadbcb !important;
}
#header .header-nav a:hover,
#header .header-nav a:focus {
  color: #fff !important;
}

#header .header-nav .blockcart a {
  color: #eadbcb !important;
}
#header .header-nav .blockcart a:hover,
#header .header-nav .blockcart a:focus {
  color: #fff !important;
}

/* Conteo del carrito: más contraste sobre fondo beige */
#header .blockcart .cart-products-count {
  background-color: #654a39 !important;
  color: #f5efe9 !important;
}


/* ------------------------------------------
   17. Ajustes puntuales Dammi
   ------------------------------------------ */

/* Títulos de bloques de cuenta / información */
.myaccount-title.h3.hidden-sm-down a,
.h3.hidden-sm-down {
  color: #eadbcb !important;
}

/* Refuerzo por si están en footer */
#footer .h3,
#footer h3 {
  color: #eadbcb !important;
}

/* Recolocar iconos de búsqueda para que no tapen el texto */
#search_widget.search-widgets {
  position: relative;
}

#search_widget .material-icons.search {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

#search_widget .material-icons.clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Menú principal: items de primer nivel en beige (refuerzo frente a Classic) */
#top-menu > li > a,
#top-menu > li > a.dropdown-item {
  color: #eadbcb !important;
  border-bottom: none !important;
  text-shadow: none;
}

#top-menu > li > a:hover,
#top-menu > li > a:focus,
#top-menu > li > a.dropdown-item:hover,
#top-menu > li > a.dropdown-item:focus {
  color: #ffffff !important;
  background-color: rgba(234, 219, 203, 0.12);
}

/* Ocultar texto de crédito de PrestaShop en el footer */
.footer-after p.text-sm-center {
  display: none !important;
}

#search_widget form {
  position: relative;
}

#search_widget form i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  line-height: 1;
  z-index: 2;
}

#search_widget form input[type="text"] {
  padding-left: 40px;
}

#footer .text-sm-center {
  display: none !important;
}