/* =========================================================
   La tienda: el almacén del taller
   Portada en vídeo a sangre, pasillos por categoría con su color
   y productos pegados como stickers en la estantería.
   ========================================================= */
.store { background: var(--paper); }
.nav__links a[aria-current='page'] { background: var(--ink); color: #fff; }

/* ---------- Portada ---------- */
.shop-hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  overflow: hidden; color: #fff; isolation: isolate; background: var(--ink);
}
.shop-hero__video {
  position: absolute; inset: -6% 0 auto; width: 100%; height: 112%; object-fit: cover; z-index: -2;
  transform: scale(1.08); will-change: transform;
}
.shop-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(30, 15, 46, .35) 0%, rgba(30, 15, 46, 0) 30%, rgba(30, 15, 46, .55) 62%, rgba(30, 15, 46, .95) 100%),
    radial-gradient(90% 70% at 100% 100%, rgba(194, 24, 122, .55), transparent 60%);
}
.shop-hero__inner { padding: 0 var(--gutter) clamp(90px, 12vh, 140px); max-width: var(--max); margin: 0 auto; width: 100%; }
.shop-hero__title { margin: 0; line-height: .82; font-weight: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; }
.shop-hero__title .drip { font-size: clamp(60px, 11vw, 150px); transform: rotate(-4deg); display: inline-block; }
.shop-hero__big {
  font-family: var(--font-display); font-size: clamp(84px, 19vw, 280px); letter-spacing: -.02em;
  background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holoShift 7s linear infinite;
  filter: drop-shadow(0 .05em 0 var(--ink)) drop-shadow(0 .02em 0 #fff);
}
.shop-hero__lead { max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); margin: 18px 0 26px; color: rgba(255, 255, 255, .9); }
.shop-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-hero__stats a {
  text-decoration: none; display: grid; gap: 0; padding: 10px 16px 9px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); transition: background .2s, transform .2s;
}
.shop-hero__stats a:hover { background: var(--yolk); color: var(--ink); transform: translateY(-3px) rotate(-1.5deg); }
.shop-hero__stats b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.shop-hero__stats span { font-size: 13px; font-weight: 600; opacity: .85; }
.shop-hero__down { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; width: 30px; height: 48px; border-radius: 99px; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .8); }
.shop-hero__down span { position: absolute; left: 50%; top: 10px; width: 6px; height: 10px; margin-left: -3px; border-radius: 9px; background: var(--yolk); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Barra de categorías ---------- */
.rail {
  position: sticky; top: 82px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px var(--gutter); background: rgba(255, 246, 236, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow .25s;
}
.rail.is-stuck { box-shadow: 0 14px 24px -22px rgba(30, 15, 46, .55); }
.rail__cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 520px; padding: 4px 2px; scroll-padding: 0 40px; }
.rail__cats::-webkit-scrollbar { display: none; }
.rail__cats a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  padding: 5px 15px 5px 5px; border-radius: 999px; font-weight: 800; font-size: 14.5px;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line); transition: background .2s, color .2s, transform .2s;
}
.rail__cats a img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.rail__cats a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--c); }
.rail__cats a.is-on { background: var(--c); color: #fff; box-shadow: none; transform: rotate(-1.5deg); }
.rail__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rail__search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 0 14px; box-shadow: inset 0 0 0 2px var(--line); }
.rail__search:focus-within { box-shadow: inset 0 0 0 2px var(--wall); }
.rail__search input { border: 0; background: none; padding: 11px 0; width: 210px; font: inherit; outline: none; }
.rail select { border: 0; border-radius: 999px; padding: 11px 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font: inherit; font-weight: 700; }
.rail__toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.rail__toggle input { width: 18px; height: 18px; accent-color: var(--wall); }

/* ---------- Pasillos ---------- */
.estante { display: grid; gap: clamp(30px, 5vw, 64px); padding: 22px 0 clamp(60px, 8vw, 110px); }
.aisle { scroll-margin-top: 150px; }
.aisle__banner {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  min-height: clamp(300px, 42vw, 520px); display: grid; align-items: end;
  background: var(--c); margin-bottom: clamp(22px, 3vw, 36px);
}
.aisle__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .42; mix-blend-mode: luminosity; filter: contrast(1.1); }
.aisle__banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--c) 92%, #000) 0, transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, transparent) 0%, transparent 70%);
}
/* "mordisco" de sticker arrancado en el borde de abajo */
.aisle__banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--paper);
  -webkit-mask: radial-gradient(14px 14px at 14px 0, transparent 98%, #000) -14px 0 / 28px 26px repeat-x;
          mask: radial-gradient(14px 14px at 14px 0, transparent 98%, #000) -14px 0 / 28px 26px repeat-x;
}
.aisle__text {
  position: relative; z-index: 2; box-sizing: border-box; width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(28px, 4vw, 54px) var(--gutter) clamp(44px, 5vw, 70px);
}
.aisle__text > * { max-width: 620px; }
.aisle__num { font-family: var(--font-marker); font-size: 22px; color: var(--yolk); display: block; transform: rotate(-4deg); }
.aisle__text h2 {
  font-family: var(--font-display); font-weight: 400; margin: 2px 0 10px; line-height: .95;
  font-size: clamp(44px, 7.4vw, 110px); letter-spacing: -.01em;
  text-shadow: 0 .045em 0 rgba(30, 15, 46, .55), 0 .09em .2em rgba(0, 0, 0, .25);
}
.aisle__text p { font-size: clamp(16px, 1.5vw, 20px); margin: 0 0 14px; max-width: 520px; color: rgba(255, 255, 255, .92); }
.aisle__meta { display: inline-block; background: var(--yolk); color: var(--ink); font-weight: 800; padding: 5px 13px; border-radius: 999px; font-size: 14px; transform: rotate(-1.5deg); }
.aisle__float { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.aisle__float img {
  position: absolute; width: clamp(130px, 17vw, 250px); aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .4)); will-change: translate;
}
.aisle__float .f0 { right: calc(max(1%, calc((100vw - var(--max)) / 2)) + 4%); top: 12%; rotate: 8deg; width: clamp(160px, 22vw, 320px); }
.aisle__float .f1 { right: calc(max(1%, calc((100vw - var(--max)) / 2)) + min(26%, 380px)); bottom: 8%; rotate: -10deg; }
.aisle__float .f2 { right: max(1%, calc((100vw - var(--max)) / 2)); bottom: -4%; rotate: 14deg; width: clamp(110px, 13vw, 190px); }

/* ---------- Productos: stickers en la estantería ---------- */
.aisle__grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-flow: dense; gap: 26px 22px;
}
.item {
  position: relative; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
  display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 12px 12px 16px; border-radius: 26px;
  background: #fff; rotate: var(--t);
  box-shadow: 0 0 0 1px var(--line), 0 1px 0 #fff, 0 16px 28px -20px rgba(30, 15, 46, .55);
  transition: rotate .35s cubic-bezier(.3, 1.4, .5, 1), translate .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s;
  animation: stick .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(min(var(--i), 12) * 35ms);
}
@keyframes stick { from { opacity: 0; translate: 0 22px; rotate: calc(var(--t) + 6deg); } }
.item:hover, .item:focus-visible { rotate: 0deg; translate: 0 -6px; box-shadow: 0 0 0 3px var(--c), 0 26px 40px -24px rgba(30, 15, 46, .6); outline: none; }
.item__img { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff, color-mix(in srgb, var(--c) 12%, var(--paper))); }
.item__img img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(30, 15, 46, .28)); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.item:hover .item__img img { transform: scale(1.08) rotate(-4deg); }
.item__name { font-weight: 800; font-size: 15.5px; line-height: 1.25; padding: 4px 4px 0; }
.item__price { font-family: var(--font-display); font-size: 20px; align-self: end; padding: 0 4px; }
.item__price small { font-family: var(--font-body); font-size: 12px; color: var(--ink-2); font-weight: 600; }
.item__add {
  position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--yolk); font-size: 24px; font-weight: 800;
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgba(30, 15, 46, .4); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1), background .2s;
}
.item:hover .item__add { transform: rotate(90deg) scale(1.08); background: var(--c); color: #fff; }
.item__badge {
  position: absolute; top: 20px; left: 20px; font-family: var(--font-marker); font-size: 13px;
  background: var(--teal); color: #fff; padding: 3px 10px; border-radius: 6px; rotate: -5deg;
}
.item__badge--blank { background: var(--ink-2); }
/* el primero de cada pasillo, más grande: el destacado */
.item--hero { grid-column: span 2; grid-row: span 2; padding: 18px; }
.item--hero .item__img img { width: 78%; height: 78%; }
.item--hero .item__name { font-size: clamp(18px, 2vw, 24px); }
.item--hero .item__price { font-size: 30px; }
.item--hero .item__add { width: 56px; height: 56px; font-size: 30px; right: 18px; bottom: 18px; }

.estante__empty { text-align: center; font-size: 18px; padding: 40px var(--gutter) 90px; }

/* ---------- Ficha rápida ---------- */
.peek { border: 0; padding: 0; background: transparent; max-width: min(960px, calc(100% - 24px)); width: 100%; max-height: calc(100svh - 24px); overflow: visible; }
.peek::backdrop { background: rgba(30, 15, 46, .62); backdrop-filter: blur(4px); }
.peek[open] .peek__card { animation: peekIn .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes peekIn { from { opacity: 0; transform: translateY(30px) rotate(1.5deg) scale(.97); } }
.peek__card {
  position: relative; display: grid; grid-template-columns: 1fr 1.1fr; background: var(--paper); border-radius: 30px; overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 40px 80px -30px rgba(0, 0, 0, .6); max-height: calc(100svh - 24px);
}
.peek__img { background: radial-gradient(circle at 50% 55%, #fff 0, color-mix(in srgb, var(--c) 30%, var(--paper)) 75%); display: grid; place-items: center; padding: 34px; min-height: 360px; }
.peek__img img { width: 100%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 22px 24px rgba(30, 15, 46, .35)); rotate: -3deg; }
.peek__info { padding: 34px 32px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.peek__cat { align-self: start; text-decoration: none; font-family: var(--font-marker); color: var(--c); font-size: 17px; rotate: -2deg; }
.peek__info h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.02; margin: 0; }
.peek__price { font-family: var(--font-display); font-size: 30px; margin: 0; }
.peek__price small { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); font-weight: 600; }
.peek__iva { margin-left: 4px; }
.peek__desc p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.peek__feat { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.peek__feat li { padding-left: 24px; position: relative; font-size: 14.5px; font-weight: 600; }
.peek__feat li::before { content: '✶'; position: absolute; left: 0; color: var(--c); }
.peek__buy { display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 2px dashed var(--line); }
.peek__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.peek__steps button { border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--line); border-radius: 999px; padding: 7px 14px; font-weight: 800; }
.peek__steps button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.peek__qty { display: inline-flex; align-self: start; align-items: center; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line); }
.peek__qty button { border: 0; background: none; width: 44px; height: 44px; font-size: 22px; font-weight: 800; }
.peek__qty input { width: 80px; text-align: center; border: 0; background: none; font: inherit; font-weight: 800; font-size: 18px; -moz-appearance: textfield; }
.peek__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.peek__add { justify-content: center; font-size: 17px; padding: 15px 22px; }
.peek__note { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.peek__x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 16px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); }
.peek__x:hover { background: var(--ink); color: #fff; }

/* ---------- Cierre ---------- */
.shop-cta { text-align: center; padding: clamp(80px, 11vw, 150px) var(--gutter); }
.shop-cta__title { margin: 0 0 20px; font-size: clamp(54px, 9vw, 130px); line-height: .92; font-weight: 400; }
.shop-cta__title .drip:last-child { color: #fff; }
.shop-cta p { max-width: 560px; margin: 0 auto 28px; font-size: 19px; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .rail { top: 70px; }
  .rail { gap: 8px; padding: 8px var(--gutter) 10px; }
  .rail__tools { flex: 1 1 100%; flex-wrap: nowrap; }
  .rail__search { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .rail__search input { width: 100%; padding: 9px 0; }
  .rail select { width: 128px; padding: 9px 10px; font-size: 14px; }
  .rail__toggle { display: none; }
  .aisle__float .f1 { display: none; }
  .aisle__float img { opacity: .9; }
  .aisle__float .f0 { right: -6%; top: 6%; width: 46vw; }
  .aisle__float .f2 { right: -2%; bottom: -2%; width: 30vw; }
  .aisle__text > * { max-width: 78%; }
  .aisle__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .item { padding: 8px 8px 12px; border-radius: 20px; }
  .item__name { font-size: 14px; }
  .item__price { font-size: 17px; }
  .item__add { width: 36px; height: 36px; font-size: 20px; right: 8px; bottom: 8px; }
  .item__badge { top: 14px; left: 14px; font-size: 11.5px; }
  .peek__card { grid-template-columns: 1fr; overflow-y: auto; }
  .peek__img { min-height: 0; padding: 26px; }
  .peek__img img { max-height: 34svh; }
  .peek__info { overflow: visible; padding: 22px 20px 24px; }
  .mobilebar.is-store a { background: rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero__video { transform: none !important; }
  .aisle__float img { translate: none !important; }
}

/* =========================================================
   Ficha con variantes
   ========================================================= */
.peek { max-width: min(1080px, calc(100% - 24px)); }
.peek__card { grid-template-columns: 1fr 1.15fr; }
.peek__media { background: radial-gradient(circle at 50% 45%, #fff 0, color-mix(in srgb, var(--c) 28%, var(--paper)) 80%); display: flex; flex-direction: column; min-height: 0; }
.peek__media .peek__img { background: none; flex: 1; }
.peek__thumbs { display: flex; gap: 8px; padding: 0 18px 18px; overflow-x: auto; scrollbar-width: none; }
.peek__thumbs button { flex: none; width: 64px; height: 64px; border: 0; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; }
.peek__thumbs button.is-on { box-shadow: inset 0 0 0 2.5px var(--c); background: #fff; }
.peek__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.peek__opts { display: grid; gap: 14px; margin-top: 4px; }
.peek__opts fieldset { border: 0; padding: 0; margin: 0; }
.peek__opts legend { font-family: var(--font-display); font-size: 14px; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; width: 100%; }
.peek__range { font-family: var(--font-body); font-size: 12px; color: var(--ink-2); font-weight: 600; }
.peek__opts .chip { padding: 8px 13px; font-size: 14px; }
.chip--sq { min-width: 50px; text-align: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(30, 15, 46, .18), 0 0 0 3px #fff; cursor: pointer; transition: transform .15s; }
.swatch.is-on { box-shadow: inset 0 0 0 2px rgba(30, 15, 46, .18), 0 0 0 3px #fff, 0 0 0 5.5px var(--ink); transform: scale(1.06); }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 10px; }
.tier { position: relative; border: 0; background: #fff; border-radius: 14px; padding: 9px 8px 8px; text-align: center; cursor: pointer; display: grid; gap: 1px; box-shadow: inset 0 0 0 2px var(--line); transition: transform .15s, box-shadow .15s; }
.tier:hover { box-shadow: inset 0 0 0 2px var(--c); }
.tier b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.tier__tot { font-family: var(--font-display); font-size: 15px; color: var(--c); }
.tier.is-on .tier__tot { color: var(--yolk); }
.tier__unit { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.tier em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--teal); min-height: 1.2em; }
.tier i { position: absolute; top: -9px; left: 50%; translate: -50% 0; font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--yolk); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.tier.is-on { background: var(--ink); color: #fff; box-shadow: none; transform: rotate(-1.5deg); }
.tier.is-on .tier__unit { color: rgba(255, 255, 255, .75); }
.tier.is-on em { color: var(--yolk); }
.peek__mount { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.peek__mount input { width: 20px; height: 20px; accent-color: var(--wall); margin-top: 2px; flex: none; }
.peek__mount em { font-style: normal; font-weight: 800; color: var(--teal); }
.peek__mount small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.peek__sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.peek__sum span { color: var(--ink-2); }
.peek__sum .peek__save { color: var(--teal); }
.peek__sum .peek__tot { font-size: 17px; color: var(--ink); font-weight: 800; padding-top: 6px; border-top: 1px solid var(--line); }
.peek__sum b.peek__tot { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.peek__sum small { font-weight: 600; color: var(--ink-2); font-size: 12px; }
.upload--light { background: #fff; color: var(--ink); border-color: var(--line); margin-top: 0; }
.upload--light:hover { background: var(--paper-2); }
.item__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; min-height: 0; }
.item__tags em { font-style: normal; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--ink); padding: 2px 8px; border-radius: 99px; }
.aisle__request { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.aisle__request p { font-size: 18px; margin: 0 0 18px; }
.aisle__request-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 860px) {
  .peek__card { grid-template-columns: 1fr; }
  .peek__thumbs button { width: 54px; height: 54px; }
}

/* =========================================================
   Portada de la tienda: escaparate de productos flotando (sustituye al vídeo)
   ========================================================= */
.shop-hero {
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(255, 61, 154, .55), transparent 70%),
    radial-gradient(50% 60% at 95% 100%, rgba(255, 122, 26, .55), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(33, 161, 152, .35), transparent 70%),
    linear-gradient(160deg, #2a0f3d 0%, var(--ink) 55%, #12081c 100%);
}
.shop-hero::before {
  /* ladrillo muy sutil, como la pared de la portada */
  content: ''; position: absolute; inset: 0; z-index: -3; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ff3d9a' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='M0 1h120M0 31h120M30 0v30M90 0v30M0 30v30M60 30v30M120 30v30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 60px;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.shop-hero__glow {
  position: absolute; z-index: -2; width: 70vmax; height: 70vmax; right: -18vmax; top: -20vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff9ad5, #ffd36e, #9bffe0, #8fb8ff, #e59cff, #ff9ad5);
  filter: blur(90px); opacity: .28; animation: glowSpin 22s linear infinite;
}
@keyframes glowSpin { to { transform: rotate(360deg); } }
.shop-hero__stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hp {
  position: absolute; height: auto; will-change: transform, translate;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)) drop-shadow(0 0 1px rgba(255, 255, 255, .4));
  animation: hpFloat var(--d, 9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s);
}
@keyframes hpFloat {
  from { transform: translateY(-10px) rotate(calc(var(--r) - 2deg)); }
  to { transform: translateY(14px) rotate(calc(var(--r) + 2deg)); }
}
.hp--1 { --r: -8deg; --d: 8s; right: 31%; top: 11%; width: clamp(170px, 18vw, 360px); }
.hp--2 { --r: 6deg; --d: 10s; --dl: -2s; right: 5%; top: 13%; width: clamp(200px, 22vw, 440px); }
.hp--3 { --r: -14deg; --d: 7s; --dl: -4s; right: 43%; bottom: 17%; width: clamp(120px, 12vw, 240px); }
.hp--4 { --r: 11deg; --d: 9s; --dl: -1s; right: 1%; bottom: 5%; width: clamp(160px, 17vw, 340px); }
.hp--5 { --r: -4deg; --d: 11s; --dl: -6s; right: 21%; bottom: 3%; width: clamp(200px, 21vw, 420px); }
.hp--6 { --r: 24deg; --d: 7.5s; --dl: -3s; right: 50%; top: 16%; width: clamp(64px, 5.5vw, 120px); }
.hp--7 { --r: -18deg; --d: 8.5s; --dl: -5s; right: 52%; top: 48%; width: clamp(100px, 9vw, 190px); opacity: .95; }
.shop-hero__shade {
  background:
    linear-gradient(90deg, rgba(18, 8, 28, .92) 0%, rgba(18, 8, 28, .7) 32%, rgba(18, 8, 28, 0) 62%),
    linear-gradient(0deg, rgba(18, 8, 28, .85) 0%, transparent 35%);
}
@media (max-width: 860px) {
  .hp--1 { right: 40%; top: 9%; width: 30vw; }
  .hp--2 { right: 2%; top: 8%; width: 38vw; }
  .hp--3, .hp--6, .hp--7 { display: none; }
  .hp--4 { right: 4%; top: 34%; bottom: auto; width: 28vw; }
  .hp--5 { right: 30%; top: 30%; bottom: auto; width: 32vw; }
  .shop-hero__shade { background: linear-gradient(0deg, rgba(18, 8, 28, .95) 0%, rgba(18, 8, 28, .75) 45%, rgba(18, 8, 28, .1) 75%); }
}
@media (prefers-reduced-motion: reduce) { .hp, .shop-hero__glow { animation: none; } }

/* ---------- Diseño del cliente: arrastrar o elegir, hasta 2 archivos ---------- */
.dz__list { display: flex; flex-wrap: wrap; gap: 10px; }
.dz__list:not(:empty) { margin-bottom: 10px; }
.dz__file { position: relative; margin: 0; width: 104px; display: grid; gap: 4px; }
.dz__file > img, .dz__file > b { width: 104px; height: 104px; border-radius: 14px; object-fit: contain; display: grid; place-items: center; background: repeating-conic-gradient(#f1e9f4 0 25%, #fff 0 50%) 0 0 / 14px 14px; box-shadow: inset 0 0 0 2px var(--line); font-family: var(--font-display); font-weight: 400; color: var(--c); }
.dz__file figcaption { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz__file button { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 12px; cursor: pointer; }
.dz__file.is-busy > img, .dz__file.is-busy > b { opacity: .45; animation: dzPulse 1s ease-in-out infinite alternate; }
@keyframes dzPulse { to { opacity: .8; } }
.dz__drop { position: relative; display: grid; gap: 4px; text-align: center; padding: 18px 14px; border-radius: 16px; border: 2px dashed var(--line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.dz__drop:hover, .dz__drop.is-over { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.dz__drop.is-over { transform: scale(1.015); }
.dz__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz__drop b { font-size: 15px; }
.dz__drop small { font-size: 12px; color: var(--ink-2); }
.dz__err { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #c0262d; min-height: 0; }
.dz__err:empty { display: none; }
.peek__add:disabled { opacity: .6; cursor: progress; }

/* ---------- Ficha: apartados con título, medidas en tabla y ayuda con el diseño ---------- */
.peek__groups { display: grid; gap: 14px; }
.peek__groups h3 { margin: 0 0 7px; font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: .01em; }
.peek__feat--spec { gap: 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); background: #fff; }
.peek__feat--spec li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; font-weight: 500; }
.peek__feat--spec li + li { border-top: 1px dashed var(--line); }
.peek__feat--spec li::before { content: none; }
.peek__feat--spec li b { font-family: var(--font-display); font-weight: 400; white-space: nowrap; color: var(--c); }
.peek__help { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, #fff); border-left: 5px solid var(--c); }
.peek__help b { font-family: var(--font-display); font-weight: 400; font-size: 15px; }
.peek__help p { margin: 4px 0 10px; font-size: 14px; color: var(--ink-2); }
.peek__help div { display: flex; flex-wrap: wrap; gap: 8px; }
.peek__help a { font-size: 13px; font-weight: 800; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 2px var(--line); }
.peek__help a:hover { box-shadow: inset 0 0 0 2px var(--c); }
.tiers { grid-template-columns: repeat(3, 1fr); }

/* La columna de la ficha baja con su propio scroll (antes se cortaba por abajo)
   y el total con el botón de añadir se quedan pegados abajo, siempre a la vista */
@media (min-width: 861px) {
  .peek__info { max-height: calc(100svh - 24px); min-height: 0; overscroll-behavior: contain; }
}
.peek__buy {
  position: sticky; bottom: -28px; z-index: 1; margin: 6px -32px -28px; padding: 14px 32px 20px;
  background: var(--paper); box-shadow: 0 -14px 20px -16px rgba(30, 15, 46, .35);
}
@media (max-width: 860px) {
  .peek__card { max-height: calc(100svh - 24px); overscroll-behavior: contain; }
  .peek__buy { bottom: 0; margin: 6px -20px -24px; padding: 12px 20px 16px; }
}

/* Nombres largos en otros idiomas (p. ej. "Holografisches Vinyl"): que no ensanchen la cuadrícula en el móvil */
.aisle__grid > * { min-width: 0; }
.item__name { overflow-wrap: break-word; hyphens: auto; }
.estante > * { min-width: 0; }

/* Enlace a la ficha completa del producto y lista de todos los productos (bajo la tienda) */
.peek__more { display: inline-block; margin: 4px 0 14px; font-weight: 800; color: var(--wall); }
.shop-index { max-width: var(--max); margin: 10px auto 60px; padding: 0 var(--gutter); }
.shop-index summary { cursor: pointer; font-weight: 800; color: var(--ink-2); padding: 10px 0; }
.shop-index__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 28px; padding-top: 10px; }
.shop-index h3 { font-size: 15px; margin: 12px 0 6px; }
.shop-index ul { list-style: none; margin: 0; padding: 0; }
.shop-index li { font-size: 14px; line-height: 1.7; }
.shop-index a { color: var(--ink-2); text-decoration: none; }
.shop-index a:hover { color: var(--wall); text-decoration: underline; }

/* Vista previa del diseño del cliente sobre la foto del producto */
.peek__img { position: relative; }
.mk { position: relative; width: min(100%, 460px); aspect-ratio: 1; rotate: -3deg; filter: drop-shadow(0 22px 24px rgba(30, 15, 46, .35)); }
.mk > img, .mk > canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; display: block; rotate: none; filter: none; }
/* envase redondo: bordes en sombra y un brillo vertical, como la luz sobre vidrio o plástico */
.mk__toggle { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 4px 14px rgba(30, 15, 46, .2); cursor: pointer; }
.mk__toggle:hover { background: #fff; }
@media (max-width: 760px) { .mk { width: min(100%, 34svh); } }