/* Category-scoped curved product reel; preserves the existing banner heights. */
.vinyl-banner.shop-intro--flyer { --vinyl-surface:radial-gradient(circle at 50% 42%,rgba(45,212,191,.12),transparent 34%),linear-gradient(180deg,#fff 0%,#eef3f6 100%); --vinyl-ink:#0b1423; --vinyl-eyebrow:#0f625b; --vinyl-eyebrow-surface:rgba(255,255,255,.84); --vinyl-eyebrow-border:rgba(13,148,136,.24); --vinyl-edge:rgba(241,245,249,.5); --vinyl-control-surface:rgba(255,255,255,.88); --vinyl-control-ink:#0f172a; isolation:isolate; container-type:inline-size; background:var(--vinyl-surface); border-color:rgba(13,148,136,.24); box-shadow:0 14px 34px rgba(15,23,42,.09); perspective:1000px; }
.dark .vinyl-banner.shop-intro--flyer { --vinyl-surface:radial-gradient(circle at 50% 42%,rgba(45,212,191,.08),transparent 34%),linear-gradient(180deg,#070b10 0%,#04070b 100%); --vinyl-ink:#fff; --vinyl-eyebrow:#b8fff4; --vinyl-eyebrow-surface:rgba(3,12,22,.58); --vinyl-eyebrow-border:rgba(153,246,228,.2); --vinyl-edge:rgba(5,14,27,.15); --vinyl-control-surface:rgba(4,15,28,.72); --vinyl-control-ink:#fff; background:var(--vinyl-surface); border-color:rgba(94,234,212,.25); box-shadow:0 18px 46px rgba(0,0,0,.27); }
.vinyl-banner.shop-intro--flyer::before,
.vinyl-banner.shop-intro--flyer::after { display: none; }
.vinyl-banner .vinyl-banner__link { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; }
.vinyl-banner__reel { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: var(--vinyl-perspective,720px); perspective-origin: 50% 52%; opacity: 0; transition: opacity .7s ease; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.vinyl-banner.is-ready .vinyl-banner__reel { opacity: 1; }
.vinyl-banner__tile { position: absolute; top: calc(52% - var(--vinyl-tile-height)/2); left: calc(50% - var(--vinyl-tile-width)/2); width: var(--vinyl-tile-width); height: var(--vinyl-tile-height); transform-style: preserve-3d; animation: vinyl-cylinder-orbit var(--tile-duration) linear var(--tile-delay) infinite; will-change: transform,opacity; }
.vinyl-banner__slice { position: absolute; top: 0; bottom: 0; left: 46.875%; width: calc(6.25% + 1px); overflow: hidden; background-size: 1600% 100%; background-position: calc(var(--slice) * 6.6667%) center; background-repeat: no-repeat; border-block: 1px solid rgba(255,255,255,.5); filter: brightness(1.06) saturate(1.08) contrast(1.02); transform: translateZ(var(--vinyl-radius)) rotateY(var(--slice-turn)) translateZ(calc(-1 * var(--vinyl-radius))); }
.vinyl-banner__slice:first-child { border-left: 1px solid rgba(255,255,255,.3); border-radius: 11px 0 0 11px; }
.vinyl-banner__slice:last-child { border-right: 1px solid rgba(255,255,255,.3); border-radius: 0 11px 11px 0; }
.vinyl-banner__tile::after { position: absolute; inset: 0; content: ""; border-radius: 11px; box-shadow: 0 10px 24px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.15); pointer-events: none; }
.vinyl-banner__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,var(--vinyl-edge),transparent 17%,transparent 83%,var(--vinyl-edge)),linear-gradient(180deg,transparent 62%,rgba(241,245,249,.08)); }
.dark .vinyl-banner__veil { background:linear-gradient(90deg,var(--vinyl-edge),transparent 17%,transparent 83%,var(--vinyl-edge)),linear-gradient(180deg,transparent 62%,rgba(5,14,27,.12)); }
.vinyl-banner__content { position: relative; z-index: 2; display: grid; justify-items: center; color: var(--vinyl-ink); text-align: center; opacity: 1; transform: none; transition: opacity .65s ease .15s,transform .65s cubic-bezier(.22,1,.36,1) .15s; }
.vinyl-banner.is-enhanced:not(.is-ready) .vinyl-banner__content { opacity: 0; transform: translateY(7px); }
.vinyl-banner.is-ready .vinyl-banner__content { opacity: 1; transform: translateY(0); }
.vinyl-banner__eyebrow { margin-bottom: 6px; padding: 4px 8px; color: var(--vinyl-eyebrow); background: var(--vinyl-eyebrow-surface); border: 1px solid var(--vinyl-eyebrow-border); border-radius: 999px; box-shadow: 0 4px 14px rgba(15,23,42,.16); font-size: clamp(8px,.72vw,11px); line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(255,255,255,.92); backdrop-filter: blur(5px); }
.dark .vinyl-banner__eyebrow { box-shadow:0 4px 14px rgba(0,0,0,.3); text-shadow:0 1px 3px #000; }
.vinyl-banner__content h1 { margin: 0; color: var(--vinyl-ink); font-size: clamp(27px,3.05vw,47px); line-height: 1; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; -webkit-text-stroke: .2px rgba(255,255,255,.82); text-shadow: 0 1px 1px rgba(255,255,255,.98),0 0 11px rgba(255,255,255,.96),0 7px 20px rgba(255,255,255,.82); }
.dark .vinyl-banner__content h1 { -webkit-text-stroke:.45px rgba(0,0,0,.52); text-shadow:0 2px 3px rgba(0,0,0,.98),0 0 12px rgba(0,0,0,.9),0 8px 24px rgba(0,0,0,.7); }
.vinyl-banner__content p { display: none; }
.vinyl-banner__cta { margin-top: 9px; padding: 5px 11px; color: #06221f; background: #5eead4; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .03em; box-shadow: 0 3px 5px rgba(0,0,0,.5),0 7px 18px rgba(45,212,191,.36); }
.vinyl-banner.is-ready .vinyl-banner__eyebrow { animation: vinyl-copy-enter .65s cubic-bezier(.22,1,.36,1) .08s both; }
.vinyl-banner.is-ready .vinyl-banner__content h1 { animation: vinyl-title-enter .95s cubic-bezier(.16,1,.3,1) .18s both; }
.vinyl-banner.is-ready .vinyl-banner__cta { animation: vinyl-copy-enter .7s cubic-bezier(.22,1,.36,1) .55s both; }
.vinyl-banner__pause { position: absolute; z-index: 4; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--vinyl-control-ink); background: var(--vinyl-control-surface); border: 1px solid rgba(13,148,136,.42); border-radius: 50%; box-shadow:0 5px 14px rgba(15,23,42,.16); cursor: pointer; font-size: 13px; backdrop-filter:blur(6px); }
.dark .vinyl-banner__pause { border-color:rgba(153,246,228,.55); box-shadow:0 5px 14px rgba(0,0,0,.25); }
.vinyl-banner__icon { width: 17px; height: 17px; }
.vinyl-banner__icon--play { display: none; }
.vinyl-banner__pause[aria-pressed="true"] .vinyl-banner__icon--pause { display: none; }
.vinyl-banner__pause[aria-pressed="true"] .vinyl-banner__icon--play { display: block; }
.vinyl-banner__pause:focus-visible,
.vinyl-banner .vinyl-banner__link:focus-visible { outline: 2px solid #99f6e4; outline-offset: -4px; }
.vinyl-banner.is-paused .vinyl-banner__tile,
.vinyl-banner.is-offscreen .vinyl-banner__tile { animation-play-state: paused; }
@keyframes vinyl-cylinder-orbit {
  0% { opacity: 0; visibility: hidden; transform: translateZ(var(--vinyl-radius)) rotateY(calc(-1 * var(--vinyl-sweep))) translateZ(calc(-1 * var(--vinyl-radius))); }
  6% { opacity: 0; visibility: visible; }
  12%,88% { opacity: 1; visibility: visible; }
  94% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; transform: translateZ(var(--vinyl-radius)) rotateY(var(--vinyl-sweep)) translateZ(calc(-1 * var(--vinyl-radius))); }
}
@keyframes vinyl-title-enter {
  0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(11px) scale(.97); filter: blur(6px); letter-spacing: .18em; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); filter: blur(0); letter-spacing: .035em; }
}
@keyframes vinyl-copy-enter {
  0% { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (max-width:900px) {
  .vinyl-banner .vinyl-banner__link { height: 100px; }
  .vinyl-banner__content h1 { font-size: clamp(24px,5vw,34px); }
  .vinyl-banner__cta { margin-top: 5px; padding-block: 4px; }
}
@media (max-width:560px) {
  .vinyl-banner .vinyl-banner__link { height: 82px; }
  .vinyl-banner__veil { background: linear-gradient(90deg,var(--vinyl-edge),transparent 13%,transparent 87%,var(--vinyl-edge)); }
  .vinyl-banner__eyebrow { font-size: 7px; letter-spacing: .11em; }
  .vinyl-banner__content h1 { font-size: clamp(21px,7vw,28px); }
  .vinyl-banner__cta { display: none; }
  .vinyl-banner__pause { right: 6px; bottom: 6px; width: 27px; height: 27px; }
	.signage-banner .vinyl-banner__eyebrow { margin-bottom: 3px; padding: 3px 6px; font-size: 6px; }
	.signage-banner .vinyl-banner__content h1 { font-size: clamp(18px,6vw,23px); }
	.signage-banner .vinyl-banner__cta { display: inline-flex; margin-top: 3px; padding: 3px 8px; font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .vinyl-banner__tile { animation-play-state: paused; }
  .vinyl-banner__content { opacity: 1; transform: none; transition: none; }
  .vinyl-banner.is-ready .vinyl-banner__eyebrow,
  .vinyl-banner.is-ready .vinyl-banner__content h1,
  .vinyl-banner.is-ready .vinyl-banner__cta { animation: none; }
  .vinyl-banner__pause { display: none; }
}