/* Lona website: the Shop section. Four ways to shop, played in one phone, with the steps beside it.
   Inside the phone everything is sized in iOS points (var(--pt)); each scene's beats are classes on the scene.
   The Studio scenes use the shared Studio screen (site.css: .studio-screen, .studio-look, .studio-tray…), extended
   here only under .shop-section. */

.shop-section { overflow-x: clip; background: var(--white); }

/* ---------- Layout ---------- */
.shop-layout { display: grid; gap: 36px; align-items: center; }
/* Side by side from 900px, as the other sections; stacked below, phone under the copy. */
@media (min-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(36px, 5.5vw, 96px); }
}
.shop-copy .section-head { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* ---------- Steps ---------- */
.shop-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); max-width: 540px; }
.shop-step {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line-2);
}
.shop-step__num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-3); font-size: 14px; font-weight: 650;
  transition: background 0.3s, color 0.3s;
}
.shop-step__btn {
  justify-self: start; text-align: left; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
  color: var(--ink-3); transition: color 0.3s;
}
/* The whole row is the button. */
.shop-step__btn::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.shop-step__btn:hover { color: var(--ink-2); }
.shop-step__btn:focus-visible { outline: none; }
.shop-step__btn:focus-visible::after { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.shop-step__text {
  grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.55s var(--ease), opacity 0.4s;
}
.shop-step__text > span {
  overflow: hidden; min-height: 0; padding-top: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.55;
  transition: padding-top 0.55s var(--ease);
}
.shop-step__bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0;
}
.shop-step.is-on .shop-step__btn { color: var(--ink); }
.shop-step.is-on .shop-step__num { background: var(--ink); color: var(--paper); }
.shop-step.is-on .shop-step__text { grid-template-rows: 1fr; opacity: 1; }
.shop-step.is-on .shop-step__text > span { padding-top: 8px; }
.shop-step.is-on .shop-step__bar { opacity: 1; }
.shop-section.shop-static .shop-step__bar { display: none; }

/* Stacked: the steps are four cards, on paper against the section's white. */
@media (max-width: 899px) {
  .shop-steps { grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; max-width: none; }
  .shop-step {
    grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 11px 12px;
    border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); overflow: hidden;
  }
  .shop-step__num { width: 24px; height: 24px; font-size: 12.5px; background: var(--white); }
  .shop-step__btn { font-size: 15px; line-height: 1.25; }
  .shop-step__btn::after { border-radius: 16px; }
  .shop-step__btn:focus-visible::after { outline-offset: -2.5px; }
  .shop-step__text { display: none; }
  .shop-step__bar { bottom: 0; height: 3px; border-radius: 0; }
  .shop-step.is-on { border-color: var(--ink); }
}

/* ---------- Stage ---------- */
.shop-stage {
  --shop-w: min(320px, 80vw);
  position: relative; isolation: isolate; display: grid; justify-items: center;
}
@media (min-width: 900px) { .shop-stage { --shop-w: clamp(290px, 31vw, 340px); } }
.shop-stage::before {
  content: ""; position: absolute; z-index: -1; left: 50%; translate: -50% 0;
  top: calc(var(--shop-w) * 0.16); width: min(calc(var(--shop-w) * 1.36), calc(var(--shop-w) + 2 * var(--gutter)), calc(100vw - 24px)); height: calc(var(--shop-w) * 1.9);
  border-radius: 999px 999px 32px 32px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.6), transparent 60%), linear-gradient(180deg, #e2e1f8 0%, var(--accent-soft) 70%, rgba(238, 237, 251, 0) 100%);
}
.shop-stage .shop-phone { --phone-w: var(--shop-w); }
.shop-caption {
  max-width: 30em; min-height: calc(1.5em * 4); margin-top: 20px;
  text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
}
@media (min-width: 900px) { .shop-caption { display: none; } }
.shop-controls { margin-top: 14px; }
@media (min-width: 900px) { .shop-controls { margin-top: 26px; } }
.shop-pause svg { width: 13px; height: 13px; }
.shop-pause .shop-pause__play, .shop-pause.is-paused .shop-pause__a, .shop-pause.is-paused .shop-pause__b { display: none; }
.shop-pause.is-paused .shop-pause__play { display: inline; }
.shop-section.shop-static .shop-controls { display: none; }
.shop-stage .demo-note { max-width: 26em; }

/* ---------- Points ---------- */
.shop-section .shop-points { margin-top: clamp(56px, 8vw, 104px); grid-template-columns: 1fr; gap: 24px 36px; }
@media (min-width: 600px) { .shop-section .shop-points { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .shop-section .shop-points { grid-template-columns: repeat(4, 1fr); } }
.shop-points li > div { display: grid; gap: 4px; }
.shop-points p { font-size: 16px; line-height: 1.5; }

/* =====================================================================================================
   The phone. Scenes cross-fade; inside each, layers (screens, sheets) move with the scene's beat classes.
   ===================================================================================================== */
.shop-phone .ios-tabbar { transition: opacity 0.3s, translate 0.45s var(--ease); }
.shop-phone.shop-phone--bare .ios-tabbar { opacity: 0; translate: 0 calc(var(--pt) * 24); }
.shop-screen { background: #fff; }
.shop-scene {
  position: absolute; inset: 0; background: #fff; opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.shop-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.shop-screen b { font-weight: 600; }

/* Activity indicator */
.shop-spin {
  display: inline-block; flex: none; width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); border-radius: 50%;
  border: calc(var(--pt) * 2.2) solid rgba(0, 0, 0, 0.12); border-top-color: rgba(0, 0, 0, 0.55);
  animation: shop-spin 0.8s linear infinite;
}
.shop-spin--light { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.shop-spin--mini { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); border-width: calc(var(--pt) * 1.6); }
@keyframes shop-spin { to { rotate: 360deg; } }
@keyframes shop-in { from { opacity: 0; translate: 0 calc(var(--pt) * 8); } to { opacity: 1; translate: 0 0; } }

/* Shared bits of app UI */
.shop-head { margin: calc(var(--pt) * 24) calc(var(--pt) * 16) 0; font-size: calc(var(--pt) * 17); font-weight: 600; }
.shop-iconbtn { padding: 0; width: calc(var(--pt) * 44); }
.shop-mini {
  position: relative; display: block; flex: none; overflow: hidden;
  width: calc(var(--pt) * 58); height: calc(var(--pt) * 72); border-radius: calc(var(--pt) * 10); background: var(--paper-2);
}
.shop-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: calc(var(--pt) * 5); }
.shop-bigbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 7);
  height: calc(var(--pt) * 50); padding: 0 calc(var(--pt) * 14); border-radius: 999px;
  background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); font-size: calc(var(--pt) * 17); font-weight: 500; white-space: nowrap;
}
.shop-bigbtn svg { width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); }
.shop-bigbtn--prominent { background: var(--accent); color: #fff; font-weight: 600; }
.shop-dim {
  position: absolute; inset: 0; z-index: 26; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.shop-sheet {
  position: absolute; z-index: 27; left: 0; right: 0; top: calc(var(--pt) * 62); bottom: 0; overflow: hidden;
  border-radius: calc(var(--pt) * 38) calc(var(--pt) * 38) 0 0; background: #fff;
  box-shadow: 0 0 calc(var(--pt) * 24) rgba(0, 0, 0, 0.1);
  transform: translateY(103%); transition: transform 0.55s var(--ease);
}
.shop-sheetnav {
  position: absolute; z-index: 3; top: calc(var(--pt) * 12); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.shop-sheetnav .ios-glassbtn { justify-self: start; }
.shop-sheetnav .shop-done { justify-self: end; color: var(--accent); font-weight: 600; }
.shop-sheetnav .shop-new { justify-self: end; opacity: 0; transition: opacity 0.3s; }
.shop-bar {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 16) calc(var(--pt) * 50);
  background: rgba(249, 249, 250, 0.94); border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.shop-bar--stack { flex-direction: column; gap: calc(var(--pt) * 8); }
.shop-bar--stack .shop-bigbtn { flex: none; }
.shop-scroll { transform: translateY(calc(var(--pt) * var(--y, 0) * -1)); transition: transform 0.9s var(--ease); }
/* A wishlist piece's tag, as on every tile of one in the app. */
.shop-tag, .shop-tagdot {
  position: absolute; z-index: 1; top: calc(var(--pt) * 6); right: calc(var(--pt) * 6); display: grid; place-items: center;
  width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); border-radius: 50%; background: var(--accent); color: #fff;
}
.shop-tagdot svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.shop-tag::before, .shop-fan__tag::before {
  content: ""; width: 52%; height: 52%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M3 11.6V4.5A1.5 1.5 0 0 1 4.5 3h7.1c.4 0 .8.2 1.1.4l8 8c.6.6.6 1.5 0 2.1l-7.1 7.1c-.6.6-1.5.6-2.1 0l-8-8A1.5 1.5 0 0 1 3 11.6ZM7.6 9.2a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Shop tab ---------- */
.shop-shotcard {
  display: flex; align-items: center; gap: calc(var(--pt) * 14);
  margin: calc(var(--pt) * 26) calc(var(--pt) * 16) 0; padding: calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 18); background: rgba(90, 91, 216, 0.1);
}
.shop-shotcard__icon {
  display: grid; place-items: center; flex: none; width: calc(var(--pt) * 56); height: calc(var(--pt) * 56);
  border-radius: calc(var(--pt) * 14); background: var(--accent); color: #fff;
}
.shop-shotcard__icon svg { width: calc(var(--pt) * 34); height: calc(var(--pt) * 34); }
.shop-shotcard__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 3); font-size: calc(var(--pt) * 17); }
.shop-shotcard__text span { font-size: calc(var(--pt) * 13); line-height: 1.32; color: var(--ios-label-2); letter-spacing: 0; }
.shop-chev { flex: none; width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); color: #c4c4c7; }
.shop-hint { margin: calc(var(--pt) * 24) calc(var(--pt) * 16) 0; font-size: calc(var(--pt) * 16); line-height: 1.3; color: var(--ios-label-2); }
.shop-hint b { color: #6c6c70; }
.shop-linkfield {
  display: flex; align-items: center; gap: calc(var(--pt) * 9);
  margin: calc(var(--pt) * 24) calc(var(--pt) * 16) 0; height: calc(var(--pt) * 54); padding: 0 calc(var(--pt) * 7) 0 calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 12); background: #f2f2f7; color: var(--ios-label-2); font-size: calc(var(--pt) * 17);
}
.shop-linkfield > svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); flex: none; }
.shop-linkfield > span:first-of-type { flex: 1; color: #c4c4c7; }
.shop-paste {
  display: grid; place-items: center; width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); border-radius: 50%;
  background: rgba(90, 91, 216, 0.24); color: #fff;
}
.shop-paste svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.shop-wishrow { display: flex; gap: calc(var(--pt) * 12); margin-top: calc(var(--pt) * 12); padding: 0 calc(var(--pt) * 16); }
.shop-wish { width: calc(var(--pt) * 110); }
.shop-droptab {
  position: absolute; left: 0; bottom: 0; display: grid; place-items: center;
  width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); padding: calc(var(--pt) * 3) 0 0 calc(var(--pt) * 3);
  border-top-right-radius: calc(var(--pt) * 12); background: #8e8e93; color: #fff;
  font-size: calc(var(--pt) * 11); font-weight: 700;
  opacity: 0; scale: 0.4; transform-origin: 0 100%; transition: opacity 0.3s 0.25s, scale 0.5s var(--ease) 0.25s;
}

/* =====================================================================================================
   The Studio (scenes 1–3): the shared Studio screen as one layer of the scene.
   ===================================================================================================== */
.shop-section .shop-studio { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.shop-section .shop-scene.is-studio .shop-studio { opacity: 1; }
.shop-section .shop-studio .studio-items { overflow: hidden; scroll-snap-type: none; }
/* While the next look is made, the last one dims towards the wall and the pill says so. */
.shop-section .shop-scene.is-making .studio-look { opacity: 0.45; }
.shop-section .shop-scene.is-dressed .shop-before { opacity: 0; }
.shop-section .shop-scene.is-dressed .shop-after { opacity: 1; }
/* Over the try-on bar, as in the app: the status sits above it. */
.shop-section .shop-studio .studio-status {
  top: calc(var(--pt) * 504); gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 11) calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 15); opacity: 0; transition: opacity 0.3s;
}
.shop-section .shop-scene.is-making .studio-status { opacity: 1; }
.shop-section .shop-studio .studio-status .spinner { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }

/* "Trying" on a piece in the tray, over its wishlist tag. */
.shop-trying {
  position: absolute; z-index: 2; top: calc(var(--pt) * 4); left: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 5); border-radius: 999px; background: var(--accent); color: #fff;
  font-size: calc(var(--pt) * 9); font-weight: 700; line-height: 1.25; letter-spacing: 0;
  opacity: 0; transition: opacity 0.3s;
}
.shop-section .shop-scene.is-trying .shop-trying { opacity: 1; }

/* The try-on bar: one slim row over the bottom of the picture. The piece (fanned out when there are several, the
   one on you in front), what it goes with and how its colour suits you, a cross, and + Wishlist. */
.shop-trybar {
  position: absolute; z-index: 8; left: calc(var(--pt) * 24); right: calc(var(--pt) * 24); bottom: calc(100% - var(--pt) * 620);
  display: flex; align-items: center; padding: calc(var(--pt) * 4) calc(var(--pt) * 6) calc(var(--pt) * 4) calc(var(--pt) * 4);
  border-radius: calc(var(--pt) * 12); background: rgba(246, 246, 248, 0.84);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(90, 91, 216, 0.35);
  opacity: 0; translate: 0 calc(var(--pt) * 26); transition: opacity 0.35s, translate 0.55s var(--ease);
}
.shop-section .shop-scene.is-trying .shop-trybar { opacity: 1; translate: 0 0; }
.shop-trybar__about { flex: 1; min-width: 0; min-height: calc(var(--pt) * 44); display: flex; align-items: center; gap: calc(var(--pt) * 8); }
.shop-fan { position: relative; flex: none; height: calc(var(--pt) * 44); }
/* As the app: n tiles are (44 - 2(n-1)) pt tall, 0.78 as wide, each 5 pt right of and 2 pt above the one before. */
.shop-fan--1 { width: calc(var(--pt) * 34); --tw: 34; --th: 44; }
.shop-fan--2 { width: calc(var(--pt) * 38); --tw: 33; --th: 42; }
.shop-fan--3 { width: calc(var(--pt) * 41); --tw: 31; --th: 40; }
.shop-fan__tile {
  position: absolute; left: calc(var(--pt) * 5 * var(--i)); bottom: calc(var(--pt) * 2 * var(--i));
  width: calc(var(--pt) * var(--tw)); height: calc(var(--pt) * var(--th)); overflow: hidden;
  border-radius: calc(var(--pt) * 8); background: var(--paper-2); box-shadow: 0 0 calc(var(--pt) * 2) rgba(0, 0, 0, 0.12);
}
.shop-fan__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: calc(var(--pt) * 3); }
.shop-fan__tag {
  position: absolute; top: calc(var(--pt) * 3); right: calc(var(--pt) * 3); display: grid; place-items: center;
  width: calc(var(--pt) * 10.5); height: calc(var(--pt) * 10.5); border-radius: 50%; background: var(--accent);
}
.shop-trybar__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 1); }
.shop-trybar__text > b { font-size: calc(var(--pt) * 15); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-verdict { position: relative; display: block; min-width: 0; font-size: calc(var(--pt) * 12); line-height: 1.3; letter-spacing: 0; }
.shop-verdict__checking { display: flex; align-items: center; gap: calc(var(--pt) * 4); color: var(--ios-label-2); white-space: nowrap; }
.shop-verdict__fits { display: none; }
.shop-section .shop-scene.is-matched .shop-verdict__checking { display: none; }
.shop-section .shop-scene.is-matched .shop-verdict__fits { display: block; animation: shop-in 0.4s var(--ease) both; }
/* The app shows the longest wording that fits on one line, else two short lines (SwiftUI's ViewThatFits); shop.js
   measures and sets data-fit. */
.shop-v { display: none; align-items: center; gap: calc(var(--pt) * 8); white-space: nowrap; width: max-content; }
.shop-verdict__fits[data-fit="1"] .shop-v1, .shop-verdict__fits[data-fit="2"] .shop-v2 { display: flex; }
.shop-verdict__fits[data-fit="3"] .shop-v3 { display: grid; justify-items: start; gap: calc(var(--pt) * 1); }
.shop-section .shop-verdict.is-measuring .shop-verdict__fits { display: block; }
.shop-section .shop-verdict.is-measuring .shop-v { display: flex; position: absolute; left: 0; top: 0; visibility: hidden; }
.shop-goes, .shop-hue { display: inline-flex; align-items: center; gap: calc(var(--pt) * 3); }
.shop-goes { color: var(--accent); }
.shop-goes svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.shop-goes .shop-goes__chev { width: calc(var(--pt) * 8); height: calc(var(--pt) * 8); }
.shop-hue svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.shop-hue--good { color: var(--good); }
.shop-trybar__x { flex: none; display: grid; place-items: center; width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); }
.shop-trybar__x i {
  display: grid; place-items: center; width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); border-radius: 50%;
  background: rgba(118, 118, 128, 0.12); color: var(--ios-label-2);
}
.shop-trybar__x svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.shop-trybar__add {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--pt) * 4);
  height: calc(var(--pt) * 32); padding: 0 calc(var(--pt) * 11); border-radius: 999px;
  background: var(--accent); color: #fff; font-size: calc(var(--pt) * 13); font-weight: 600; white-space: nowrap; letter-spacing: 0;
}
.shop-trybar__add svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }

/* The screenshot pinned in the corner of the Studio: tap to see it larger. */
.shop-inspo {
  position: absolute; z-index: 7; left: calc(var(--pt) * 24); top: calc(var(--pt) * 116); width: calc(var(--pt) * 76);
  opacity: 0; scale: 0.5; transform-origin: 0 0;
  transition: opacity 0.3s 0.35s, scale 0.5s var(--ease) 0.35s, width 0.45s var(--ease);
}
.shop-inspo img {
  width: 100%; height: auto; aspect-ratio: 558 / 1000; object-fit: cover; border-radius: calc(var(--pt) * 10);
  border: calc(var(--pt) * 2) solid #fff; box-shadow: 0 calc(var(--pt) * 3) calc(var(--pt) * 16) rgba(0, 0, 0, 0.2);
  transition: border-radius 0.45s var(--ease);
}
.shop-inspo__label {
  position: absolute; left: 50%; bottom: calc(var(--pt) * -8); translate: -50% 0;
  padding: calc(var(--pt) * 2) calc(var(--pt) * 6); border-radius: 999px; background: rgba(246, 246, 247, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-size: calc(var(--pt) * 11); font-weight: 600; transition: opacity 0.2s;
}
.shop-inspo__close {
  position: absolute; top: calc(var(--pt) * 6); right: calc(var(--pt) * 6); display: grid; place-items: center;
  width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); border-radius: 50%; background: rgba(246, 246, 247, 0.92);
  opacity: 0; transition: opacity 0.2s;
}
.shop-inspo__close svg { width: calc(var(--pt) * 10); height: calc(var(--pt) * 10); }
.shop-section .shop-scene.is-studio .shop-inspo { opacity: 1; scale: 1; }
.shop-section .shop-scene.is-inspo-big .shop-inspo { width: calc(var(--pt) * 200); transition-delay: 0s; }
.shop-section .shop-scene.is-inspo-big .shop-inspo img { border-radius: calc(var(--pt) * 14); }
.shop-section .shop-scene.is-inspo-big .shop-inspo__label { opacity: 0; }
.shop-section .shop-scene.is-inspo-big .shop-inspo__close { opacity: 1; transition-delay: 0.25s; }

/* "2 items added to your wishlist" (scene 1), at the top of the picture for a moment. */
.shop-toast {
  position: absolute; z-index: 9; top: calc(var(--pt) * 116); left: 50%; translate: -50% calc(var(--pt) * -30);
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6); padding: calc(var(--pt) * 10) calc(var(--pt) * 16);
  border-radius: 999px; background: rgba(246, 246, 248, 0.9); width: max-content; white-space: nowrap;
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 calc(var(--pt) * 2) calc(var(--pt) * 10) rgba(0, 0, 0, 0.08);
  font-size: calc(var(--pt) * 15); font-weight: 600; opacity: 0; transition: opacity 0.3s, translate 0.45s var(--ease);
}
.shop-toast svg { flex: none; width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }
.shop-section .shop-scene.is-toast .shop-toast { opacity: 1; translate: -50% 0; }

/* ---------- 1. Shop a screenshot ---------- */
.shop-home { transition: opacity 0.25s ease; }
.shop-status {
  position: absolute; top: calc(var(--pt) * 56); left: 0; right: 0; bottom: calc(var(--pt) * 34);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pt) * 20);
  transition: opacity 0.3s;
}
.shop-status__img {
  position: relative; height: calc(var(--pt) * 460); aspect-ratio: 558 / 1000; overflow: hidden; border-radius: calc(var(--pt) * 16);
}
.shop-status__img img { width: 100%; height: 100%; object-fit: cover; filter: blur(calc(var(--pt) * 5)); scale: 1.06; }
.shop-status__img::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.32); }
.shop-status__label { display: grid; justify-items: center; gap: calc(var(--pt) * 8); font-size: calc(var(--pt) * 15); color: var(--ios-label-2); }
.shop-results { position: absolute; top: calc(var(--pt) * 56); left: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0; transition: opacity 0.35s; }
.shop-results::before, .shop-form::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--pt) * 22);
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}
.shop-form::before { background: linear-gradient(#f2f2f7, rgba(242, 242, 247, 0)); }
.shop-results .shop-scroll { padding: calc(var(--pt) * 16) calc(var(--pt) * 16) calc(var(--pt) * 220); }
.shop-annot {
  position: relative; height: calc(var(--pt) * 440); aspect-ratio: 558 / 1000; margin: 0 auto; overflow: hidden;
  border-radius: calc(var(--pt) * 16);
}
.shop-annot img { width: 100%; height: 100%; object-fit: cover; }
.shop-box {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
  border: calc(var(--pt) * 2) solid var(--accent); border-radius: calc(var(--pt) * 6);
  opacity: 0; scale: 0.9; transition: opacity 0.3s var(--d, 0s), scale 0.45s var(--ease) var(--d, 0s), border-color 0.25s;
}
.shop-box i {
  position: absolute; left: calc(var(--pt) * -7); top: calc(var(--pt) * -7); display: grid; place-items: center;
  width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); border-radius: 50%; background: var(--accent); color: #fff;
  font-size: calc(var(--pt) * 11); font-style: normal; font-weight: 700; transition: background 0.25s;
}
.shop-found { margin-top: calc(var(--pt) * 16); font-size: calc(var(--pt) * 17); font-weight: 600; }
.shop-foot { margin-top: calc(var(--pt) * 6); font-size: calc(var(--pt) * 13); line-height: 1.3; color: var(--ios-label-2); }
.shop-piece { display: flex; align-items: center; gap: calc(var(--pt) * 12); margin-top: calc(var(--pt) * 16); }
.shop-check {
  flex: none; width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.4 3.3 3.3L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: inset 0 0 0 calc(var(--pt) * 1.6) var(--accent); transition: background-color 0.2s, box-shadow 0.2s;
}
.shop-crop {
  display: grid; place-items: center; flex: none; overflow: hidden;
  width: calc(var(--pt) * 56); height: calc(var(--pt) * 70); border-radius: calc(var(--pt) * 10); background: var(--paper-2);
}
.shop-crop > span { background-image: url("../img/s-inspiration.webp"); background-repeat: no-repeat; }
.shop-piece__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 2); font-size: calc(var(--pt) * 15); line-height: 1.25; }
.shop-piece__text small { font-size: calc(var(--pt) * 11); font-weight: 600; color: var(--ios-label-2); letter-spacing: 0.02em; }
.shop-shopbtn {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--pt) * 4); height: calc(var(--pt) * 30); padding: 0 calc(var(--pt) * 11);
  border-radius: 999px; background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); font-size: calc(var(--pt) * 15);
}
.shop-shopbtn svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.shop-bar--results { flex-direction: column; gap: calc(var(--pt) * 10); padding-top: calc(var(--pt) * 14); opacity: 0; transition: opacity 0.3s; }
.shop-bar__buttons { display: flex; gap: calc(var(--pt) * 10); }
.shop-cleanrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pt) * 10); }
.shop-cleanrow > span:first-child { display: grid; gap: calc(var(--pt) * 1); font-size: calc(var(--pt) * 15); line-height: 1.25; }
.shop-cleanrow b { font-weight: 400; }
.shop-cleanrow small { font-size: calc(var(--pt) * 12); color: var(--ios-label-2); letter-spacing: 0; }

.shop-s1.is-sheet .shop-dim { opacity: 1; }
.shop-s1.is-sheet .shop-sheet { transform: none; }
.shop-s1.is-results .shop-status { opacity: 0; }
.shop-s1.is-results .shop-results, .shop-s1.is-results .shop-bar { opacity: 1; }
.shop-s1.is-boxes .shop-box { opacity: 1; scale: 1; }
/* Unticked pieces (her own jeans and sneakers, the bag): a dashed box, an empty circle. */
.shop-s1.is-off-jeans .shop-box--jeans, .shop-s1.is-off-shoes .shop-box--shoes, .shop-s1.is-off-bag .shop-box--bag {
  border-style: dashed; border-color: rgba(255, 255, 255, 0.85);
}
.shop-s1.is-off-jeans .shop-box--jeans i, .shop-s1.is-off-shoes .shop-box--shoes i, .shop-s1.is-off-bag .shop-box--bag i { background: rgba(0, 0, 0, 0.5); }
.shop-s1.is-off-jeans .shop-piece--jeans .shop-check, .shop-s1.is-off-shoes .shop-piece--shoes .shop-check, .shop-s1.is-off-bag .shop-piece--bag .shop-check {
  background-color: transparent; background-size: 0; box-shadow: inset 0 0 0 calc(var(--pt) * 1.6) #c4c4c7;
}
.shop-s1.is-results .shop-new { opacity: 1; }
.shop-s1.is-preparing .shop-status { opacity: 1; }
.shop-s1.is-preparing .shop-new { opacity: 0; }
.shop-s1.is-preparing .shop-results, .shop-s1.is-preparing .shop-bar { opacity: 0; }
.shop-s1.is-studio .shop-sheet { transform: translateY(103%); }
.shop-s1.is-studio .shop-dim, .shop-s1.is-studio .shop-home { opacity: 0; }

/* ---------- 2. Share it to Lona ---------- */
.shop-safari { position: absolute; inset: 0; background: #fff; transition: opacity 0.3s, visibility 0s; }
.shop-page { position: absolute; inset: 0; padding-top: calc(var(--pt) * 54); background: #fff; }
.shop-page__top {
  display: flex; align-items: center; justify-content: space-between; height: calc(var(--pt) * 44); padding: 0 calc(var(--pt) * 16);
}
.shop-page__top svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.shop-page__mark { font-size: calc(var(--pt) * 14); font-weight: 600; letter-spacing: 0.32em; padding-left: 0.32em; }
.shop-page__icons { display: flex; gap: calc(var(--pt) * 16); }
.shop-page__photo { position: relative; height: calc(var(--pt) * 400); background: #f1efec; }
.shop-page__photo img { position: absolute; inset: 10% 13% 12%; width: 74%; height: 78%; object-fit: contain; }
.shop-page__dots { position: absolute; bottom: calc(var(--pt) * 14); left: 50%; translate: -50% 0; display: flex; gap: calc(var(--pt) * 6); }
.shop-page__dots i { width: calc(var(--pt) * 6); height: calc(var(--pt) * 6); border-radius: 50%; background: rgba(0, 0, 0, 0.2); }
.shop-page__dots i:first-child { background: rgba(0, 0, 0, 0.7); }
.shop-page__info { padding: calc(var(--pt) * 16) calc(var(--pt) * 16) 0; }
.shop-page__name { font-size: calc(var(--pt) * 17); }
.shop-page__price { margin-top: calc(var(--pt) * 2); font-size: calc(var(--pt) * 17); font-weight: 600; }
.shop-page__label { margin-top: calc(var(--pt) * 14); font-size: calc(var(--pt) * 13); color: #6c6c70; }
.shop-page__swatches { display: flex; gap: calc(var(--pt) * 12); margin-top: calc(var(--pt) * 9); padding-left: calc(var(--pt) * 3); }
.shop-page__swatches i { width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.shop-page__swatches i:first-child { box-shadow: 0 0 0 calc(var(--pt) * 2) #fff, 0 0 0 calc(var(--pt) * 3.5) #1b1815; }
.shop-page__sizes { display: flex; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 16); }
.shop-page__sizes i {
  display: grid; place-items: center; width: calc(var(--pt) * 46); height: calc(var(--pt) * 36); border-radius: calc(var(--pt) * 6);
  box-shadow: inset 0 0 0 1px #d1d1d6; font-size: calc(var(--pt) * 14); font-style: normal;
}
.shop-page__sizes i.is-on { box-shadow: inset 0 0 0 calc(var(--pt) * 1.6) #1b1815; font-weight: 600; }
.shop-page__add {
  display: grid; place-items: center; margin-top: calc(var(--pt) * 16); height: calc(var(--pt) * 50); border-radius: calc(var(--pt) * 6);
  background: #1b1815; color: #fff; font-size: calc(var(--pt) * 16); font-weight: 600;
}
.shop-safaribar { position: absolute; left: calc(var(--pt) * 12); right: calc(var(--pt) * 12); bottom: calc(var(--pt) * 30); display: flex; align-items: center; gap: calc(var(--pt) * 8); }
.shop-round, .shop-address {
  display: grid; place-items: center; height: calc(var(--pt) * 48); border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 4) calc(var(--pt) * 18) rgba(0, 0, 0, 0.12);
}
.shop-round { flex: none; width: calc(var(--pt) * 48); }
.shop-round svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.shop-address { flex: 1; display: flex; justify-content: center; gap: calc(var(--pt) * 6); font-size: calc(var(--pt) * 16); font-weight: 500; }
.shop-address svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); color: #6c6c70; }

.shop-share {
  position: absolute; z-index: 27; left: 0; right: 0; top: calc(var(--pt) * 336); bottom: 0;
  border-radius: calc(var(--pt) * 38) calc(var(--pt) * 38) 0 0; background: #f2f2f7;
  transform: translateY(103%); transition: transform 0.5s var(--ease), opacity 0.3s, visibility 0s;
}
.shop-share__head {
  display: flex; align-items: center; gap: calc(var(--pt) * 12);
  padding: calc(var(--pt) * 22) calc(var(--pt) * 18) calc(var(--pt) * 16); border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.shop-share__thumb { position: relative; flex: none; width: calc(var(--pt) * 48); height: calc(var(--pt) * 48); border-radius: calc(var(--pt) * 10); background: #fff; }
.shop-share__thumb img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.shop-share__title { flex: 1; display: grid; gap: calc(var(--pt) * 2); font-size: calc(var(--pt) * 15); }
.shop-share__title span { font-size: calc(var(--pt) * 13); color: var(--ios-label-2); }
.shop-share__close {
  display: grid; place-items: center; width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); border-radius: 50%;
  background: rgba(118, 118, 128, 0.12); color: #7c7c80;
}
.shop-share__close svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.shop-share__apps { display: flex; gap: calc(var(--pt) * 26); padding: calc(var(--pt) * 20) calc(var(--pt) * 22); }
.shop-share__app { display: grid; justify-items: center; gap: calc(var(--pt) * 7); width: calc(var(--pt) * 64); font-size: calc(var(--pt) * 11.5); color: #3c3c43; letter-spacing: 0; }
.shop-share__app img, .shop-share__app i {
  display: grid; place-items: center; width: calc(var(--pt) * 64); height: calc(var(--pt) * 64); border-radius: calc(var(--pt) * 15);
  background: #fff; color: #8e8e93; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.shop-share__app i svg { width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); }
.shop-share__app i.is-more { border-radius: 50%; background: #e5e5ea; }
.shop-share__app i.is-more svg { width: calc(var(--pt) * 24); }
.shop-share__actions { margin: calc(var(--pt) * 4) calc(var(--pt) * 16) 0; overflow: hidden; border-radius: calc(var(--pt) * 14); background: #fff; }
.shop-share__actions span {
  display: flex; align-items: center; justify-content: space-between; height: calc(var(--pt) * 50); padding: 0 calc(var(--pt) * 16);
  font-size: calc(var(--pt) * 17); border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}
.shop-share__actions span:first-child { border-top: 0; }
.shop-share__actions svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }

.shop-ext {
  position: absolute; z-index: 28; left: 0; right: 0; top: calc(var(--pt) * 64); bottom: 0;
  display: flex; flex-direction: column; gap: calc(var(--pt) * 18); padding: calc(var(--pt) * 20) calc(var(--pt) * 20) calc(var(--pt) * 54);
  border-radius: calc(var(--pt) * 38) calc(var(--pt) * 38) 0 0; background: #fff; box-shadow: 0 0 calc(var(--pt) * 24) rgba(0, 0, 0, 0.12);
  transform: translateY(103%); transition: transform 0.5s var(--ease), opacity 0.3s, visibility 0s;
}
.shop-ext__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: calc(var(--pt) * 17); }
.shop-ext__nav span { color: var(--accent); }
.shop-ext__nav .shop-ext__ghost { visibility: hidden; justify-self: end; }
.shop-ext__preview {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pt) * 10);
  height: calc(var(--pt) * 260); border-radius: calc(var(--pt) * 18); background: #f2ede6; color: var(--accent);
}
.shop-ext__preview svg { width: calc(var(--pt) * 56); height: calc(var(--pt) * 56); }
.shop-ext__preview span { color: #000; font-size: calc(var(--pt) * 15); font-weight: 500; }
.shop-ext__title { text-align: center; font-size: calc(var(--pt) * 20); font-weight: 600; }
.shop-ext__msg { margin-top: calc(var(--pt) * -12); padding: 0 calc(var(--pt) * 8); text-align: center; font-size: calc(var(--pt) * 15); line-height: 1.3; color: var(--ios-label-2); }
.shop-ext__open {
  display: grid; place-items: center; margin-top: auto; height: calc(var(--pt) * 52); border-radius: 999px;
  background: var(--accent); color: #fff; font-size: calc(var(--pt) * 17); font-weight: 600;
}

.shop-browser { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.3s; }
.shop-browser__nav {
  position: absolute; z-index: 2; top: calc(var(--pt) * 56); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
}
.shop-browser__progress {
  position: absolute; z-index: 2; top: calc(var(--pt) * 106); left: 0; width: 100%; height: calc(var(--pt) * 2.5);
  background: var(--accent); transform-origin: 0 50%; scale: 0 1;
}
.shop-browser__web { position: absolute; top: calc(var(--pt) * 108); left: 0; right: 0; bottom: calc(var(--pt) * 94); overflow: hidden; }
.shop-browser__web .shop-page { position: relative; inset: auto; padding-top: 0; }
.shop-browser__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pt) * 94); display: flex; align-items: center; gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 12) calc(var(--pt) * 34);
  background: rgba(249, 249, 250, 0.96); border-top: 0.5px solid rgba(0, 0, 0, 0.1); color: #c4c4c7;
}
.shop-browser__bar > svg { width: calc(var(--pt) * 40); height: calc(var(--pt) * 22); }
.shop-tryme {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 8); margin-left: auto;
  padding: calc(var(--pt) * 12) calc(var(--pt) * 20); border-radius: 999px; background: var(--accent); color: #fff;
  font-size: calc(var(--pt) * 17); font-weight: 600;
}
.shop-tryme__icon { position: relative; display: grid; place-items: center; width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.shop-tryme__icon svg { width: 100%; height: 100%; transition: opacity 0.2s; }
.shop-tryme__icon .shop-spin { position: absolute; width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); opacity: 0; transition: opacity 0.2s; }

.shop-import { background: #f2f2f7; }
.shop-form { position: absolute; top: calc(var(--pt) * 56); left: 0; right: 0; bottom: 0; overflow: hidden; }
.shop-form .shop-scroll { padding: calc(var(--pt) * 8) calc(var(--pt) * 16) calc(var(--pt) * 260); }
.shop-group { overflow: hidden; border-radius: calc(var(--pt) * 22); background: #fff; }
.shop-preview { position: relative; height: calc(var(--pt) * 300); background: var(--paper-2); }
.shop-preview img { position: absolute; inset: 8% 12%; width: 76%; height: 84%; object-fit: contain; }
.shop-preview__busy {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pt) * 10);
  background: rgba(242, 237, 230, 0.6); backdrop-filter: blur(calc(var(--pt) * 4)); -webkit-backdrop-filter: blur(calc(var(--pt) * 4));
  font-size: calc(var(--pt) * 13); color: #3c3c43; transition: opacity 0.4s;
}
.shop-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pt) * 8);
  min-height: calc(var(--pt) * 46); padding: 0 calc(var(--pt) * 16); font-size: calc(var(--pt) * 17);
}
.shop-row + .shop-row::before, .shop-preview + .shop-row::before {
  content: ""; position: absolute; top: 0; left: calc(var(--pt) * 16); right: 0; height: 0.5px; background: rgba(60, 60, 67, 0.2);
}
.shop-row--muted { color: #c4c4c7; }
.shop-row__drop { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); color: var(--accent); }
.shop-row__value, .shop-row__plain { display: inline-flex; align-items: center; gap: calc(var(--pt) * 4); color: var(--ios-label-2); }
.shop-row__value svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.shop-switch { position: relative; flex: none; width: calc(var(--pt) * 51); height: calc(var(--pt) * 31); border-radius: 999px; background: #34c759; }
.shop-switch::after {
  content: ""; position: absolute; top: calc(var(--pt) * 2); right: calc(var(--pt) * 2); width: calc(var(--pt) * 27); height: calc(var(--pt) * 27);
  border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--pt) * 2) calc(var(--pt) * 6) rgba(0, 0, 0, 0.18);
}
.shop-switch--off { background: #e9e9eb; }
.shop-switch--off::after { right: auto; left: calc(var(--pt) * 2); }
.shop-grouphead { margin: calc(var(--pt) * 22) calc(var(--pt) * 16) calc(var(--pt) * 7); font-size: calc(var(--pt) * 13); color: var(--ios-label-2); }
.shop-groupfoot { margin: calc(var(--pt) * 7) calc(var(--pt) * 16) 0; font-size: calc(var(--pt) * 13); line-height: 1.3; color: var(--ios-label-2); }
.shop-colours { display: flex; gap: calc(var(--pt) * 12); padding: calc(var(--pt) * 14) calc(var(--pt) * 12) calc(var(--pt) * 10); }
.shop-colour {
  display: grid; justify-items: center; gap: calc(var(--pt) * 6); width: calc(var(--pt) * 68);
  font-size: calc(var(--pt) * 12); color: var(--ios-label-2); text-align: center;
}
.shop-colour i {
  position: relative; width: calc(var(--pt) * 56); height: calc(var(--pt) * 56); border-radius: calc(var(--pt) * 12);
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.22);
}
.shop-colour.is-on i { box-shadow: inset 0 0 0 calc(var(--pt) * 2.5) var(--accent), inset 0 0 0 calc(var(--pt) * 4) #fff; }
.shop-colour.is-on i::after {
  content: ""; position: absolute; top: calc(var(--pt) * -7); right: calc(var(--pt) * -7); width: calc(var(--pt) * 20); height: calc(var(--pt) * 20);
  border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.4 3.3 3.3L17 9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 0 calc(var(--pt) * 2) #fff;
}
.shop-colour.is-on b { color: #000; }

.shop-s2.is-share .shop-dim--share { opacity: 1; }
.shop-s2.is-share .shop-share { transform: none; }
.shop-s2.is-ext .shop-ext { transform: none; }
.shop-s2.is-app .shop-browser { opacity: 1; }
.shop-s2.is-app .shop-safari, .shop-s2.is-app .shop-share, .shop-s2.is-app .shop-ext, .shop-s2.is-app .shop-dim--share { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.shop-s2.is-app .shop-browser__progress { scale: 1 1; opacity: 0; transition: scale 0.8s ease-out, opacity 0.3s 0.8s; }
.shop-s2.is-reading .shop-tryme__icon svg { opacity: 0; }
.shop-s2.is-reading .shop-tryme__icon .shop-spin { opacity: 1; }
.shop-s2.is-import .shop-dim--import { opacity: 1; }
.shop-s2.is-import .shop-import { transform: none; }
.shop-s2.is-cutout .shop-preview__busy { opacity: 0; }
.shop-s2.is-studio .shop-import { transform: translateY(103%); }
.shop-s2.is-studio .shop-dim--import, .shop-s2.is-studio .shop-browser { opacity: 0; }

/* ---------- 3. Goes with your closet: "With your closet", from the try-on bar ---------- */
.shop-sheet--medium { top: calc(var(--pt) * 430); }
.shop-grabber {
  position: absolute; z-index: 4; top: calc(var(--pt) * 5); left: 50%; translate: -50% 0;
  width: calc(var(--pt) * 36); height: calc(var(--pt) * 5); border-radius: 999px; background: rgba(0, 0, 0, 0.18);
}
.shop-closet__view { position: absolute; top: calc(var(--pt) * 64); left: 0; right: 0; bottom: 0; overflow: hidden; }
.shop-closet__view::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--pt) * 14);
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}
.shop-closet__view .shop-scroll { padding: calc(var(--pt) * 6) calc(var(--pt) * 20) calc(var(--pt) * 300); }
.shop-closet__item { display: flex; align-items: center; gap: calc(var(--pt) * 12); }
.shop-closet__item .shop-mini { width: calc(var(--pt) * 56); height: calc(var(--pt) * 70); }
.shop-closet__name { display: grid; gap: calc(var(--pt) * 2); font-size: calc(var(--pt) * 17); line-height: 1.25; }
.shop-closet__name span { font-size: calc(var(--pt) * 15); color: var(--ios-label-2); }
.shop-closet .shop-colourfit, .shop-closet .shop-match { margin-top: calc(var(--pt) * 18); }
.shop-closet .shop-outfits { display: block; }
.shop-suggest--office { margin-bottom: calc(var(--pt) * 4); }

.shop-s3.is-sheet .shop-dim { opacity: 1; }
.shop-s3.is-sheet .shop-sheet { transform: none; }

/* ---------- Item pages and "Goes with your closet" (3, and the item page in 4) ---------- */
.shop-item { padding-top: 0; background: #fff; transition: opacity 0.25s ease; }
.shop-itemnav {
  position: absolute; z-index: 2; top: calc(var(--pt) * 56); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  display: flex; justify-content: space-between;
}
.shop-itemview { position: absolute; top: calc(var(--pt) * 54); left: 0; right: 0; bottom: 0; overflow: hidden; }
.shop-itemview::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--pt) * 60);
  background: linear-gradient(#fff 74%, rgba(255, 255, 255, 0));
}
.shop-itemview .shop-scroll { padding: calc(var(--pt) * 52) calc(var(--pt) * 16) calc(var(--pt) * 700); }
.shop-itemphoto { position: relative; height: calc(var(--pt) * 400); border-radius: calc(var(--pt) * 20); background: var(--paper-2); }
.shop-itemphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: calc(var(--pt) * 24); }
.shop-itemhead { margin-top: calc(var(--pt) * 20); }
.shop-itemhead__name { font-family: var(--font-serif); font-size: calc(var(--pt) * 26); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.shop-itemhead__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 6);
  font-size: calc(var(--pt) * 15); color: var(--ios-label-2);
}
.shop-cat { display: inline-flex; align-items: center; gap: calc(var(--pt) * 4); color: var(--accent); }
.shop-cat svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.shop-cat .shop-cat__chev { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.shop-wishpill {
  padding: calc(var(--pt) * 3) calc(var(--pt) * 8); border-radius: 999px; background: rgba(90, 91, 216, 0.15);
  color: var(--accent-ink); font-size: calc(var(--pt) * 12); font-weight: 600;
}
.shop-now { color: var(--good); font-weight: 600; }
.shop-itemhead__checked { margin-top: calc(var(--pt) * 6); font-size: calc(var(--pt) * 12); color: #b4b4b8; }
.shop-tags { display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 20); }
.shop-tags span {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6); padding: calc(var(--pt) * 6) calc(var(--pt) * 11);
  border-radius: 999px; background: #f2f2f7; font-size: calc(var(--pt) * 13); font-weight: 500;
}
.shop-tags svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.shop-swatch { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.shop-colourfit {
  display: flex; align-items: flex-start; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 20); padding: calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 14); background: rgba(61, 133, 84, 0.08); color: var(--good);
}
.shop-colourfit svg { flex: none; width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.shop-colourfit span { display: grid; gap: calc(var(--pt) * 2); font-size: calc(var(--pt) * 15); line-height: 1.3; color: var(--ios-label-2); }
.shop-colourfit b { color: var(--good); }
.shop-actions { display: grid; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 20); }
.shop-match {
  margin-top: calc(var(--pt) * 20); padding: calc(var(--pt) * 16); border-radius: calc(var(--pt) * 16); background: #f2f2f7;
}
.shop-match__label { font-size: calc(var(--pt) * 13); font-weight: 600; color: var(--ios-label-2); }
.shop-match__headline { margin-top: calc(var(--pt) * 12); font-family: var(--font-serif); font-size: calc(var(--pt) * 24); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.shop-match__headline em { font-style: normal; color: var(--accent); }
.shop-match__verdict { margin-top: calc(var(--pt) * 12); font-size: calc(var(--pt) * 15); line-height: 1.3; color: var(--ios-label-2); }
.shop-match__tiles { margin: calc(var(--pt) * 12) calc(var(--pt) * -16) 0; padding: 0 calc(var(--pt) * 16); overflow: hidden; }
.shop-match__strip { display: flex; gap: calc(var(--pt) * 8); transform: translateX(calc(var(--pt) * var(--x, 0) * -1)); transition: transform 1.6s var(--ease); }
.shop-outfits { margin-top: calc(var(--pt) * 16); }
.shop-outfits .shop-head { margin: 0; }
.shop-suggest { display: grid; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 10); padding: calc(var(--pt) * 12); border-radius: calc(var(--pt) * 14); background: #f2f2f7; }
.shop-suggest__tiles { display: flex; gap: calc(var(--pt) * 6); }
.shop-suggest .shop-mini { width: calc(var(--pt) * 52); height: calc(var(--pt) * 64); border-radius: calc(var(--pt) * 9); }
.shop-suggest .shop-mini img { padding: calc(var(--pt) * 4); }
.shop-suggest .shop-mini.is-new { box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) var(--accent); }
.shop-suggest__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--pt) * 8); }
.shop-suggest__foot > span:first-child { display: grid; gap: calc(var(--pt) * 2); font-size: calc(var(--pt) * 12); line-height: 1.3; color: var(--ios-label-2); }
.shop-suggest__foot b { font-size: calc(var(--pt) * 15); color: #000; }
.shop-suggest__try { display: inline-flex; flex: none; align-items: center; gap: calc(var(--pt) * 4); color: var(--accent); font-size: calc(var(--pt) * 13); font-weight: 600; }
.shop-suggest__try svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }

/* ---------- 4. Price drops ---------- */
.shop-s4 .shop-item { opacity: 0; }
.shop-banner {
  position: absolute; z-index: 29; left: calc(var(--pt) * 10); right: calc(var(--pt) * 10); top: calc(var(--pt) * 52);
  display: flex; align-items: flex-start; gap: calc(var(--pt) * 11); padding: calc(var(--pt) * 13) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 26); background: rgba(246, 246, 248, 0.88);
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 10) calc(var(--pt) * 34) rgba(0, 0, 0, 0.16);
  transform: translateY(calc(var(--pt) * -150)); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.3s;
}
.shop-banner img { flex: none; width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); border-radius: calc(var(--pt) * 9); }
.shop-banner__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 1); font-size: calc(var(--pt) * 15); line-height: 1.3; }
.shop-banner__time { flex: none; font-size: calc(var(--pt) * 13); color: var(--ios-label-2); }

.shop-s4.is-drop .shop-banner { transform: none; opacity: 1; }
.shop-s4.is-drop .shop-droptab { opacity: 1; scale: 1; }
.shop-s4.is-item .shop-banner { transform: translateY(calc(var(--pt) * -150)); opacity: 0; }
.shop-s4.is-item .shop-home { opacity: 0; }
.shop-s4.is-item .shop-item { opacity: 1; }

/* A scene is reset with no transitions, before it fades in. Keep this last. */
.shop-scene.is-instant, .shop-scene.is-instant *, .shop-scene.is-instant *::before, .shop-scene.is-instant *::after { transition: none; }