/* TitanX Store: the marketplace (all products, all stores), the one cart and
   the checkout wizard, on top of tx/css/base.css and css/shop.css. Tokens only:
   no colour is hard-coded, so light and dark both follow base.css. A few
   pieces also live in tx/css/market.css; they are repeated here because a
   business's own domain draws the cart without the marketplace stylesheet. */
.crumbs { font-size: .9rem; margin: 0 0 1rem; color: var(--ink-2); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--ink); }
.wrap { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tag { display: inline-flex; align-items: center; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; color: var(--ink-2); background: var(--bg); white-space: nowrap; }
.verified { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 600; color: var(--ok); white-space: nowrap; }
.verified svg { width: 14px; height: 14px; flex: none; }
.bmark { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.bmark img { width: 100%; height: 100%; object-fit: cover; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: .15rem; flex: none; accent-color: var(--brand); }
.center-text { text-align: center; } .flush { margin: 0; } .gap-t { margin-top: .75rem; }
.btn.sm { padding: .4rem .9rem; font-size: .9rem; }
.cartlink { font-weight: 600; }
.cartlink[aria-current] { color: var(--brand-strong); background: var(--brand-soft); }
.top + .notice, .top ~ .notice { position: relative; z-index: 1; }

/* Home and search */
.shop-finder { margin-top: 1.25rem; }
@media (min-width: 720px) { .shop-finder { grid-template-columns: 1fr auto auto; } }
.store-finder { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
@media (min-width: 720px) { .store-finder { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.store-finder .field { margin: 0; }
.store-finder input, .store-finder select { height: 46px; }

/* A product card with its store and a one-tap add */
.pgrid { margin-bottom: 1.5rem; }
.pcard { display: flex; flex-direction: column; min-width: 0; }
.pcard .card h3 { margin: .55rem 0 .05rem; overflow-wrap: anywhere; }
.pcard .by { color: var(--ink-2); font-size: .85rem; display: inline-flex; align-items: center; gap: .25rem; min-height: 28px; align-self: flex-start; }
.pcard .by:hover { color: var(--ink); }
.vtick { color: var(--ok); display: inline-flex; }
.vtick svg { width: 14px; height: 14px; }
.buyrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .15rem; min-height: 44px; }
.buyrow form { margin: 0; }
.add { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fill); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background-color .15s var(--ease), transform .1s var(--ease); }
.add:hover { background: var(--fill-hover); }
.add:active { transform: scale(.94); }
.add svg { width: 20px; height: 20px; }
.few { font-size: .8rem; color: var(--warn); font-weight: 600; }

/* Store cards */
.stores { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .stores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stores { grid-template-columns: repeat(3, 1fr); } }
.scard { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 1rem 1.15rem; box-shadow: var(--shadow); display: grid; gap: .5rem; align-content: start;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.scard:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.scard .head { display: flex; gap: .75rem; align-items: center; }
.scard h3 { margin: 0; font-size: 1.05rem; }
.scard h3 a { color: var(--ink); }
.scard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.scard h3 a:hover { text-decoration: none; }
.scard h3 a:focus-visible { box-shadow: none; }
.scard:has(h3 a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.scard .about { margin: 0; color: var(--ink-2); font-size: .9rem; }
.sfacts { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--ink-2); display: grid; gap: .1rem; }
/* On a phone the home page's stores scroll sideways instead of stacking. */
@media (max-width: 639px) {
  .stores.strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: .35rem 1rem 1rem; margin: -.35rem -1rem .5rem; scrollbar-width: none; }
  .stores.strip .scard { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (prefers-color-scheme: dark) { .scard { box-shadow: none; border: 1px solid var(--line); } }

/* Products filter */
.price-range { margin: 0 0 .75rem; }
.price-range legend { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pair .field { margin-bottom: .5rem; }
.pair label { font-weight: 500; color: var(--ink-2); }

/* Cart: one panel per store */
.groups { display: grid; gap: 1rem; min-width: 0; }
.ghead { display: flex; gap: .75rem; align-items: center; margin: 0 0 .75rem; }
.ghead .gname { min-width: 0; flex: 1; }
.ghead h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.ghead h2 a { color: var(--ink); }
.ghead .gaside { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.sgroup .totals { margin-top: .5rem; }
.sgroup .totals tr.grand td { font-size: 1rem; }
.summary h2 { margin-bottom: .75rem; }
.summary .totals td:first-child { padding-right: 1rem; }
.summary .btn.block { margin-top: 1rem; }

/* Wizard */
.wizard h1 { margin-bottom: 1rem; }
.wsteps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; counter-reset: none; }
.wsteps li { min-width: 0; }
.wsteps li > a, .wsteps li > span { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .5rem; border-radius: var(--r-md); color: var(--ink-2); font-size: .85rem; font-weight: 600; line-height: 1.2; }
.wsteps li > a:hover { background: rgba(127, 127, 127, .1); text-decoration: none; }
.wsteps .num { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-size: .8rem; font-variant-numeric: tabular-nums; }
.wsteps li > a .num { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.wsteps li[aria-current] > span { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.wsteps li[aria-current] .num { background: var(--fill); color: var(--on-brand); box-shadow: none; }
@media (max-width: 520px) { .wsteps li:not([aria-current]) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wsteps { grid-template-columns: auto auto 1fr; } }
.wizard form[data-wizard], .wizard > form.panel { max-width: 44rem; }
.wizard form[data-wizard] { display: grid; gap: 1rem; }
.sopt fieldset { margin-bottom: 1rem; }
.sopt legend { font-size: .95rem; }
.wnav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .5rem; }
.wnav a { min-height: 44px; display: inline-flex; align-items: center; }
.sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sec-row h2 { font-size: 1.1rem; }
.pick { font-size: .9rem; color: var(--ink-2); margin: -.25rem 0 .5rem; }
.choice input[disabled] + span { opacity: .5; }
[hidden] { display: none !important; }

/* Done */
.done-head { text-align: center; margin: 0 auto 1.5rem; max-width: 36rem; }
.done-head .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 1rem; }
.done-head .tick svg { width: 28px; height: 28px; }
.paid { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.paid .bar { display: flex; gap: .3rem; }
.paid .bar i { width: 2.25rem; height: .4rem; border-radius: 99px; background: var(--line); }
.paid .bar i.on { background: var(--ok); }
.done-head h1 .sub { display: block; font-size: .6em; font-weight: 600; color: var(--ink-2); margin-top: .25rem; }
.keep { text-align: left; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); padding: .75rem 1rem; margin-top: 1rem; font-size: .9rem; }
.keep ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.keep li span { display: block; color: var(--ink-2); }
.keep a { overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .keep { box-shadow: none; border: 1px solid var(--line); } }
.dblock { max-width: 44rem; margin: 0 auto 1rem; display: grid; gap: .75rem; }
.dblock .ghead { margin: 0; }
.dblock .status-line { margin: 0; }
.dblock.is-failed, .dblock.is-unsure, .dblock.is-conflict { box-shadow: var(--shadow), inset 3px 0 0 var(--bad); }
.dblock.is-unsure { box-shadow: var(--shadow), inset 3px 0 0 var(--warn); }
.howto { background: var(--bg); border-radius: var(--r-md); padding: .75rem 1rem; }
.payother summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); min-height: 44px; display: inline-flex; align-items: center; }
.payother[open] summary { margin-bottom: .5rem; }
.dfoot { margin: 0; }
.dblock .notice.inline { margin: 0; }
@media (prefers-color-scheme: dark) { .wsteps li[aria-current] > span { box-shadow: none; border: 1px solid var(--line); } }
/* Design pass r2: cart lines keep the price beside the name so the quantity
   controls fit one row on a phone; tax is a quiet line under each total. */
.clines li { grid-template-columns: 56px 1fr; align-items: start; }
.clines .thumb { width: 56px; height: 56px; }
.lhead { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.lhead strong { min-width: 0; overflow-wrap: anywhere; }
.lhead .price { white-space: nowrap; }
.clines form.inline { flex-wrap: nowrap; }
.clines input[type=number] { width: 4.25rem; flex: none; }
.taxline { font-size: .85rem; color: var(--ink-2); margin: .35rem 0 0; text-align: right; }
.wsteps li > span { display: flex; align-items: center; gap: .5rem; }
.wsteps li > a .lbl, .wsteps li > span .lbl { display: inline; }
@media (max-width: 520px) { .wsteps { display: flex; gap: .35rem; } .wsteps li[aria-current] { flex: 1; } }
.pcard .few { display: block; margin-top: .1rem; }
/* A grid child grows to its widest content: the category scroller must not
   widen the results column past a phone screen. */
.listing > * { min-width: 0; }
.wsteps { max-width: 44rem; }