/* ==========================================================================
   Kanala Kickz: The Arc, The Wall and the lift-down Plinth
   ========================================================================== */

/* ---------- The Arc ---------- */
.arc { padding-block: var(--space-s) var(--space-s); overflow: clip; }
.arc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.arc__hint { font: 600 var(--fs-xs)/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.arc__stage { position: relative; margin-top: 10px; }
.arc__swash { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arc__swash path { fill: none; stroke: var(--line-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Without JavaScript: a plain row of pairs. */
.arc__track { display: flex; gap: 16px; overflow-x: auto; padding: 24px var(--gut); scroll-snap-type: x mandatory; scrollbar-width: none; }
.arc__track::-webkit-scrollbar { display: none; }
.arc__item { flex: 0 0 min(300px, 70%); scroll-snap-align: center; }
.arc__pair { display: grid; gap: 10px; justify-items: center; outline-offset: 6px; }
.arc__pair img { width: 100%; height: auto; aspect-ratio: 768 / 420; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .7)); pointer-events: none; }
.arc__pair img.is-photo { object-fit: cover; filter: none; }
.arc__label { font: 800 1.1rem/1.05 var(--f-display); text-transform: uppercase; text-align: center; color: var(--muted); }
.arc__ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.arc__btn { border: 1px solid var(--line-2); border-radius: 50%; }
.arc__count { min-width: 74px; text-align: center; font: 800 1.1rem/1 var(--f-display); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* With JavaScript: the pairs ride the swash. */
.js .arc.is-live .arc__stage { height: clamp(320px, 40vw, 600px); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .arc.is-live .arc__stage.is-dragging { cursor: grabbing; }
.js .arc.is-live .arc__track { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; }
.js .arc.is-live .arc__item { position: absolute; left: 0; top: 0; width: clamp(200px, 30vw, 520px); will-change: transform, opacity; }
.js .arc.is-live .arc__label { opacity: 0; transition: opacity var(--t2) var(--ease); }
.js .arc.is-live .arc__item.is-centre .arc__pair img { filter: drop-shadow(0 34px 24px rgba(0, 0, 0, .8)); }
.js .arc.is-live .arc__ctrl { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.arc__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(16px, 2vw, 28px); padding-top: clamp(20px, 2.5vw, 32px); border-top: 1px solid var(--line); }
.arc__brand { font: 700 var(--fs-xs)/1.3 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.arc__model { margin-top: 8px; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem); line-height: .88; }
.arc__model a:hover { color: var(--chrome); }
.arc__colour { margin-top: 10px; font-size: var(--fs-lead); color: var(--muted); }
.arc__buy { display: grid; gap: 14px; }
.arc__price { font: 800 2rem/1 var(--f-display); }
.arc__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.szb { position: relative; min-height: 50px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink-2); font: 800 1.15rem/1 var(--f-display); color: var(--text); transition: border-color var(--t1) var(--ease), background-color var(--t1) var(--ease), color var(--t1) var(--ease); }
.szb:hover { border-color: var(--chrome); }
.szb[aria-checked="true"] { background: var(--chrome-hi); border-color: var(--chrome-hi); color: var(--ink); }
.szb:disabled { color: var(--dim); background: transparent; text-decoration: line-through; text-decoration-color: var(--line-2); cursor: not-allowed; }
.szb.is-mine::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ok); }
.szb[aria-checked="true"].is-mine::after { background: var(--ink); }
.arc__msg, .lift__msg { font-size: var(--fs-sm); color: var(--error); }
.arc__actions, .lift__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.arc__actions .btn, .lift__actions .btn { flex: 1 1 180px; }
.arc__info.is-swap > * { animation: kk-swap .45s var(--ease-out); }
@keyframes kk-swap { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 799px) {
	.arc__info { grid-template-columns: minmax(0, 1fr); }
	.arc__hint { display: none; }
	.js .arc.is-live .arc__item { width: clamp(180px, 58vw, 320px); }
}
@media (prefers-reduced-motion: reduce) { .arc__info.is-swap > * { animation: none; } }

/* ---------- The Wall ---------- */
.wall { padding-block: var(--space-s) var(--space-s); }
.wall__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.wall__lede { color: var(--muted); }
.wall__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wtab { min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 21px; font: 700 var(--fs-xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: border-color var(--t1) var(--ease), background-color var(--t1) var(--ease), color var(--t1) var(--ease); }
.wtab:hover { border-color: var(--chrome); color: var(--text); }
.wtab[aria-pressed="true"] { background: var(--chrome-hi); border-color: var(--chrome-hi); color: var(--ink); }
/* The back wall: rows of shelves, each lit by an LED strip along its front edge. */
.wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(10px, 1.6vw, 22px); padding: clamp(18px, 2.4vw, 36px) clamp(12px, 2vw, 28px) clamp(24px, 3vw, 40px); background: linear-gradient(180deg, #101012, #0C0C0D); border: 1px solid var(--line); box-shadow: inset 0 0 80px rgba(0, 0, 0, .6); }
.shelf { position: relative; min-width: 0; }
.shelf__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-width: 0; gap: 12px; padding: 0 clamp(6px, 1vw, 14px); outline-offset: -2px; }
.shelf__shoe { position: relative; display: grid; place-items: end center; aspect-ratio: 16 / 10; padding-bottom: 14px; }
/* Light pool on the back wall above each pair. */
.shelf__shoe::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 8px; height: 70%; background: radial-gradient(50% 60% at 50% 100%, rgba(255, 255, 255, .13), transparent 72%); transition: opacity var(--t2) var(--ease); }
/* The glass ledge and its LED edge. */
.shelf__shoe::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); border-bottom: 2px solid var(--led); box-shadow: 0 6px 16px rgba(255, 255, 255, .22); transition: box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.shelf__shoe img { position: relative; z-index: 1; width: 92%; height: 92%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .75)); transition: transform var(--t2) var(--ease-out), filter var(--t2) var(--ease); }
.shelf--photo .shelf__shoe img { width: 76%; height: 86%; object-fit: cover; border: 1px solid var(--line-2); }
.shelf__tag { display: grid; gap: 3px; min-width: 0; }
.shelf__name { font: 800 clamp(1rem, .9rem + .35vw, 1.25rem)/1 var(--f-display); text-transform: uppercase; color: var(--text); }
.shelf__meta { display: flex; justify-content: space-between; gap: 10px; min-width: 0; font-size: var(--fs-xs); color: var(--muted); }
.shelf__colour { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf__price { flex: none; font: 800 1rem/1 var(--f-display); color: var(--text); }
.shelf__flag { position: absolute; top: 4px; left: clamp(6px, 1vw, 14px); z-index: 2; padding: 5px 8px; border: 1px solid var(--line-2); background: var(--ink); font: 700 10px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.shelf__pair:hover .shelf__shoe img, .shelf__pair:focus-visible .shelf__shoe img { transform: translateY(-12px) rotate(-3deg); filter: drop-shadow(0 22px 14px rgba(0, 0, 0, .7)); }
.shelf__pair:hover .shelf__shoe::after, .shelf__pair:focus-visible .shelf__shoe::after { box-shadow: 0 8px 24px rgba(255, 255, 255, .45); }
.shelf.is-sold .shelf__shoe img { filter: grayscale(1) brightness(.6) drop-shadow(0 10px 8px rgba(0, 0, 0, .75)); }
/* Not in the chosen line or size: the shelf light goes off. */
.shelf.is-dim .shelf__shoe img { opacity: .18; filter: grayscale(1); transform: none !important; }
.shelf.is-dim .shelf__shoe::before { opacity: 0; }
.shelf.is-dim .shelf__shoe::after { border-bottom-color: var(--line-2); box-shadow: none; }
.shelf.is-dim .shelf__tag { opacity: .35; }
.shelf.is-lifted .shelf__shoe img { opacity: 0; }
.js .shelf { transition: opacity var(--t2) var(--ease); }
.wall__none { margin-top: 18px; color: var(--muted); }
.wall__more { margin-top: 28px; text-align: center; }
@media (max-width: 1099px) { .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 6px; } .shelf__meta { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .shelf__pair:hover .shelf__shoe img, .shelf__pair:focus-visible .shelf__shoe img { transform: none; } }

/* ---------- The lift: a pair taken down onto the Plinth ---------- */
.lift { width: min(1080px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); background: var(--ink-2); overflow: auto; }
.lift[open] { animation: kk-lift-in .4s var(--ease-out); }
@keyframes kk-lift-in { from { opacity: 0; transform: translateY(16px); } }
.lift__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.lift__close { position: absolute; right: 10px; top: 10px; z-index: 3; background: var(--ink-3); }
.lift__stage { position: relative; display: grid; place-items: center; min-height: 440px; padding: 40px 32px 70px; background: radial-gradient(56% 30% at 50% 82%, rgba(255, 255, 255, .13), transparent 70%), linear-gradient(180deg, #0E0E10, #17171A); overflow: hidden; }
.lift__plinth { position: absolute; left: 14%; right: 14%; bottom: 44px; height: 2px; background: var(--led); box-shadow: var(--glow); }
.lift__shoe { position: relative; z-index: 1; width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(0, 0, 0, .75)); }
.lift__shoe.is-photo { max-height: 380px; object-fit: cover; filter: none; }
.lift__info { display: grid; align-content: start; gap: 12px; padding: clamp(26px, 3.4vw, 44px); }
.lift__brand { font: 700 var(--fs-xs)/1.3 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lift__title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: .9; padding-right: 40px; }
.lift__colour { color: var(--muted); }
.lift__price { font: 800 1.9rem/1 var(--f-display); }
.lift__women { font-size: var(--fs-sm); color: var(--muted); }
.lift__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-top: 6px; }
.lift.is-loading .lift__info { opacity: .5; }
@media (max-width: 799px) {
	.lift { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; }
	.lift__inner { grid-template-columns: minmax(0, 1fr); }
	.lift__stage { min-height: 280px; padding: 52px 20px 56px; }
	.lift__shoe { max-height: 220px; }
	.lift__plinth { bottom: 30px; }
}
/* The flying shoe used for the lift-off (FLIP). */
.lift-fly { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .7)); transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .lift[open] { animation: none; } }