/* Albaris brand override — loaded AFTER Pixio style.css so :root wins.
   Palette:
   #8806B3 deep purple   → primary
   #FF128F magenta       → accent (badges, chips)
   #1A0B2E near-black    → secondary (buttons, titles)
   #FBF7FF cool white    → light bg
   #F3E7FF pale lavender → category-section bg
*/

:root {
  --primary: #8806B3;
  --primary-hover: #6E048F;
  --primary-dark: #55036F;

  --secondary: #1A0B2E;
  --secondary-hover: #2C1449;
  --secondary-light: #E7DDFB;

  --accent: #FF128F;

  --title: #1A0B2E;
  --theme-text-color: #1A0B2E;

  --bg-light: #FBF7FF;
  --light: #FBF7FF;
  --light-dark: #F3E7FF;
  --dark: #1A0B2E;
  --dark-light: #F5F1FA;

  --rgba-primary-1: rgba(136, 6, 179, 0.10);
  --rgba-primary-2: rgba(136, 6, 179, 0.20);
  --rgba-primary-3: rgba(136, 6, 179, 0.30);
  --rgba-primary-4: rgba(136, 6, 179, 0.40);
  --rgba-primary-5: rgba(136, 6, 179, 0.50);
  --rgba-primary-6: rgba(136, 6, 179, 0.60);
  --rgba-primary-7: rgba(136, 6, 179, 0.70);
  --rgba-primary-8: rgba(136, 6, 179, 0.80);
  --rgba-primary-9: rgba(136, 6, 179, 0.90);

  --gradient1: linear-gradient(307deg, #F3E7FF 1.9%, #FFDFEF 67.57%);
  --gradient2: linear-gradient(307deg, #FBD1E7 1.9%, #E7B8F5 85.96%);
}

/* Utility hooks so Tailwind arbitraries like text-primary keep working */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }
.text-secondary { color: var(--secondary); }
.bg-secondary { background-color: var(--secondary); }
.border-secondary { border-color: var(--secondary); }
.bg-lightdark { background-color: var(--light-dark); }
.bg-light { background-color: var(--light); }
.bg-light2 { background-color: var(--dark-light); }

/* Accent — magenta reserved for badges/chips/hot spots */
.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }

/* Selection carries brand identity */
::selection { background: var(--primary); color: #fff; }
::-moz-selection { background: var(--primary); color: #fff; }

/* Skeleton shimmer — barrido de luz en vez de parpadeo.
   Va aquí, en CSS plano cargado al final, y no como utilidad de Tailwind: el CSS compilado de la
   plantilla convive con el scan de v4 y hay variantes que no se generan. */
@keyframes albaris-shimmer {
  100% { transform: translateX(100%); }
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background-color: var(--light-dark);
}

.skeleton-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: albaris-shimmer 1.6s ease-in-out infinite;
}

/* Sobre el banner oscuro de la cabecera de categoría. */
.skeleton-shimmer-inverse { background-color: rgba(255, 255, 255, 0.22); }
.skeleton-shimmer-inverse::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after { animation: none; }
}

/* Zoom de la foto al pasar por encima de la tarjeta de producto.
   En CSS plano: la utilidad `group-hover:scale-105` de Tailwind no se genera en este proyecto. */
.product-card-media img {
  transition: transform 500ms ease-out;
  will-change: transform;
}

.product-card:hover .product-card-media img,
.product-card:focus-within .product-card-media img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .product-card-media img { transition: none; }
  .product-card:hover .product-card-media img,
  .product-card:focus-within .product-card-media img { transform: none; }
}

/* "Los más populares": título y pestañas apilados hasta 1200px, lado a lado desde ahí.
   Con 6 pestañas la barra mide ~670px: en la mitad de columna que tenía no entraba a 1024px. */
.popular-tabs-col { min-width: 0; }
.popular-tabs { max-width: 100%; }

@media (min-width: 1200px) {
  .popular-title-col { width: auto; }
  .popular-tabs-col { width: auto; flex: 1 1 0%; }
  .popular-tabs { margin-left: auto; }
}