/* ---------- onboarding ---------- */
.onb { height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.onb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + var(--s-3)) var(--gutter) var(--s-2); }
.onb-top .logo-mark { font-size: 26px; }
.progress { height: 2px; background: var(--hairline); margin: 0 var(--gutter); border-radius: 1px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width var(--dur-slow) var(--ease-out); }
.onb-track {
  flex: 1; min-height: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.onb-track::-webkit-scrollbar { display: none; }
.onb-step {
  flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  overflow-y: auto; padding: var(--s-6) var(--gutter) var(--s-9); scrollbar-width: none;
}
.onb-step::-webkit-scrollbar { display: none; }
.onb-step .eyebrow { display: block; margin-bottom: var(--s-3); }
.onb-step h1 { font-size: var(--fs-h1); margin-bottom: var(--s-2); }
.onb-step .lead { color: var(--text-2); margin-bottom: var(--s-6); font-size: var(--fs-body); }
.onb-step .block { margin-bottom: var(--s-6); }
.onb-step .block > .micro { display: block; margin-bottom: var(--s-3); }
.onb-foot { flex: none; padding: var(--s-3) var(--gutter) calc(var(--safe-bottom) + var(--s-4)); display: flex; gap: var(--s-3); align-items: center; border-top: 1px solid var(--hairline); background: var(--bg); }
.onb-foot .btn.primary { flex: 1; }
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.budget-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 0; }
.merchant-pick { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); width: 100%; text-align: left; }
.merchant-pick .mmark { width: 44px; height: 44px; font-size: 16px; }
.merchant-pick .info { flex: 1; min-width: 0; }
.merchant-pick .info .n { font-family: var(--font-display); font-size: var(--fs-lead); }
.merchant-pick .info .b { font-size: var(--fs-small); color: var(--text-2); }
.merchant-pick .state { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; font-weight: 600; color: var(--text-3); min-width: 56px; text-align: right; }
.merchant-pick.on .state { color: var(--accent); }
.merchant-pick.off .mmark { opacity: 0.4; }
.merchant-pick.off .state { color: var(--danger); }

/* ---------- home ---------- */
.home { position: relative; }
.home-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--gutter) var(--s-4); }
.home-head .brand { display: flex; align-items: center; gap: 10px; }
.home-head .brand .logo-mark { font-size: 22px; }
.home-head .brand .wordmark { font-size: 0.875rem; }
.greet { padding: 0 var(--gutter) var(--s-5); }
.greet h1 { font-size: var(--fs-h1); }
.greet p { color: var(--text-2); margin-top: var(--s-1); }

.hero { margin: 0 var(--gutter); position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; display: block; width: calc(100% - 2 * var(--gutter)); text-align: left; }
.hero .img-wrap { position: absolute; inset: -12% 0; border-radius: 0; will-change: transform; }
.hero .img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0.62) 0%, rgba(11,11,12,0.18) 22%, rgba(11,11,12,0) 38%, rgba(11,11,12,0.88) 100%); }
.hero .hero-top { position: absolute; top: var(--s-4); left: var(--s-4); right: var(--s-4); display: flex; justify-content: space-between; z-index: 2; color: rgba(243,238,230,0.85); }
.hero .hero-body { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 2; color: #F3EEE6; }
.hero .hero-body .micro { color: rgba(243,238,230,0.7); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .hero-body h2 { font-size: var(--fs-h1); margin: var(--s-2) 0 var(--s-2); }
.hero .hero-body p { color: rgba(243,238,230,0.78); font-size: var(--fs-small); }
.hero .hero-body .price { color: #F3EEE6; margin-top: var(--s-2); font-size: var(--fs-lead); }
.hero .hero-body .price .sale { color: #E6DCCB; }

.feed { display: flex; flex-direction: column; gap: var(--s-7); padding: 0 var(--gutter); }
.feed .card .img-wrap { aspect-ratio: 4/5; }

.ptr { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 6px); display: flex; justify-content: center; pointer-events: none; z-index: 4; }
.ptr .logo-mark { font-size: 26px; opacity: 0; transform: translateY(-20px) rotate(-30deg); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.ptr.pull .logo-mark { opacity: 1; }
.ptr.spin .logo-mark { opacity: 1; animation: ptr-spin 800ms linear infinite; transform: none; }
@keyframes ptr-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s-7) var(--gutter) var(--s-3); }
.rail-head h2 { font-size: var(--fs-h3); }
.rail-head .link { font-size: var(--fs-small); color: var(--text-2); }

/* ---------- explore ---------- */
.explore-head { padding: var(--s-2) var(--gutter) var(--s-3); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.explore-head .row { margin-bottom: var(--s-3); }
.explore-head .search { flex: 1; }
.filter-btn { position: relative; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; }
.filter-btn .badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 5px; }
.result-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--gutter) var(--s-4); }
.result-head .count { color: var(--text-2); font-size: var(--fs-small); }
.result-head .sort { font-size: var(--fs-small); display: flex; align-items: center; gap: 4px; color: var(--text); }
.active-filters { padding: 0 0 var(--s-2); }

/* ---------- item detail ---------- */
.detail { padding-top: 0; }
.carousel { position: relative; }
.carousel .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track .img-wrap { flex: none; width: 100%; aspect-ratio: 3/4; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel .dots { position: absolute; bottom: var(--s-4); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.carousel .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243,238,230,0.45); box-shadow: 0 0 0 1px rgba(11,11,12,0.2); transition: background var(--dur-fast), transform var(--dur-fast); }
.carousel .dots i.on { background: #F3EEE6; transform: scale(1.15); }
.carousel .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.detail-body { padding: var(--s-2) var(--gutter) 0; }
.detail-body .merchant-line { display: flex; align-items: center; justify-content: space-between; }
.detail-body h1 { font-size: var(--fs-h2); margin-top: var(--s-2); }
.detail-body .price { font-size: var(--fs-h3); margin-top: var(--s-2); }
.detail-body .block { padding: var(--s-5) 0; border-top: 1px solid var(--hairline); }
.detail-body .block > .micro { display: block; margin-bottom: var(--s-3); }
.detail-body .block .blockhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.detail-body .block .blockhead .micro { margin: 0; }
.detail-body .desc { color: var(--text-2); line-height: 1.55; }
.why-box { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); display: flex; gap: var(--s-3); }
.why-box .logo-mark { font-size: 22px; flex: none; margin-top: 2px; }
.why-box ul { display: flex; flex-direction: column; gap: 6px; }
.why-box li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); color: var(--text-2); }
.why-box li svg { width: 14px; height: 14px; color: var(--accent); margin-top: 3px; flex: none; stroke-width: 2.2; }
.not-for-me { display: block; margin-top: var(--s-3); padding: var(--s-2) 0; font-size: var(--fs-small); color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-strong); }
.not-for-me:active { color: var(--text-2); }
.fit-note { display: flex; gap: var(--s-3); align-items: flex-start; }
.fit-note .fit-ind { display: flex; gap: 3px; margin-top: 4px; flex: none; }
.fit-note .fit-ind i { width: 18px; height: 4px; border-radius: 2px; background: var(--hairline-strong); }
.fit-note .fit-ind i.on { background: var(--accent); }
.fit-note .t { font-weight: 600; }
.fit-note .s { color: var(--text-2); font-size: var(--fs-small); margin-top: 2px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s-4); font-size: var(--fs-small); }
.spec dt { color: var(--text-3); }
.spec dd { margin: 0; color: var(--text); }
.detail-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: var(--s-3) var(--gutter) calc(var(--safe-bottom) + var(--s-3));
  display: flex; gap: var(--s-3); align-items: center;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid var(--hairline);
}
.detail-cta .btn { flex: 1; }
.detail-cta .icon-btn { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--surface-2); }
.detail .screen-pad { height: calc(var(--safe-bottom) + 80px); }

/* handoff sheet */
.handoff { text-align: center; padding: var(--s-4) 0 var(--s-6); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.handoff .marks { display: flex; align-items: center; gap: var(--s-4); }
.handoff .marks .logo-mark { font-size: 44px; }
.handoff .marks .arrow { color: var(--text-3); }
.handoff h2 { font-size: var(--fs-h2); }
.handoff p { color: var(--text-2); max-width: 30ch; }
.handoff .fine { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 0.04em; }

/* ---------- merchants ---------- */
.merchant-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--gutter); width: 100%; text-align: left; border-bottom: 1px solid var(--hairline); }
.merchant-card .info { flex: 1; min-width: 0; }
.merchant-card .n { font-family: var(--font-display); font-size: var(--fs-h3); }
.merchant-card .b { font-size: var(--fs-small); color: var(--text-2); margin-top: 2px; }
.merchant-card .t { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--text-3); margin-top: 6px; font-weight: 600; }
.merchant-hero { padding: var(--s-4) var(--gutter) var(--s-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); }
.merchant-hero h1 { font-size: var(--fs-h1); }
.merchant-hero p { color: var(--text-2); max-width: 34ch; }
.merchant-stats { display: flex; gap: var(--s-6); justify-content: center; }
.merchant-stats .st { text-align: center; }
.merchant-stats .st .v { font-family: var(--font-display); font-size: var(--fs-h3); }
.merchant-stats .st .k { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--text-3); font-weight: 600; }

/* ---------- saved ---------- */
.collections { display: flex; gap: var(--s-3); overflow-x: auto; padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); }
.collections::-webkit-scrollbar { display: none; }
.coll-card { flex: none; width: 150px; text-align: left; scroll-snap-align: start; }
.coll-card .mosaic { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--surface); }
.coll-card .mosaic .img-wrap { border-radius: 0; }
.coll-card .mosaic .img-wrap:first-child:last-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.coll-card .mosaic .ph { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.coll-card .mosaic.one > * { grid-column: 1 / -1; grid-row: 1 / -1; }
.coll-card .mosaic.two > * { grid-row: 1 / -1; }
.coll-card .n { font-family: var(--font-display); font-size: var(--fs-lead); margin-top: var(--s-2); }
.coll-card .s { font-size: var(--fs-small); color: var(--text-2); }
.coll-card.new .mosaic { border: 1px dashed var(--hairline-strong); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.coll-card.new .mosaic svg { width: 28px; height: 28px; }
.budget-bar { margin: 0 var(--gutter); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); }
.budget-bar .row { margin-bottom: var(--s-2); align-items: baseline; }
.budget-bar .row .micro { flex: 1; min-width: 0; }
.budget-bar .v { font-family: var(--font-display); font-size: var(--fs-h3); white-space: nowrap; flex: none; }
.budget-bar .bar { height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.budget-bar .bar i { display: block; height: 100%; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.budget-bar .bar i.over { background: var(--danger); }
.budget-bar .s { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--s-2); }

/* ---------- profile ---------- */
.profile-hero { padding: var(--s-4) var(--gutter) var(--s-6); display: flex; align-items: center; gap: var(--s-4); }
.profile-hero .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 26px; color: var(--accent); }
.profile-hero h1 { font-size: var(--fs-h2); }
.profile-hero p { color: var(--text-2); font-size: var(--fs-small); }
.psection { margin-bottom: var(--s-6); }
.psection > .micro { display: block; padding: 0 calc(var(--gutter) + var(--s-1)) var(--s-2); }
.psection .rows .chips { padding: var(--s-3) var(--s-4); }
.psection .rows .pad { padding: var(--s-3) var(--s-4); }
.psection .rows .pad + .pad { border-top: 1px solid var(--hairline); }
.edit-sheet .block { padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
.edit-sheet .block:last-child { border-bottom: 0; }
.edit-sheet .block > .micro { display: block; margin-bottom: var(--s-3); }