/* ══════════════════════════════════════════════════════════════════════════
   MARCO: NICHO DE ALTAR  ·  `marco_nicho`  (ranura marco)

   Cada pieza en su nicho: arco de medio punto con filo rosa mexicano y aro
   de cempasúchil, coronado por una calaverita o una flor. Nació con la skin
   de Día de Muertos, que lo trae puesto por defecto.

   Reglas de todo marco: ver el encabezado de `marco_gotico.css`.

   🔁 Al tocar este archivo o su arte sube `PUBLIC_CATALOG_ASSET_VERSION`.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-storefront-frame='marco_nicho'] {
  --grid-gap: 24px 16px;
  --grid-gap-wide: 32px 24px;
  --card-bg: var(--surface-raised);
  --card-radius: 50% 50% 10px 10px / 26% 26% 10px 10px;
  --card-border: 2px solid #c2185b;
  --card-shadow: 0 0 0 3px var(--surface), 0 0 0 6px #f59e0b,
    0 12px 24px rgba(123, 31, 162, 0.16);
  --card-shadow-hover: 0 0 0 3px var(--surface), 0 0 0 6px #fbbf24,
    0 0 0 8px #c2185b, 0 14px 28px rgba(194, 24, 91, 0.26);
  --card-lift: -3px;
  --card-body-padding: 12px 10px 14px;
  --media-radius: 0;

  /* El contador baja hasta donde el arco ya no recorta la foto. */
  --skin-qty-top: 27%;
  --skin-qty-right: 12px;
}

/* ── Calaverita o flor en la clave del arco ─────────────────────────────── */
:root[data-storefront-frame='marco_nicho'] .card::before {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 5px;
  left: 50%;
  width: 30px;
  height: 33px;
  transform: translateX(-50%);
  background: url('art/dia_de_muertos.skull.svg') no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(43, 26, 36, 0.25));
}
:root[data-storefront-frame='marco_nicho'] .card:nth-child(even)::before {
  top: 4px;
  width: 32px;
  height: 32px;
  background-image: url('art/dia_de_muertos.flower.svg');
}

/* El aro de cempasúchil sale 6 px de la pieza: la rejilla le deja ese aire
   para que el borde de la pantalla no lo corte. */
:root[data-storefront-frame='marco_nicho'] .grid {
  padding-inline: 8px;
}
