/* showcase.css (owner: builder A): the click-to-centre showcase (showcase.js). Every colour is a token; --c is the
   product neon. settle: cubic-bezier(.16,1,.3,1) arrivals; recede: cubic-bezier(.4,0,.2,1) the store stepping back. */
dialog.sx { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; --c: var(--accent); }
.sx::backdrop { background: transparent; }
.sx-panel { position: absolute; inset: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 30%); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(var(--glint) / .12), 0 50px 120px rgb(var(--shade) / .6); }
.sx[open] .sx-panel { animation: sx-in .7s var(--settle); }
.sx.closing .sx-panel { animation: sx-out .28s var(--recede) forwards; }
@keyframes sx-in { from { opacity: 0; transform: scale(.975); } }
@keyframes sx-out { to { opacity: 0; transform: scale(.98); } }

/* the stage: the pack and its ingredients on the glass */
.sx-stage { position: relative; min-width: 0; min-height: 0; }
.sx-graph { position: absolute; inset: 0; --mg-h: 100%; }
.sx-nav { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.sx-step { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid rgb(var(--glint) / .22); border-radius: 2px;
  background: color-mix(in srgb, var(--bg-deep) 50%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 14.5px; letter-spacing: .02em; transition: border-color .3s, background .3s; }
.sx-step:hover { border-color: var(--text); background: color-mix(in srgb, var(--bg-deep) 70%, transparent); }
.sx-step svg, .sx-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.sx-count { margin: 0; font: 400 13px/1 var(--mono); color: var(--text-2); letter-spacing: .04em; text-shadow: 0 1px 8px rgb(var(--shade) / .9); }

/* the details column: dark stone over the glass */
.sx-details { position: relative; min-height: 0; overflow-y: auto; padding: 26px 38px 44px; background: color-mix(in srgb, var(--bg-deep) 84%, transparent); border-left: 1px solid rgb(var(--glint) / .12); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sx-top { display: flex; justify-content: flex-end; }
.sx-close { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 2px; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: border-color .3s; }
.sx-close:hover { border-color: var(--text); }
.sx-details .eyebrow { margin-top: 42px; }
.sx-name { margin: 16px 0 0; font: 300 clamp(44px, 3.7vw, 58px)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.sx-sub { margin: 10px 0 0; color: var(--text-2); font-size: 16px; }
.sx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 22px 0 0; }
.sx-price .price { font-size: 19px; }
.sx-tag { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: var(--text); }
.sx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.sx-cta .btn { min-width: 180px; }
.sx-page { color: var(--text); }
.sx-add .sx-add-b { display: none; }
.sx-add.added .sx-add-a { display: none; }
.sx-add.added .sx-add-b { display: inline; }
.sx-bagline { min-height: 1.5em; margin: 12px 0 0; font-size: 14.5px; color: var(--text-2); }
.sx-bagline a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--c); }
.sx-sect h3 { margin: 30px 0 10px; font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.sx-sect p { margin: 0; font-size: 16px; line-height: 1.65; }
.sx-how a { text-underline-offset: 3px; }
.sx-inci { font: 400 13px/1.85 var(--mono) !important; color: var(--text-2); letter-spacing: 0; }
.sx-inci a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.sx-inci a:hover, .sx-inci a:focus-visible { color: var(--text); border-bottom-color: var(--c); }
.sx-inci a.is-hero { color: color-mix(in srgb, var(--c) 55%, var(--text)); }
.sx-pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-pair { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 15px; transition: border-color .3s; }
.sx-pair::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sx-pair small { font-size: 13px; color: var(--text-2); }
.sx-pair:hover { border-color: var(--text); }

/* the morph: the pack flies from its card to the centre, the rest of the page is live underneath */
::view-transition-group(sx-prod) { animation-duration: .62s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
html.sx-vt-in::view-transition-old(root) { display: none; }
html.sx-vt-in::view-transition-new(root) { animation: none; }
html.sx-vt-out::view-transition-old(root) { animation: 280ms cubic-bezier(.4, 0, .2, 1) both sx-vt-fade; }
html.sx-vt-out::view-transition-new(root) { animation: none; }
@keyframes sx-vt-fade { to { opacity: 0; } }
/* during the showcase's own transition, other named elements on the page (the cards' pk-<slug> packs, which morph to the
   product page on navigation) must not be captured, or they would float above the receding page */
html.sx-vt-in #page [style*="view-transition-name"]:not([data-showcase-img]),
html.sx-vt-out #page [style*="view-transition-name"]:not([data-showcase-img]) { view-transition-name: none !important; }

@media (max-width: 1100px) {
  .sx-panel { inset: 14px; grid-template-columns: minmax(0, 1fr) minmax(340px, 36%); }
  .sx-details { padding: 22px 26px 36px; }
}
/* phones: one scrolling sheet, the graph as a list, Close always in reach */
@media (max-width: 860px) {
  .sx-panel { inset: 0; display: block; overflow-y: auto; border-radius: 0; overscroll-behavior: contain; }
  .sx-panel > .glass-gl { position: fixed; }   /* the sheet scrolls; the wet glass stays behind it */
  .sx-graph { position: relative; inset: auto; --mg-h: auto; }
  .sx-stage .mg--list { padding-top: 64px; }
  .sx-nav { position: relative; left: auto; right: auto; bottom: auto; padding: 0 16px 18px; }
  .sx-step { height: 42px; padding: 0 12px; font-size: 14px; }
  .sx-step span { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sx-details { overflow: visible; padding: 26px 20px 44px; border-left: 0; border-top: 1px solid rgb(var(--glint) / .12); }
  .sx-top { position: fixed; top: 12px; right: 12px; z-index: 10; }
  .sx-close { background: color-mix(in srgb, var(--bg-deep) 80%, transparent); }
  .sx-details .eyebrow { margin-top: 4px; }
  .sx-name { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx[open] .sx-panel, .sx.closing .sx-panel { animation: none; }
}