/* createDazzle Storefront — public, buyer-facing boutique.
   Calm-candy tokens, a touch more playful than the back-office. Phone-first. */

.store-screen { min-height: 100%; }

/* ---------- Hero ---------- */
.store-hero {
  padding: 22px 18px 14px;
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 58%),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%);
}
.store-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.store-wm {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.store-wm em { color: var(--accent); font-style: normal; }
.store-tag {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 8px 0 0;
  max-width: 46ch;
}

.store-body { padding-top: 6px; }

/* ---------- Find + sort dock ---------- */
.store-find {
  position: sticky;
  top: 0;
  z-index: 35;
  margin: -2px -2px 14px;
  padding: 8px 0 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface) 82%, transparent) 72%, transparent 100%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.store-find-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--hairline));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, #fff 8%);
  box-shadow: 0 12px 34px rgba(43, 37, 48, 0.10);
}
.store-find-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 14px 38px rgba(43, 37, 48, 0.12), 0 0 0 4px var(--accent-soft);
}
.store-find-ic {
  position: absolute;
  left: 17px;
  width: 20px;
  height: 20px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}
.store-find-input {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 0 52px 0 48px;
}
.store-find-input::placeholder { color: var(--ink-faint); }
.store-find-clear {
  position: absolute;
  right: 8px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.store-find-clear .ic { width: 18px; height: 18px; }
.store-find-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.store-find-count {
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-soft);
}
.store-sort {
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 7px 12px;
  color: var(--ink-soft);
  box-shadow: 0 4px 14px rgba(43, 37, 48, 0.06);
}
.store-sort span { flex: none; font-size: 12px; font-weight: 800; }
.store-sort select {
  min-width: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 16px 0 0;
}
.store-sort::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}
.store-find-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-top: 8px;
  padding: 1px 2px 3px;
  scroll-snap-type: x proximity;
}
.store-find-chips::-webkit-scrollbar { display: none; }
.store-find-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-soft) 12%);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 12px;
  cursor: pointer;
}
.store-find-chip.on {
  background: var(--ink);
  border-color: transparent;
  color: #fff;
}
.dropwrap[hidden] { display: none !important; }
.store-search-empty {
  margin: 18px 0 28px;
  padding: 24px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--hairline));
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  color: var(--ink-soft);
  text-align: center;
}
.store-search-empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.store-search-empty span { display: block; font-size: 13.5px; margin-bottom: 12px; }
.store-search-ask {
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 16px;
  cursor: pointer;
}
@media (max-width: 420px) {
  .store-sort { max-width: 184px; }
  .store-sort select { max-width: 128px; text-overflow: ellipsis; }
}
@media (min-width: 860px) {
  .store-find {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    margin: 0 0 16px;
    padding-top: 10px;
  }
  .store-find-tools { margin-top: 0; justify-content: flex-end; }
  .store-find-chips { grid-column: 1 / -1; }
}

/* collection browse chips */
.store-collections { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.store-chip { font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--hairline); color: var(--ink-soft); }
.store-chip.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.store-drops-label { margin-top: 8px; }

/* ---------- Card wrapper (positioning context for the heart) ---------- */
.dropwrap { position: relative; }

/* the buyer card stays calm; no SKU/cost/bin appear in markup */
.store-card { width: 100%; }

/* wishlist demand badge (social proof) */
.wish-count { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--accent-press); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; margin: 0 0 8px; }
.wish-count.hidden { display: none; }
.wish-count .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }

/* handle-capture modal bits (rides on global .modal-scrim/.modal-card) */
.finp-h { width: 100%; background: var(--surface-inset); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); outline: none; margin-top: 4px; }
.finp-h:focus { border-color: var(--accent); }
.wish-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.wish-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.wish-actions .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ---------- Wishlist heart ---------- */
.heart {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 37, 48, 0.14);
}
.heart .heart-ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
}
.heart[aria-pressed="true"] .heart-ic { fill: var(--accent); stroke: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .heart { transition: transform 0.14s ease, box-shadow 0.14s ease; }
  .heart:active { transform: scale(0.9); }
  .heart.pop { animation: store-pop 0.34s ease; }
}
@keyframes store-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ---------- Reserve button states ---------- */
.reserve-btn { margin-left: auto; }
.reserve-btn[disabled] { opacity: 0.6; cursor: default; }
.reserve-btn.reserved {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--hairline, rgba(43, 37, 48, 0.14));
  cursor: default;
}

/* sold-out / reserved card dimming */
.store-card.is-reserved .item-photo,
.store-card.is-sold .item-photo { filter: saturate(0.5); }
.store-card.is-sold { opacity: 0.62; }
.store-card.is-sold .reserve-btn {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--hairline, rgba(43, 37, 48, 0.14));
  cursor: default;
}

/* ---------- sale window (owner-controlled, prominent) ---------- */
.store-sale { position: relative; margin: 4px 18px 10px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(120deg, var(--accent), var(--accent-press)); color: var(--on-accent); box-shadow: var(--e2); }
.store-sale-glow { position: absolute; inset: 0; background: radial-gradient(60% 120% at 90% 0%, rgba(255,255,255,.28), transparent 60%); pointer-events: none; }
.store-sale-body { position: relative; padding: 16px 20px; }
.store-sale-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.store-sale-head { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.store-sale-text { font-size: 14px; opacity: .95; margin: 4px 0 0; }
@media (min-width: 860px) { .store-sale { margin: 4px 32px 12px; } .store-sale-head { font-size: 24px; } }

.store-sale { display: block; text-decoration: none; transition: transform .2s var(--ease-liquid), box-shadow .2s; }
.store-sale:active { transform: scale(.99); }
@media (hover:hover) { .store-sale:hover { box-shadow: var(--e3, 0 10px 30px rgba(0,0,0,.16)); } }
.store-sale-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; opacity: .95; }

/* on-sale price + badge */
.salepill { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; background: var(--accent); color: var(--on-accent); padding: 4px 9px; border-radius: 999px; box-shadow: var(--e1, 0 2px 8px rgba(0,0,0,.18)); }
.price.on-sale { display: inline-flex; align-items: baseline; gap: 7px; }
.price.on-sale .was { font-size: 13px; font-weight: 600; color: var(--ink-faint); text-decoration: line-through; }
.price.on-sale .now { color: var(--accent-press); }
.co-lprice.on-sale .was { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; font-weight: 600; margin-right: 4px; }

/* ---------- card CTA: Hold + Add ---------- */
.card-cta { margin-left: auto; display: inline-flex; gap: 6px; }
.card-cta .reserve-btn { padding-left: 11px; padding-right: 11px; }
.add-btn.in-bag { background: var(--success-ink); border-color: transparent; }
.add-btn.already, .add-btn:disabled.already { background: var(--surface-sunken); color: var(--success-ink); border-color: var(--hairline); box-shadow: none; cursor: default; opacity: 1; }
.add-btn.pop { animation: addpop .3s var(--ease-liquid); }
@keyframes addpop { 0%{transform:scale(1)} 40%{transform:scale(.9)} 100%{transform:scale(1)} }

/* ---------- floating bag + cart drawer ---------- */
.cart-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); color: var(--on-accent);
  box-shadow: var(--e3, 0 10px 28px rgba(0,0,0,.24)); display: grid; place-items: center; cursor: pointer;
  transition: transform .2s var(--ease-liquid); }
.cart-fab:active { transform: scale(.94); }
.cart-fab .ic { width: 24px; height: 24px; }
.cart-fab-n { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface, #fff); }
@media (min-width: 860px) { .cart-fab { right: 32px; bottom: 32px; } }

.cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20,16,24,.42); display: flex; justify-content: flex-end; }
.cart-panel { width: min(420px, 92vw); background: var(--surface, #fff); height: 100%; display: flex; flex-direction: column;
  box-shadow: -16px 0 50px rgba(0,0,0,.22); animation: cartin .26s var(--ease-liquid); }
@keyframes cartin { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--hairline); }
.cart-head h3 { font-size: 18px; font-weight: 700; margin: 0; }
.cart-x { background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 4px; }
.cart-lines { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-progress { padding: 10px 20px 2px; border-top: 1px solid var(--hairline); }
.cart-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.cart-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; }
.cart-lname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-lprice { font-weight: 700; }
.cart-rm { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 0 2px; }
.cart-rm:hover { color: var(--danger-ink, #c0392b); }
.cart-empty { padding: 40px 24px; text-align: center; color: var(--ink-soft); }
.cart-empty-sub { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
.cart-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); }
.cart-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.cart-checkout { width: 100%; padding: 14px; font-size: 16px; display: block; text-align: center; }
body.cart-open { overflow: hidden; }

/* ---------- Ask the shop (storefront assistant) ---------- */
.ask-fab { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px 11px 13px; border: none; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: var(--e3, 0 10px 28px rgba(0,0,0,.24)); cursor: pointer;
  font-size: 14px; font-weight: 700; transition: transform .2s var(--ease-liquid); }
.ask-fab:active { transform: scale(.95); }
.ask-fab .ic { width: 18px; height: 18px; }
@media (min-width: 860px) { .ask-fab { left: 32px; bottom: 32px; } }

.ask-panel { position: fixed; left: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 61;
  width: min(380px, calc(100vw - 36px)); height: min(520px, 70vh); display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.28); overflow: hidden; animation: cartin .24s var(--ease-liquid); }
@media (min-width: 860px) { .ask-panel { left: 32px; bottom: 96px; } }
.ask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--surface-raised); }
.ask-head b { font-size: 15px; }
.ask-sub { display: block; font-size: 12px; color: var(--ink-faint); }
.ask-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.ask-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ask-msg { display: flex; }
.ask-msg.me { justify-content: flex-end; }
.ask-bubble { max-width: 84%; font-size: 14px; line-height: 1.45; padding: 9px 13px; border-radius: 16px; }
.ask-msg.bot .ask-bubble { background: var(--surface-inset); color: var(--ink); border-bottom-left-radius: 5px; }
.ask-msg.me .ask-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.ask-msg.typing .ask-bubble { color: var(--ink-faint); letter-spacing: 2px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.ask-chip { font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-press);
  padding: 4px 10px; border-radius: 999px; }
.ask-chip.out { background: var(--surface-sunken); color: var(--ink-faint); text-decoration: line-through; }
.ask-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hairline); }
.ask-input { flex: 1; min-width: 0; background: var(--surface-inset); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 10px 15px; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.ask-input:focus { border-color: var(--accent); }
.ask-send { flex: none; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
.ask-send .ic { width: 18px; height: 18px; }

/* ---------- checkout ---------- */
.co-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.co-wrap { max-width: 860px; margin: 0 auto; }
.co-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; }
@media (max-width: 859px) { .co-grid { grid-template-columns: 1fr; } }
.co-summary { padding: 16px 18px; position: sticky; top: 12px; }
.co-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.co-thumb { width: 46px; height: 46px; border-radius: var(--r-sm); flex: none; background-size: cover; background-position: center; }
.co-lname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.co-lsub { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.co-lprice { font-weight: 700; }
.co-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; padding-top: 12px; }
.co-field { display: block; margin-bottom: 12px; }
.co-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; }
.co-field em { color: var(--ink-faint); font-style: normal; text-transform: none; }
.co-pays { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.co-pay { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-raised); cursor: pointer; }
.co-pay input { margin-top: 3px; accent-color: var(--accent); }
.co-pay:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.co-pay-body { display: flex; flex-direction: column; gap: 2px; }
.co-pay-detail { font-size: 12.5px; color: var(--ink-soft); }
.co-place { width: 100%; padding: 14px; font-size: 16px; }
.co-fine { font-size: 12px; color: var(--ink-faint); margin: 10px 0 14px; text-align: center; }
.co-paused { border: 1px solid var(--hairline); background: var(--surface-inset); color: var(--ink-soft); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; }

/* ---------- thank-you: tracking + payment proof ---------- */
.co-track { background: var(--cat-sky); color: var(--cat-sky-ink); font-size: 13px; padding: 9px 14px; border-radius: var(--r-md); margin: 12px 0; }
.co-track .mono { font-weight: 700; }
.co-proof { background: var(--surface-inset); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; text-align: center; }
.co-proof .btn { width: 100%; margin-top: 6px; }
.co-proof-actions { display: flex; gap: 10px; margin-top: 6px; }
.co-proof-actions .btn { flex: 1 1 0; width: auto; margin-top: 0; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; }
@media (max-width: 360px) { .co-proof-actions { flex-direction: column; } .co-proof-actions .btn { flex: 0 0 auto; width: 100%; } }
.co-proof-done { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--success-ink); }
.co-proof.co-paid { color: var(--success-ink); font-weight: 600; }

/* ---------- QR (thank-you + parcel) ---------- */
.co-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px auto 16px; text-decoration: none; }
.co-qr-img { display: block; padding: 10px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); color: #14101a; }
.co-qr-img .qr { display: block; }
.co-qr-cap { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* ---------- tracking timeline ---------- */
.trk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 10px 0 18px; }
.trk-code { font-size: 24px; font-weight: 700; letter-spacing: 0; margin: 2px 0 0; }
.trk-pill { flex: none; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-press); }
.trk-pill.delivered { background: var(--success-soft); color: var(--success-ink); }
.trk-pill.cancelled { background: var(--surface-sunken); color: var(--ink-faint); }

/* Ultra-visible status banner — buyer should see order status at a glance,
   phone-first, no hunting for the small pill above. */
.trk-status-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 18px 16px;
  border-radius: 20px;
  background: var(--accent-soft);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.trk-status-hero.delivered { background: var(--success-soft); }
.trk-status-hero.cancelled { background: var(--surface-sunken); }
.trk-status-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-raised); color: var(--accent-press); }
.trk-status-icon .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.trk-status-hero.delivered .trk-status-icon { color: var(--success-ink); }
.trk-status-hero.cancelled .trk-status-icon { color: var(--ink-faint); }
.trk-status-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-status-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.trk-status-label { font-size: 26px; font-weight: 800; line-height: 1.12; color: var(--accent-press); overflow-wrap: anywhere; }
.trk-status-hero.delivered .trk-status-label { color: var(--success-ink); }
.trk-status-hero.cancelled .trk-status-label { color: var(--ink-faint); }
@media (min-width: 860px) {
  .trk-status-hero { padding: 22px 24px; border-radius: 24px; }
  .trk-status-icon { width: 52px; height: 52px; }
  .trk-status-icon .ic { width: 26px; height: 26px; }
  .trk-status-label { font-size: 30px; }
}
.trk-timeline { list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
.trk-step { display: flex; gap: 14px; padding: 0 0 22px; position: relative; }
.trk-step::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: -4px; width: 2px; background: var(--hairline); }
.trk-step:last-child::before { display: none; }
.trk-step.done::before { background: var(--success); }
.trk-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hairline); background: var(--surface-raised);
  display: grid; place-items: center; z-index: 1; transition: all .2s var(--ease-liquid); }
.trk-step.done .trk-dot { background: var(--success); border-color: var(--success); color: #fff; }
.trk-step.now .trk-dot { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); }
.trk-dot .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.trk-body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.trk-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.trk-step:not(.done) .trk-label { color: var(--ink-faint); font-weight: 600; }
.trk-note { font-size: 13px; color: var(--ink-soft); }
.trk-cancel { padding: 16px 18px; color: var(--ink-soft); font-size: 14px; }
.trk-cancel-label { margin: 0 0 4px; font-weight: 800; font-size: 15px; color: var(--ink); }
.trk-cancel-reason { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.trk-receipt { text-align: left; }
.trk-label { display: flex; gap: 16px; align-items: center; padding: 16px 18px; margin-top: 14px; }
.trk-label .co-qr-img { flex: none; }
.trk-label-meta { min-width: 0; }
.trk-label-code { font-size: 20px; font-weight: 700; margin: 2px 0 6px; }
@media print {
  .store-hero, .trk-timeline, .trk-receipt, .btn, .trk-pill, .trk-status-hero, .trk-pay { display: none !important; }
  .trk-label { border: none; box-shadow: none; }
}

/* JB-P8-batch Item A: pay-from-tracking block — reuses the checkout GCash
   component's fields/flow (see invoice_public.html's .pay-primary), adapted
   to this page's shared design tokens instead of that page's own standalone
   inline styles. Only rendered by track() when balance_due > 0. */
.trk-pay { margin: 0 0 20px; text-align: left; }
.trk-pay-amount {
  display: grid; gap: 4px; margin: 12px 0 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hairline));
  border-radius: var(--r-md); background: var(--surface-raised);
}
.trk-pay-amount span { color: var(--ink-faint); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trk-pay-amount strong { font-size: 30px; line-height: 1; color: var(--accent-press); }
.trk-pay-copy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-raised);
}
.trk-pay-copy span { display: block; color: var(--ink-faint); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trk-pay-copy b { display: block; margin-top: 4px; font-size: 17px; line-height: 1.15; }
.trk-pay-qr { display: block; width: min(220px, 100%); margin: 14px auto 0; border-radius: var(--r-md); box-shadow: var(--e2); background: #fff; }
.trk-proof { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.trk-proof-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
/* JB-P9 mobile-first law: every tappable control on a buyer page must be
   >=44px — the shared .btn/.btn-sm base rules don't guarantee that (no
   min-height at all), so these two spots (measured 33px/41px on a real
   phone-width render) get an explicit floor here rather than changing the
   global .btn rule, which cascades to admin surfaces this pass didn't audit. */
.trk-pay-copy .btn,
.trk-proof-actions .btn { min-height: 44px; }
@media (max-width: 420px) {
  .trk-pay-copy { flex-direction: column; align-items: flex-start; }
  .trk-pay-copy .btn { width: 100%; }
  .trk-proof-actions { grid-template-columns: 1fr; }
}

/* ---------- thank-you ---------- */
.co-done { max-width: 460px; margin: 24px auto; text-align: center; }
.co-check { width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 14px; }
.co-check .ic { width: 32px; height: 32px; }
.co-done h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.co-sub { color: var(--ink-soft); font-size: 14.5px; }
.co-receipt { padding: 14px 18px; text-align: left; margin: 18px 0; }
.co-rline { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-soft); padding: 6px 0; }
.co-paybox { background: var(--accent-soft); border-radius: var(--r-md); padding: 14px 16px; text-align: left; margin-bottom: 18px; }
.co-payinst { font-size: 14px; color: var(--ink); white-space: pre-wrap; margin: 0; }

/* === JB-P8-batch Item D: reservation-confirmation redesign — the claim is
   the hero, items read as named collectibles, QR is a subordinate utility
   row. All colors/radii/shadows are the existing brand tokens. === */
.co-drop { max-width: 480px; margin: 20px auto; }
.co-drop-hero { text-align: center; padding: 8px 4px 22px; }
.co-drop-eyebrow {
  margin: 0 0 8px; color: var(--accent-press); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.co-drop-hero h1 { margin: 0 0 10px; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; letter-spacing: -.01em; }
.co-drop-sub { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; max-width: 42ch; margin-inline: auto; }
.co-drop-body { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 40ch; margin-inline: auto; }

.co-claim-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.co-claim-card {
  display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-raised); box-shadow: var(--e1);
}
.co-claim-thumb {
  width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-size: 20px; font-weight: 800; flex: none;
}
.co-claim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-claim-info { min-width: 0; display: grid; gap: 2px; }
.co-claim-info strong { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.co-claim-info small { color: var(--ink-faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.co-claim-price { font-weight: 800; white-space: nowrap; }

.co-drop-totals { padding: 14px 18px; text-align: left; margin: 0 0 16px; }

.co-drop-track {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-inset); text-decoration: none; color: inherit;
}
.co-drop-track-qr { flex: none; width: 40px; height: 40px; display: block; border-radius: var(--r-xs); overflow: hidden; background: #fff; }
.co-drop-track-qr svg, .co-drop-track-qr .qr { display: block; width: 100%; height: 100%; }
.co-drop-track-copy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.co-drop-track-copy small { color: var(--ink-faint); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.co-drop-track-copy b { font-size: 13.5px; }
.co-drop-track-go { color: var(--accent); font-weight: 900; }

@media (min-width: 640px) {
  .co-drop { max-width: 560px; }
  .co-drop-hero { padding: 16px 4px 26px; }
  .co-claim-card { padding: 12px 16px; }
  .co-claim-thumb { width: 58px; height: 58px; }
}

/* ---------- Phone-first: the app already drops the sidebar for a tab bar.
   Widen the hero a touch on larger screens. ---------- */
@media (min-width: 860px) {
  .store-hero { padding: 30px 32px 18px; }
  .store-wm { font-size: 36px; }
  .store-tag { font-size: 15px; }
}


.store-zoom-photo { cursor: zoom-in; position: relative; }
.store-zoom-photo::after { content: 'Tap to zoom'; position: absolute; right: 10px; bottom: 10px; z-index: 3; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(30,24,34,.48); opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; }
@media (hover:hover) { .store-zoom-photo:hover::after { opacity: 1; transform: none; } }
@media (hover:none) { .store-zoom-photo::after { content: 'Zoom'; opacity: 1; transform: none; } }
.store-zoom-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 18px; background: rgba(22,16,28,.72); backdrop-filter: blur(10px); }
.store-zoom-modal[hidden] { display: none; }
.store-zoom-card { width: min(860px, 94vw); display: grid; gap: 12px; }
.store-zoom-img { height: min(76vh, 760px); border-radius: 28px; background: var(--surface-raised) center / contain no-repeat; box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.store-zoom-title { color: #fff; text-align: center; font-weight: 900; font-size: 18px; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.store-zoom-close { position: fixed; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 1; z-index: 96; }
body.store-zoom-open { overflow: hidden; }
@media (max-width: 520px) { .store-zoom-modal { padding: 10px; } .store-zoom-img { height: 72vh; border-radius: 20px; } .store-zoom-close { right: 10px; top: 10px; } }
.co-payqr { display: block; width: min(220px, 72vw); height: auto; margin: 12px auto 2px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: #fff; padding: 8px; }
/* ---------- JoyBox Latest known-buyer shopping ---------- */
.joybox-shop-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-soft) 12%);
  box-shadow: 0 8px 22px rgba(43, 37, 48, 0.07);
}
.joybox-shop-context div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.joybox-shop-context span {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.joybox-shop-context strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.joybox-shop-context a {
  flex: none;
  color: var(--accent-press);
  font-size: 12.5px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--hairline));
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 8px 11px;
}
.cart-checkout[aria-disabled="true"] { opacity: .72; pointer-events: none; }
@media (min-width: 860px) { .joybox-shop-context { margin: 0 32px 14px; } }
@media (max-width: 420px) {
  .joybox-shop-context { align-items: stretch; flex-direction: column; }
  .joybox-shop-context a { text-align: center; }
}


/* Storefront phone polish for createdazzle.com. */
@supports (height: 100svh) {
  .store-screen { min-height: 100svh; }
}
@media (max-width: 560px) {
  .store-hero { padding: 16px 12px 10px; }
  .store-hero-top { align-items: flex-start; }
  .store-wm { font-size: clamp(27px, 9vw, 34px); line-height: 1; }
  .store-tag { font-size: 13.5px; line-height: 1.35; }
  .store-find { margin: 0 0 12px; padding: 6px 0 10px; }
  .store-find-bar { min-height: 50px; }
  .store-find-input { height: 48px; font-size: 16px; padding-left: 44px; }
  .store-find-tools { align-items: stretch; gap: 8px; flex-wrap: wrap; }
  .store-sort { width: 100%; max-width: none; justify-content: space-between; }
  .store-sort select { max-width: 62vw; text-overflow: ellipsis; }
  .store-collections { gap: 7px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .store-collections::-webkit-scrollbar { display: none; }
  .store-chip { flex: 0 0 auto; }
  .cart-panel { width: 100vw; max-width: none; }
  .ask-panel { left: 10px; right: 10px; width: auto; max-height: min(74vh, 560px); }
  .ask-fab { left: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); }
  .cart-fab { right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); }
}
/* Hard storefront phone fit pass. */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .store-screen, .store-body, .store-hero, .store-find, .grid-cards, .dropwrap, .item-card { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .store-hero { padding: 14px 10px 8px; overflow: hidden; }
  .store-hero-top { gap: 8px; min-width: 0; }
  .store-wm { min-width: 0; overflow-wrap: anywhere; font-size: clamp(25px, 8vw, 31px); }
  .live-badge { flex: 0 0 auto; }
  .store-tag { max-width: 100%; font-size: 13px; }
  .store-body { padding-left: 10px; padding-right: 10px; }
  .store-find { position: sticky; top: 0; margin: 0 -2px 10px; padding: 6px 2px 9px; }
  .store-find-bar { min-width: 0; min-height: 46px; }
  .store-find-input { height: 46px; min-width: 0; padding: 0 46px 0 42px; }
  .store-find-tools { width: 100%; min-width: 0; align-items: stretch; justify-content: flex-start; gap: 8px; }
  .store-find-count { width: 100%; }
  .store-sort { width: 100%; max-width: 100%; min-width: 0; }
  .store-sort select { flex: 1; min-width: 0; max-width: none; }
  .store-find-chips, .store-collections { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .store-find-chips::-webkit-scrollbar, .store-collections::-webkit-scrollbar { display: none; }
  .store-chip { flex: 0 0 auto; white-space: nowrap; }
  .store-drops-label { margin-top: 16px; }
  .grid-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .dropwrap { display: block; }
  .heart { top: 8px; right: 8px; }
  .item-photo { aspect-ratio: 1 / .86; }
  .item-title, .item-sub { overflow-wrap: anywhere; }
  .figs { align-items: center; }
  .card-cta { width: 100%; margin-top: 8px; }
  .card-cta .btn, .add-btn { width: 100%; justify-content: center; }
  .cart-panel { width: 100vw; max-width: 100vw; }
  .cart-fab { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ask-fab { left: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ask-panel { left: 8px; right: 8px; bottom: calc(124px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
  .store-zoom-card { width: 100%; max-width: 100%; }
}