/* Page styles for sPAGES: checkout flow, account, content and places. Built on the tokens in theme.css. */

/* ── Checkout ─────────────────────────────────────────── */
/* Cart, checkout and order status. Uses the tokens from theme.css only. */

/* Two columns on desktop: content left, sticky summary right. */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 24rem; }
  .co-aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.co-back { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.co-back i { font-size: .7em; }
.co-back:hover { color: var(--primary-ink); }
.co-link-btn { background: none; border: 0; padding: .35rem 0; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.co-link-btn:hover { color: var(--danger); }

/* Cart lines: a plain list with hairlines, no cards. */
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cart-line { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "thumb info remove" "thumb qty total"; gap: .75rem 1rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--border); }
.cart-thumb { grid-area: thumb; align-self: start; position: relative; display: block; width: 5rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--surface2); }
.cart-thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-info { grid-area: info; min-width: 0; align-self: start; }
.cart-name { display: block; font-weight: 600; line-height: var(--lh-snug); color: var(--text); overflow-wrap: anywhere; }
a.cart-name:hover { color: var(--primary-ink); }
.cart-unit { font-size: var(--fs-sm); color: var(--muted); margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.cart-info .badge { margin-top: .45rem; }
.cart-qty { grid-area: qty; justify-self: start; }
.cart-qty button { width: 2.5rem; height: 2.5rem; }
.cart-total { grid-area: total; justify-self: end; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-remove { grid-area: remove; justify-self: end; align-self: start; width: 2.25rem; height: 2.25rem; margin: -.35rem -.5rem 0 0; color: var(--muted); font-size: .85rem; }
.cart-remove:hover { color: var(--danger); }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) {
  .cart-line { grid-template-columns: 5.5rem minmax(0, 1fr) auto 6.5rem auto; grid-template-areas: "thumb info qty total remove"; gap: 1.25rem; }
  .cart-thumb { width: 5.5rem; }
  .cart-info { align-self: center; }
  .cart-remove { align-self: center; margin: 0 -.5rem 0 0; }
}

/* Summary panel: rows of label and amount. */
.sum-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 1rem; }
.sum-rows { display: grid; gap: .55rem; font-size: var(--fs-sm); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--text-2); }
.sum-row > :last-child { flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.sum-row.is-saving, .sum-row.is-saving > :last-child { color: var(--success); }
.sum-row.sum-grand { margin-top: .35rem; padding-top: .85rem; border-top: 1px solid var(--border); font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.sum-note { font-size: var(--fs-xs); color: var(--muted); margin: .75rem 0 0; }
.sum-block { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); display: grid; gap: 1rem; }
.sum-cta { margin-top: 1.25rem; }
.sum-secure { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: var(--fs-xs); color: var(--muted); margin: .85rem 0 0; }
.sum-error { font-size: var(--fs-sm); color: var(--danger); margin: .75rem 0 0; }

/* Promo code and gift card inputs. */
.code-row { display: flex; gap: .5rem; }
.code-row .field { flex: 1; min-width: 0; padding: .65rem .9rem; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; font-family: ui-monospace, Menlo, monospace; }
.code-row .field::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.code-row .btn { flex-shrink: 0; }
.code-msg { font-size: var(--fs-xs); margin: .4rem 0 0; color: var(--success); }
.code-msg.is-err { color: var(--danger); }
.applied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .6rem .6rem .9rem; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 600; }
.applied > span { min-width: 0; overflow-wrap: anywhere; }
.applied i { margin-right: .4rem; }
.applied button { flex-shrink: 0; width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-pill); background: none; color: inherit; cursor: pointer; opacity: .7; }
.applied button:hover { opacity: 1; background: var(--surface); }

/* Phone bar with the total and the checkout button. */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 1rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(8,8,10,.08); }
.cartbar-sum { flex: 1; min-width: 0; }
.cartbar-label { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.2; }
.cartbar-total { font-size: var(--fs-lg); font-weight: 700; margin: 0; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartbar-space { height: 4.75rem; }
@media (min-width: 960px) { .cartbar, .cartbar-space { display: none; } }

/* Checkout steps: numbered sections split by hairlines. */
.co-step { padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
.co-step:first-child { padding-top: 0; }
.co-step:last-child { border-bottom: 0; padding-bottom: 0; }
.co-step-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.15rem; }
.co-step-num { width: 1.9rem; height: 1.9rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.co-step-title { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: 700; margin: 0; }
.co-step-link { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--primary-ink); }
.co-step-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .co-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .co-fields .span-2 { grid-column: 1 / -1; } }
.co-fields textarea.field { resize: vertical; min-height: 5rem; }
.req { color: var(--danger); }

/* Selectable rows: saved addresses, shipping rates, payment methods. */
.opt-list { display: grid; gap: .6rem; }
.opt-list.cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.opt-row { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 3.6rem; padding: .85rem 1rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2); }
.opt-row:hover { border-color: var(--text); }
.opt-row.is-on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.opt-row:focus-within { box-shadow: 0 0 0 3px var(--primary-ring); }
.opt-row input[type="radio"] { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.opt-icon { width: 1.5rem; flex-shrink: 0; text-align: center; font-size: 1.1rem; color: var(--primary-ink); }
.opt-main { flex: 1; min-width: 0; }
.opt-name { font-size: var(--fs-sm); font-weight: 650; margin: 0; line-height: 1.3; }
.opt-sub { font-size: var(--fs-xs); color: var(--muted); margin: .15rem 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.opt-price { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.opt-check { flex-shrink: 0; color: var(--primary-ink); opacity: 0; transition: opacity var(--dur-2); }
.opt-row.is-on .opt-check { opacity: 1; }
.pay-note { margin-top: .9rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--surface2); font-size: var(--fs-sm); color: var(--text-2); }
.pay-note p { margin: 0; }
.pay-note p + p { margin-top: .4rem; }
.pay-note code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }
.pay-note .warn { color: var(--danger); }
.check-row { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.check-row input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin: .15rem 0 0; accent-color: var(--primary); }
.check-row a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.check-row + .check-row { margin-top: .75rem; }

/* Compact item list in a summary or on the order page. */
.mini-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.mini-lines.scroll { max-height: 17rem; overflow-y: auto; padding-right: .25rem; }
.mini-line { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.mini-thumb { position: relative; width: 3.25rem; height: 3.25rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface2); }
.mini-thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-thumb .media-empty { font-size: 1rem; }
.mini-main { flex: 1; min-width: 0; }
.mini-name { font-size: var(--fs-sm); font-weight: 600; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-qty { font-size: var(--fs-xs); color: var(--muted); margin: .1rem 0 0; }
.mini-price { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Order status: a document on one panel. */
.order-doc { padding: clamp(1.25rem, 4vw, 2.5rem); }
.order-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; }
.order-num { font-size: var(--fs-2xl); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.order-date { font-size: var(--fs-sm); color: var(--muted); margin: .4rem 0 0; }
.order-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
.badge-bad { background: var(--danger-soft); color: var(--danger); }
.order-section { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.order-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.track-step { position: relative; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0 .2rem; overflow-wrap: anywhere; }
.track-step::before { content: ""; position: absolute; top: 1rem; left: -50%; right: 50%; height: 2px; background: var(--border-strong); }
.track-step:first-child::before { display: none; }
.track-dot { position: relative; z-index: 1; width: 2rem; height: 2rem; margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--border-strong); font-size: .7rem; color: var(--muted); }
.track-step.is-done { color: var(--text); }
.track-step.is-done::before { background: var(--primary); }
.track-step.is-done .track-dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.track-step.is-now .track-dot { box-shadow: 0 0 0 4px var(--primary-ring); }
.order-box { padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--surface2); }
.order-box .mono { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-sm); margin: 0; overflow-wrap: anywhere; }
.dl-list { display: grid; gap: .5rem; }
.dl-item { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; color: var(--text); transition: border-color var(--dur-2), background-color var(--dur-2); }
.dl-item:hover { border-color: var(--text); background: var(--surface2); }
.dl-item i { color: var(--primary-ink); flex-shrink: 0; }
.dl-item span { min-width: 0; overflow-wrap: anywhere; }
.order-totals { max-width: 22rem; margin-left: auto; }
.lookup-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: end; }
@media (min-width: 640px) { .lookup-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; } }
.lookup-form .btn { min-height: 3rem; }
.lookup-miss { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.lookup-miss i { margin-top: .2rem; }

/* ── Account ─────────────────────────────────────────── */
/* Account group: sign in and register, the account dashboard, owner pages and
   the small single-message pages. Everything is prefixed auth-, acct- or msg-. */

/* Sign in and register */
.auth-wrap { display: flex; justify-content: center; padding-top: clamp(1.5rem, 6vw, 4.5rem); padding-bottom: 1rem; }
.auth-panel { width: 100%; max-width: 26rem; padding: clamp(1.5rem, 5vw, 2.25rem); }
.auth-title { font-size: var(--fs-2xl); font-weight: 700; margin: 0; }
.auth-lead { color: var(--muted); font-size: var(--fs-base); margin: .55rem 0 1.5rem; }
.auth-switch { text-align: center; font-size: var(--fs-sm); color: var(--muted); margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.auth-switch a, .acct-check a { color: var(--primary-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Shared form pieces */
.acct-form { display: grid; gap: 1rem; }
.acct-form .field-label { margin-bottom: .4rem; }
.acct-check { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); cursor: pointer; }
.acct-check input { width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.acct-note { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .95rem; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 550; line-height: 1.4; margin: 0; }
.acct-note i { margin-top: .15rem; flex-shrink: 0; }
.acct-note-danger { background: var(--danger-soft); color: var(--danger); }
.acct-note-ok { background: var(--success-soft); color: var(--success); }

/* Dashboard frame: greeting, section navigation, content */
.acct-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.acct-head .page-lead { font-size: var(--fs-base); overflow-wrap: anywhere; }
.acct { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.acct-nav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; }
.acct-nav::-webkit-scrollbar { display: none; }
.acct-link { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; white-space: nowrap; padding: .6rem 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.acct-link > i { font-size: .85rem; width: 1.1rem; text-align: center; color: var(--muted); }
.acct-link:hover { color: var(--text); border-color: var(--text); }
.acct-link.is-current { background: var(--text); color: var(--bg); border-color: var(--text); }
.acct-link.is-current > i { color: inherit; }
.acct-count { font-size: var(--fs-xs); font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .acct { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .acct-nav { flex-direction: column; gap: .15rem; overflow: visible; margin: 0; padding: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .acct-link { gap: .85rem; padding: .75rem .9rem; border: 0; background: none; border-radius: var(--radius-sm); }
  .acct-link:hover { background: var(--surface2); }
  .acct-link.is-current { background: var(--primary-soft); color: var(--primary-ink); }
  .acct-count { margin-left: auto; }
}
.acct-h { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 1rem; }
.acct-sub { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 .35rem; }
.acct-text { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1rem; max-width: 60ch; }

/* Rows: orders and points activity */
.acct-list { overflow: hidden; }
.acct-row { display: flex; align-items: center; gap: .9rem; padding: 1rem clamp(.9rem, 2.5vw, 1.25rem); border-top: 1px solid var(--border); color: var(--text); transition: background-color var(--dur-2); }
.acct-row:first-child { border-top: 0; }
a.acct-row:hover { background: var(--surface2); }
.acct-row-icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: none; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-ink); }
@media (min-width: 520px) { .acct-row-icon { display: inline-flex; } }
.acct-row-main { flex: 1; min-width: 0; }
.acct-row-title { font-weight: 650; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row-meta { font-size: var(--fs-sm); color: var(--muted); margin: .1rem 0 0; }
.acct-row-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.acct-row-end { text-align: right; flex-shrink: 0; }
.acct-row-total { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.acct-row-chev { color: var(--muted); font-size: .75rem; flex-shrink: 0; }
.acct-badge-info { background: var(--info-soft); color: var(--info); }
.acct-badge-danger { background: var(--danger-soft); color: var(--danger); }
.acct-plus { color: var(--success); }
.acct-minus { color: var(--danger); }

/* Points */
.acct-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct-stat-num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--primary-ink); margin: .25rem 0; font-variant-numeric: tabular-nums; }
.acct-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: 0; }

/* Addresses */
.acct-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .acct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct-addr { display: flex; flex-direction: column; min-width: 0; padding: 1.15rem 1.25rem; }
.acct-addr-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.acct-addr-label { font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.acct-addr p { margin: 0; overflow-wrap: anywhere; }
.acct-addr-lines { font-size: var(--fs-sm); color: var(--muted); margin-top: .15rem !important; }
.acct-addr-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.acct-danger-link { color: var(--danger); }
.acct-danger-link:hover { background: var(--danger-soft); }
.acct-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 9rem; padding: 1.25rem; font-size: var(--fs-sm); font-weight: 650; color: var(--primary-ink); background: none; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2); }
.acct-add:hover { border-color: var(--primary); background: var(--primary-soft); }
.acct-add i { font-size: 1.1rem; }
.acct-modal { max-width: 32rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.acct-modal-title { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 1.25rem; }
.acct-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 520px) { .acct-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct-grid2 .span2 { grid-column: 1 / -1; } }
.acct-modal-actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.acct-modal-actions > * { flex: 1; }

/* Profile and privacy */
.acct-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1040px) { .acct-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.acct-block { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.acct-block:first-child { padding-top: 0; border-top: 0; }
.acct-block:last-child { padding-bottom: 0; }
.acct-danger-title { color: var(--danger); }
.acct-danger-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.acct-danger-row .field { flex: 1 1 14rem; width: auto; }
.acct-btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
html.dark .acct-btn-danger { color: #17171a; }
.acct-btn-danger:hover { filter: brightness(.92); }
.acct-btn-danger:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Owner pages */
.cms-back { margin: 0 0 1rem -.6rem; }
.cms-cover { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius-xl); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface2); }

/* Single-message pages */
.msg-page .empty-icon.is-ok { background: var(--success-soft); color: var(--success); }
.msg-page .empty-icon.is-warn { background: var(--warning-soft); color: var(--warning); }
.msg-page h1 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 .5rem; }
.msg-page p { max-width: 44ch; margin: 0 auto 1.5rem; font-size: var(--fs-base); }

/* Wishlist sits in the narrower dashboard column, so it stops at three columns. */
@media (min-width: 1040px) { .product-grid.acct-wish { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Content ─────────────────────────────────────────── */
/* Blog, post, albums and search pages. */

/* Blog list: the newest post as a wide lead card from tablet up. */
@media (min-width: 640px) {
  .post-grid > .post-card-lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .post-card-lead .post-card-media { flex: 1.35 1 0; aspect-ratio: auto; min-height: clamp(15rem, 30vw, 24rem); }
  .post-card-lead .post-card-media img { position: absolute; top: 0; left: 0; }
  .post-card-lead .post-card-body { flex: 1 1 0; justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); }
  .post-card-lead .post-card-title { font-size: var(--fs-2xl); line-height: var(--lh-tight); -webkit-line-clamp: 4; }
  .post-card-lead .post-card-excerpt { font-size: var(--fs-base); -webkit-line-clamp: 4; margin-top: .85rem; }
  .post-card-lead .post-card-more { margin-top: 0; padding-top: 1.5rem; }
}

/* Post page. */
.article { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.back-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem 1rem .5rem .85rem; font-size: var(--fs-sm); font-weight: 650; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); transition: border-color var(--dur-2), background-color var(--dur-2); }
.back-link i { font-size: .8em; transition: transform var(--dur-2) var(--ease); }
.back-link:hover { border-color: var(--text); }
.back-link:hover i { transform: translateX(-3px); }
.article-head { margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2rem); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: 0 0 .75rem; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.article-title { font-size: var(--fs-3xl); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.article-lead { font-size: var(--fs-xl); line-height: 1.45; color: var(--text-2); margin: 1rem 0 0; }
.article-note { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-size: var(--fs-sm); color: var(--text); background: var(--warning-soft); border-radius: var(--radius); }
.article-note > i { color: var(--warning); margin-top: .2rem; }
.article-note a { text-decoration: underline; text-underline-offset: 3px; }
.article-note p { margin: 0; }

.post-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); background: var(--surface2); margin: 0 0 clamp(1.5rem, 4vw, 2.25rem); }
.post-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); background: #000; margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); }
.post-media > video, .post-media > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.post-media > video { object-fit: contain; }
/* Vertical clips: sized from the height so they never become a giant column. */
.post-media-tall { aspect-ratio: 9 / 16; width: min(100%, calc(min(74vh, 40rem) * 9 / 16)); }
.post-media-gone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.5rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); background: var(--surface2); border: 1px solid var(--border); }
.post-media-gone i { font-size: 1.5rem; opacity: .6; }
.post-media-gone p { margin: 0; }
.post-embed { margin: 0 0 clamp(1.5rem, 4vw, 2.25rem); max-width: 100%; overflow: hidden; }
.post-embed > a { display: block; padding: 1rem 1.1rem; color: var(--primary-ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, .85rem); margin: clamp(1.5rem, 4vw, 2.25rem) 0; }
@media (min-width: 640px) { .post-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-gallery img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface2); }
.post-gallery.is-pair img { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .post-gallery.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Comments. */
.comments { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--border); }
.comments-title { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 1.25rem; }
.comment { display: flex; gap: .85rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.comment:first-child { padding-top: 0; }
.comment-avatar { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--primary-ink); background: var(--primary-soft); }
.comment-body { min-width: 0; flex: 1; }
.comment-name { font-size: var(--fs-sm); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.comment-date { font-size: var(--fs-xs); color: var(--muted); margin: .1rem 0 0; }
.comment-text { font-size: var(--fs-base); color: var(--text-2); margin: .5rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.comments-empty { color: var(--muted); margin: 0; }
.comment-form { margin-top: 1.75rem; }
.comment-form h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 1rem; }
.comment-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .comment-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comment-fields .span-all { grid-column: 1 / -1; } }
.comment-fields textarea.field { resize: vertical; min-height: 7rem; }
.comment-msg { font-size: var(--fs-sm); font-weight: 600; margin: .9rem 0 0; }
.comment-msg.is-ok { color: var(--success); }
.comment-msg.is-err { color: var(--danger); }
.comment-form .btn { margin-top: 1.1rem; }

/* Albums. */
.album-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.8vw, 1.5rem); }
@media (min-width: 860px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: #17171a; color: #fff; isolation: isolate; }
.album-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease); }
.album-card-shade { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(2.5rem, 8vw, 5rem) clamp(.85rem, 2vw, 1.4rem) clamp(.85rem, 2vw, 1.3rem); background: linear-gradient(to top, rgba(8,8,10,.86), rgba(8,8,10,0)); }
.album-card-title { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); color: #fff; overflow-wrap: anywhere; }
.album-card-count { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: var(--fs-xs); font-weight: 600; opacity: .9; }
@media (hover: hover) { .album-card:hover img { transform: scale(1.045); } }
.album-head-meta { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: .75rem 0 0; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.4rem, 1vw, .75rem); }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-tile { position: relative; display: block; overflow: hidden; padding: 0; border: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--surface2); cursor: zoom-in; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease); }
@media (hover: hover) { .photo-tile:hover img { transform: scale(1.045); } }

/* Album lightbox, on top of .lightbox / .lightbox-btn from the theme. */
.lightbox-stage { position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 4rem .75rem 8.5rem; }
.lightbox-stage > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-xs); }
.lightbox-close { top: max(.85rem, env(safe-area-inset-top, 0px)); right: .85rem; }
.lightbox-prev, .lightbox-next { top: 50%; margin-top: -3.7rem; }
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }
.lightbox-btn:disabled { opacity: .28; cursor: default; }
.lightbox-count { position: absolute; top: max(.85rem, env(safe-area-inset-top, 0px)); left: 1rem; height: 2.9rem; display: flex; align-items: center; color: #fff; font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; opacity: .85; margin: 0; }
.lightbox-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0 calc(.9rem + env(safe-area-inset-bottom, 0px)); color: #f4f4f2; text-align: center; background: linear-gradient(to top, rgba(6,6,8,.9), rgba(6,6,8,0)); }
.lightbox-caption { font-size: var(--fs-sm); margin: 0 auto .6rem; padding: 0 1rem; max-width: 60ch; }
.lightbox-strip { display: flex; gap: .45rem; overflow-x: auto; padding: .15rem 1rem; scrollbar-width: none; }
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-strip > .lightbox-thumb:first-of-type { margin-left: auto; }
.lightbox-strip > :last-child { margin-right: auto; }
.lightbox-thumb { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; padding: 0; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity var(--dur-2), border-color var(--dur-2); }
.lightbox-thumb:hover { opacity: .85; }
.lightbox-thumb.is-on { opacity: 1; border-color: #fff; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 639px) { .lightbox-prev, .lightbox-next { width: 2.5rem; height: 2.5rem; } }

/* Search page. */
.search-form { display: flex; gap: .6rem; align-items: stretch; max-width: 44rem; }
.search-form .search-field { flex: 1; min-width: 0; }
.search-form .search-field .field { padding-right: 1rem; min-height: 3.1rem; }
.search-summary { font-size: var(--fs-sm); color: var(--muted); margin: 1.1rem 0 0; }
.search-block { margin-top: clamp(2rem, 5vw, 3.25rem); }
.search-block .section-title .count { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: .5rem; }
.search-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }

/* Long bare links in post text wrap instead of widening the page. */
.article .prose { overflow-wrap: break-word; min-width: 0; }

/* On phones the search button is icon only so the field keeps its width. */
.search-form .btn .search-go-icon { display: none; }
@media (max-width: 479px) {
  .search-form .btn { padding-left: 0; padding-right: 0; width: 3.1rem; flex-shrink: 0; }
  .search-form .btn .search-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .search-form .btn .search-go-icon { display: inline-block; }
}

/* ── Places ─────────────────────────────────────────── */
/* Contact, locations, partner stats and the QR scanner. */

/* Contact facts: one quiet row of three, no cards. */
.fact-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .fact-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.fact { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.fact-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-ink); font-size: .9rem; }
.fact-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: .1rem 0 .2rem; }
.fact-value { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin: 0; line-height: var(--lh-snug); overflow-wrap: anywhere; }
a.fact-value:hover { color: var(--primary-ink); }

/* Messenger channels: large option rows, brand colour on the icon only. */
.places-block { margin-top: clamp(2rem, 5vw, 3rem); }
.places-h { font-size: var(--fs-xl); font-weight: 700; margin: 0; }
.places-sub { font-size: var(--fs-sm); color: var(--muted); margin: .35rem 0 1.1rem; }
.channel-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 640px) { .channel-list.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.channel-row { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease); }
.channel-icon { width: 3.25rem; height: 3.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: #fff; font-size: 1.35rem; }
.channel-text { flex: 1; min-width: 0; }
.channel-name { display: block; font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-snug); }
.channel-hint { display: block; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-go { flex-shrink: 0; color: var(--muted); font-size: .8rem; transition: transform var(--dur-2) var(--ease), color var(--dur-2); }
@media (hover: hover) {
  .channel-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
  .channel-row:hover .channel-go { transform: translateX(3px); color: var(--primary-ink); }
}
.form-stack { display: grid; gap: 1rem; }
.form-stack textarea.field { resize: vertical; min-height: 8rem; }
.form-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .form-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-msg { font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.form-msg.is-ok { color: var(--success); }
.form-msg.is-err { color: var(--danger); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* Locations. */
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
@media (min-width: 820px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.loc-card[hidden] { display: none; }
.loc-map { position: relative; aspect-ratio: 16 / 9; background: var(--surface2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.loc-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.loc-map-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem; color: var(--muted); font-size: var(--fs-sm); }
.loc-map-empty .pin { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--primary-ink); font-size: 1.3rem; }
.loc-map-empty p { margin: 0; max-width: 26ch; }
.loc-body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.1rem, 2.6vw, 1.5rem); }
.loc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.loc-name { font-size: var(--fs-xl); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.loc-addr { display: inline-flex; align-items: flex-start; gap: .45rem; margin: .45rem 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); }
.loc-addr i { margin-top: .2rem; color: var(--muted); font-size: .8em; }
a.loc-addr:hover { color: var(--primary-ink); }
a.loc-addr:hover span { text-decoration: underline; text-underline-offset: 3px; }
.loc-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.loc-status::before { content: ""; width: .4rem; height: .4rem; border-radius: var(--radius-pill); background: currentColor; flex-shrink: 0; }
.loc-status.is-open { background: var(--success-soft); color: var(--success); }
.loc-status.is-closed { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
/* The code stays dark on white in both themes so a phone can read it. */
.loc-qr { flex-shrink: 0; display: block; padding: .35rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: zoom-in; line-height: 0; transition: box-shadow var(--dur-2), transform var(--dur-2) var(--ease); }
.loc-qr img { width: 4.25rem; height: 4.25rem; display: block; }
.loc-qr:hover { box-shadow: var(--shadow-2); transform: scale(1.03); }
.loc-facts { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--border); display: grid; gap: .55rem; font-size: var(--fs-sm); color: var(--text); }
.loc-facts li { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.loc-facts i { width: 1rem; margin-top: .25rem; text-align: center; color: var(--muted); font-size: .8rem; flex-shrink: 0; }
.loc-facts a { overflow-wrap: anywhere; }
.loc-facts a:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.loc-foot { margin-top: auto; padding-top: 1.25rem; }
.loc-none { margin-top: 1rem; }
.loc-modal[hidden] { display: none; }
.loc-modal .modal-card { position: relative; text-align: center; max-width: 21rem; }
.loc-modal-name { font-weight: 650; margin: .25rem 2.75rem 1rem; overflow-wrap: anywhere; }
.loc-modal-close { position: absolute; top: .6rem; right: .6rem; }
.loc-modal-qr { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; }
.loc-modal-qr img { width: 100%; display: block; aspect-ratio: 1 / 1; }
.loc-modal .btn { margin-top: 1.1rem; }

/* Partner stats. */
.partner-head { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.partner-avatar { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: var(--radius-pill); object-fit: cover; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.5rem; }
.partner-code { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.partner-code code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--text); background: var(--surface2); padding: .15rem .5rem; border-radius: var(--radius-xs); }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.stat { padding: 1.15rem 1.35rem; min-width: 0; }
.stat + .stat { border-top: 1px solid var(--border); }
@media (min-width: 640px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--border); }
}
.stat-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: 0; }
.stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; color: var(--text); margin: .4rem 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value.is-earn { color: var(--success); }
.copy-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.copy-row .field { flex: 1 1 14rem; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-sm); }
.copy-row .btn { flex: 0 0 auto; }
.row-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.row-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; min-width: 0; }
.row-list li + li { border-top: 1px solid var(--border); }
.row-list p { margin: 0; }
.row-main { font-weight: 650; font-size: var(--fs-base); overflow-wrap: anywhere; }
.row-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: .15rem !important; }
.row-end { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.row-end .price { font-size: var(--fs-base); }
.fine-note { font-size: var(--fs-xs); color: var(--muted); text-align: center; margin: 1.75rem 0 0; }

/* QR scanner. */
.scan-wrap { max-width: 30rem; text-align: center; }
.scan-wrap .page-lead { margin-left: auto; margin-right: auto; }
.scan-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-xl); background: #0b0b0d; box-shadow: var(--shadow-3); border: 1px solid var(--border); }
.scan-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame canvas { display: none; }
.scan-guide { position: absolute; top: 12%; right: 12%; bottom: 12%; left: 12%; pointer-events: none; }
.scan-guide span { position: absolute; width: 2.25rem; height: 2.25rem; border: 3px solid rgba(255,255,255,.9); }
.scan-guide span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.scan-guide span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: var(--radius); }
.scan-guide span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: var(--radius); }
.scan-guide span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }
.scan-off { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: 2.5rem; }
.scan-frame.is-off .scan-off { display: flex; }
.scan-frame.is-off .scan-guide span { border-color: rgba(255,255,255,.28); }
.scan-msg { font-size: var(--fs-base); color: var(--text-2); margin: 1.25rem auto 0; max-width: 36ch; overflow-wrap: anywhere; }
.scan-open { margin-top: 1rem; }
.scan-open.hidden { display: none; }
.scan-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; text-align: left; font-size: var(--fs-sm); color: var(--text-2); }
.scan-steps li { display: flex; align-items: flex-start; gap: .75rem; }
.scan-steps i { width: 1.25rem; margin-top: .2rem; text-align: center; color: var(--primary-ink); flex-shrink: 0; }
.scan-manual { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: left; }
.scan-manual .copy-row .field { font-family: inherit; font-size: var(--fs-base); }
.scan-back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.scan-back:hover { color: var(--text); }