/* Mystic Hollow round 3: shop.css (owner: builder B). The shop page: plate, filters, the frames grid, empty state.
   Colours come from tokens only. Easing: --settle. */

/* ---------- header plate ---------- */
.shop-plate { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 40vw, 470px); overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.shop-plate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(.78) saturate(.95); }
.shop-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--atmos-hero); }
.shop-plate-in { position: relative; z-index: 1; padding-bottom: 46px; }
.shop-plate .crumbs { position: absolute; top: 0; left: var(--gut); }
.shop-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: end; gap: 24px 48px; padding-top: 120px; }
.shop-head .lede { color: var(--text); opacity: .86; }

/* the collection on the ledge (shop.mjs ledge()). The track is a size container the size of the section (a swipeable
   shelf on phones); every length below resolves against it. The plate is placed so its ledge surface (--wy of the image)
   lands at --ly of the section and still covers it (--k); the packs stand on that line, sized from the section height and
   the lineup width (--unit = the tallest pack), at their real relative heights, below the header and the breadcrumb. */
.shop-plate.has-ledge { height: clamp(540px, 43vw, 700px); min-height: 0; }
.ledge-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
/* any size of line: up to about 12 products share the width; past that the ledge becomes a shelf you scroll, as on phones */
.ledge-scroll > .ledge-track { width: max(100%, calc(var(--n) * 105px + 112px)); }
.ledge-track { position: absolute; inset: 0; container-type: size; --ly: .56;
  --k: max((1 - var(--ly)) / (1 - var(--wy)), var(--ly) / var(--wy));
  --w: max(100cqw, 100cqh * var(--ar) * var(--k)); --wh: calc(var(--w) / var(--ar));
  --lw: min(100cqw - 2 * var(--gut), max(1360px, var(--n) * 105px));
  --unit: min(var(--ly) * 100cqh - 84px, var(--lw) / var(--fit));
  --lip: calc(var(--ly) * 100cqh + (.705 - var(--wy)) * var(--wh)); }
.shop-world { position: absolute; z-index: 0; left: calc((100cqw - var(--w)) / 2); top: calc(var(--ly) * 100cqh - var(--wy) * var(--wh)); width: var(--w); height: var(--wh); }
.shop-world .shop-plate-img { filter: brightness(.84) saturate(.95); }
.shop-world .shop-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* H3 crops the sides of a 16:9 still: contain lines it up with the plate */ filter: brightness(.84) saturate(.95); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 56%); mask-image: linear-gradient(180deg, #000 50%, transparent 56%); }
.ledge-track::after { /* shade under the header and behind the title: over the plate, under the packs */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 86%, transparent), color-mix(in srgb, var(--bg-deep) 40%, transparent) 24%, transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 55%, transparent), transparent 18%); }
.ledge { position: absolute; inset: 0; z-index: 3; list-style: none; margin: 0; padding: 0; }
.ledge-item { position: absolute; left: calc(50cqw + (var(--i) - (var(--n) - 1) / 2) * var(--lw) / var(--n)); top: calc(var(--ly) * 100cqh); width: 0; height: 0; }
.ledge-item::before { /* warm light on the wet stone where each pack stands */ content: ''; position: absolute; left: 0; top: 0; width: calc(var(--lw) / var(--n) * 1.15); aspect-ratio: 3.2; translate: -50% -55%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--key) / .17), transparent); }
.ledge-btn { position: absolute; left: 0; bottom: 0; height: calc(var(--pk-rel) * var(--unit)); translate: -50% 0; padding: 0; cursor: zoom-in; }
.ledge-btn .pk-img { transition: translate .7s var(--settle); }
.ledge-btn .pk-shadow { transition: opacity .7s var(--settle), scale .7s var(--settle); }
.ledge-btn:hover .pk-img, .ledge-btn:focus-visible .pk-img { translate: 0 -5px; }
.ledge-btn:hover .pk-shadow { opacity: .8; scale: 1.05 1; }
.ledge-btn:focus-visible { outline-offset: 8px; }
/* the names, on a band of smoked glass along the front lip of the ledge, feathered on every side so it has no edge */
.ledge-band { position: absolute; z-index: 2; left: 50%; top: calc(var(--lip) - 17px); width: calc(var(--lw) + 140px); max-width: 100%; height: 84px; translate: -50% 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg-deep) 58%, transparent); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); mask-composite: intersect; }
.ledge-name { position: absolute; z-index: 4; left: 0; top: calc(var(--lip) - var(--ly) * 100cqh); width: calc(var(--lw) / var(--n) - 10px); height: 50px; translate: -50% 0;
  display: grid; place-items: center; padding: 0 2px; font: 500 12px/1.3 var(--sans); letter-spacing: .13em; text-align: center; text-transform: uppercase; text-wrap: balance; color: var(--text); opacity: .84; text-decoration: none; transition: opacity .3s; }
/* hover: each product lights up in its own label neon. A slow turning glow behind the pack, a neon pool on the wet stone,
   and a sheen running through the name. Static (no animation) for reduced motion. */
@property --ledge-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ledge-turn { to { --ledge-a: 360deg; } }
@keyframes ledge-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ledge-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.ledge-btn::before { content: ''; position: absolute; inset: 4% -42% 6%; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: conic-gradient(from var(--ledge-a), var(--c), color-mix(in srgb, var(--c) 35%, #fff), color-mix(in srgb, var(--c) 55%, #000), var(--c) 70%, color-mix(in srgb, var(--c) 45%, #7b2cff), var(--c));
  filter: blur(26px); transition: opacity .6s var(--settle); animation: ledge-turn 7s linear infinite, ledge-breathe 3.6s ease-in-out infinite; animation-play-state: paused; }
.ledge-btn:hover::before, .ledge-btn:focus-visible::before, .ledge-item:has(.ledge-name:hover) .ledge-btn::before { opacity: .62; animation-play-state: running; }
.ledge-item::after { content: ''; position: absolute; left: 0; top: 0; width: calc(var(--lw) / var(--n) * 1.3); aspect-ratio: 3.4; translate: -50% -50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 18%, transparent) 55%, transparent); transition: opacity .6s var(--settle); }
.ledge-item:hover::after, .ledge-item:focus-within::after { opacity: .9; }
.ledge-name:hover, .ledge-item:hover .ledge-name, .ledge-item:focus-within .ledge-name { opacity: 1; color: transparent; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset: 6px;
  background: linear-gradient(90deg, var(--text) 0%, var(--c) 30%, color-mix(in srgb, var(--c) 40%, #fff) 50%, var(--c) 70%, var(--text) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: ledge-sheen 2.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ledge-btn::before, .ledge-name { animation: none !important; } }
/* Violet Hour: rain behind the window, distant lights that flicker, a little depth on the pointer (ledge-fx.js).
   Masked to the window above the ledge; the plate, the ledge and the packs never move. */
.ledge-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; --px: 0; --py: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--ly) * 100% - 20%), transparent calc(var(--ly) * 100% - 8%));
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--ly) * 100% - 20%), transparent calc(var(--ly) * 100% - 8%)); }
.ledge-rain { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); translate: calc(var(--px) * -8px) calc(var(--py) * -4px); mix-blend-mode: screen; }
.ledge-lights { position: absolute; inset: 0; translate: calc(var(--px) * -16px) calc(var(--py) * -7px); }
.ledge-lights i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; opacity: .7;
  background: radial-gradient(closest-side, var(--lc, rgb(255 184 110 / .5)), transparent); filter: blur(3px);
  animation: ledge-flicker var(--d, 7s) steps(1, end) infinite var(--dl, 0s), ledge-drift var(--g, 9s) ease-in-out infinite alternate; }
@keyframes ledge-flicker { 0%, 100% { opacity: .75; } 6% { opacity: .3; } 8% { opacity: .85; } 41% { opacity: .62; } 43% { opacity: .9; } 71% { opacity: .45; } 73% { opacity: .8; } }
@keyframes ledge-drift { from { scale: .92; } to { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .ledge-fx { display: none; } }
.shop-plate.has-ledge .shop-plate-in { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; top: 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(26px, 2.6vw, 40px); pointer-events: none; }
.shop-plate.has-ledge .shop-plate-in a, .shop-plate.has-ledge .shop-plate-in button { pointer-events: auto; }
.shop-plate.has-ledge .crumbs { top: 0; }
.shop-plate.has-ledge .shop-head { padding-top: 0; }
.shop-plate.has-ledge .h1 { font-size: clamp(46px, 4.6vw, 72px); }
.shop-plate.has-ledge::after { content: none; }

/* ---------- filters ---------- */
.shop-bar { border-bottom: 1px solid var(--line); background: var(--bg); }
.shop-bar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: start; padding-top: 22px; padding-bottom: 22px; }
.shop-filters { display: grid; gap: 12px; min-width: 0; }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fgroup-h { width: 64px; flex: none; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.fgroup .chip { height: 38px; padding: 0 14px; font-size: 14.5px; }
.fgroup .chip small { margin-left: 2px; }
.fgroup .chip[data-f="need"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.shop-tools { display: grid; justify-items: end; gap: 12px; }
.shop-count { margin: 0; height: 38px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); white-space: nowrap; }
.shop-count b { font: 400 17px/1 var(--mono); color: var(--text); }
.shop-sort { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.shop-sort select { height: 38px; padding: 0 34px 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg-2) linear-gradient(45deg, transparent 50%, var(--text-2) 50%) no-repeat calc(100% - 17px) 17px / 5px 5px; -webkit-appearance: none; appearance: none; font: 500 14.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.shop-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- results ---------- */
.shop-results { padding-top: 34px; }
.shop-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0 0 30px; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--accent-soft); }
.shop-reading p { margin: 0; font-size: 16px; color: var(--text); }
.shop-reading p em { font-style: normal; color: var(--text-2); }
.shop-grid > li[hidden] { display: none; }
.shop-grid > li { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .shop-grid.is-sorting > li { animation: shop-in .55s var(--settle) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes shop-in { from { opacity: 0; transform: translateY(10px); } }
}

/* empty state */
.shop-empty { padding: 60px 0 20px; max-width: 640px; }
.shop-empty p { margin: 0 0 12px; color: var(--text-2); }
.shop-empty .h3 { color: var(--text); margin-bottom: 14px; }
.shop-empty .link, .shop-reading .link { font-size: 15px; }

/* help strip */
.shop-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(80px, 8vw, 120px); padding-top: 40px; border-top: 1px solid var(--line); }
.sh-col p { margin: 14px 0 18px; color: var(--text-2); max-width: 40ch; }
.sh-col .h3 { font-size: 26px; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .shop-bar-in { grid-template-columns: 1fr; }
  .shop-tools { grid-auto-flow: column; justify-content: space-between; justify-items: start; }
}
@media (max-width: 860px) {
  /* phones: the ledge is a shelf you swipe, so every pack stays a readable size; the title sits on the dark below it */
  .shop-plate.has-ledge { height: auto; display: block; }
  .ledge-scroll { position: relative; inset: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
  .ledge-scroll::-webkit-scrollbar { display: none; }
  .ledge-track { position: relative; inset: auto; width: max(100%, calc(var(--n) * 124px + 40px)); height: 392px; --ly: .64; --gut: 20px; }
  .ledge-item { scroll-snap-align: center; }
  .ledge-band { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent); }
  .ledge-name { font-size: 11.5px; letter-spacing: .1em; }
  .shop-plate.has-ledge .shop-plate-in { position: static; padding-top: 6px; }
  .shop-plate.has-ledge .crumbs { left: var(--gut); z-index: 5; }
  .shop-head { grid-template-columns: 1fr; padding-top: 80px; }
  .shop-plate { min-height: 340px; }
  .fgroup { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .fgroup::-webkit-scrollbar { display: none; }
  .fgroup-h { width: auto; margin-right: 6px; }
  .fgroup .chip { flex: none; }
  .shop-help { grid-template-columns: 1fr; gap: 30px; }
}