@import url("./assets/css/vendor/bootstrap.min.css");
@import url("./assets/css/vendor/slick-slider.css");
@import url("./assets/css/app.css");

/* Evita flash de productos sin filtrar al volver desde detalle */
.js-shop-loading .product_list_wrapper,
.js-shop-loading .featured-product-sec {
  opacity: 0;
}

.product_list_wrapper,
.featured-product-sec {
  transition: opacity 0.2s ease;
}

/* Evita flash de contenido estático al navegar entre productos */
.js-product-loading .shop-detail,
.js-product-loading .product-description {
  visibility: hidden;
}

/* Typography alignment with index.html (global body font) */
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Override template font (Bai Jamjuree) for textual UI only */
.product_list_wrapper h1,
.product_list_wrapper h2,
.product_list_wrapper h3,
.product_list_wrapper h4,
.product_list_wrapper h5,
.product_list_wrapper h6,
.product_list_wrapper p,
.product_list_wrapper a,
.product_list_wrapper button,
.product_list_wrapper li,
.product_list_wrapper span,
.featured-product-sec h1,
.featured-product-sec h2,
.featured-product-sec h3,
.featured-product-sec h4,
.featured-product-sec h5,
.featured-product-sec h6,
.featured-product-sec p,
.featured-product-sec a,
.featured-product-sec button,
.featured-product-sec li,
.featured-product-sec span,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer p,
.footer a,
.footer button,
.footer li,
.footer span{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* =========================================================
   Quick View (Ojo) - siempre visible (sin hover)
   Mantiene el diseño original: solo anulamos la lógica de
   "ocultar hasta hover" del template.
   ========================================================= */
.featured-product-card .image-box .side-icons ul {
  right: 0;
  background: rgba(255, 255, 255, 0.6);
  padding: 6px;
  transition: all 0.5s ease-in-out;
  border-radius: 5px;
}

.featured-product-card .image-box .side-icons ul li {
  transform: none;
  transition: 0.5s;
  opacity: 1;
  visibility: visible;
}

/* Product detail gallery sizing (match template behavior) */
.product-image-container {
  display: flex;
  gap: 20px;
}

.product-slider-asnav {
  display: flex;
  flex-direction: row;
  gap: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-slider-asnav::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.product-slider-asnav .nav-image {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.product-slider-asnav .nav-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-slider-asnav .nav-image.is-active {
  border-color: #198754;
}

.product-slider .detail-image {
  max-height: 500px;
  overflow: hidden;
}

.product-slider .detail-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* iPhone 12 Pro Max: imagen principal un poco más grande y anclada abajo del cuadro */
html[data-product-id="iphone-12-pro-max"] .product-slider .detail-image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 520px;
  max-height: none;
  padding-bottom: 52px;
  box-sizing: border-box;
  overflow: visible;
}

html[data-product-id="iphone-12-pro-max"] .product-slider .detail-image img {
  width: auto !important;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.12);
  transform-origin: center bottom;
}

/* Solo negro (1.png): encuadre distinto sin tocar azul/blanco */
html[data-product-id="iphone-12-pro-max"] .product-slider .detail-image.detail-image--pro-max-black {
  padding-top: 8px;
}

html[data-product-id="iphone-12-pro-max"] .product-slider .detail-image.detail-image--pro-max-black img {
  object-position: center 62%;
  transform: scale(1.1) translateY(32px);
  transform-origin: center bottom;
  max-height: 480px;
}

html[data-product-id="iphone-12-pro-max"] .product-slider-asnav .nav-image.nav-image--pro-max-black img {
  object-position: center 62%;
}

/* Reduce visible separator between pagination and social icons */
#main_social_midia_icon{
  background-color: #0b0b0b !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 34px !important;
  /* visible: los iconos usan transform 3D + sombras; overflow:hidden los recortaba tras reflow (categoría → Todos) */
  overflow: visible !important;
}

/* Evita margen colapsado del UL que genera franja blanca */
#main_social_midia_icon .main_social_icon{
  margin: 0 !important;
  padding: 0 !important;
}

#main_social_midia_icon .main_social_icon li{
  margin: 24px 0 !important;
}

/* Center images inside module grid cards */
.featured-product-card .image-box{
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  padding: 0;
  box-sizing: border-box;
}

.featured-product-card .image-box a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.featured-product-card .image-box .product-image{
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* iPhone 12 Pro Max: la imagen suele ser vertical/alta; contain evita recorte extremo en grid 3:2 */
.featured-product-card .image-box a[href*="product.html?id=iphone-12-pro-max"]{
  padding: 10px;
  box-sizing: border-box;
}

.featured-product-card .image-box a[href*="product.html?id=iphone-12-pro-max"] .product-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Ver más overlay sobre la imagen (desktop hover + mobile visible) */
.featured-product-card .image-box a{
  position: relative;
}

.product-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(4px);
  z-index: 2; /* deja los "quick view" por encima (z-index 5 en app.css) */
  pointer-events: none; /* el click siempre cae en el <a> */
}

/* Fix: evitar salto visual por bg-lightest-gray en el módulo */
.featured-product-sec{
  background: #fff !important;
  background-color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.featured-product-sec::before,
.featured-product-sec::after{
  display: none !important;
}

/* Limpieza del separador visual de paginación (dentro del módulo) + aire respecto al grid */
.featured-product-sec .pagination{
  border: none !important;
  box-shadow: none !important;
  margin-top: 40px !important;
  padding-top: 10px !important;
}

/* Espacio bajo el grid de productos (antes de la paginación) */
.featured-product-sec .container-fluid > .row.row-gap-3{
  margin-bottom: 20px;
}

/*
 * Paginación a la misma altura que en "Todos": con filtros el grid tiene 2 filas (6 ítems);
 * en "Todos" son 3 filas (2 columnas). shop.html mide la altura en "Todos" y aplica min-height
 * en otras categorías; este clamp es respaldo si el usuario no abrió "Todos" aún (el inline gana).
 */
.featured-product-sec .container-fluid > .row.row-gap-3.shop-grid--layout-all{
  min-height: 0;
}

.featured-product-sec .container-fluid > .row.row-gap-3.shop-grid--layout-filtered{
  min-height: clamp(520px, 52vw, 1180px);
}

/* Quitar cualquier separador horizontal entre paginación y footer (solo módulo) */
hr{
  display: none !important;
}

.pagination{
  border-bottom: none !important;
  box-shadow: none !important;
}

.footer{
  border-top: 1px solid #1a1a1a !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/*
 * Shop: aos.css se carga antes que esta hoja y puede dejar opacity:0 en footer/redes/logo
 * hasta que AOS anima; tras cambiar categoría el reflow a veces no re-dispara la animación.
 * Forzamos visibilidad por encima de AOS (el <a> de cada red conserva su transform 3D).
 */
footer.footer,
footer.footer .footer_inner_wrapper,
footer.footer .footer_col,
footer.footer .footer_col_heading,
footer.footer .footer_logo,
footer.footer .footer_social_inner_wrapper,
.footer-logo-section,
.footer-logo-section .footer-logo-container,
.footer-logo-section .footer-logo-link,
.footer-logo-section img,
#main_social_midia_icon,
#main_social_midia_icon .main_social_icon,
#main_social_midia_icon .main_social_icon > li {
  opacity: 1 !important;
  visibility: visible !important;
}

#main_social_midia_icon .main_social_icon > li[data-aos],
footer.footer[data-aos],
.footer-logo-section [data-aos] {
  transform: none !important;
}

/* Evita separación por margin-collapsing entre secciones */
.featured-product-sec + *{
  margin-top: 0 !important;
}

.featured-product-card .image-box a:hover .product-overlay{
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: overlay siempre visible */
@media (max-width: 768px) {
  .product-overlay{
    opacity: 1;
    background: rgba(0,0,0,0.3);
    transform: none;
  }
}

/* Opcional: zoom suave de imagen en hover */
.featured-product-card .image-box .product-image{
  transition: transform 0.3s ease;
}

.featured-product-card .image-box a:hover .product-image{
  transform: scale(1.05);
}

.product-description-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.product-description-images--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .product-description-images--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-description-images img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* Ajuste de color real para variante azul (Pacific Blue) */
.shop-detail .detail-wrapper .product-text-container .content-block .product-color input[type=radio].radio-2 {
  background-color: #3f5f78 !important;
}

/* Título de card en negro (evita verde del theme) */
.featured-product-card .product-title a,
.featured-product-card .product-title a:visited,
.featured-product-card .product-title a:hover,
.featured-product-card .product-title a:focus {
  color: #0c0c0d !important;
}

/* WhatsApp animated consult button */
.buttons {
  display: flex;
  justify-content: center;
}

.buttons button {
  width: 100%;
  height: 45px;
  background-color: white;
  color: #333;
  position: relative;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #2f2f2f;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.buttons button:before,
.buttons button:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #25D366;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button:before {
  right: 0;
  top: 0;
}

.buttons button:after {
  left: 0;
  bottom: 0;
}

.buttons button span:before,
.buttons button span:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background-color: #25D366;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button span:before {
  right: 0;
  top: 0;
}

.buttons button span:after {
  left: 0;
  bottom: 0;
}

.buttons button p {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.buttons button p:before {
  content: attr(data-title);
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.buttons button p:after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  top: 150%;
  color: #25D366;
  left: 0;
}

.buttons button:hover:before,
.buttons button:hover:after {
  width: 100%;
}

.buttons button:hover span:before,
.buttons button:hover span:after {
  height: 100%;
}

.buttons button:hover p:before {
  top: -50%;
}

.buttons button:hover p:after {
  top: 50%;
  transform: translateY(-50%);
}

.whatsapp-btn:hover {
  transform: scale(1.03);
}

.whatsapp-btn .wa-icon {
  position: absolute;
  left: calc(50% + 56px);
  top: 50%;
  transform: translate(-50%, 6px);
  opacity: 0;
  width: 16px;
  height: 16px;
  fill: #25D366;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.whatsapp-btn:hover .wa-icon {
  opacity: 1;
  transform: translate(-50%, -50%);
}