{
  "version": 3,
  "sources": ["src/app/features/tienda/product-detail/components/image-gallery/image-gallery.component.css"],
  "sourcesContent": ["/* ==========================================================================\n   ImageGalleryComponent — Product detail gallery with foil overlays\n   ========================================================================== */\n\n.gallery {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n/* ── Main image container ───────────────────────────────────── */\n.gallery__main {\n  position: relative;\n  overflow: hidden;\n  background-color: #fafafa;\n  border: 1px solid #fafafa;\n  border-radius: var(--radius-product-card);\n  padding: var(--space-4);\n}\n\n.gallery__main > .gallery__image:not(.gallery__face) {\n  cursor: var(--cursor-zoom);\n}\n\n.gallery__main--single {\n  aspect-ratio: 63 / 88;\n}\n\n.gallery__image {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ── Badge overlay (top-left) ──────────────────────────────── */\n.gallery__badges {\n  position: absolute;\n  top: var(--space-3);\n  left: var(--space-3);\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n/* ── Foil overlays — same pattern as product-card (§8.3) ──── */\n.gallery__main[data-variant='foil']::after,\n.gallery__main[data-variant='specialty-foil']::after,\n.gallery__main[data-variant='extended']::after,\n.gallery__main[data-variant='showcase']::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--transition-normal);\n}\n\n/* Foil: rainbow diagonal */\n.gallery__main[data-variant='foil']::after {\n  background: linear-gradient(135deg,\n    #ff0000, #ff8c00, #ffff00, #00ff00, #0000ff, #800080);\n  mix-blend-mode: color-dodge;\n  opacity: 0.2;\n}\n\n.gallery__main[data-variant='foil']:hover::after {\n  opacity: 0.38;\n}\n\n/* Specialty Foil: conic fragment */\n.gallery__main[data-variant='specialty-foil']::after {\n  background: conic-gradient(from 0deg,\n    #ff0000, #ff8c00 60deg, #ffff00 120deg,\n    #008000 180deg, #0000ff 240deg, #800080 300deg, #ff0000 360deg);\n  mix-blend-mode: color-dodge;\n  opacity: 0.15;\n}\n\n.gallery__main[data-variant='specialty-foil']:hover::after {\n  opacity: 0.3;\n}\n\n/* Extended & Showcase: glow border */\n.gallery__main[data-variant='extended']::after,\n.gallery__main[data-variant='showcase']::after {\n  border: 2px solid;\n  opacity: 0.85;\n}\n\n.gallery__main[data-variant='extended']::after {\n  border-color: var(--color-badge-extended);\n  box-shadow: inset 0 0 24px color-mix(in srgb, var(--color-badge-extended) 35%, transparent);\n}\n\n.gallery__main[data-variant='showcase']::after {\n  border-color: var(--color-badge-showcase);\n  box-shadow: inset 0 0 24px color-mix(in srgb, var(--color-badge-showcase) 35%, transparent);\n}\n\n.gallery__main[data-variant='extended']:hover::after,\n.gallery__main[data-variant='showcase']:hover::after {\n  opacity: 1;\n}\n\n/* ── Double-face card flip ───���─────────────────────────────── */\n.gallery__flip-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.6s ease;\n  transform-style: preserve-3d;\n  cursor: var(--cursor-flip);\n}\n\n.gallery__flip-container:focus-visible {\n  outline: 2px solid var(--color-action-primary);\n  outline-offset: 4px;\n}\n\n.gallery__flip-container--flipped {\n  transform: rotateY(180deg);\n}\n\n.gallery__face {\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.gallery__face--front {\n  position: relative;\n}\n\n.gallery__face--back {\n  position: absolute;\n  inset: 0;\n  transform: rotateY(180deg);\n}\n\n.gallery__flip-btn {\n  position: absolute;\n  bottom: var(--space-3);\n  right: var(--space-3);\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-3);\n  background-color: var(--color-surface-primary);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--radius-button);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-xs);\n  font-weight: var(--font-weight-body-medium);\n  color: var(--color-text-primary);\n  cursor: pointer;\n  box-shadow: var(--shadow-button);\n  transition: background-color var(--transition-fast);\n}\n\n.gallery__flip-btn:hover {\n  background-color: var(--color-surface-secondary);\n}\n\n.gallery__zoom-btn {\n  right: auto;\n  left: var(--space-3);\n  cursor: var(--cursor-zoom);\n}\n\n/* ── Thumbnail strip ────────────────────────────────────���──── */\n.gallery__thumbs {\n  display: flex;\n  gap: var(--space-2);\n  overflow-x: auto;\n  padding-bottom: var(--space-1);\n  scrollbar-width: thin;\n}\n\n.gallery__thumb {\n  flex-shrink: 0;\n  width: 64px;\n  height: 64px;\n  padding: var(--space-1);\n  background-color: #fafafa;\n  border: 2px solid transparent;\n  border-radius: var(--radius-badge);\n  cursor: pointer;\n  transition: border-color var(--transition-fast);\n}\n\n.gallery__thumb:hover {\n  border-color: var(--color-border-strong);\n}\n\n.gallery__thumb--active {\n  border-color: var(--color-action-primary);\n}\n\n.gallery__thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ── Reduced motion ────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .gallery__main::after {\n    transition: none;\n  }\n\n  .gallery__flip-container {\n    transition: none;\n  }\n}\n\n/* ── Mobile adjustments ───────���────────────────────────────── */\n@media (max-width: 47.9375rem) {\n  .gallery__main {\n    padding: var(--space-3);\n  }\n\n  .gallery__thumb {\n    width: 56px;\n    height: 56px;\n  }\n}\n"],
  "mappings": "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",
  "names": []
}