/** Shopify CDN: Minification failed

Line 1833:18 Unexpected "{"
Line 1833:27 Expected ":"
Line 1841:18 Unexpected "{"
Line 1841:27 Expected ":"
Line 1842:18 Unexpected "{"
Line 1842:27 Expected ":"
Line 1843:18 Unexpected "{"
Line 1843:27 Expected ":"
Line 1844:18 Unexpected "{"
Line 1844:27 Expected ":"
... and 78 more hidden warnings

**/
@media (min-width: 992px) {
  .product-banner .product-banner__products-slider-wrapper {
      transform: translateX(15%) !important;
  }
}
@media (max-width: 991px) {
  .product-banner .product-banner__products-slider-wrapper {
      transform: translateX(14%) !important; /* o el valor que mejor centre en móvil */
  }
}
/* 👉 Ajustar el drawer de filtros y clasificación */
.product-filters .drawer {
    position: relative !important;      /* Mantiene la posición en el flujo */
    margin-left: 100px !important;       /* 🔹 Aumenta este valor para empujarla más a la derecha */
    max-width: 380px !important;        /* 🔹 Ancho máximo del panel */
}

/* 👉 Darle más alto al contenedor interno si es necesario */
.product-filters .drawer__body {
    padding-top: 30px !important;       /* Ajusta separación superior */
    padding-bottom: 30px !important;    /* Ajusta separación inferior */
}

/* 👉 Ajustar el título del drawer si quieres más separación */
.product-filters .drawer__header {
    padding-left: 20px !important;      /* Margen interno izquierdo del header */
    padding-right: 20px !important;
}
/* ==== Subir la sección de productos en móvil (usa clases del theme) ==== */
@media screen and (max-width: 767px) {
  /* Quitar padding extra del contenedor principal */
  .collection {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
  }

  /* Reducir espacio del header (título / descripción) */
  .collection .collection__header,
  .collection .collection__header-row,
  .collection .collection__header-col {
    margin-top: 0 !important;
    margin-bottom: -320px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Limitar la altura de la imagen de colección (no la elimina, solo la reduce) */
  .collection .collection__image-wrapper {
    max-height: 160px !important; /* cambiar a 120/200 según necesites */
    overflow: hidden !important;
  }
  .collection .collection__image {
    height: auto !important;
    max-height: 160px !important; /* igual que arriba */
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Empujar el grid hacia arriba — ajusta el valor negativo si necesitas más/menos */
  .collection .collection__body,
  .collection .collection__grid-wrapper {
    margin-top: -24px !important; /* prueba -10px / -40px según lo que veas */
    padding-top: 0 !important;
  }
}

/* ==== Opción fuerte: ocultar por completo la imagen en móvil (descomenta si la quieres quitar) ==== */
/*
@media screen and (max-width: 767px) {
  .collection .collection__image-wrapper { display: none !important; }
  .collection .collection__description { margin-bottom: 8px !important; }
}
*/

/* 👉 Subir título de colección en móvil */
@media screen and (max-width: 767px) {
  /* Quitar espacio general del header */
  .collection .collection__header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Ajustar directamente el h1 del título */
  .collection .collection__title {
    margin-top: -120px !important; /* prueba -10px, -30px según necesites */
  }
}

/* Fuente única para TODOS los títulos de colección */
.collection .collection__title {
  font-family: 'Poppins', sans-serif !important; /* o la que uses */
  font-weight: 700;       /* opcional */
}
/* Ajustar símbolo de moneda y valor dentro de los inputs de precio */
.facets__price input,
.filter-price input,
.price-range input {
  font-size: 18px !important;        /* tamaño de los números */
  line-height: 1.4 !important;       /* altura de línea equilibrada */
  padding-top: 10px !important;      /* empuja el número hacia abajo si está muy alto */
  padding-bottom: 10px !important;   /* más aire en la parte inferior */
}

/* Si el símbolo de moneda está en un span separado */
.facets__price input + span,
.filter-price input + span,
.price-range input + span {
  font-size: 14px !important;        /* tamaño un poco menor para la moneda */
  position: relative !important;
  top: 2px !important;               /* ajusta ↑↓ hasta que quede alineado */
  margin-right: 4px !important;      /* separa del número */
}

.add-to-cart-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 5px; /* Ajusta según tu layout */
}

.add-to-cart-icon svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.add-to-cart-icon:hover svg {
  color: #ff6600;
}

/* Icono añadir al carrito al lado del precio */
.add-to-cart-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 5px; /* ajusta según tu layout */
}

.add-to-cart-icon svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.add-to-cart-icon:hover svg {
  color: #ff6600;
}

/* Toast de notificación */
#cart-toast {
  position: fixed; /* puedes cambiar a absolute si lo quieres relativo a un contenedor */
  top: 70px; /* ajusta según la altura de tu header o carrito */
  right: 20px; /* separación del borde derecho */
  background-color: #ff6600;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  display: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Añadir ID en la coleccion para la compra */
/* Contenedor más compacto */
.custom-id-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent; /* sin fondo grande */
  border: none;            /* sin borde enorme */
  margin: 10px 0;
  padding: 0;
}

/* Label arriba */
.custom-id-box label {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 4px;
}

/* Input: pequeño y largo tipo rectangular */
.custom-id-box input[type="text"] {
  width: 200px;        /* 👈 largo pero no enorme */
  height: 32px;        /* 👈 altura pequeña */
  padding: 4px 8px;    /* 👈 interior reducido */
  font-size: 13px;
  border: 2px solid #bbb;
  border-radius: 10px;
}

/* "Recordarme" debajo del input */
.remember-id {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.remember-id label {
  font-size: 13px;
  cursor: pointer;
}

.custom-id-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
  margin: -20px 0 10px 120px; /* 👈 mueve la caja hacia la derecha */
  padding: 0;
}
.custom-id-box {
  /* otras reglas existentes */
  margin-right: 40px;  /* esto le da espacio a la derecha */
}
/* Contenedor del "Recordarme" */
.remember-id {
  margin-top: -10px;         /* espacio hacia arriba */
  display: flex;
  align-items: center;
  gap: 10px;                /* separación entre casilla y texto */
  margin-left: 20px;        /* 👈 mueve el bloque hacia la derecha */
}

/* Casilla (checkbox) más grande */
.remember-id input[type="checkbox"] {
  width: 18px;    /* 👈 ancho de la casilla */
  height: 18px;   /* 👈 alto de la casilla */
  cursor: pointer;
}

/* Texto de "Recordarme" */
.remember-id label {
  font-size: 20px;      /* 👈 tamaño de letra */
  font-weight: 550;     /* 👈 más gruesa */
  cursor: pointer;
  margin-left: 5px;     /* 👈 distancia extra respecto a la casilla */
}

/* Contenedor principal del ID */
.custom-id-box {
  background: #f8f8f8;   /* color de fondo (puedes quitarlo si no quieres) */
  border: 1px solid #ddd;
  border-radius: 8px;

  /* Tamaño del recuadro */
  width: 300px;   /* 👈 cambia el ancho */
  height: auto;   /* 👈 o dale un alto fijo si lo necesitas */

  /* Control de posición */
  margin-top: 20px;     /* mover hacia abajo */
  margin-left: 40px;    /* mover hacia la derecha */
  margin-bottom: 20px;  /* mover hacia arriba (si ajustas en negativo) */
  margin-right: 20px;   /* espacio hacia los productos */
  padding: 15px;        /* espacio interno */
  
  /* Opcional: si quieres moverlo libremente */
  position: relative;   /* cámbialo a absolute si quieres colocarlo flotando */
  top: 0;   /* mover hacia abajo si es absolute */
  left: 0;  /* mover hacia la derecha si es absolute */
}

/* Label "Ingresa tu ID" */
.custom-id-box label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Input */
.custom-id-box input[type="text"] {
  width: 100%;         /* ocupa todo el ancho del recuadro */
  max-width: 260px;    /* límite si lo quieres más estrecho */
  height: 34px;        /* altura del input */
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.custom-id-box {
  background:rgb(235, 235, 235);
  border: 1px solid #ddd;
  border-radius: 8px;

  width: 300px;        /* ancho */
  height: 110px;        /* 👈 altura fija (ajústala a tu gusto: 60px, 100px, etc.) */

  margin: 10px 20px 10px 40px;
  padding: 10px 15px;

  display: flex;            /* para controlar el contenido dentro */
  flex-direction: column;   /* apilar label + input + checkbox */
  justify-content: center;  /* centrar verticalmente */
}
.custom-id-box {
  margin-top: -30px;
  margin-bottom: 10px;
  margin-left: 75px;   /* mueve a la derecha */
  margin-right: 40px;   /* distancia con productos */
}


.collection-custom-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
}

.collection-custom-header .header-image {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-bottom: 15px;
}

.collection-custom-header .header-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.collection-custom-header .security-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
}

.collection-custom-header .header-reviews a {
  color: #ffcc00;
  font-weight: bold;
  margin-bottom: 15px;
  display: inline-block;
  text-decoration: none;
}

.collection-custom-header .header-description {
  font-size: 16px;
  color: #333;
  max-width: 700px;
  margin: 0 auto;
}

/* Contenedor principal de tu header */
.collection-custom-header {
    display: flex;           /* Activa flexbox */
    flex-direction: row;     /* Elementos en fila (horizontal) */
    align-items: flex-start; /* Alinea todo al top */
    justify-content: flex-start; /* Empuja todo a la izquierda */
    gap: 15px;               /* Espacio entre la imagen y los textos */
    padding: 10px 0;         /* Ajusta el padding superior/inferior si quieres */
}

/* Imagen de perfil */
.collection-custom-header .header-image {
    width: 120px;  /* Ajusta tamaño */
    height: 120px;
    object-fit: cover;
    border-radius: 8px; /* Opcional, esquinas redondeadas */
}

/* Contenedor de texto (título, estrellas, descripción) */
.collection-custom-header .custom-header-text {
    display: flex;
    flex-direction: column; /* Título arriba, descripción abajo */
}

/* Título del producto */
.collection-custom-header .custom-header-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 5px 0;
}

/* Icono de seguridad */
.collection-custom-header .security-icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

/* Estrellas de review */
.collection-custom-header .header-stars {
    margin: 5px 0;
}

/* Descripción larga */
.collection-custom-header .header-description {
    max-width: 400px; /* Ajusta según quieras */
}
/* Contenedor principal de tu header */
.collection-custom-header {
    display: flex;
    flex-direction: row;       /* Imagen a la izquierda, texto a la derecha */
    align-items: flex-start;   
    gap: 20px;                 /* Espacio entre imagen y texto */
    padding: 10px 0;
}

/* Imagen de perfil */
.collection-custom-header .header-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 16px;

    /* Mueve la imagen hacia la derecha */
    margin-left: 75px; /* Ajusta este valor según necesites */
}

/* Contenedor de texto */
.collection-custom-header .custom-header-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Título */
.collection-custom-header .custom-header-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

/* Icono de seguridad */
.collection-custom-header .security-icon {
    width: 64px;
    height: 64px;
    margin-right: 5px;
}

/* Estrellas de review */
.collection-custom-header .header-stars {
    margin: -15px 0;
}

/* Descripción larga */
.collection-custom-header .header-description {
    max-width: 400px;
}
/* Contenedor principal de header */
.collection-custom-header {
    display: flex;
    align-items: flex-start; /* Alinea verticalmente al top */
    gap: 20px; /* Espacio entre imagen y el texto */
}

/* Contenedor de imagen de perfil */
.collection-custom-header .header-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 16px;
}

/* Contenedor de texto */
.collection-custom-header .custom-header-text {
    display: flex;
    flex-direction: column; /* Coloca título arriba, descripción abajo */
}

/* Título + icono de seguridad en la misma fila */
.collection-custom-header .title-security-wrapper {
    display: flex;
    align-items: center; /* Alinea verticalmente el icono con el texto */
    gap: 10px; /* Espacio entre título y icono */
}

/* Icono de seguridad */
.collection-custom-header .security-icon {
    width: 50px; /* Ajusta según necesites */
    height: 50px;
}
/* Contenedor de estrellas */
.header-stars-wrapper a {
    text-decoration: none !important; /* Quita subrayado completamente */
    font-size: 1.2rem;                /* Ajusta tamaño */
    color: #000;                       /* Ajusta color si quieres */
}
/* Quitar subrayado de todo el link */
.header-stars-wrapper a {
    text-decoration: none !important;
    font-family: 'Arial', sans-serif; /* Cambia por la fuente que quieras */
}

/* Estrellas */
.header-stars-wrapper .stars {
    color: #000;   /* Color negro para las estrellas */
    font-size: 1.2rem;
}

/* Texto "Ver reseñas" */
.header-stars-wrapper .review-text {
    color: red;          /* Texto en rojo */
    font-weight: bold;   /* Opcional: hacer más visible */
    font-family: 'Helvetica', sans-serif; /* Fuente bonita */
    margin-left: 5px;    /* Separación de las estrellas */
}
/* Contenedor de todo el bloque de stars + texto */
.header-stars-wrapper {
    position: relative; /* Permite mover todo el bloque si quieres */
    display: inline-block;
}

/* Link que contiene las estrellas y texto */
.header-stars-wrapper .stars-link {
    text-decoration: none; /* Quitar subrayado del link */
    display: flex;          /* Para que estrellas y texto estén en fila */
    align-items: center;    /* Centrar verticalmente */
    gap: 5px;               /* Espacio entre estrellas y texto */
}

/* Estrellas */
.header-stars-wrapper .stars {
    position: relative;  /* Permite mover individualmente */
    top: -18px;            /* Ajusta vertical */
    left: -1px;           /* Ajusta horizontal */
    color: #FFD700;      /* Color dorado */
    font-size: 1.5rem;   /* Cambiar tamaño */
    text-decoration: none; /* Quitar subrayado */
}

/* Texto "Ver reseñas" */
.header-stars-wrapper .review-text {
    position: relative;   /* Permite mover individualmente */
    top: -17px;             /* Ajusta vertical */
    left: -5px;            /* Ajusta horizontal */
    color: red;           /* Cambiar color */
    font-size: 0.9rem;      /* Cambiar tamaño */
}
/* Separar header del contenido de la colección */
.collection-custom-header {
    margin-bottom: 50px; /* Ajusta este valor según el espacio que quieras */
}

/* Separar el box de ID del header y darle estilo */
.custom-id-box {
    margin-top: 15px; /* Espacio entre header y el ID */
    padding: 15px; /* Padding interno del box */
    background-color:rgb(241, 99, 4); /* Color de fondo opcional */
    border: 0px solid #ddd; /* Borde opcional */
    border-radius: 16px; /* Esquinas redondeadas opcional */
    max-width: 400px; /* Ancho máximo opcional */
}

/* Etiqueta y input dentro del box de ID */
.custom-id-box label {
    display: block;
    margin-bottom: -20px;
    font-weight: bold;
}

.custom-id-box input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 25px; /* Ajusta este valor para mover el input hacia abajo */
}


/* Checkbox "Recordarme" separado */
.custom-id-box .remember-id {
    margin-top: -5px;
    display: flex;
    align-items: center;
}

.custom-id-box .remember-id input[type="checkbox"] {
    margin-right: 5px;   /* espacio entre checkbox y label */
    position: relative;   /* habilita movimiento relativo */
    top: -2px;            /* mueve hacia arriba; usa positivo para bajar */
    left: -15;              /* opcional, para mover horizontalmente */
}
.custom-id-box .remember-id label {
    position: relative;  /* habilita movimiento relativo */
    top: -10px;           /* sube el texto; usa positivo para bajar */
    left: -5;             /* opcional, mover horizontalmente */
}
.custom-id-box .remember-id {
    position: relative; /* contenedor relativo para referencia */
}

.custom-id-box .remember-id label {
    position: absolute; /* permite mover libremente */
    top: 0px;          /* mueve verticalmente */
    left: 20px;         /* mueve horizontalmente */
}
.collection-custom-header {
    background-color:rgb(255, 255, 255); /* Cambia el color de fondo */
    padding: 20px;             /* Espacio interno para que no quede pegado */
    border-radius: 10px;       /* Opcional: esquinas redondeadas */
}

/* hace que el contenedor de texto sea referencia */
.custom-header-text { position: relative; }

/* descripción movible y con fondo dinámico */
.header-description-wrapper {
  display: inline-block;                 /* el fondo solo ocupa el texto */
  position: relative;
  --desc-x: 0px;                         /* mover horizontalmente */
  --desc-y: -17px;                         /* mover verticalmente */
  transform: translate(var(--desc-x), var(--desc-y));
  transition: transform 0.15s ease;
  background: linear-gradient(90deg,rgb(241, 99, 4),rgb(241, 99, 4)); /* fondo que crece con el texto */
  color:rgb(0, 0, 0);                        /* color de texto */
  padding: 10px 14px;
  border-radius: 32px;
  text-align: left;                      /* asegura texto alineado a la izquierda */
  white-space: normal;                   /* permite saltos de línea */
  word-wrap: break-word;                 /* rompe palabras largas */
  max-width: 1200px;                      /* evita que se haga gigante en pantallas grandes */
}

/* evita subrayado en links dentro de la descripción */
.header-description-wrapper a {
  color: inherit;
  text-decoration: none !important;
}
/* Fondo de la descripción */
.header-description-wrapper {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2025-10-11_140805.png?v=1760209281"); /* URL de la imagen */
  background-size: cover;   /* La imagen se adapta al tamaño */
  background-position: center; /* Centrada */
  padding: 15px;            /* Espaciado para que el texto no quede pegado */
  border-radius: 8px;       /* Bordes redondeados opcionales */
  color: #fff;              /* Texto en blanco para contraste */
}

/* Fondo del "Ingresa tu ID" */
.custom-id-box {
  background-image: url("/cdn/shop/files/Captura_de_pantalla_2025-10-11_140830.png?v=1760209067"); /* URL de la imagen */
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
}


/* Texto que escribe el usuario */
.custom-id-box input[type="text"] {
    color: #000000; /* negro, cambia a cualquier color que quieras */
}

/* Placeholder (texto gris que aparece antes de escribir) */
.custom-id-box input[type="text"]::placeholder {
    color:rgb(0, 0, 0); /* blanco, o cualquier color que contraste con tu fondo */
    opacity: 0.8;   /* opcional, para que no quede tan fuerte */
}
.custom-id-box input[type="text"] {
    background: rgba(255, 255, 255, 0.85); /* capa semi-transparente sobre la imagen */
    backdrop-filter: blur(0); /* opcional: evita blur, mejora rendimiento */
    color: #000; /* texto visible */
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: 8px;
}
/* Cambiar el borde redondeado del icono de seguridad */
.collection-custom-header .security-icon {
    border-radius: 50%; /* completamente redondo */
    /* o un valor específico, por ejemplo: */
    /* border-radius: 16px; */
}


/* Contenedor del recuadro de ID con fondo de imagen */
.custom-id-box {
  background: url('/cdn/shop/files/Captura_de_pantalla_2025-10-11_140830.png?v=1760209067') no-repeat center center;
  background-size: cover;       /* que la imagen se ajuste bien */
  padding: 15px;
  border-radius: 8px;
  color: #fff;
  width: 300px;                 /* ajusta según tu diseño */
  position: relative;           /* referencia para el botón absoluto */
  margin-bottom: 50px;          /* deja espacio para el botón */
}

/* === Descripción principal de la colección === */
.collection .collection__header .rte.collection__description,
.collection .collection__header .rte.collection__description * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.7) !important;
  mix-blend-mode: normal !important;
}

/* === Barra personalizada de descripción (si aplica) === */
.collection-custom-header .header-description-wrapper,
.collection-custom-header .header-description-wrapper * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.7) !important;
  mix-blend-mode: normal !important;
  position: relative;
  z-index: 1;
}

/* === Caja de ID === */
.custom-id-box,
.custom-id-box * {
  color: #fff !important;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.7);
}

/* Input y Recordarme */
.custom-id-box input[type="text"] {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: none;
  margin-top: 24px;
  margin-bottom: 15px;
}

.custom-id-box .remember-id {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.custom-buy-btn {
  position: absolute;   
  top: calc(100% + 15px);   /* aumenta 20px de separación debajo del recuadro */
  left: 50%;                
  transform: translateX(-50%); 
  
  background: #f4d03f;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  padding: 16px 100px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s;
}

.custom-buy-btn:hover {
  background: #f1c40f;
}

/* Toast animado desde abajo hacia arriba, más arriba del recuadro */
.custom-id-toast {
  position: absolute;
  bottom: 100%; /* justo encima del borde inferior del recuadro de ID */
  left: 50%;
  transform: translateX(-50%) translateY(25px); /* empieza 25px más abajo */
  background: #ff6600;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animación de entrada */
.custom-id-toast.show {
  animation: toastUpIn 0.5s forwards;
}

/* Animación de salida */
.custom-id-toast.hide {
  animation: toastUpOut 0.5s forwards;
}

@keyframes toastUpIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(25px) scale(0.9); /* más abajo al inicio */
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1.05); /* sube más alto */
  }
  80% {
    transform: translateX(-50%) translateY(-5px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1); /* posición final más arriba */
  }
}

@keyframes toastUpOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.9);
  }
}
















/* Contenedor principal */
.manual-payment-page {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Lado izquierdo: Métodos de pago */
.payment-left {
  flex: 1;
  background: #222;
  color: #fff;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  min-width: 280px;
}

.payment-left h2 {
  margin-bottom: 25px;
  color: #f4d03f;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.5px;
}

.payment-methods {
  list-style: none;
  padding: 0;
  margin-bottom: 35px;
}

.payment-methods li {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.payment-methods input[type="radio"] {
  accent-color: #f4d03f;
  width: 20px;
  height: 20px;
}

.payment-methods label {
  font-size: 17px;
  font-weight: 500;
}

/* Botón completar orden */
#complete-order-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(90deg, #f4d03f, #f1c40f);
  color: #000;
  font-weight: bold;
  font-size: 17px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

#complete-order-btn:hover {
  background: linear-gradient(90deg, #f1c40f, #d4ac0d);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* Lado derecho: Carrito */
.payment-right {
  flex: 1;
  background: #fefefe;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 280px;
}

.payment-right h2 {
  margin-bottom: 25px;
  color: #333;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}

#cart-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#cart-items li {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

#cart-items .cart-total {
  font-weight: bold;
  font-size: 20px;
  text-align: right;
  margin-top: 20px;
  color: #222;
}


.cart-item-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: -160px;
}

#cart-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}




.payment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #f4d03f;
  border-radius: 10px;
  padding: 12px 15px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.payment-card:hover {
  background: rgba(244, 208, 63, 0.1);
  transform: translateY(-2px);
}

.payment-card input[type="radio"] {
  accent-color: #f4d03f;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.payment-text {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.payment-img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  margin-left: 100px;
}


.payment-card {
  display: flex;
  align-items: center;
  border: 2px solid #f4d03f;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  width: 100%;               
  box-sizing: border-box;    
  gap: 15px;
}

.payment-card:hover {
  background: rgba(244, 208, 63, 0.1);
  transform: translateY(-2px);
}

.payment-card input[type="radio"] {
  accent-color: #f4d03f;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

/* Contenedor de texto e imagen juntos */
.payment-text {
  display: flex;
  align-items: center;
  gap: 10px;         /* espacio entre texto e imagen */
  font-size: 16px;
  font-weight: 500;
}

/* Imagen al lado del texto */
.payment-img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  flex-shrink: 0;    /* para que no se reduzca el tamaño */
}


/* Carrito de productos */
.payment-right {
  flex: 1;
  background: #fefefe;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 280px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

/* Título del carrito */
.payment-right h2 {
  margin-bottom: 25px;
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Lista de productos */
#cart-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#cart-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Arial', sans-serif;
}

#cart-items li span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Resumen del carrito */
#cart-summary {
  margin-top: 25px;
  padding-top: 15px;
  border-top: 2px solid #f4d03f;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 500;
}

.cart-summary-row.total-final {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  border-bottom: none;
  margin-top: 8px;
}

/* Destacar los valores */
.cart-summary-row span:last-child {
  font-weight: 600;
}

/* Opcional: hover sutil en productos */
#cart-items li:hover {
  background: rgba(244, 208, 63, 0.05);
  border-radius: 6px;
}

.payment-right {
  flex: 1;
  background: #fefefe;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 280px;
  font-family: 'Arial Black', Arial, sans-serif;
}

.payment-right h2 {
  margin-bottom: 25px;
  color: #222;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}

#cart-items ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

#cart-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 16px;
}

#cart-items .precio {
  font-weight: bold;
}

#cart-summary {
  border-top: 2px solid #f4d03f;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
}

.cart-summary-row.total-final {
  font-size: 18px;
  color: #f4d03f;
}

#complete-order-btn {
  margin-top: 20px;
  width: 100%;
  padding: 18px;
  background: linear-gradient(90deg, #f4d03f, #f1c40f);
  color: #000;
  font-weight: bold;
  font-size: 17px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

#complete-order-btn:hover {
  background: linear-gradient(90deg, #f1c40f, #d4ac0d);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.payment-right {
  flex: 1;
  background: #fefefe;
  padding: 30px 25px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 280px;
  font-family: 'Arial Black', Arial, sans-serif;
}

.payment-right h2 {
  margin-bottom: 25px;
  color: #222;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}

#cart-items ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

#cart-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 16px;
}

#cart-items .cart-item-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
}

#cart-items .precio {
  font-weight: bold;
}

#cart-summary {
  border-top: 2px solid #f4d03f;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
}

.cart-summary-row.total-final {
  font-size: 18px;
  color: #f4d03f;
}

#complete-order-btn {
  margin-top: 20px;
  width: 100%;
  padding: 18px;
  background: linear-gradient(90deg, #f4d03f, #f1c40f);
  color: #000;
  font-weight: bold;
  font-size: 17px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

#complete-order-btn:hover {
  background: linear-gradient(90deg, #f1c40f, #d4ac0d);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}


.payment-left {
  max-height: 455px; /* altura máxima visible */
  overflow-y: auto;  /* scroll si sobrepasa */
  padding-right: 10px;
}


@media (max-width: 768px) {
  /* Ajusta la altura del contenedor del slide */
  .slideshow__slider {
    height: 55vh !important;       /* Cambia este valor al que quieras */
    max-height: 55vh !important;   /* Evita que se haga más grande */
    min-height: 40vh !important;   /* Opcional, evita que desaparezca */
    background-size: cover !important;
    background-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ajusta la imagen dentro del slide si existe */
  .slideshow__slider img {
    height: 55vh !important;       /* Igual que el contenedor */
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

html, body {
  overflow-x: hidden;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

.slideshow__slider {
  width: 100% !important; /* en lugar de 100vw */
}





/* ==============================================
   Collection Custom Header - Mobile Optimizado
   ============================================== */
@media (max-width: 768px) {

  /* Contenedor principal de la cabecera */
  .collection-custom-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    margin-top: 20px; /* separa del banner superior */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Imagen de perfil / header */
  .collection-custom-header .header-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
  }

  /* Wrapper de título e icono de seguridad */
  .collection-custom-header .title-security-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
  }

  /* Título del producto */
  .collection-custom-header .custom-header-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  /* Icono de seguridad */
  .collection-custom-header .security-icon {
    width: 40px;
    height: 40px;
    margin-top: 5px;
  }

  /* Wrapper de estrellas y link de reseñas */
  .collection-custom-header .header-stars-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .collection-custom-header .header-stars-wrapper .stars {
    font-size: 16px;
  }

  .collection-custom-header .header-stars-wrapper .review-text {
    font-size: 14px;
    color: #555;
  }

  /* Descripción de la colección */
  .collection-custom-header .header-description-wrapper {
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.4;
  }

  /* Caja del ID y botón */
  .custom-id-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    width: 100%;
  }

  .custom-id-box input[type="text"] {
    width: 90%;
    max-width: 300px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
  }

  .custom-id-box .remember-id {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .custom-id-box .remember-id input[type="checkbox"] {
    margin-right: 5px;
  }

  .custom-id-box .custom-buy-btn {
    width: 90%;
    max-width: 250px;
    text-align: center;
    padding: 10px 0;
    border-radius: 8px;
    background-color: #ffcc00;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
  }

  /* Toast de mensaje */
  .custom-id-box .custom-id-toast {
    font-size: 12px;
    color: red;
    margin-top: 4px;
    text-align: center;
  }

}

@media (max-width: 768px) {

  /* Solo mover toda la sección hacia abajo */
  .collection-custom-header {
    margin-top: 320px !important; /* ajusta este valor a lo que necesites */
  }

}


@media (max-width: 768px) {

  /* Foto de perfil más a la izquierda */
  .collection-custom-header .header-image {
    margin-left: -6px; /* ajusta este valor a tu gusto */
  }

}

@media (max-width: 768px) {

  /* Agrandar el título del producto */
  .collection-custom-header .custom-header-title {
    font-size: 30px !important; /* ajusta a tu gusto */
    font-weight: 700; /* opcional: más grueso */
  }

}

@media (max-width: 768px) {

  /* Agrandar y mover icono de seguridad */
  .collection-custom-header .security-icon {
    width: 55px !important;       /* tamaño ancho */
    height: 55px !important;      /* tamaño alto */
    margin-top: -10px !important;  /* sube o baja el icono */
    margin-bottom: 10px !important; /* puedes ajustar espacio inferior si quieres */
  }

}


@media (max-width: 768px) {

  /* Ajustar posición de la sección de ID y botón */
  .custom-id-box {
    margin-top: 20px !important;   /* separa la caja de los productos de abajo */
    margin-bottom: 107px !important; /* espacio debajo para que no quede pegada al grid */
    margin-left: 3px !important;   /* ajusta hacia la izquierda si quieres */
    margin-right: 0px !important;  /* ajusta hacia la derecha si quieres */
    position: relative;             /* asegura que se mantenga en flujo del layout */
    z-index: 2;                     /* para que quede sobre otros elementos si es necesario */
  }

  /* Ajustar el botón de comprar dentro de la caja */
  .custom-id-box .custom-buy-btn {
    margin-top: 5px !important;   /* espacio adicional encima del botón */
    width: 100%;                   /* ocupa todo el ancho disponible */
    max-width: 250px;              /* opcional: ancho máximo */
  }

}

@media (max-width: 768px) {

  /* Contenedor del checkbox “Recordarme” */
  .custom-id-box .remember-id {
    display: flex;               /* mantiene el checkbox y label en línea */
    justify-content: flex-start; /* mueve todo a la izquierda */
    margin-top: 5px !important;  /* ajustar espacio arriba */
    margin-bottom: 5px !important; /* ajustar espacio debajo */
  }

  /* Checkbox individual (opcional si quieres más control) */
  .custom-id-box .remember-id input[type="checkbox"] {
    margin-right: 110px; /* separa el checkbox del texto */
  }

}



@media (max-width: 768px) {

  /* Contenedor para mover solo la grilla de productos */
  .collection__grid-wrapper {
    position: relative;
    transform: translate(26px, -6px); /* mover horizontal (X) y vertical (Y) */
    width: auto;          /* mantiene el tamaño de la grilla original */
    max-width: 100%;      /* evita que los items se achiquen */
  }

  /* Caja de ID permanece intacta */
  .custom-id-box {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    margin-bottom: 20px;
  }

}


@media screen and (max-width: 768px) {
  /* Mover el botón de carrito dentro de cada producto en mobile */
  .collection__item .product-card__add-to-cart,
  .collection__item .product-card__quick-add {
    position: relative !important;
    right: -80px;   /* positivo = mueve a la derecha */
    top: 0px;       /* negativo = sube, positivo = baja */
    z-index: 5;
  }
}

/* Aumentar tamaño del carrito en desktop y mobile */
.collection__item .product-card__add-to-cart,
.collection__item .product-card__quick-add {
    transform: scale(1.2); /* 1.2 = 30% más grande, puedes ajustar */
    transform-origin: center; /* mantiene el escalado centrado */
    transition: transform 0.2s ease; /* suaviza el hover */
}

/* Opcional: agrandar aún más al pasar el mouse */
.collection__item .product-card__add-to-cart:hover,
.collection__item .product-card__quick-add:hover {
    transform: scale(1.35);
}


@media screen and (max-width: 767px) {
    /* Mover los precios más arriba dentro de cada tarjeta */
    .collection__item .product-card__price {
        margin-top: -15px; /* ajusta este valor a lo que necesites */
        margin-bottom: 0; /* opcional, para quitar espacio inferior */
    }
}


/* ===========================
   Image with Text – Definitivo
=========================== */

/* Contenedor principal centrado */
.image-with-text__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  justify-content: center; /* centra la sección */
  justify-items: center;   /* centra items individuales */
  align-items: start;      /* evita que el texto estire la imagen */
  gap: 60px;               /* espacio entre imagen y texto */
  padding: 80px 20px;
  max-width: 1300px;       /* ancho máximo */
  margin: 0 auto;          /* centra la sección horizontalmente */
}

/* Contenedor de imagen */
.image-with-text__image-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;     /* fuerza cuadrado */
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;          /* evita que se reduzca */
}

/* Imagen dentro del contenedor */
.image-with-text__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* llena el cuadrado sin deformar */
  border-radius: 60px;
  display: block;
}

/* Contenedor de texto */
.image-with-text__content-wrapper {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* alineado arriba */                 /* espacio entre elementos */
  text-align: center;
}

/* Títulos y subtítulos */
.image-with-text__heading {
  font-size: 2.4rem;
  font-weight: 900;
  color: #111;
  line-height: 1.2;
  margin: 0;
}

.image-with-text__subheading {
  font-size: 1.2rem;
  font-weight: 500;
  color: #555;
  line-height: 1.1; /* aumenta el espacio entre líneas */
}

.image-with-text__text-content {
  font-size: 1rem;
  color: #444;
  line-height: 1.8; /* más espacio entre líneas */
  max-height: none; /* evita compresión */
  letter-spacing: 0.3px;
  word-break: break-word;
}

/* Botón */
.image-with-text__button {
  display: inline-block;
  padding: 16px 40px;
  background: linear-gradient(135deg, #ffcc33 0%, #ff9900 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.image-with-text__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
  .image-with-text__container {
    grid-template-columns: 1fr;
    gap: 50px;
    justify-items: center;
  }

  .image-with-text__image-container,
  .image-with-text__content-wrapper {
    max-width: 90%;
  }

  .image-with-text__heading {
    font-size: 2rem;
  }

  .image-with-text__subheading {
    font-size: 1rem;
  }

  .image-with-text__text-content {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}


.image-with-text__heading {
  margin: 0 0 2px 0; /* margen inferior de 20px */
}

.image-with-text__subheading {
  margin: 0 0 -20px 0; /* margen inferior de 15px */
}

.image-with-text__text-content p {
  margin-bottom: 2px; /* controla el espacio entre párrafos */
}



/* ===========================
   Ajuste de padding vertical del Image with Text
=========================== */

.image-with-text__container {
  padding-top: 20px;   /* espacio arriba */
  padding-bottom: 20px; /* espacio abajo */
}

/* Opcional: versión para móviles */
@media (max-width: 992px) {
  .image-with-text__container {
    padding-top: 20px;   /* espacio arriba en móviles */
    padding-bottom: 20px; /* espacio abajo en móviles */
  }
}


/* ===========================
   Image with Text – Texto centrado verticalmente
=========================== */

.image-with-text__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: center; /* esto centra verticalmente el texto respecto a la imagen */
  gap: 60px;
  padding: 40px 20px;   /* espacio arriba y abajo del contenedor */
  max-width: 1300px;
  margin: 0 auto;
}

/* Contenedor de texto */
.image-with-text__content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente el contenido interno */
  text-align: center;
  width: 100%;
  max-width: 800px;
  gap: 25px; /* espacio entre título, subtítulo y párrafos */
}

/* Contenedor de imagen */
.image-with-text__image-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;     
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}


/* ===========================
   Reducir distancia entre imagen y texto en móviles
=========================== */
@media (max-width: 992px) {
  .image-with-text__container {
    gap: 0px; /* distancia reducida entre imagen y texto solo en móviles */
  }
}


/* === Aumentar tamaño de botones Grid Images (forzado) === */
#shopify-section-{{ section.id }} .gi-btn {
  padding: 20px 36px !important;   /* fuerza tamaño interno */
  font-size: 20px !important;      /* texto más grande */
  border-radius: 22px !important;  /* esquinas más suaves */
  min-width: 160px !important;     /* evita que se encojan demasiado */
}

/* === Mejor legibilidad para LABEL y HEADING en Grid Images === */
#shopify-section-{{ section.id }} .grid-images__info .grid-images__heading,
#shopify-section-{{ section.id }} .grid-images__info .grid-images__label,
#shopify-section-{{ section.id }} .grid-images__info h2.grid-images__heading,
#shopify-section-{{ section.id }} .grid-images__info p.grid-images__label {
  /* Anular estilos del tema que interfieren */
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  color: #fff !important;

  /* Opción A: "Glow" (recomendado para máxima legibilidad) */
  text-shadow:
    0 0 4px rgba(0,0,0,0.9),
    0 0 10px rgba(0,0,0,0.7),
    2px 2px 4px rgba(0,0,0,0.8) !important;

  /* Asegurar que quede encima del overlay */
  position: relative;
  z-index: 4;
  font-weight: 800;
}

/* Si quieres mantener un leve contorno además del glow (suave, no tapa el blanco),
   descomenta estas dos líneas: */
/*
#shopify-section-{{ section.id }} .grid-images__info .grid-images__heading,
#shopify-section-{{ section.id }} .grid-images__info .grid-images__label {
  -webkit-text-stroke: 0.6px #000 !important;
  text-stroke: 0.6px #000 !important;
}
*/

#shopify-section-{{ section.id }} .grid-images__heading,
#shopify-section-{{ section.id }} .grid-images__label,
#shopify-section-{{ section.id }} .gi-btn {
  color: #ffffff !important;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.7),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: 800;
}

/* === Glow para el HEADING (forzado y específico) === */
#shopify-section-{{ section.id }} .grid-images__info h2.h2.grid-images__heading,
#shopify-section-{{ section.id }} .grid-images__info .h2.grid-images__heading {
  mix-blend-mode: normal !important;
  opacity: 1 !important;

  /* Asegura el color aunque el tema use fill/stroke */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  /* Glow Gamer (más fuerte para títulos) */
  text-shadow:
    0 0 5px rgba(0,0,0,0.95),
    0 0 14px rgba(0,0,0,0.75),
    2px 2px 5px rgba(0,0,0,0.85) !important;

  /* Por si el tema mete strokes raros, los neutralizamos: */
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;

  position: relative;
  z-index: 5;
  font-weight: 800 !important;
}

/* Si el tema aplica sombra propia al heading, la anulamos: */
#shopify-section-{{ section.id }} .grid-images__info h2.h2.grid-images__heading::before,
#shopify-section-{{ section.id }} .grid-images__info h2.h2.grid-images__heading::after {
  content: none !important;
}

/* === CTA naranja potente (forzado), elegante y visible === */
#shopify-section-{{ section.id }} .gi-btn{
  position: relative;
  display: inline-block;
  padding: 16px 30px !important;    /* más grande */
  font-size: 1.12rem !important;     /* texto más grande */
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,128,0,.95), rgba(230,94,0,.78)) !important;
  border: 2px solid rgba(255,160,0,.85) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.18),
    0 10px 28px rgba(255,140,0,.55);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow: hidden; /* para destello y ripple */
  will-change: transform, box-shadow;
}

/* Destello diagonal visible al pasar el mouse */
#shopify-section-{{ section.id }} .gi-btn::before{
  content:"";
  position:absolute;
  top:-60%; left:-80%;
  width:70%; height:220%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left .55s ease, opacity .55s ease;
}
#shopify-section-{{ section.id }} .gi-btn:hover::before{
  left:140%; opacity:.95;
}

/* Ripple en click (onda sutil) */
#shopify-section-{{ section.id }} .gi-btn::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 60%);
  transform: translate(-50%,-50%);
  pointer-events:none; opacity:0;
}
#shopify-section-{{ section.id }} .gi-btn:active::after{
  animation: giRipple .55s ease-out forwards;
}

/* Hover: más relieve y un poco más de escala */
#shopify-section-{{ section.id }} .gi-btn:hover{
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.22),
    0 14px 36px rgba(255,150,0,.6);
  filter: brightness(1.06);
}

/* Variante secundaria (solo borde) manteniendo presencia */
#shopify-section-{{ section.id }} .gi-btn--secondary{
  background: rgba(255,255,255,.06) !important;
  border: 2px solid rgba(255,180,0,.85) !important;
  box-shadow: none;
}
#shopify-section-{{ section.id }} .gi-btn--secondary:hover{
  background: rgba(255,140,0,.18) !important;
}

/* Micro-salto periódico para llamar la atención (si no hay hover) */
@keyframes giNudge {
  0%, 92%, 100% { transform: translateY(0) scale(1); }
  94% { transform: translateY(-3px) scale(1.03); }
  96% { transform: translateY(0) scale(1); }
  98% { transform: translateY(-2px) scale(1.02); }
}
#shopify-section-{{ section.id }} .grid-images__actions .gi-btn{
  animation: giNudge 6.5s ease-in-out infinite;
}
#shopify-section-{{ section.id }} .grid-images__actions .gi-btn:hover{
  animation: none; /* si el usuario interactúa, paramos el nudge */
}

/* Onda de click */
@keyframes giRipple{
  0%{ width:0; height:0; opacity:.75; }
  100%{ width:220%; height:220%; opacity:0; }
}

/* En móvil: más anchos y cómodos para el pulgar */
@media (max-width: 480px){
  #shopify-section-{{ section.id }} .grid-images__actions{
    gap: 14px !important;
  }
  #shopify-section-{{ section.id }} .gi-btn{
    padding: 16px 22px !important;
    width: 100%;
    max-width: 340px;
    text-align: center;
  }
}

/* Respeto a usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
  #shopify-section-{{ section.id }} .grid-images__actions .gi-btn{ animation: none; }
  #shopify-section-{{ section.id }} .gi-btn::before{ transition: none; }
}

/* Forzar ambos botones a tener el mismo fondo naranja */
#shopify-section-{{ section.id }} .gi-btn--secondary {
  background: linear-gradient(145deg, rgba(255,128,0,.95), rgba(230,94,0,.78)) !important;
  border: 2px solid rgba(255,160,0,.85) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.18),
    0 10px 28px rgba(255,140,0,.55);
}

#shopify-section-{{ section.id }} .gi-btn--secondary:hover {
  background: linear-gradient(145deg, rgba(255,140,0,1), rgba(255,90,0,.85)) !important;
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.08);
}


/* ============================================================
   KEMZONE PRO TEXTURIZADA
   Fondo energético + estilo gamer premium elegante
   ============================================================ */

#shopify-section-{{ section.id }} .simple-description__container {
  position: relative;
  overflow: hidden;
  padding: 60px 30px;
  border-radius: 20px;
  background: linear-gradient(180deg, #0b0b0b 0%, #121212 100%);
  border: 1px solid rgba(255, 145, 0, 0.25);
  box-shadow:
    inset 0 0 20px rgba(255, 120, 0, 0.05),
    0 0 30px rgba(0, 0, 0, 0.7);
  transition: all 0.35s ease;
}

#shopify-section-{{ section.id }} .simple-description__container:hover {
  box-shadow:
    0 0 32px rgba(255, 140, 0, 0.2),
    inset 0 0 15px rgba(255, 160, 0, 0.08);
  transform: translateY(-3px);
}

/* ============================================================
   🔶 KEMZONE PRO V2 – Fondo texturizado naranja animado
   ============================================================ */
#shopify-section-{{ section.id }} .simple-description__container {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 20% 20%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255, 100, 0, 0.15) 0%, transparent 50%),
              linear-gradient(180deg, #0b0b0b 0%, #121212 100%);
  padding: 60px 30px;
  box-shadow:
    inset 0 0 25px rgba(255, 120, 0, 0.12),
    0 0 45px rgba(255, 120, 0, 0.2);
  border: 1px solid rgba(255, 150, 0, 0.25);
}

/* ===== Capa animada base ===== */
#shopify-section-{{ section.id }} .simple-description__container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,120,0,0.07) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(255,120,0,0.05) 0px, transparent 1px, transparent 60px),
    radial-gradient(circle at 30% 40%, rgba(255,120,0,0.18), transparent 70%),
    radial-gradient(circle at 70% 60%, rgba(255,80,0,0.16), transparent 70%);
  background-blend-mode: screen;
  animation: kemFlow 10s ease-in-out infinite alternate;
}
@keyframes kemFlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.15; }
  100% { transform: scale(1.05) translate(-2%, -2%); opacity: 0.3; }
}

/* ============================================================
   🔸 Encabezado (Heading)
   ============================================================ */
#shopify-section-{{ section.id }} .simple-description__heading {
  position: relative;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.7px;
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #ff9500, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
#shopify-section-{{ section.id }} .simple-description__heading::after {
  content: "";
  display: block;
  width: 180px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff9500, #ff6a00);
  box-shadow: 0 0 14px rgba(255, 120, 0, 0.6);
  animation: linePulse 4s ease-in-out infinite alternate;
}
@keyframes linePulse {
  0% { opacity: 0.8; transform: scaleX(1); }
  100% { opacity: 0.4; transform: scaleX(0.85); }
}

/* ============================================================
   🔸 Texto principal
   ============================================================ */
#shopify-section-{{ section.id }} .simple-description__content {
  color: #e4e4e4;
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#shopify-section-{{ section.id }} .simple-description__content p:first-of-type {
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  text-shadow: 0 0 8px rgba(255, 120, 0, 0.5);
}

/* ============================================================
   🔸 Pills / Etiquetas
   ============================================================ */
#shopify-section-{{ section.id }} .simple-description__content ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}
#shopify-section-{{ section.id }} .simple-description__content ul li {
  background: rgba(255, 140, 0, 0.1);
  border: 1px solid rgba(255, 160, 0, 0.35);
  color: #ffb86c;
  font-weight: 700;
  border-radius: 50px;
  padding: 8px 20px;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
#shopify-section-{{ section.id }} .simple-description__content ul li:hover {
  background: linear-gradient(90deg, #ff8a00, #ff5e00);
  color: #fff;
  border-color: rgba(255, 180, 0, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 130, 0, 0.4);
}

/* ============================================================
   🔸 Responsive
   ============================================================ */
@media (max-width: 768px) {
  #shopify-section-{{ section.id }} .simple-description__heading {
    font-size: 1.6rem;
  }
  #shopify-section-{{ section.id }} .simple-description__content {
    font-size: 1rem;
  }
}



/* ===========================
   KemZone Collection List – CSS global
   Pegar en Custom CSS
   =========================== */

.collection-list {
  --kem-orange: #ff7a00;
  --kem-orange-2: #ff8f2a;
  --kem-orange-3: #ffb066;
  --kem-text: #1b1b1b;
  --kem-text-soft: #585858;
  --kem-bg: #ffffff;
  --kem-radius: 16px;
  --kem-shadow: 0 6px 20px rgba(0,0,0,.06);
  --kem-shadow-hover: 0 10px 26px rgba(0,0,0,.10);
}

/* Header */
.collection-list .collection-list__header{
  margin-inline:auto;
  margin-bottom:24px;
  max-width:1200px;
  text-align:center;
}
.collection-list .collection-list__label{
  color:var(--kem-orange);
  background:rgba(255,122,0,.08);
  border:1px dashed rgba(255,122,0,.25);
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  font-weight:600;font-size:12px;letter-spacing:.02em;
}
.collection-list .collection-list__title{
  position:relative;
  margin:10px auto 0;
  display:inline-block;
  color:var(--kem-text);
  font-weight:800;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(22px,3.6vw,32px);
  text-align:center;
}
.collection-list .collection-list__title:after{
  content:"";display:block;height:4px;width:88px;
  border-radius:999px;margin:10px auto 0;
  background:linear-gradient(90deg,var(--kem-orange),var(--kem-orange-2),var(--kem-orange-3));
  opacity:.9;
}
/* Subtítulo (viene del editor) */
.collection-list .collection-list__subtitle{
  margin:12px auto 0;
  max-width:900px;
  color:var(--kem-text-soft);
  font-size:14px;line-height:1.5;letter-spacing:.01em;
}

/* Cards */
.collection-list .collection-list__card{
  background:var(--kem-bg);
  border-radius:var(--kem-radius);
  box-shadow:var(--kem-shadow);
  border:1px solid rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.collection-list .collection-list__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--kem-shadow-hover);
  border-color:rgba(255,122,0,.22);
}
.collection-list .collection-list__image-wrapper{
  border-radius:calc(var(--kem-radius) - 2px);
  overflow:hidden;
}
.collection-list .collection-list__card-title{
  color:var(--kem-text);
  font-weight:700;
  letter-spacing:.01em;
  font-size:clamp(14px,2.4vw,18px);
  line-height:1.25;
  margin:12px 14px 10px;
  text-wrap:balance;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.collection-list .collection-list__card-count{
  color:var(--kem-text-soft);
  font-size:12px;margin:0 14px 14px;opacity:.9;
}

/* Button */
.collection-list .collection-list__link-wrapper{margin-top:22px;text-align:center;}
.collection-list .collection-list__link.button{
  background:linear-gradient(180deg,var(--kem-orange),var(--kem-orange-2));
  color:#fff;border:none;border-radius:999px;
  padding:12px 18px;min-width:180px;
  font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(255,122,0,.28);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.collection-list .collection-list__link.button:hover{
  background:linear-gradient(180deg,var(--kem-orange-2),var(--kem-orange));
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(255,122,0,.34);
}

/* Alineaciones opcionales */
.collection-list .collection-list__card--center .collection-list__card-title,
.collection-list .collection-list__card--center .collection-list__card-count{ text-align:center; }
.collection-list .collection-list__card--right .collection-list__card-title,
.collection-list .collection-list__card--right .collection-list__card-count{ text-align:right; }

/* Fallback GRID cuando no hay Swiper activo */
.collection-list .collection-list__slider{opacity:1;visibility:visible;}
.collection-list .collection-list__row:not(.swiper-wrapper){
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  padding-top:6px;
}
.collection-list .collection-list__row:not(.swiper-wrapper) .collection-list__col{ width:100%; }


.collection-list .collection-list__card:hover {
  box-shadow: 0 0 20px rgba(255,122,0,.25), 0 0 40px rgba(255,140,0,.15);
  transform: translateY(-4px) scale(1.01);
}
/* Estado base: texto negro sólido (sin gradiente) */
.collection-list .collection-list__card-title{
  color: var(--kem-text);
  background: none;
  -webkit-text-fill-color: currentColor; /* asegura color sólido en WebKit */
  transition: color .25s ease, text-shadow .25s ease, background .25s ease, -webkit-text-fill-color .25s ease;
}

/* Hover: gradiente naranja + “glow” sutil */
.collection-list .collection-list__card:hover .collection-list__card-title{
  color: transparent; /* fallback para navegadores que necesitan esto */
  background: linear-gradient(90deg, var(--kem-orange), var(--kem-orange-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;   /* muestra el gradiente en el texto */
  text-shadow: 0 0 12px rgba(255,122,0,.35); /* brillo suave */
}


/* ===== Subrayado dinámico a prueba de balas (escala en hover) ===== */
.collection-list .collection-list__title{
  position: relative;
  display: inline-block;           /* el subrayado mide el texto, no el contenedor */
  text-align: center;
}

/* Línea base: usa una anchura fija o la que ya tengas; la ampliamos con scaleX */
.collection-list .collection-list__title:after{
  content:"";
  display:block;
  height:4px;
  width: var(--kem-underline, 160px) !important;  /* base; ajusta si quieres */
  margin:10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg,var(--kem-orange),var(--kem-orange-2),var(--kem-orange-3));
  opacity:.95;

  /* Magia: en vez de cambiar width, escalamos */
  transform: scaleX(var(--kem-underline-scale, 1));
  transform-origin: center;
  transition: transform .28s ease, opacity .28s ease;
}

/* Hover: dispara la escala desde el header o desde la tarjeta (elige el que prefieras) */
.collection-list .collection-list__header:hover .collection-list__title:after,
.collection-list .collection-list__card:hover ~ .collection-list__header .collection-list__title:after{
  --kem-underline-scale: 1.35;   /* cuánto se expande */
  opacity: 1;
}

/* Si quieres que el hover sea SOLO del título (y no del header), usa este en su lugar: */
/*
.collection-list .collection-list__title:hover:after{
  --kem-underline-scale: 1.35;
  opacity: 1;
}
*/

/* (Opcional) Variante por sección si tu Custom CSS no procesa Liquid: 
   reemplaza ABC por el ID real de tu sección si necesitas más “peso”.
*/
/*
#shopify-section-ABC .collection-list__title:after{
  width: 160px !important;
}
#shopify-section-ABC .collection-list__header:hover .collection-list__title:after{
  --kem-underline-scale: 1.35;
}
*/

/* Efecto de brillo naranja en hover */
.collection-list .collection-list__title {
  transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
}
.collection-list .collection-list__title:hover {
  background: linear-gradient(90deg, var(--kem-orange), var(--kem-orange-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 122, 0, 0.3);
}

/* 🔶 KemZone — Tamaño del heading de la Collection List */
.collection-list .collection-list__title {
  font-size: clamp(24px, 4.8vw, 40px) !important; /* ← ajusta este valor */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.015em;
  color: var(--kem-text);
}


/* KemZone – Footer complement (opcional) */
.footer .footer__navigation-list-link,
.footer .footer__text-rte a { text-underline-offset: 2px; } /* mejor legibilidad */
@media (hover:hover) {
  .footer .footer__navigation-list-link:hover,
  .footer .footer__text-rte a:hover { text-decoration-thickness: 2px; }
}
/* Pequeño ajuste de logo si es muy alto */
.footer .footer__logo { image-rendering: -webkit-optimize-contrast; }

/* Quitar subrayado en enlaces de MENÚ del footer (desktop y móvil) */
.footer .footer__navigation-list-link {
  border-bottom: none !important;
  text-decoration: none !important;
}
.footer .footer__navigation-list-link:hover,
.footer .footer__navigation-list-link:focus {
  border-bottom: none !important;
  text-decoration: none !important;
  /* opcional: mantener feedback de hover con color */
  color: var(--footer-link-hover-color);
}



/* === Mover el contenedor de contacto a la derecha === */
#shopify-section-{{ section.id }} .contact__container {
  position: relative;
  left: 300px; /* <-- ajusta el valor: 20px, 50px, 80px según necesites */
  transition: left 0.3s ease;
}

/* Asegura que el contenido no se corte ni se desborde */
#shopify-section-{{ section.id }} .contact__content {
  overflow: visible;
}

/* Mantiene el grid centrado y estable */
@media (min-width: 992px) {
  #shopify-section-{{ section.id }} .contact__content-row {
    grid-template-columns: 0.9fr 1.6fr; /* mantiene la derecha más ancha */
    align-items: start;
    justify-content: start; /* evita que se contraiga al moverlo */
    column-gap: 32px;
  }
}


/* Oculta el título automático "Política de reembolso" en la página */
.template-policy h1,
.template-policy .page-title,
.shopify-policy__title {
  display: none !important;
}




/* === Hover bonito para tarjetas de producto === */
.product-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform, box-shadow;
}

.product-card .product-card__image-wrapper,
.product-card .product-card__image-picture,
.product-card .product-card__image {
  transition: transform .35s ease;
}

/* Flotar + sombra al pasar el mouse por la tarjeta */
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

/* Zoom muy sutil solo a la imagen */
.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image {
  transform: scale(1.04);
}

/* Un borde sutil naranja (a juego con tu toast), si la tarjeta tiene borde */
.product-card--with-borders:hover,
.product-card--with-borders:focus-within {
  border-color: #ff8c00;
}

/* Accesibilidad: si el usuario prefiere menos animación, reduce efectos */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card .product-card__image {
    transition: none !important;
  }
}


/* ===== RESET de lo anterior que no te gustó ===== */
.product-card::after {            /* quita el glow naranja */
  opacity: 0 !important;
  box-shadow: none !important;
}
.product-card .product-card__title::after { /* quita la línea del título */
  width: 0 !important;
}
.product-card .product-card-icon,
.product-card .add-to-cart-icon {           /* sin levantar ni sombra extra */
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ===== Hover minimal elegante ===== */
.product-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform, box-shadow;
}

/* levanta muy poquito y sombra suave, sin exagerar */
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* zoom leve de la imagen */
.product-card .product-card__image,
.product-card .product-card__image-picture,
.product-card .product-card__image-wrapper-link img {
  transition: transform .25s ease;
}
.product-card:hover .product-card__image,
.product-card:hover .product-card__image-picture,
.product-card:hover .product-card__image-wrapper-link img {
  transform: scale(1.035);
}

/* overlay sutil (vignette/luz) sobre la imagen para darle profundidad */
.product-card .product-card__image-wrapper-link {
  position: relative;
  display: block;
  overflow: hidden;
}
.product-card .product-card__image-wrapper-link::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.product-card:hover .product-card__image-wrapper-link::after,
.product-card:focus-within .product-card__image-wrapper-link::after {
  opacity: 1;
}

/* si tu tema muestra bordes, realce muy discreto al pasar */
.product-card--with-borders:hover {
  border-color: #e8e8e8;
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card .product-card__image,
  .product-card .product-card__image-picture,
  .product-card .product-card__image-wrapper-link::after {
    transition: none !important;
  }
}

/* Base: mantiene placeholder (blanco + sombra) y fondo semi-transparente */
.custom-id-box input[type="text"],
.custom-id-box input[type="tel"],
.custom-id-box input[type="number"] {
  color: inherit;            /* placeholder conserva su estilo */
  text-shadow: inherit;
  background-color: rgba(255, 255, 255, .6); /* mismo fondo en ambos estados */
}

/* Solo cuando hay texto real (no placeholder) => negro sin sombra */
.custom-id-box input[type="text"]:not(:placeholder-shown),
.custom-id-box input[type="tel"]:not(:placeholder-shown),
.custom-id-box input[type="number"]:not(:placeholder-shown) {
  color: #000 !important;
  caret-color: #000;
  text-shadow: none !important;
  /* importante: NO cambiar background-color; queda semi-transparente */
}

/* Autofill (Chrome/Edge/Safari) también semi-transparente */
.custom-id-box input:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, .6) inset !important;
}