/**
 * ============================================================
 *  L-LEDS — FASE 2: GALERÍA + SHOP THE ROOM (CSS)
 *  Archivo : ll-gallery.css
 *  Dep.    : ll-tokens.css (Fase 1)
 *
 *  CONTENIDO:
 *   1. Grilla de portafolio masonry-like
 *   2. Tarjeta de ítem (imagen / video)
 *   3. Overlay de información de tarjeta
 *   4. Hotspots "Shop the Room" + animación pulse
 *   5. Panel off-canvas (esqueleto UI)
 *   6. Filtros de categoría
 *   7. Skeleton loader (mientras carga el poster)
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §0 — SECTION WRAPPER (portafolio completo)
   ═══════════════════════════════════════════════════════════ */

.ll-gallery-section {
  padding-block  : var(--ll-space-20) var(--ll-space-24);
  background     : var(--ll-color-bg-base);
}

.ll-gallery-section__header {
  text-align     : center;
  margin-bottom  : var(--ll-space-12);
}

.ll-gallery-section__eyebrow {
  display        : inline-block;
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-primary);
  letter-spacing : var(--ll-tracking-widest);
  text-transform : uppercase;
  margin-bottom  : var(--ll-space-3);
}

.ll-gallery-section__title {
  font-size      : var(--ll-text-2xl);
  font-weight    : var(--ll-font-extrabold);
  color          : var(--ll-color-text-primary);
  letter-spacing : var(--ll-tracking-tight);
  line-height    : var(--ll-leading-tight);
  margin-bottom  : var(--ll-space-4);
}

.ll-gallery-section__title em {
  font-style     : normal;
  color          : var(--ll-color-primary);
}

.ll-gallery-section__subtitle {
  font-size      : var(--ll-text-base);
  color          : var(--ll-color-text-secondary);
  line-height    : var(--ll-leading-loose);
  max-width      : 540px;
  margin-inline  : auto;
}


/* ═══════════════════════════════════════════════════════════
   §1 — FILTROS DE CATEGORÍA
   ═══════════════════════════════════════════════════════════ */

.ll-gallery-filters {
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : var(--ll-space-2);
  margin-bottom  : var(--ll-space-10);
}

.ll-filter-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : var(--ll-space-1);
  padding        : var(--ll-space-2) var(--ll-space-4);
  background     : var(--ll-color-bg-elevated);
  border         : 1px solid var(--ll-color-border);
  border-radius  : var(--ll-radius-full);
  font-family    : var(--ll-font-sans);
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-medium);
  color          : var(--ll-color-text-secondary);
  cursor         : pointer;
  letter-spacing : var(--ll-tracking-wide);
  text-transform : uppercase;
  transition     : all var(--ll-transition-base);
  white-space    : nowrap;
}

.ll-filter-btn:hover {
  border-color   : var(--ll-color-border-accent);
  color          : var(--ll-color-primary);
  background     : var(--ll-color-primary-muted);
}

.ll-filter-btn.is-active {
  background     : var(--ll-color-primary);
  border-color   : var(--ll-color-primary);
  color          : var(--ll-color-text-inverted);
}

.ll-filter-btn__dot {
  /* Pequeño indicador de color por categoría */
  width          : 6px;
  height         : 6px;
  border-radius  : var(--ll-radius-full);
  background     : currentColor;
  flex-shrink    : 0;
}


/* ═══════════════════════════════════════════════════════════
   §2 — GRILLA DE PORTAFOLIO
   Diseño: CSS Grid con column-span para piezas hero
   ═══════════════════════════════════════════════════════════ */

.ll-gallery-grid {
  display              : grid;
  grid-template-columns: repeat(12, 1fr);
  gap                  : var(--ll-space-4);
  max-width            : var(--ll-container-max);
  margin-inline        : auto;
  padding-inline       : var(--ll-container-pad);
}

/* Items por defecto: 4 columnas (de 12) → 3 tarjetas por fila */
.ll-gallery-item {
  grid-column : span 4;
}

/* Item "hero" — ocupa la mitad del grid (6 col) */
.ll-gallery-item--hero {
  grid-column : span 6;
}

/* Item "wide" — ocupa 8 columnas, rompe la monotonía */
.ll-gallery-item--wide {
  grid-column : span 8;
}

/* Item "tall" → usa grid-row para altura doble en desktop */
.ll-gallery-item--tall {
  grid-column : span 4;
  grid-row    : span 2;
}

/* Responsive collapse */
@media (max-width: 1023px) {
  .ll-gallery-item,
  .ll-gallery-item--hero,
  .ll-gallery-item--wide {
    grid-column : span 6;
  }
  .ll-gallery-item--tall {
    grid-column : span 6;
    grid-row    : span 1;
  }
}

@media (max-width: 639px) {
  .ll-gallery-grid {
    grid-template-columns: 1fr;
    gap                  : var(--ll-space-3);
  }
  .ll-gallery-item,
  .ll-gallery-item--hero,
  .ll-gallery-item--wide,
  .ll-gallery-item--tall {
    grid-column : span 1;
    grid-row    : span 1;
  }
}


/* ═══════════════════════════════════════════════════════════
   §3 — TARJETA DE ÍTEM (contenedor multimedia)
   Aloja imagen O video + overlay + hotspots
   ═══════════════════════════════════════════════════════════ */

.ll-gallery-card {
  position       : relative;        /* ancla hotspots absolutos */
  display        : block;
  width          : 100%;
  overflow       : hidden;
  border-radius  : var(--ll-radius-xl);
  background     : var(--ll-color-bg-surface);
  border         : 1px solid var(--ll-color-border);

  /* Aceleración GPU para transform de hover */
  will-change    : transform;
  transform      : translateZ(0);
  transition     : transform var(--ll-transition-slow),
                   box-shadow var(--ll-transition-slow),
                   border-color var(--ll-transition-base);
}

.ll-gallery-card:hover {
  transform      : translateY(-4px) scale(1.005);
  box-shadow     : var(--ll-shadow-xl);
  border-color   : var(--ll-color-border-strong);
}

/* Ratio fijo: la tarjeta siempre mantiene su aspect-ratio
   independientemente del contenido o el tamaño de la grilla */
.ll-gallery-card__media {
  position       : relative;
  width          : 100%;
  aspect-ratio   : 4 / 3;         /* ratio base; --tall usa 3/4 */
  overflow       : hidden;
}

.ll-gallery-item--tall .ll-gallery-card__media {
  aspect-ratio   : 3 / 4;
}

.ll-gallery-item--hero .ll-gallery-card__media,
.ll-gallery-item--wide .ll-gallery-card__media {
  aspect-ratio   : 16 / 9;
}


/* ── Imagen poster / imagen estática ───────────────────────── */
.ll-gallery-card__img {
  position       : absolute;
  inset          : 0;
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
  transition     : transform var(--ll-transition-slow),
                   opacity   var(--ll-transition-base);
  /* La imagen siempre es visible; el video se superpone */
  z-index        : 1;
}

.ll-gallery-card:hover .ll-gallery-card__img {
  transform      : scale(1.04);
}


/* ── Video HTML5 (lazy — se activa por IntersectionObserver) ─ */
/*
  CORE WEB VITALS:
  - preload="none" → cero descarga de datos hasta que IO dispara
  - poster          → imagen visible al instante (sin espera)
  - El video se posiciona encima del poster (z-index: 2)
  - Cuando el video está cargando, el poster es el fallback visual
*/
.ll-gallery-card__video {
  position       : absolute;
  inset          : 0;
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
  z-index        : 2;
  opacity        : 0;              /* oculto hasta que puede reproducirse */
  transition     : opacity var(--ll-transition-slow);
}

/* Cuando el video está listo para reproducirse (JS añade .is-playing) */
.ll-gallery-card__video.is-playing {
  opacity        : 1;
}

/* Indicador de tipo de contenido (badge "VIDEO") */
.ll-gallery-card__badge-video {
  position       : absolute;
  top            : var(--ll-space-3);
  left           : var(--ll-space-3);
  z-index        : 5;
  display        : inline-flex;
  align-items    : center;
  gap            : var(--ll-space-1);
  padding        : 3px var(--ll-space-2);
  background     : rgba(9, 9, 11, 0.75);
  backdrop-filter: blur(8px);
  border         : 1px solid var(--ll-color-border-strong);
  border-radius  : var(--ll-radius-full);
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-primary);
  letter-spacing : var(--ll-tracking-wide);
  text-transform : uppercase;
  pointer-events : none;
}

/* Punto de grabación animado en el badge */
.ll-gallery-card__badge-video::before {
  content        : '';
  display        : inline-block;
  width          : 6px;
  height         : 6px;
  border-radius  : var(--ll-radius-full);
  background     : var(--ll-color-primary);
  animation      : ll-record-blink 1.4s ease-in-out infinite;
  flex-shrink    : 0;
}

@keyframes ll-record-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}


/* ── Skeleton loader (while poster loads) ──────────────────── */
.ll-gallery-card__skeleton {
  position       : absolute;
  inset          : 0;
  z-index        : 0;
  background     : linear-gradient(
    90deg,
    var(--ll-color-bg-surface)     0%,
    var(--ll-color-bg-elevated)   50%,
    var(--ll-color-bg-surface)   100%
  );
  background-size: 200% 100%;
  animation      : ll-skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes ll-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* El skeleton se oculta cuando la imagen ha cargado */
.ll-gallery-card--loaded .ll-gallery-card__skeleton {
  display        : none;
}


/* ── Overlay de información (aparece en hover) ─────────────── */
.ll-gallery-card__overlay {
  position       : absolute;
  inset          : 0;
  z-index        : 6;
  display        : flex;
  flex-direction : column;
  justify-content: flex-end;
  padding        : var(--ll-space-5);

  /* Gradiente oscuro desde abajo (no tapa el centro de la imagen) */
  background     : linear-gradient(
    to top,
    rgba(9, 9, 11, 0.90) 0%,
    rgba(9, 9, 11, 0.50) 40%,
    transparent          70%
  );

  opacity        : 0;
  transform      : translateY(6px);
  transition     : opacity   var(--ll-transition-base),
                   transform var(--ll-transition-base);
  pointer-events : none;   /* solo interactivo cuando visible */
}

.ll-gallery-card:hover .ll-gallery-card__overlay,
.ll-gallery-card:focus-within .ll-gallery-card__overlay {
  opacity        : 1;
  transform      : translateY(0);
  pointer-events : auto;
}

.ll-gallery-card__overlay-tag {
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-primary);
  text-transform : uppercase;
  letter-spacing : var(--ll-tracking-widest);
  margin-bottom  : var(--ll-space-1);
}

.ll-gallery-card__overlay-title {
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-text-primary);
  line-height    : var(--ll-leading-tight);
  margin-bottom  : var(--ll-space-3);
}

.ll-gallery-card__overlay-meta {
  display        : flex;
  align-items    : center;
  gap            : var(--ll-space-3);
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-text-secondary);
}

.ll-gallery-card__overlay-meta span {
  display        : flex;
  align-items    : center;
  gap            : var(--ll-space-1);
}

/* CTA "Ver Kit" dentro del overlay */
.ll-gallery-card__overlay-cta {
  display        : inline-flex;
  align-items    : center;
  gap            : var(--ll-space-2);
  margin-top     : var(--ll-space-3);
  padding        : var(--ll-space-2) var(--ll-space-4);
  background     : var(--ll-color-primary);
  color          : var(--ll-color-text-inverted);
  font-family    : var(--ll-font-sans);
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-semibold);
  border-radius  : var(--ll-radius-full);
  border         : none;
  cursor         : pointer;
  text-decoration: none;
  letter-spacing : var(--ll-tracking-wide);
  align-self     : flex-start;
  transition     : background var(--ll-transition-base),
                   transform  var(--ll-transition-spring),
                   box-shadow var(--ll-transition-base);
}

.ll-gallery-card__overlay-cta:hover {
  background     : var(--ll-color-primary-hover);
  box-shadow     : var(--ll-shadow-led);
  transform      : translateY(-1px);
}

.ll-gallery-card__overlay-cta svg {
  width          : 14px;
  height         : 14px;
  stroke         : currentColor;
  fill           : none;
  flex-shrink    : 0;
}


/* ═══════════════════════════════════════════════════════════
   §4 — HOTSPOTS "SHOP THE ROOM"
   Botones de posición absoluta sobre la tarjeta.

   JUSTIFICACIÓN UX:
   El pulso ámbar sobre fondo oscuro recrea visualmente el
   efecto de un punto de luz LED: capta la atención de forma
   no intrusiva y le enseña al usuario, sin texto, que ese
   elemento es interactivo y comprable.
   ═══════════════════════════════════════════════════════════ */

.ll-hotspot {
  position       : absolute;
  z-index        : 8;             /* sobre el overlay */

  /* Tamaño del área de click */
  width          : 32px;
  height         : 32px;

  /* Visual: punto central */
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  border         : none;
  background     : transparent;
  padding        : 0;

  /* Delegar pointer-events para que no bloquee hover de la tarjeta */
  pointer-events : auto;
}

/* ── Anillo de pulso exterior (puro CSS, sin JS) ─────────── */
.ll-hotspot::before {
  content        : '';
  position       : absolute;
  inset          : 0;
  border-radius  : var(--ll-radius-full);
  background     : var(--ll-color-primary-muted);
  border         : 1.5px solid var(--ll-color-primary);
  animation      : ll-hotspot-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Punto central sólido ────────────────────────────────── */
.ll-hotspot::after {
  content        : '';
  position       : absolute;
  width          : 12px;
  height         : 12px;
  border-radius  : var(--ll-radius-full);
  background     : var(--ll-color-primary);
  box-shadow     : var(--ll-shadow-led);
  transition     : transform var(--ll-transition-spring),
                   background var(--ll-transition-base);
  z-index        : 1;
}

.ll-hotspot:hover::after,
.ll-hotspot:focus-visible::after {
  transform      : scale(1.35);
  background     : var(--ll-color-primary-hover);
}

/* ── Keyframe: expansión y desvanecimiento del anillo ─────── */
@keyframes ll-hotspot-pulse {
  0% {
    transform : scale(0.85);
    opacity   : 1;
  }
  60% {
    transform : scale(1.6);
    opacity   : 0.2;
  }
  100% {
    transform : scale(0.85);
    opacity   : 1;
  }
}

/* Stagger: los hotspots de la misma tarjeta pulsan desfasados */
.ll-hotspot:nth-child(2) { animation-delay: 0.4s; }
.ll-hotspot:nth-child(3) { animation-delay: 0.8s; }
.ll-hotspot:nth-child(4) { animation-delay: 1.2s; }

/* ── Tooltip de producto (aparece en hover del hotspot) ────── */
.ll-hotspot__tooltip {
  position       : absolute;
  bottom         : calc(100% + 12px);
  left           : 50%;
  transform      : translateX(-50%) translateY(4px);
  width          : 200px;
  background     : var(--ll-color-bg-elevated);
  border         : 1px solid var(--ll-color-border-accent);
  border-radius  : var(--ll-radius-lg);
  padding        : var(--ll-space-3);
  box-shadow     : var(--ll-shadow-lg);
  pointer-events : none;

  opacity        : 0;
  transition     : opacity var(--ll-transition-base),
                   transform var(--ll-transition-base);
  z-index        : 9;

  /* Flecha inferior */
  filter         : drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.ll-hotspot__tooltip::after {
  content        : '';
  position       : absolute;
  bottom         : -6px;
  left           : 50%;
  transform      : translateX(-50%) rotate(45deg);
  width          : 10px;
  height         : 10px;
  background     : var(--ll-color-bg-elevated);
  border-right   : 1px solid var(--ll-color-border-accent);
  border-bottom  : 1px solid var(--ll-color-border-accent);
}

.ll-hotspot:hover .ll-hotspot__tooltip,
.ll-hotspot:focus-visible .ll-hotspot__tooltip {
  opacity        : 1;
  transform      : translateX(-50%) translateY(0);
  pointer-events : auto;
}

/* Tooltip que cae hacia abajo (hotspots en la parte superior) */
.ll-hotspot--tooltip-down .ll-hotspot__tooltip {
  bottom         : auto;
  top            : calc(100% + 12px);
  transform      : translateX(-50%) translateY(-4px);
}

.ll-hotspot--tooltip-down .ll-hotspot__tooltip::after {
  bottom         : auto;
  top            : -6px;
  border-right   : none;
  border-bottom  : none;
  border-left    : 1px solid var(--ll-color-border-accent);
  border-top     : 1px solid var(--ll-color-border-accent);
}

.ll-hotspot--tooltip-down:hover .ll-hotspot__tooltip,
.ll-hotspot--tooltip-down:focus-visible .ll-hotspot__tooltip {
  transform      : translateX(-50%) translateY(0);
}

/* Tooltip: thumbnail del producto */
.ll-hotspot__product {
  display        : flex;
  align-items    : center;
  gap            : var(--ll-space-3);
}

.ll-hotspot__product-img {
  width          : 44px;
  height         : 44px;
  border-radius  : var(--ll-radius-md);
  object-fit     : cover;
  background     : var(--ll-color-bg-base);
  flex-shrink    : 0;
  border         : 1px solid var(--ll-color-border);
}

.ll-hotspot__product-info {
  flex           : 1;
  min-width      : 0;
}

.ll-hotspot__product-name {
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-primary);
  line-height    : var(--ll-leading-tight);
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
  margin-bottom  : 2px;
}

.ll-hotspot__product-price {
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-primary);
  font-family    : var(--ll-font-mono);
}

/* Separador + CTA dentro del tooltip */
.ll-hotspot__tooltip-divider {
  height         : 1px;
  background     : var(--ll-color-border);
  margin         : var(--ll-space-3) 0 var(--ll-space-2);
}

.ll-hotspot__tooltip-cta {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-primary);
  font-weight    : var(--ll-font-semibold);
  letter-spacing : var(--ll-tracking-wide);
  text-transform : uppercase;
  text-decoration: none;
  cursor         : pointer;
  transition     : color var(--ll-transition-base);
}

.ll-hotspot__tooltip-cta:hover {
  color          : var(--ll-color-primary-hover);
}

.ll-hotspot__tooltip-cta svg {
  width          : 14px;
  height         : 14px;
  stroke         : currentColor;
  fill           : none;
}


/* ═══════════════════════════════════════════════════════════
   §5 — PANEL OFF-CANVAS "SHOP THE ROOM"
   Esqueleto UI: slide-in desde la derecha con el kit completo

   NOTA: La lógica de apertura/cierre está en ll-gallery.js.
         Este CSS define únicamente la estructura visual.
   ═══════════════════════════════════════════════════════════ */

/* Overlay oscuro de fondo */
.ll-str-overlay {
  position       : fixed;
  inset          : 0;
  z-index        : calc(var(--ll-z-modal) - 10);
  background     : var(--ll-color-bg-overlay);
  backdrop-filter: blur(4px);

  opacity        : 0;
  pointer-events : none;
  transition     : opacity var(--ll-transition-slow);
}

.ll-str-overlay.is-open {
  opacity        : 1;
  pointer-events : auto;
}

/* Panel lateral */
.ll-str-panel {
  position       : fixed;
  top            : 0;
  right          : 0;
  bottom         : 0;
  z-index        : var(--ll-z-modal);
  width          : min(480px, 100vw);
  background     : var(--ll-color-bg-surface);
  border-left    : 1px solid var(--ll-color-border);
  display        : flex;
  flex-direction : column;
  overflow       : hidden;

  transform      : translateX(100%);
  transition     : transform var(--ll-transition-slow);
  will-change    : transform;
}

.ll-str-panel.is-open {
  transform      : translateX(0);
}

/* ── Header del panel ────────────────────────────────────── */
.ll-str-panel__header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : var(--ll-space-5) var(--ll-space-6);
  border-bottom  : 1px solid var(--ll-color-border);
  flex-shrink    : 0;
}

.ll-str-panel__title {
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-text-primary);
}

.ll-str-panel__close {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 36px;
  height         : 36px;
  background     : transparent;
  border         : 1px solid var(--ll-color-border);
  border-radius  : var(--ll-radius-md);
  cursor         : pointer;
  color          : var(--ll-color-text-secondary);
  transition     : all var(--ll-transition-base);
  flex-shrink    : 0;
}

.ll-str-panel__close:hover {
  border-color   : var(--ll-color-border-accent);
  color          : var(--ll-color-primary);
  background     : var(--ll-color-primary-muted);
}

.ll-str-panel__close svg {
  width          : 16px;
  height         : 16px;
  stroke         : currentColor;
  fill           : none;
  stroke-width   : 2;
}

/* ── Preview de la imagen del room ──────────────────────── */
.ll-str-panel__preview {
  position       : relative;
  aspect-ratio   : 16 / 9;
  overflow       : hidden;
  flex-shrink    : 0;
}

.ll-str-panel__preview-img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
}

.ll-str-panel__preview-badge {
  position       : absolute;
  bottom         : var(--ll-space-3);
  left           : var(--ll-space-3);
  padding        : var(--ll-space-1) var(--ll-space-3);
  background     : var(--ll-color-primary);
  color          : var(--ll-color-text-inverted);
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-bold);
  border-radius  : var(--ll-radius-full);
  letter-spacing : var(--ll-tracking-wide);
  text-transform : uppercase;
}

/* ── Cuerpo scrollable: lista de productos del kit ──────── */
.ll-str-panel__body {
  flex           : 1;
  overflow-y     : auto;
  padding        : var(--ll-space-5) var(--ll-space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--ll-color-bg-elevated) transparent;
}

.ll-str-panel__body::-webkit-scrollbar {
  width          : 4px;
}
.ll-str-panel__body::-webkit-scrollbar-thumb {
  background     : var(--ll-color-bg-elevated);
  border-radius  : var(--ll-radius-full);
}

.ll-str-panel__section-title {
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-muted);
  text-transform : uppercase;
  letter-spacing : var(--ll-tracking-widest);
  margin-bottom  : var(--ll-space-4);
}

/* Línea de producto dentro del panel */
.ll-str-product-row {
  display        : flex;
  align-items    : center;
  gap            : var(--ll-space-4);
  padding        : var(--ll-space-3) 0;
  border-bottom  : 1px solid var(--ll-color-border);
}

.ll-str-product-row:last-child {
  border-bottom  : none;
}

.ll-str-product-row__thumb {
  width          : 56px;
  height         : 56px;
  border-radius  : var(--ll-radius-md);
  object-fit     : cover;
  background     : var(--ll-color-bg-elevated);
  flex-shrink    : 0;
  border         : 1px solid var(--ll-color-border);
}

.ll-str-product-row__info {
  flex           : 1;
  min-width      : 0;
}

.ll-str-product-row__name {
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-primary);
  line-height    : var(--ll-leading-tight);
  margin-bottom  : var(--ll-space-1);
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
}

.ll-str-product-row__meta {
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-text-muted);
}

.ll-str-product-row__price {
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-text-primary);
  font-family    : var(--ll-font-mono);
  white-space    : nowrap;
  flex-shrink    : 0;
}

/* ── Footer del panel: resumen + CTA ────────────────────── */
.ll-str-panel__footer {
  padding        : var(--ll-space-5) var(--ll-space-6);
  border-top     : 1px solid var(--ll-color-border);
  background     : var(--ll-color-bg-base);
  flex-shrink    : 0;
}

.ll-str-panel__total {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : var(--ll-space-4);
}

.ll-str-panel__total-label {
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-secondary);
  font-weight    : var(--ll-font-medium);
}

.ll-str-panel__total-price {
  font-size      : var(--ll-text-xl);
  font-weight    : var(--ll-font-extrabold);
  color          : var(--ll-color-primary);
  font-family    : var(--ll-font-mono);
}

/* CTA principal: "Añadir Proyecto Completo al Carrito" */
.ll-str-panel__add-all {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--ll-space-3);
  width          : 100%;
  padding        : var(--ll-space-4);
  background     : var(--ll-color-primary);
  color          : var(--ll-color-text-inverted);
  font-family    : var(--ll-font-sans);
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-bold);
  border         : none;
  border-radius  : var(--ll-radius-lg);
  cursor         : pointer;
  letter-spacing : var(--ll-tracking-wide);
  transition     : background var(--ll-transition-base),
                   box-shadow var(--ll-transition-base),
                   transform  var(--ll-transition-spring);
}

.ll-str-panel__add-all:hover {
  background     : var(--ll-color-primary-hover);
  box-shadow     : var(--ll-shadow-led);
  transform      : translateY(-2px);
}

.ll-str-panel__add-all:active {
  transform      : translateY(0);
}

.ll-str-panel__add-all svg {
  width          : 18px;
  height         : 18px;
  stroke         : currentColor;
  fill           : none;
  flex-shrink    : 0;
}

/* Link secundario: "Ver detalle del kit" */
.ll-str-panel__view-kit {
  display        : block;
  text-align     : center;
  margin-top     : var(--ll-space-3);
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-secondary);
  text-decoration: none;
  transition     : color var(--ll-transition-base);
}

.ll-str-panel__view-kit:hover {
  color          : var(--ll-color-primary);
}


/* ═══════════════════════════════════════════════════════════
   §6 — ESTADO VACÍO Y LOAD MORE
   ═══════════════════════════════════════════════════════════ */

.ll-gallery-empty {
  grid-column    : 1 / -1;
  text-align     : center;
  padding        : var(--ll-space-20) var(--ll-space-6);
  color          : var(--ll-color-text-muted);
  font-size      : var(--ll-text-base);
}

.ll-gallery-load-more {
  display        : flex;
  justify-content: center;
  margin-top     : var(--ll-space-12);
  padding-inline : var(--ll-container-pad);
  max-width      : var(--ll-container-max);
  margin-inline  : var(--ll-space-12) auto;
}

/* Estado de carga del botón "load more" */
.ll-btn-primary.is-loading {
  pointer-events : none;
  opacity        : 0.7;
}

.ll-btn-primary.is-loading::before {
  content        : '';
  display        : inline-block;
  width          : 14px;
  height         : 14px;
  border         : 2px solid var(--ll-color-text-inverted);
  border-top-color: transparent;
  border-radius  : var(--ll-radius-full);
  animation      : ll-spin 0.7s linear infinite;
  margin-right   : var(--ll-space-2);
}

@keyframes ll-spin {
  to { transform: rotate(360deg); }
}