/**
 * ═══════════════════════════════════════════════════════════════
 * PRODUCT CARD - Tarjetas de producto globales reutilizables
 * ═══════════════════════════════════════════════════════════════
 *
 * Archivo global cargado en layout.ejs
 * Usado en: shop, carousel, y cualquier vista de productos
 *
 * CLASES PRINCIPALES:
 * - .product-card-link    → Link contenedor de la tarjeta
 * - .product-card         → Tarjeta de producto
 * - .product-image-*      → Contenedor y elemento de imagen
 * - .product-info         → Información del producto
 * - .product-prices       → Sección de precios
 * - .btn-add-cart         → Botón añadir al carrito
 * - .badge-*              → Badges universales (blackfriday, etc.)
 *
 * Compatible con dark mode automáticamente (usa variables CSS)
 */

/* ═══════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO - BASE
   ═══════════════════════════════════════════════════════════════ */

.product-card-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.product-card-link:hover .product-card,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR DE IMAGEN
   ═══════════════════════════════════════════════════════════════ */

.product-image-container {
  position: relative;
  top: 0;
  width: 100%;
  padding-top: 100%; /* Aspect ratio 1:1 */
  /* background: var(--bg-secondary); */
  overflow: hidden;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.product-card-link:hover .product-image,
.product-card:hover .product-image {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES SUPERIORES
   ═══════════════════════════════════════════════════════════════ */

.product-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.badges-container {
  position: relative;
  text-transform: uppercase;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   INFORMACIÓN DEL PRODUCTO
   ═══════════════════════════════════════════════════════════════ */

.product-info {
  padding: 0.875rem; /* 20px */
  display: flex;
  flex-direction: column;
  /* gap: 0.75rem; */
  flex: 1;
  /*user-select: none;  ✅ Prevenir selección de texto al arrastrar 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;*/
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-category {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.product-code {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN DE PRECIOS
   ═══════════════════════════════════════════════════════════════ */

.product-prices {
  display: flex;
  flex-direction: column;
  /* gap: 0.375rem; */
  margin-top: auto;
}

.price-original {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: line-through;
  font-weight: 500;
}

.price-final {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.price-currency {
  font-size: 1rem;
  font-weight: 600;
}

.price-savings {
  font-size: 0.8125rem;
  color: var(--accent-color);
  font-weight: 600;
  /* background: rgba(255, 48, 0, 0.1); */
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  /* margin-top: 0.25rem; */
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN AÑADIR AL CARRITO
   ═══════════════════════════════════════════════════════════════ */

.btn-add-cart {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--cm-btn-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* margin-top: 0.75rem; */
  transition: var(--transition-smooth);
  position: relative;
  z-index: 10; /* ✅ Asegurar que esté sobre el carousel drag */
  pointer-events: auto; /* ✅ Permitir clicks aunque el padre tenga eventos */
}

.btn-add-cart:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-add-cart:disabled {
  background: var(--bg-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES UNIVERSALES (EVENTOS, DESCUENTOS, STOCK)
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

/* Badge Black Friday */
.badge-blackfriday {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffcc00, #ffb300);
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 3px rgba(0,0,0,.3);
  display: flex;
  gap: 5px;
}

.badge-blackfriday .black {
  color: #000000;
  font-weight: bold;
  font-style: italic;
}

.badge-blackfriday .friday {
  color: #ffffff;
  background: #000000;
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-style: italic;
}

.badge-blackfriday:before, .badge-blackfriday:after {
  content: "";
  position: absolute;
}

.badge-blackfriday:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: inherit;
  border-radius: 5px 0 0 5px;
}

.badge-blackfriday:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* Badge Back to School */
.badge-backtoschool {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background:
    radial-gradient(120px 70px at 18% 10%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(200px 90px at 80% 0%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(90deg, #ffd24d 0%, #ffb800 35%, #ff8a00 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 3px rgba(0,0,0,.3);
  display: flex;
  gap: 5px;
}

.badge-backtoschool .back {
  color: #1157ee;
  font-weight: bold;
  font-size: 0.8rem;
}

.badge-backtoschool .school {
  color: #ffffff;
  background:linear-gradient(180deg, #ff4d66, #e9003a);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold; 
}

.badge-backtoschool .school::after{
  content:"";
  position:absolute; inset:8px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.35);
  pointer-events:none;
}


.badge-backtoschool:before, .badge-backtoschool:after {
  content: "";
  position: absolute;
}

.badge-backtoschool:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: linear-gradient(-180deg, #ffe496 0%, #fed96d 100%);
  border-radius: 5px 0 0 5px;
}

.badge-backtoschool:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* Badge Promo Aniversario */
.badge-promoaniversario {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: linear-gradient(105deg, #a06200 0%, #e8c432 35%, #f7e06a 50%, #e8c432 65%, #a06200 100%);
  background-size: 250% 100%;
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex;
  gap: 5px;
  align-items: center;
}

.badge-promoaniversario .promo {
  color: #3d1800;
  font-weight: bold;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.badge-promoaniversario .aniversario {
  color: #fff8d6;
  background: linear-gradient(180deg, #6b3e00, #3d1800);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-style: italic;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.badge-promoaniversario:before,
.badge-promoaniversario:after {
  content: "";
  position: absolute;
}

.badge-promoaniversario:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: linear-gradient(180deg, #e8c432, #a06200);
  border-radius: 5px 0 0 5px;
}

.badge-promoaniversario:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE DÍA DE LA MADRE
   ═══════════════════════════════════════════════════════════════ */

.badge-mothersday {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #c2185b 0%, #e91e8c 55%, #f06292 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  display: flex;
  gap: 5px;
  align-items: center;
}

.badge-mothersday .dia {
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 0.72rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.badge-mothersday .madre {
  color: #fce4ec;
  background: linear-gradient(180deg, #880e4f, #c2185b);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-style: italic;
  font-size: 0.72rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.badge-mothersday:before,
.badge-mothersday:after {
  content: "";
  position: absolute;
}

.badge-mothersday:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: linear-gradient(180deg, #e91e8c, #c2185b);
  border-radius: 5px 0 0 5px;
}

.badge-mothersday:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* ═══════ BADGE DÍA DE LA MADRE — íconos flotantes ═══════ */

.badge-mothersday-icons {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}

.badge-mothersday-icons img {
  width: 44px;
  height: 44px;
}

/* tuli — izquierda, erguido con leve inclinación */
.badge-mothersday-icons img:nth-child(1) {
  transform: rotate(-10deg) translateY(3px);
  filter: drop-shadow(2px 3px 5px rgba(194,24,91,.3));
}

/* petal — centro, flotando alto para no obstruir */
.badge-mothersday-icons img:nth-child(2) {
  width: 34px;
  height: 34px;
  transform: translateY(-26px);
  filter: drop-shadow(0px 4px 8px rgba(233,30,140,.45));
}

/* hana — derecha, base decorativa con leve inclinación */
.badge-mothersday-icons img:nth-child(3) {
  transform: rotate(8deg) translateY(2px);
  filter: drop-shadow(-2px 3px 5px rgba(0,0,0,.25));
}

@keyframes md-float-tuli {
  0%, 100% { transform: rotate(-10deg) translateY(3px); }
  50%      { transform: rotate(-10deg) translateY(-7px); }
}

@keyframes md-float-petal {
  0%, 100% { transform: translateY(-26px) rotate(0deg); }
  50%      { transform: translateY(-36px) rotate(20deg); }
}

@keyframes md-float-hana {
  0%, 100% { transform: rotate(8deg) translateY(2px); }
  50%      { transform: rotate(8deg) translateY(-8px); }
}

.product-card-link:hover .badge-mothersday-icons img:nth-child(1) {
  animation: md-float-tuli 2.4s ease-in-out infinite;
}

.product-card-link:hover .badge-mothersday-icons img:nth-child(2) {
  animation: md-float-petal 2.0s ease-in-out infinite 0.3s;
}

.product-card-link:hover .badge-mothersday-icons img:nth-child(3) {
  animation: md-float-hana 2.6s ease-in-out infinite 0.6s;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE DÍA DEL PADRE
   ═══════════════════════════════════════════════════════════════ */
.badge-fathersday { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #0D47A1 0%, #1976D2 55%, #42A5F5 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-fathersday .fdp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-fathersday .fdp2 { color: #E3F2FD; background: linear-gradient(180deg, #01579B, #0D47A1); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-fathersday:before, .badge-fathersday:after { content: ""; position: absolute; }
.badge-fathersday:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #1976D2, #0D47A1); border-radius: 5px 0 0 5px; }
.badge-fathersday:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-fathersday-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-fathersday-icons img { width: 44px; height: 44px; }
.badge-fathersday-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(13,71,161,.3)); }
.badge-fathersday-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(13,71,161,.4)); }
.badge-fathersday-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(13,71,161,.3)); }
@keyframes fd-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes fd-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes fd-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-fathersday-icons img:nth-child(1) { animation: fd-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-fathersday-icons img:nth-child(2) { animation: fd-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-fathersday-icons img:nth-child(3) { animation: fd-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE DÍA DEL MAESTRO
   ═══════════════════════════════════════════════════════════════ */
.badge-teachersday { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #4A148C 0%, #7B1FA2 55%, #AB47BC 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-teachersday .tdp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-teachersday .tdp2 { color: #F3E5F5; background: linear-gradient(180deg, #1A0030, #4A148C); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-teachersday:before, .badge-teachersday:after { content: ""; position: absolute; }
.badge-teachersday:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #7B1FA2, #4A148C); border-radius: 5px 0 0 5px; }
.badge-teachersday:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-teachersday-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-teachersday-icons img { width: 44px; height: 44px; }
.badge-teachersday-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(74,20,140,.3)); }
.badge-teachersday-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(74,20,140,.4)); }
.badge-teachersday-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(74,20,140,.3)); }
@keyframes td-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes td-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes td-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-teachersday-icons img:nth-child(1) { animation: td-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-teachersday-icons img:nth-child(2) { animation: td-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-teachersday-icons img:nth-child(3) { animation: td-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE FIESTAS PATRIAS
   ═══════════════════════════════════════════════════════════════ */
.badge-fiestaspatrias { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #B71C1C 0%, #E53935 55%, #EF9A9A 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-fiestaspatrias .fpp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-fiestaspatrias .fpp2 { color: #FFEBEE; background: linear-gradient(180deg, #7F0000, #B71C1C); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-fiestaspatrias:before, .badge-fiestaspatrias:after { content: ""; position: absolute; }
.badge-fiestaspatrias:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #E53935, #B71C1C); border-radius: 5px 0 0 5px; }
.badge-fiestaspatrias:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-fiestaspatrias-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-fiestaspatrias-icons img { width: 44px; height: 44px; }
.badge-fiestaspatrias-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(183,28,28,.3)); }
.badge-fiestaspatrias-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(183,28,28,.4)); }
.badge-fiestaspatrias-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(183,28,28,.3)); }
@keyframes fp-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes fp-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes fp-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-fiestaspatrias-icons img:nth-child(1) { animation: fp-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-fiestaspatrias-icons img:nth-child(2) { animation: fp-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-fiestaspatrias-icons img:nth-child(3) { animation: fp-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE OFERTAS WOW
   ═══════════════════════════════════════════════════════════════ */
.badge-ofertaswow { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #E65100 0%, #FF6D00 55%, #FFAB40 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-ofertaswow .owp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-ofertaswow .owp2 { color: #FFF3E0; background: linear-gradient(180deg, #BF360C, #E65100); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-ofertaswow:before, .badge-ofertaswow:after { content: ""; position: absolute; }
.badge-ofertaswow:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #FF6D00, #E65100); border-radius: 5px 0 0 5px; }
.badge-ofertaswow:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-ofertaswow-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-ofertaswow-icons img { width: 44px; height: 44px; }
.badge-ofertaswow-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(230,81,0,.3)); }
.badge-ofertaswow-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(230,81,0,.5)); }
.badge-ofertaswow-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(230,81,0,.3)); }
@keyframes ow-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes ow-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes ow-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-ofertaswow-icons img:nth-child(1) { animation: ow-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-ofertaswow-icons img:nth-child(2) { animation: ow-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-ofertaswow-icons img:nth-child(3) { animation: ow-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE MES GAMER
   ═══════════════════════════════════════════════════════════════ */
.badge-mesgamer { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #4A00E0 0%, #7B00FF 55%, #B44FFF 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-mesgamer .mgp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-mesgamer .mgp2 { color: #EDE7F6; background: linear-gradient(180deg, #1A0066, #4A00E0); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-mesgamer:before, .badge-mesgamer:after { content: ""; position: absolute; }
.badge-mesgamer:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #7B00FF, #4A00E0); border-radius: 5px 0 0 5px; }
.badge-mesgamer:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-mesgamer-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-mesgamer-icons img { width: 44px; height: 44px; }
.badge-mesgamer-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(74,0,224,.35)); }
.badge-mesgamer-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(123,0,255,.5)); }
.badge-mesgamer-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(74,0,224,.35)); }
@keyframes mg-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes mg-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes mg-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-mesgamer-icons img:nth-child(1) { animation: mg-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-mesgamer-icons img:nth-child(2) { animation: mg-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-mesgamer-icons img:nth-child(3) { animation: mg-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE HALLOWEEN
   ═══════════════════════════════════════════════════════════════ */
.badge-halloween { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #4A1500 0%, #E65100 55%, #FF6D00 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-halloween .hwp1 { color: #FFE0B2; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.badge-halloween .hwp2 { color: #FF6D00; background: linear-gradient(180deg, #1A0800, #4A1500); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-halloween:before, .badge-halloween:after { content: ""; position: absolute; }
.badge-halloween:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #E65100, #4A1500); border-radius: 5px 0 0 5px; }
.badge-halloween:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-halloween-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-halloween-icons img { width: 44px; height: 44px; }
.badge-halloween-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(74,21,0,.4)); }
.badge-halloween-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(230,81,0,.5)); }
.badge-halloween-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(74,21,0,.4)); }
@keyframes hw-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes hw-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes hw-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-halloween-icons img:nth-child(1) { animation: hw-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-halloween-icons img:nth-child(2) { animation: hw-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-halloween-icons img:nth-child(3) { animation: hw-fr 2.6s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE NAVIDAD
   ═══════════════════════════════════════════════════════════════ */
.badge-navidad { position: absolute; top: 15px; padding: 8px 10px; background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 55%, #66BB6A 100%); border-radius: 0 8px 8px 0; box-shadow: -1px 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; gap: 5px; align-items: center; }
.badge-navidad .nvp1 { color: #ffffff; font-weight: bold; font-style: italic; font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.badge-navidad .nvp2 { color: #E8F5E9; background: linear-gradient(180deg, #003300, #1B5E20); border-radius: 5px; padding: 2px 5px; font-weight: bold; font-style: italic; font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.badge-navidad:before, .badge-navidad:after { content: ""; position: absolute; }
.badge-navidad:before { width: 7px; height: 100%; top: 0; left: -6.5px; padding: 0 0 7px; background: linear-gradient(180deg, #2E7D32, #1B5E20); border-radius: 5px 0 0 5px; }
.badge-navidad:after { width: 5px; height: 5px; bottom: -5px; left: -4.5px; background: rgb(255,255,255); border-radius: 5px 0 0 5px; }
.badge-navidad-icons { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; z-index: 3; pointer-events: none; }
.badge-navidad-icons img { width: 44px; height: 44px; }
.badge-navidad-icons img:nth-child(1) { transform: rotate(-10deg) translateY(3px); filter: drop-shadow(2px 3px 5px rgba(27,94,32,.3)); }
.badge-navidad-icons img:nth-child(2) { width: 38px; height: 38px; transform: translateY(-18px); filter: drop-shadow(0px 4px 8px rgba(27,94,32,.45)); }
.badge-navidad-icons img:nth-child(3) { transform: rotate(8deg) translateY(2px); filter: drop-shadow(-2px 3px 5px rgba(27,94,32,.3)); }
@keyframes nv-fl { 0%,100% { transform: rotate(-10deg) translateY(3px); } 50% { transform: rotate(-10deg) translateY(-7px); } }
@keyframes nv-fc { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(-28px) rotate(15deg); } }
@keyframes nv-fr { 0%,100% { transform: rotate(8deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(-8px); } }
.product-card-link:hover .badge-navidad-icons img:nth-child(1) { animation: nv-fl 2.4s ease-in-out infinite; }
.product-card-link:hover .badge-navidad-icons img:nth-child(2) { animation: nv-fc 2.0s ease-in-out infinite 0.3s; }
.product-card-link:hover .badge-navidad-icons img:nth-child(3) { animation: nv-fr 2.6s ease-in-out infinite 0.6s; }

@keyframes pa-shimmer {
  0%   { background-position: 150% center; }
  100% { background-position: -150% center; }
}

.product-card-link:hover .badge-promoaniversario {
  animation: pa-shimmer 1.8s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ═══════════════════════════════════════════════════════════════
   BADGE BLACK FRIDAY — rectángulos degradados (exclusivo blackfriday)
   ═══════════════════════════════════════════════════════════════ */

.badge-blackfriday-rects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Base compartida */
.bf-rect {
  position: absolute;
  width: 30px;
  height: 100px;
  pointer-events: none;
}

.bf-rect::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(180deg, #f72586, #3b0da4);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bf-rect--inv::before {
  background: linear-gradient(180deg, #3b0da4, #f72586);
}

/* ── Grupo inferior izquierdo ── */
.bf-rect--l1 { bottom:  20px;  left: -10px; transform: rotate(-135deg); }
.bf-rect--l2 { bottom: -30px; left:  5px; transform: rotate(-135deg); }
.bf-rect--l3 { bottom: -60px; left:  45px; transform: rotate(-135deg); }

/* ── Grupo superior derecho ── */
.bf-rect--r1 { top:  20px;  right: -5px; transform: rotate(45deg); }
.bf-rect--r2 { top: -30px; right:  15px; transform: rotate(45deg); }
.bf-rect--r3 { top: -45px; right:  70px; transform: rotate(45deg); }

/* Keyframes — desplazamiento a lo largo del eje local de cada grupo */
@keyframes bf-slide-r {
  0%, 100% { transform: rotate(45deg)    translateY(0); }
  50%      { transform: rotate(45deg)    translateY(-10px); }
}

@keyframes bf-slide-l {
  0%, 100% { transform: rotate(-135deg) translateY(0); }
  50%      { transform: rotate(-135deg) translateY(-10px); }
}

/* Hover — cada rectángulo entra/sale con stagger independiente */
.product-card-link:hover .bf-rect--r1 { animation: bf-slide-r 2.0s ease-in-out infinite; }
.product-card-link:hover .bf-rect--r2 { animation: bf-slide-r 2.0s ease-in-out infinite 0.25s; }
.product-card-link:hover .bf-rect--r3 { animation: bf-slide-r 2.0s ease-in-out infinite 0.5s; }

.product-card-link:hover .bf-rect--l1 { animation: bf-slide-l 2.0s ease-in-out infinite 0.15s; }
.product-card-link:hover .bf-rect--l2 { animation: bf-slide-l 2.0s ease-in-out infinite 0.4s; }
.product-card-link:hover .bf-rect--l3 { animation: bf-slide-l 2.0s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE BACK TO SCHOOL — íconos flotantes (exclusivo backtoschool)
   ═══════════════════════════════════════════════════════════════ */

.badge-backtoschool-icons {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}

.badge-backtoschool-icons img {
  width: 44px;
  height: 44px;
}

/* Libro — izquierda, inclinado, altura base */
.badge-backtoschool-icons img:nth-child(1) {
  transform: rotate(-35deg) translateY(4px);
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.38));
}

/* Compás — centro, inclinado, más arriba */
.badge-backtoschool-icons img:nth-child(2) {
  transform: rotate(7deg) translateY(1px);
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.42));
}

/* Lápiz — derecha, inclinado, más abajo */
.badge-backtoschool-icons img:nth-child(3) {
  transform: rotate(-9deg) translateY(-2px);
  filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.35));
}

/* Keyframes — cada ícono mantiene su rotación y oscila verticalmente */
@keyframes bts-float-1 {
  0%, 100% { transform: rotate(-35deg) translateY(4px); }
  50%      { transform: rotate(-35deg) translateY(-4px); }
}

@keyframes bts-float-2 {
  0%, 100% { transform: rotate(7deg) translateY(1px); }
  50%      { transform: rotate(7deg) translateY(-7px); }
}

@keyframes bts-float-3 {
  0%, 100% { transform: rotate(-9deg) translateY(-2px); }
  50%      { transform: rotate(-9deg) translateY(-9px); }
}

/* Hover sobre la tarjeta — cada ícono flota con ritmo independiente */
.product-card-link:hover .badge-backtoschool-icons img:nth-child(1) {
  animation: bts-float-1 2.0s ease-in-out infinite;
}

.product-card-link:hover .badge-backtoschool-icons img:nth-child(2) {
  animation: bts-float-2 2.4s ease-in-out infinite 0.25s;
}

.product-card-link:hover .badge-backtoschool-icons img:nth-child(3) {
  animation: bts-float-3 1.9s ease-in-out infinite 0.5s;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE PROMO ANIVERSARIO — íconos flotantes (exclusivo promoaniversario)
   ═══════════════════════════════════════════════════════════════ */

.badge-promoaniversario-icons {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}

.badge-promoaniversario-icons img {
  width: 44px;
  height: 44px;
}

/* stars — izquierda, inclinado hacia adentro */
.badge-promoaniversario-icons img:nth-child(1) {
  transform: rotate(-20deg) translateY(4px);
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.35));
}

/* star — centro, más alto, ligero escala */
.badge-promoaniversario-icons img:nth-child(2) {
  transform: scale(1.15) translateY(-4px);
  filter: drop-shadow(0px 3px 7px rgba(200, 145, 10, 0.55));
}

/* stars — derecha, espejado, inclinado en sentido opuesto */
.badge-promoaniversario-icons img:nth-child(3) {
  transform: rotate(20deg) translateY(4px) scaleX(-1);
  filter: drop-shadow(-2px 3px 5px rgba(0, 0, 0, 0.35));
}

/* Keyframes — cada ícono mantiene su transform base y sube */
@keyframes pa-float-l {
  0%, 100% { transform: rotate(-20deg) translateY(4px); }
  50%      { transform: rotate(-20deg) translateY(-6px); }
}

@keyframes pa-float-center {
  0%, 100% { transform: scale(1.15) translateY(-4px) rotate(0deg); }
  50%      { transform: scale(1.15) translateY(-12px) rotate(15deg); }
}

@keyframes pa-float-r {
  0%, 100% { transform: rotate(20deg) translateY(4px) scaleX(-1); }
  50%      { transform: rotate(20deg) translateY(-6px) scaleX(-1); }
}

/* Hover sobre la tarjeta — cada ícono flota con ritmo independiente */
.product-card-link:hover .badge-promoaniversario-icons img:nth-child(1) {
  animation: pa-float-l 2.2s ease-in-out infinite;
}

.product-card-link:hover .badge-promoaniversario-icons img:nth-child(2) {
  animation: pa-float-center 1.8s ease-in-out infinite 0.2s;
}

.product-card-link:hover .badge-promoaniversario-icons img:nth-child(3) {
  animation: pa-float-r 2.2s ease-in-out infinite 0.4s;
}

/* Badge de Descuento */
.badge-discount {
  background: var(--accent-color);
  color: #ffffff;
}

/* Badge de Stock Alto */
.badge-stock-high {
  background: #10b981;
  color: #ffffff;
}

/* Badge de Stock Bajo */
.badge-stock-low {
  background: #f59e0b;
  color: #ffffff;
}

/* Badge Sin Stock */
.badge-out-stock {
  background: var(--bg-tertiary);
  color: var(--text-light);
}

/* Badge Nuevo */
.badge-new {
  background: var(--primary-color);
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .product-info {
    padding: 1rem;
  }

  .product-title {
    font-size: 0.9375rem;
  }

  .price-final {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OVERLAY DE CONFIRMACIÓN AL AÑADIR AL CARRITO
   ═══════════════════════════════════════════════════════════════ */

.product-card-added-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-radius: var(--radius-lg);
}

.product-card-added-overlay.active {
  opacity: 1;
  visibility: visible;
}

.product-card-added-check {
  width: 80px;
  height: 80px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
  transform: scale(0);
  animation: checkPop 0.5s ease forwards;
}

.product-card-added-check svg {
  width: 48px;
  height: 48px;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@keyframes checkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Dark mode para overlay */
.dark_mode .product-card-added-overlay {
  background: rgba(15, 23, 42, 0.95);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* No se necesitan estilos adicionales para dark mode,
   ya que todas las variables CSS se ajustan automáticamente
   cuando body.dark_mode está activo */