/* ===== ELF Argentina - CSS custom ===== */

/* --- 1. Listado: card con borde verde --- */
body .single-product {
  border: 1px solid #c6e63a !important;
  border-radius: 6px !important;
}

/* --- 2. Listado: espaciados internos --- */
body .single-product .product-image {
  margin-bottom: 16px !important;
}
body .single-product .product-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
/* h5 vacío (solo espacios, por eso :empty no lo agarraba) */
body .single-product .product-info h5.title {
  display: none !important;
}
body .single-product .product-info .div-price {
  margin-top: 6px !important;
  padding: 0 !important;
}

/* --- 3. Listado: botonera fija abajo, solo VER DETALLE --- */
body .single-product .product-btn {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: 12px !important;
  background: none !important;
}
body .single-product .product-btn .consultar {
  display: none !important;
}
body .single-product:hover .product-image,
body .single-product:hover .product-info,
body .single-product:hover img,
body .single-product:hover .title,
body .single-product:hover .price {
  opacity: 1 !important;
  filter: none !important;
}

/* --- 4. Botones (listado + ficha de producto) --- */
body .product-btn .btn.btn-primary,
body .product-btn .btn.btn-outline-primary {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: filter .2s, background-color .2s, color .2s !important;
}

/* Verde (COMPRAR AHORA en ficha) */
body .product-btn .btn.btn-primary,
body .product-btn .btn.btn-primary:focus,
body .product-btn .btn.btn-primary:active {
  background: #c6e63a !important;
  border: 1px solid #c6e63a !important;
  color: #000 !important;
}
body .product-btn .btn.btn-primary:hover {
  background: #c6e63a !important;
  border-color: #c6e63a !important;
  color: #000 !important;
  filter: brightness(.92) !important;
}

/* Oscuro (AGREGAR AL CARRITO en ficha) */
body .product-btn .btn.btn-outline-primary,
body .product-btn .btn.btn-outline-primary:focus,
body .product-btn .btn.btn-outline-primary:active {
  background: #222328 !important;
  border: 1px solid #222328 !important;
  color: #c6e63a !important;
}
body .product-btn .btn.btn-outline-primary:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #c6e63a !important;
}

/* Listado: VER DETALLE con estilo verde (como CONSULTAR) */
body .single-product .product-btn .btn.btn-outline-primary,
body .single-product .product-btn .btn.btn-outline-primary:focus,
body .single-product .product-btn .btn.btn-outline-primary:active {
  background: #c6e63a !important;
  border: 1px solid #c6e63a !important;
  color: #000 !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  margin-top: 0 !important;
}
body .single-product .product-btn .btn.btn-outline-primary:hover {
  background: #c6e63a !important;
  border-color: #c6e63a !important;
  color: #000 !important;
  filter: brightness(.92) !important;
}

/* --- 5. Header más bajo (desktop): 100px -> 68px --- */
@media (min-width: 992px) {
  body nav.navbar.fixed-top { height: auto !important; }
  body nav.navbar.fixed-top .ss-desktop .header-row {
    height: 68px !important;
    padding: 8px 0 !important;
  }
  body nav.navbar.fixed-top .ss-desktop .header-row-content,
  body nav.navbar.fixed-top .ss-desktop .header-column {
    height: 52px !important;
  }
  body nav.navbar.fixed-top .ss-desktop .logo-header {
    height: 44px !important;
    width: auto !important;
  }
  body main { margin-top: 68px !important; }
}

/* --- 6. Home: productos destacados (slider) igual al listado --- */
body .slider-product-gallery .single-product {
  border: 1px solid #c6e63a !important;
  border-radius: 6px !important;
}
body .slider-product-gallery .single-product > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
body .slider-product-gallery .single-product .product-image {
  margin-bottom: 16px !important;
}
body .slider-product-gallery .single-product .product-info {
  justify-content: flex-start !important;
  min-height: 0 !important;
  margin-bottom: 12px !important;
}
body .slider-product-gallery .single-product .product-info .div-price {
  margin-top: 6px !important;
  padding: 0 !important;
}
/* Botón "VER DETALLE" (no existe en el HTML: se dibuja con CSS; toda la card ya es link) */
body .slider-product-gallery .single-product > a::after {
  content: "Ver detalle";
  display: block;
  margin-top: auto;
  padding: 7px 10px;
  background: #c6e63a;
  border: 1px solid #c6e63a;
  border-radius: 4px;
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  transition: filter .2s;
}
body .slider-product-gallery .single-product > a:hover::after {
  filter: brightness(.92);
}

/* --- 7. Card de producto: tipografía y espaciados (listado + home) --- */
body .single-product,
body .slider-product-gallery .single-product {
  padding: 20px !important;
}
body .single-product .product-image,
body .slider-product-gallery .single-product .product-image {
  margin-bottom: 20px !important;
}
/* Nombre */
body .single-product .product-info h4.title,
body .slider-product-gallery .single-product .product-info h4.title {
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: .2px !important;
  margin: 0 !important;
}
/* Precio */
body .single-product .product-info .div-price,
body .slider-product-gallery .single-product .product-info .div-price {
  margin-top: 8px !important;
  padding: 0 !important;
}
body .single-product .product-info .price,
body .slider-product-gallery .single-product .product-info .price {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -.2px !important;
}
/* Separación precio -> botón */
body .single-product .product-btn {
  margin-top: 18px !important;
}
body .slider-product-gallery .single-product .product-info {
  margin-bottom: 18px !important;
}
/* Botón un poco más aireado */
body .single-product .product-btn .btn.btn-outline-primary,
body .slider-product-gallery .single-product > a::after {
  padding: 9px 12px !important;
}

/* --- 8. Home: banners con "VER MÁS" --- */
/* El tamaño se calcula según el ancho del banner (container queries), no de la ventana */
body .ssc-col:has(> .ssc-flex > a.btn.ss-btn-md) {
  container-type: inline-size;
}
/* Espaciado arriba/abajo y entre título y botón */
body .ssc-flex:has(> a.btn.ss-btn-md) {
  padding: clamp(24px, 7cqi, 48px) 16px !important;
  gap: clamp(12px, 3cqi, 20px) !important;
}
/* Título responsive: 22px en mobile -> 36px máx */
body .ssc-flex:has(> a.btn.ss-btn-md) > p,
body .ssc-flex:has(> a.btn.ss-btn-md) > p span {
  font-size: clamp(22px, 6cqi, 36px) !important;
  line-height: 1.15 !important;
  letter-spacing: .5px !important;
  text-align: center !important;
}
/* Botón VER MÁS = mismo estilo que los botones de producto */
body a.btn.ss-btn-md {
  background: #c6e63a !important;
  border: 1px solid #c6e63a !important;
  color: #000 !important;
  border-radius: 4px !important;
  padding: 9px 28px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: filter .2s !important;
}
body a.btn.ss-btn-md,
body a.btn.ss-btn-md * {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: #000 !important;
  margin: 0 !important;
}
body a.btn.ss-btn-md:hover {
  filter: brightness(.92) !important;
}

/* --- 9. Home: categorías con círculo (URBANAS, VALIJAS, CON CARRO...) --- */
/* El texto escala con el ancho de cada columna = tamaño del círculo */
body .ssc-col:has(> .ssc-flex > a.ss-image-link) {
  container-type: inline-size;
}
body .ssc-flex:has(> a.ss-image-link) > .ss-separator {
  height: clamp(8px, 7cqi, 14px) !important;
}
body .ssc-flex:has(> a.ss-image-link) > p,
body .ssc-flex:has(> a.ss-image-link) > p * {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(12px, 11cqi, 20px) !important; /* círculo 165px -> 18px */
  line-height: 1.2 !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
}
body .ssc-flex:has(> a.ss-image-link) > p {
  text-align: center !important;
  width: 100% !important;
}

/* --- 10. Card de producto: refinamiento final (pisa la sección 7) --- */
/* El tema fija un min-height en .product-info que no se deja pisar:
   con display:contents la caja desaparece y se va el espacio vacío */
body .single-product .product-info,
body .slider-product-gallery .single-product .product-info {
  display: contents !important;
}
body .single-product,
body .slider-product-gallery .single-product {
  padding: 16px 16px 18px !important;
}
body .single-product .product-image,
body .slider-product-gallery .single-product .product-image {
  margin-bottom: 16px !important;
}
body .slider-product-gallery .single-product > a {
  height: auto !important;
}
/* Nombre: liviano y discreto */
body .single-product .product-info h4.title,
body .slider-product-gallery .single-product .product-info h4.title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .1px !important;
  color: #55575d !important;
}
/* Precio: protagonista pero no pesado */
body .single-product .product-info .div-price,
body .slider-product-gallery .single-product .product-info .div-price {
  margin-top: 4px !important;
  padding: 0 !important;
}
body .single-product .product-info .price,
body .slider-product-gallery .single-product .product-info .price {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.3px !important;
  color: #222328 !important;
}
/* Precio -> botón: 14px */
body .single-product .product-btn {
  margin-top: 14px !important;
}
body .slider-product-gallery .single-product > a::after {
  margin-top: 14px !important;
}
body .single-product .product-btn .btn.btn-outline-primary,
body .slider-product-gallery .single-product > a::after {
  font-size: 11.5px !important;
  padding: 8px 12px !important;
}

/* --- 11. Card de producto: balance de textos (pisa la sección 10) --- */
/* Nombre y precio alineados a la izquierda, mismo eje que el botón */
body .single-product .product-info h4.title,
body .slider-product-gallery .single-product .product-info h4.title {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #3a3c42 !important;
  text-align: left !important;
  align-self: stretch !important;
}
body .single-product .product-info .div-price,
body .slider-product-gallery .single-product .product-info .div-price {
  margin-top: 6px !important;
  text-align: left !important;
  align-self: stretch !important;
}
body .single-product .product-info .price,
body .slider-product-gallery .single-product .product-info .price {
  font-size: 21px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
  text-align: left !important;
}
body .single-product .product-btn,
body .slider-product-gallery .single-product > a::after {
  margin-top: 16px !important;
}
body .single-product .product-btn .btn.btn-outline-primary,
body .slider-product-gallery .single-product > a::after {
  font-size: 12px !important;
  padding: 9px 12px !important;
}

/* --- 12. Imágenes de producto más altas --- */
/* Las fotos son verticales (2:3); el tema las limitaba con max-height */
body .single-product .product-image {
  height: clamp(240px, 24vw, 290px) !important;
  max-height: none !important;
}
body .slider-product-gallery .single-product .product-image {
  height: clamp(220px, 22vw, 260px) !important;
  max-height: none !important;
}
body .single-product .product-image img,
body .slider-product-gallery .single-product .product-image img {
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* --- 13. Home: efectos hover (mismo criterio que los botones de producto) --- */
body a.productos-destacados,
body a.btn.ss-btn-md,
body .ssc-flex:has(> a.ss-image-link) > a.ss-image-link img,
body .ssc-flex:has(> a.ss-image-link) > p a,
body .slider-product-gallery .single-product > a::after {
  transition: filter .2s ease !important;
  cursor: pointer;
}
/* Pill "Productos destacados" (fondo oscuro: se aclara, si se oscureciera no se notaría) */
body a.productos-destacados:hover {
  filter: brightness(1.35) !important;
}
/* VER MÁS y VER DETALLE: bajan un poco el brillo */
body a.btn.ss-btn-md:hover,
body .slider-product-gallery .single-product > a:hover::after {
  filter: brightness(.92) !important;
}
/* Categorías con círculo: al pasar por el círculo o el texto, se oscurecen ambos */
body .ssc-flex:has(> a.ss-image-link):hover > a.ss-image-link img,
body .ssc-flex:has(> a.ss-image-link):hover > p a {
  filter: brightness(.92) !important;
}