/* Small feedback on direct interaction; search results appear immediately. */
@media (prefers-reduced-motion: no-preference) {
  .primary-button,.showcase-search button { transition:background-color 150ms ease-out,scale 150ms ease-out; }
  .product-card { transition:border-color 150ms ease-out; }
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover { border-color:var(--brand); }
  .product-card:hover .card-arrow { text-decoration:underline; text-underline-offset:4px; }
}
.product-card:focus-within { border-color:var(--focus); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
/* The surface is shared by hero and product-detail tickets. The texture stays
   behind the print; no overlay, opacity or filter touches the contents. */
.spotlight-pass .pass-face-front,
.spotlight-pass .pass-face-back {
  border-color:var(--paper-edge);
  background:var(--ticket-paper) var(--paper-grain) repeat;
  box-shadow:var(--paper-shadow);
}
/* Inspection controls stay on the card; the paper itself is the control. */
.pass-art-button { display:block; position:relative; width:100%; padding:0; border:0; border-radius:12px; background:none; color:inherit; text-align:left; }
.pass-art-button:focus-visible { outline-offset:-5px; }
.pass-reset { position:absolute; z-index:6; right:-13px; top:-13px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); box-shadow:0 3px 10px #12363f18; font-size:0; }
.pass-reset > span { font-size:23px; line-height:1; }
.inspect-card .pass-face-back { padding:23px; color:var(--ink); }
.pass-back-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px dashed var(--line); color:var(--muted); font-size:11px; }
.pass-back-head button { display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font-size:12px; }
.pass-back-head button > span { font-size:19px; }
.pass-back-name { display:block; margin:19px 0; font-size:22px; line-height:1.15; letter-spacing:-.035em; }
.pass-back-facts { display:grid; gap:11px; margin:0 0 20px; font-size:12px; }
.pass-back-facts > div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; }
.pass-back-facts dt { color:var(--muted); }
.pass-back-facts dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.pass-back-note { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 17px; }
.pass-back-status { padding-top:15px; border-top:1px dashed var(--line); color:var(--muted); font-size:11px; line-height:1.5; }
.pass-back-open { display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:13px; font-weight:600; }
.pass-back-open > span { font-size:22px; }
.detail-art:has(.detail-pass) { padding:0; border:0; background:none; box-shadow:none; }
.detail-pass { width:100%; max-width:440px; margin-inline:auto; }
.detail-pass-art.cover { height:300px; min-height:300px; border-radius:12px; }
.detail-pass .spotlight-info { padding:21px 19px 18px; }
.detail-pass .spotlight-name { font-size:24px; }
.detail-pass .spotlight-facts { font-size:13px; }
#purchase-panel { scroll-margin-top:110px; }
@media (hover:hover) and (pointer:fine) {
  .pass-reset:hover,.pass-back-head button:hover { background:var(--soft); }
  .pass-back-open:hover { text-decoration:underline; text-underline-offset:4px; }
}
@media (max-width:650px) {
  .detail-pass-art.cover { height:225px; min-height:225px; }
  .detail-pass .spotlight-info { padding:16px 13px; }
  .detail-pass .spotlight-name { font-size:22px; }
  .inspect-card .pass-face-back { padding:19px; }
  .pass-back-head { gap:8px; font-size:10px; }
  .pass-back-name { font-size:20px; margin-block:15px; }
  .pass-back-facts > div { grid-template-columns:72px minmax(0,1fr); gap:8px; }
}
@media (max-width:380px) {
  .inspect-card .pass-face-back { padding:15px; }
  .pass-back-head { flex-wrap:wrap; gap:2px; }
  .pass-back-head button { margin-left:auto; }
  .pass-back-name { font-size:19px; }
  .pass-back-facts { font-size:12px; }
}

/* Three real passes share one deck. JavaScript animates between these endpoint
   poses and reserves the measured visual height; no card is re-created. */
.showcase-selected.showcase-deck {
  --deck-width:310px;
  position:relative;
  display:block;
  isolation:isolate;
  width:min(var(--deck-width),100%);
  height:var(--deck-height,500px);
  min-height:0;
  animation:none;
  transition:none;
}
.showcase-deck-slot {
  --deck-x:0%;
  --deck-y:0px;
  --deck-rotate:-2deg;
  --deck-scale:1;
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  transform-origin:50% 50%;
  transform:translate(var(--deck-x),var(--deck-y)) rotate(var(--deck-rotate)) scale(var(--deck-scale));
}
.showcase-deck-slot[data-deck-position="front"] {
  --deck-x:0%;
  --deck-y:0px;
  --deck-rotate:-2deg;
  --deck-scale:1;
  z-index:3;
}
.showcase-deck-slot[data-deck-position="left"] {
  --deck-x:-36%;
  --deck-y:44px;
  --deck-rotate:-14deg;
  --deck-scale:.84;
  z-index:1;
}
.showcase-deck-slot[data-deck-position="right"] {
  --deck-x:36%;
  --deck-y:90px;
  --deck-rotate:14deg;
  --deck-scale:.84;
  z-index:2;
}
.showcase-deck-content { position:relative; width:100%; }
.showcase-deck .spotlight-pass,
.showcase-deck .spotlight-pass:hover,
.showcase-deck .spotlight-pass:focus-visible {
  transform:none;
  transition:none;
}
.showcase-deck-slot:not([data-deck-position="front"]) .showcase-deck-content { pointer-events:none; }
.deck-select {
  position:absolute;
  z-index:5;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:20px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
}
.showcase-deck-slot[data-deck-position="front"] > .deck-select { display:none; }
.deck-select:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.showcase-deck.is-shuffling .showcase-deck-content { pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  .deck-select:hover { box-shadow:inset 0 0 0 2px #155b6673; }
}
@media (forced-colors:active) {
  .deck-select:focus-visible { outline-color:Highlight; }
}
@media (max-width:1200px) {
  .showcase-selected.showcase-deck { --deck-width:280px; }
}
@media (max-width:900px) {
  .showcase-selected.showcase-deck { --deck-width:255px; }
  .showcase-deck-slot[data-deck-position="left"] { --deck-x:-25%; --deck-rotate:-10deg; }
  .showcase-deck-slot[data-deck-position="right"] { --deck-x:25%; --deck-rotate:10deg; --deck-y:76px; }
}
@media (max-width:650px) {
  .showcase-selected.showcase-deck { --deck-width:232px; height:var(--deck-height,450px); }
  .showcase-deck-slot[data-deck-position="left"] { --deck-x:-22%; --deck-y:38px; }
  .showcase-deck-slot[data-deck-position="right"] { --deck-x:22%; --deck-y:68px; }
}
@media (max-width:380px) {
  .showcase-selected.showcase-deck { --deck-width:184px; height:var(--deck-height,420px); }
  .showcase-deck .spotlight-art.cover > strong { font-size:21px; }
  .showcase-deck .spotlight-name { font-size:18px; }
  .showcase-deck-slot[data-deck-position="left"] { --deck-x:-28%; --deck-y:38px; --deck-rotate:-6deg; }
  .showcase-deck-slot[data-deck-position="right"] { --deck-x:28%; --deck-y:62px; --deck-rotate:6deg; }
}
@media (prefers-reduced-motion:reduce) {
  .showcase-deck,.showcase-deck-slot { animation:none!important; transition:none!important; }
  .showcase-deck .inspect-card { perspective:none; }
}


/* The two paper pieces read as one intact ticket at rest. A quiet row of
   perforations marks the stub; matching torn edges appear only on activation. */
.product-card.card {
  padding:0;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.grid .product-card .card-link {
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  gap:0;
  position:relative;
  /* Shadow the final silhouette, after both rounded paper pieces are clipped.
     A filter on the stub itself is clipped by its own polygon on mobile and
     leaves a dark rectangular backing at the outer corners. */
  filter:drop-shadow(0 2px 2px #12363f12);
}
.product-card .card-ticket-main {
  --tear-depth:0px;
  position:relative;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding:6px 6px 7px;
  border:1px solid var(--paper-edge);
  border-bottom:0;
  border-radius:var(--paper-radius) var(--paper-radius) 0 0;
  overflow:hidden;
  background:var(--ticket-paper) var(--paper-grain) repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tear-depth)),94% 100%,89% calc(100% - var(--tear-depth)),84% 100%,79% calc(100% - var(--tear-depth)),74% 100%,69% calc(100% - var(--tear-depth)),64% 100%,59% calc(100% - var(--tear-depth)),54% 100%,49% calc(100% - var(--tear-depth)),44% 100%,39% calc(100% - var(--tear-depth)),34% 100%,29% calc(100% - var(--tear-depth)),24% 100%,19% calc(100% - var(--tear-depth)),14% 100%,9% calc(100% - var(--tear-depth)),4% 100%,0 calc(100% - var(--tear-depth)));
}
.product-card .card-ticket-main .cover {
  flex:0 0 auto;
  width:100%;
  height:215px;
  min-height:215px;
}
.product-card .card-ticket-main .card-body {
  flex:1 1 auto;
  padding-bottom:16px;
}
.product-card .card-bottom {
  --tear-depth:0px;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:100%;
  min-height:74px;
  margin-top:-1px;
  padding:19px 18px 15px;
  border:1px solid var(--paper-edge);
  border-top:0;
  border-radius:0 0 var(--paper-radius) var(--paper-radius);
  background:var(--ticket-paper) var(--paper-grain) repeat;
  clip-path:polygon(0 0,4% var(--tear-depth),9% 0,14% var(--tear-depth),19% 0,24% var(--tear-depth),29% 0,34% var(--tear-depth),39% 0,44% var(--tear-depth),49% 0,54% var(--tear-depth),59% 0,64% var(--tear-depth),69% 0,74% var(--tear-depth),79% 0,84% var(--tear-depth),89% 0,94% var(--tear-depth),100% 0,100% 100%,0 100%);
  box-shadow:none;
  transform-origin:4% 0;
}
.product-card .card-bottom::before,
.product-card .card-bottom::after { display:none; }
.product-card .card-bottom::before {
  content:"";
  display:block;
  top:0;
  left:0;
  right:0;
  width:auto;
  height:1px;
  border:0;
  border-radius:0;
  background:var(--paper-perforation);
}
.product-card .card-ticket-main::after,
.product-card .card-bottom::after {
  content:"";
  position:absolute;
  display:block;
  left:-1px;
  right:-1px;
  width:auto;
  height:calc(var(--tear-depth) + 1px);
  border:0;
  border-radius:0;
  background:url("ticket-edge.bd96589ae196.svg") center / 100% 100% no-repeat;
  opacity:0;
  pointer-events:none;
}
.product-card .card-ticket-main::after { bottom:0; }
.product-card .card-bottom::after { top:0; }
.product-card.is-tearing .card-bottom::before { opacity:0; }
.product-card.is-tearing .card-ticket-main,
.product-card.is-tearing .card-bottom { --tear-depth:7px; }
.product-card.is-tearing .card-ticket-main::after,
.product-card.is-tearing .card-bottom::after { opacity:1; }


/* Printed artwork and text keep their proportions at every viewport. */
.catalog-grid .product-card .card-ticket-main .cover { height:165px; min-height:165px; }
.home-catalog .product-card .card-ticket-main .cover { height:210px; min-height:210px; }

.product-card:focus-within .card-ticket-main,
.product-card:focus-within .card-bottom { border-color:var(--brand); }
.product-card:focus-within .card-bottom::before { background:repeating-linear-gradient(90deg,#6d8e83 0 2px,transparent 2px 5px); }
@media (hover:hover) and (pointer:fine) {
  .product-card:hover .card-ticket-main,
  .product-card:hover .card-bottom { border-color:var(--brand); }
  .product-card:hover .card-bottom::before { background:repeating-linear-gradient(90deg,#6d8e83 0 2px,transparent 2px 5px); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* Matching inked edges expose the cut. Keep the outer frame level while the
     stub lifts, so its border reads as one edge rather than a second outline. */
  .product-card:hover:not(.is-tearing) .card-ticket-main,
  .product-card:hover:not(.is-tearing) .card-bottom { --tear-depth:4px; }
  .product-card:hover:not(.is-tearing) .card-ticket-main::after,
  .product-card:hover:not(.is-tearing) .card-bottom::after { opacity:1; }
  .product-card:hover:not(.is-tearing) .card-bottom::before { opacity:0; }
  .product-card:hover:not(.is-tearing) .card-bottom {
    transform:translateY(1px);
  }
}
@media (prefers-reduced-motion:no-preference) {
  .product-card .card-ticket-main::after,
  .product-card .card-bottom::after {
    transition:opacity 150ms ease-out,height 150ms cubic-bezier(.2,0,0,1);
  }
  .product-card .card-ticket-main { transition:clip-path 150ms cubic-bezier(.2,0,0,1),border-color 150ms ease-out; }
  .product-card .card-bottom {
    transition:transform 150ms cubic-bezier(.2,0,0,1),
               clip-path 150ms cubic-bezier(.2,0,0,1),
               border-color 150ms ease-out;
  }
  .product-card:focus-within .card-bottom {
    transform:translateY(1px);
  }
  .product-card.is-tearing .card-bottom {
    transform:translateY(18px) rotate(2.8deg);
    transition-duration:340ms,340ms,150ms;
  }
}
@media (prefers-reduced-motion:reduce) {
  .grid .product-card .card-link { filter:none; }
  .product-card .card-bottom { transform:none !important; filter:none !important; }
}
@media (max-width:600px) {
  .product-card .card-ticket-main {
    display:flex;
    flex-direction:column;
  }
  .product-card .card-ticket-main .cover,
  .catalog-grid .product-card .card-ticket-main .cover,
  .home-catalog .product-card .card-ticket-main .cover {
    height:180px;
    min-height:180px;
  }
  .product-card .card-ticket-main .card-facts { grid-template-columns:1fr 1fr; gap:12px; margin:0; }
  .product-card .card-ticket-main .card-facts > div { grid-template-columns:1fr; }
  .product-card .card-ticket-main .card-name { min-height:0; }
  .product-card .card-bottom { min-height:70px; padding:17px 15px 13px; }
}
@media (forced-colors:active) {
  .grid .product-card .card-link { filter:none; }
  .product-card .card-ticket-main,.product-card .card-bottom {
    border:1px solid CanvasText;
    background:Canvas;
    filter:none;
  }
  .product-card:focus-within .card-ticket-main,
  .product-card:focus-within .card-bottom { border-color:Highlight; }
  .product-card .card-bottom::before { background:none; border-top:1px dashed CanvasText; }
  .product-card .card-ticket-main::after,.product-card .card-bottom::after { display:none; }
  .spotlight-pass .pass-face-front,
  .spotlight-pass .pass-face-back { background:Canvas; border-color:CanvasText; box-shadow:none; }
  .spotlight-foot { background:none; border-top:1px dashed CanvasText; padding-top:12px; }
}