/*
 * Bloque de marketplace (x-home.shelf + x-home.shelf-panel), la referencia
 * "Bombas del día" del dueño: panel de identidad saturado a la izquierda
 * (~1/3) y la fila de 4 tarjetas a la derecha con las flechas montadas sobre
 * sus bordes. Lo usan el home, /ofertas y /combos.
 *
 * El color del panel sale de AccentColor (PHP): --acc-field siempre da
 * ≥ 4.5:1 con blanco; --acc-deep es su sombra para las capas. Las capas son
 * gradientes de esos dos valores y del papel blanco: nunca un hex suelto.
 */

/* ── Cuerpo: panel + fila ──────────────────────────────────────────────── */
.a-shelf__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a-space-3);
}

.a-shelf__rail {
  position: relative;
  min-width: 0;
}

@media (min-width: 1024px) {
  .a-shelf__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--a-space-5);
    align-items: stretch;
  }
}

/* ── Fila del bloque ───────────────────────────────────────────────────── */
@container (min-width: 480px) { .a-rail--shelf .a-rail__track { --rail-cols: 3.2; } }
@container (min-width: 700px) { .a-rail--shelf .a-rail__track { --rail-cols: 4; --rail-gap: 16px; } }


/* Flechas redondas montadas sobre los bordes de la fila, a la altura de la foto. */
.a-rail--shelf .a-rail__nav { top: calc(28% - 22px); }
.a-rail--shelf .a-rail__nav--prev { left: -22px; }
.a-rail--shelf .a-rail__nav--next { right: -22px; }

/* ── Panel de identidad ────────────────────────────────────────────────── */
.a-spanel {
  --spanel-pad: var(--a-space-5);
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a-space-3);
  min-height: 228px;
  padding: var(--spanel-pad);
  overflow: hidden;
  border-radius: var(--a-radius-xl);
  background:
    radial-gradient(120% 85% at 108% -12%, color-mix(in srgb, var(--acc-field) 82%, var(--a-paper)) 0%, transparent 58%),
    radial-gradient(95% 75% at -12% 112%, var(--acc-deep) 0%, transparent 68%),
    var(--acc-field);
  color: var(--a-on-fill);
  box-shadow:
    0 22px 40px -24px color-mix(in srgb, var(--acc-deep) 80%, transparent),
    0 2px 6px -2px color-mix(in srgb, var(--acc-deep) 35%, transparent);
}

@media (min-width: 1024px) {
  .a-spanel {
    --spanel-pad: var(--a-space-6);
    height: calc(100% - 16px);
    min-height: 360px;
    margin-block: 4px 12px;
  }
}

/* Capas: anillo grande arriba a la derecha y un brillo blando detrás de la foto. */
.a-spanel__ring {
  position: absolute;
  top: -110px;
  right: -110px;
  z-index: -1;
  width: 300px;
  height: 300px;
  border: 34px solid color-mix(in srgb, var(--a-paper) 9%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.a-spanel__glow {
  position: absolute;
  right: -20%;
  bottom: -25%;
  z-index: -1;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--a-paper) 26%, transparent), transparent);
  pointer-events: none;
}

.a-spanel__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a-space-2);
  max-width: 64%;
}

.a-spanel.has-countdown .a-spanel__copy,
.a-spanel:not(.has-disc):not(.has-media) .a-spanel__copy { max-width: 100%; }

/* El texto no pasa por debajo del ícono de la esquina. */
.a-spanel:has(> .a-spanel__badge) .a-spanel__copy { padding-right: 56px; }

/* Sin cuenta regresiva el texto queda centrado en el alto libre: sin hueco antes del botón. */
.a-spanel:not(.has-countdown) .a-spanel__copy { margin-block: auto; }
.a-spanel:not(.has-countdown) .a-spanel__foot { margin-top: 0; }
.a-collection .a-spanel.has-media .a-spanel__copy { margin-block: 0; }
.a-collection .a-spanel.has-media .a-spanel__foot { margin-top: auto; }

.a-spanel__kicker {
  font-size: var(--a-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.a-spanel__title {
  display: block;
  /* Escala con el panel para que la palabra más larga quepa entera; nunca se corta ni lleva guion. */
  font-size: clamp(1.35rem, 8.5cqi, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  text-shadow: 0 2px 6px color-mix(in srgb, var(--acc-deep) 60%, transparent);
}

/* Ícono del bloque: en la esquina de arriba a la derecha, sobre el anillo. */
.a-spanel__badge {
  position: absolute;
  top: var(--spanel-pad);
  right: var(--spanel-pad);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--a-radius);
  background: var(--a-deal);
  color: var(--a-on-deal);
  transform: rotate(-8deg);
  box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--acc-deep) 90%, transparent);
}

.a-spanel__badge .a-icon { width: 62%; height: 62%; }

.a-spanel__tagline {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  max-width: 34ch;
  font-size: var(--a-text-md);
  font-weight: 600;
  line-height: 1.35;
  /* Legible aunque pase sobre una miniatura blanca. */
  text-shadow: 0 1px 3px color-mix(in srgb, var(--acc-deep) 85%, transparent);
}

.a-spanel__tagline .a-icon { flex-shrink: 0; }

.a-spanel__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.a-spanel__flag {
  padding: 5px 12px;
  border-radius: var(--a-radius-pill);
  background: var(--a-deal);
  color: var(--a-on-deal);
  font-size: var(--a-text-sm);
  font-weight: 800;
  line-height: 1.2;
}

.a-spanel__count {
  padding: 5px 12px;
  border-radius: var(--a-radius-pill);
  background: color-mix(in srgb, var(--acc-deep) 72%, transparent);
  font-size: var(--a-text-sm);
  font-weight: 800;
  line-height: 1.2;
}

.a-spanel__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a-space-4);
  margin-top: auto;
}

.a-spanel__cta { box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--acc-deep) 90%, transparent); }
.a-spanel__cta .a-icon { transition: transform var(--a-dur) var(--a-ease-out); }

@media (hover: hover) {
  .a-spanel__cta:hover .a-icon { transform: translateX(3px); }
}

/* Cuenta regresiva dentro del panel: celdas blancas, dígitos en la tinta de la sección. */
.a-spanel .a-countdown__label { margin-bottom: 6px; }
.a-spanel .a-countdown__cells { gap: 6px; }
.a-spanel .a-countdown__cell {
  min-width: 52px;
  padding: 8px 4px 6px;
  background: var(--a-paper);
  color: var(--acc-field);
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--acc-deep) 90%, transparent);
}

/* Foto recortada en un disco blanco que sale por la esquina de abajo a la derecha. */
.a-spanel__art {
  position: absolute;
  right: -44px;
  bottom: -44px;
  z-index: 1;
  width: clamp(160px, 58%, 300px);
  aspect-ratio: 1;
  pointer-events: none;
}

.a-spanel__disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--a-paper) 85%, transparent);
  border-radius: 50%;
  background: var(--a-paper) padding-box;
  background-clip: padding-box;
  box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--acc-deep) 95%, transparent);
}

.a-spanel__disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a-spanel__disc.is-photo img { padding: 0; object-fit: cover; }

.a-spanel__chip {
  position: absolute;
  overflow: hidden;
  width: 32%;
  aspect-ratio: 1;
  padding: 0;
  border: 4px solid var(--a-paper);
  border-radius: var(--a-radius-lg);
  background: var(--a-paper);
  box-shadow: 0 14px 24px -12px color-mix(in srgb, var(--acc-deep) 95%, transparent);
}

.a-spanel__chip img { width: 100%; height: 100%; object-fit: cover; }
.a-spanel__chip--1 { top: -22%; right: 30%; transform: rotate(-9deg); }
.a-spanel__chip--2 { top: -6%; right: 64%; width: 27%; transform: rotate(7deg); }

/* Pieza con su propia proporción (imagen de tipo 4:3, banner de colección 3:1): en un marco, sin recorte del borde. */
.a-spanel__media {
  position: absolute;
  right: var(--spanel-pad);
  bottom: var(--spanel-pad);
  z-index: 1;
  width: min(54%, 260px);
  overflow: hidden;
  border: 5px solid var(--a-paper);
  border-radius: var(--a-radius-lg);
  background: var(--a-paper);
  box-shadow: 0 22px 36px -18px color-mix(in srgb, var(--acc-deep) 95%, transparent);
  transform: rotate(3deg);
}

.a-spanel__media img { display: block; width: 100%; height: 100%; }

.a-collection .a-spanel__media { width: min(66%, 300px); }

/* Con cuenta regresiva la foto es más chica: las celdas no la pisan. */
.a-spanel.has-countdown .a-spanel__art { width: clamp(150px, 44%, 240px); right: -34px; bottom: -34px; }


/* Celular y tablet: panel compacto en franja, la foto a la derecha. */
@media (max-width: 1023px) {
  .a-spanel { gap: var(--a-space-2); }
  .a-spanel__title { font-size: clamp(1.5rem, 8cqi, 2.25rem); }
  .a-spanel__copy { max-width: 60%; }
  .a-spanel__badge { width: 38px; height: 38px; }
  .a-spanel__art { width: clamp(140px, 40%, 220px); right: -28px; bottom: -28px; }
  .a-spanel__chip--2 { display: none; }
  .a-spanel__foot { gap: var(--a-space-3); }
  .a-spanel .a-countdown__cell { min-width: 46px; padding: 6px 2px 5px; }
  .a-spanel .a-countdown__cell b { font-size: var(--a-text-xl); }
  .a-spanel__media { width: min(38%, 200px); }
  .a-collection .a-spanel__media { width: min(52%, 260px); }

  /* Con cuenta regresiva el texto usa el ancho y la foto queda detrás de la esquina. */
  .a-spanel.has-countdown .a-spanel__art { width: clamp(120px, 34%, 190px); }
}

@media (max-width: 479px) {
  .a-spanel { min-height: 212px; }
  .a-spanel__tagline { font-size: var(--a-text-sm); }
  .a-spanel.has-countdown .a-spanel__copy { max-width: 72%; }
  .a-spanel.has-countdown .a-spanel__art { right: -40px; bottom: -40px; }
}

/* ── Combos por tipo (home) ────────────────────────────────────────────── */
.a-cshow__nav { margin: 0 0 var(--a-space-5); }
.a-cshow__lanes { display: grid; gap: var(--a-space-8); }

@media (min-width: 1024px) {
  .a-cshow__lanes { gap: var(--a-space-6); }
}

/* ── Tarjeta final "Ver más" (fila con menos de 4 tarjetas) ────────────── */
/* Del tamaño de una tarjeta, en el color de la sección: cierra la fila sin estirar el panel. */
.a-rail--shelf .a-rail__item--more .a-railend {
  --tone: var(--acc-field, var(--a-brand-700));
  justify-content: center;
  align-items: center;
  text-align: center;
  border-style: dashed;
  border-width: 1.5px;
}

.a-rail--shelf .a-rail__item--more .a-railend__icon { background: var(--acc-field, var(--a-brand-700)); }
.a-rail--shelf .a-rail__item--more .a-railend__text { justify-items: center; }

/* ── Tema oscuro: paneles que brillan ──────────────────────────────────── */
:root[data-theme="dark"] .a-spanel {
  box-shadow:
    0 28px 60px -26px color-mix(in srgb, var(--acc) 75%, transparent),
    0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--a-paper) 16%, transparent);
}

:root[data-theme="dark"] .a-spanel__glow {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 55%, transparent), transparent);
}

.a-spanel .a-countdown__cell small { color: var(--a-paper-ink); }

/* Colección con pieza 3:1: la pieza va en el flujo del panel (bajo el conteo), nunca encima de la cuenta regresiva. */
.a-collection .a-spanel.has-media .a-spanel__media {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  margin-block: var(--a-space-1);
  transform: rotate(-1.5deg);
}