/* Auction detail — /auctions/{uuid}. last13's arrangement (hero band with
 * title · market prices · summary, then card + bid panel) on the theme-v2
 * tokens. Every class is sf-au-*. The page is ONE grid (.sf-au) so a phone
 * reorders it: title → card → summary → bid panel → market prices.
 * Markup: storefront/auctions/show + _bid-panel. Behaviour: js/pkg-auctions.js. */

.sf-au-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.sf-au-top .sf-crumbs { margin-bottom: 0; }
.sf-au-back .icon { width: 14px; height: 14px; }

/* ---------- Grid ---------- */
.sf-au {
  display: grid; align-items: start; column-gap: 28px; row-gap: 26px;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr) minmax(0, 330px);
  grid-template-areas: "info info sum" "gallery main main";
}
.sf-au.has-prices { grid-template-areas: "info prices sum" "gallery main main"; }

/* ---------- Hero band (decoration behind the first row) ---------- */
.sf-au-band {
  grid-area: 1 / 1 / 2 / -1; align-self: stretch; position: relative; z-index: 0; overflow: hidden;
  background: radial-gradient(circle at 88% 10%, #ff006e1f, transparent 50%), var(--v2-surface);
  border: 1px solid #00f0ff38;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.sf-au-band-art { position: absolute; inset: -60px; background: center / cover no-repeat; filter: blur(38px) saturate(1.4); opacity: .34; }
/* The overlay also paints the diagonals clip-path cut off the border (it sits
   inside the 1px border, so its squares are the 22px cut − 2). */
.sf-au-band::after { content: ''; position: absolute; inset: 0; color: #00f0ff38; background: var(--sf-diag) right top / 20px 20px no-repeat, var(--sf-diag) left bottom / 20px 20px no-repeat, linear-gradient(100deg, #0a0014f2 0%, #0a0014bf 42%, #14082466 100%); }
.sf-au-band-logo { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(40%, 380px); aspect-ratio: 5 / 2; transform: translate(-50%, -50%); background: center / contain no-repeat; opacity: .08; filter: grayscale(1) brightness(2.2); }
.sf-au-band::before { content: ''; position: absolute; z-index: 2; top: 12px; left: 12px; width: 26px; height: 26px; border: 2px solid var(--v2-accent); border-right: 0; border-bottom: 0; box-shadow: -2px -2px 12px -4px var(--v2-accent); }
.sf-au-info, .sf-au-prices, .sf-au-sum { position: relative; z-index: 1; min-width: 0; }

.sf-au-info { grid-area: info; padding: 34px 0 30px 34px; }
.sf-au-info .sf-kicker { display: inline-flex; align-items: center; gap: 8px; }
.sf-au-info .sf-kicker .icon { width: 14px; height: 14px; }
.sf-au-title { margin: 14px 0 18px; font: 800 clamp(24px, 2.6vw, 36px)/1.25 'Noto Sans Thai', var(--v2-display); word-break: break-word; }
.sf-au-code { display: inline-block; margin: 0 10px 6px 0; padding: 5px 9px; vertical-align: middle; font: 700 13px/1 var(--v2-mono); letter-spacing: 1px; color: var(--v2-accent); border: 1px solid #00f0ff66; background: #00f0ff0d; }
.sf-au-name { vertical-align: middle; }
.sf-au-copy { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; vertical-align: middle; border: 1px solid #ffffff24; color: var(--v2-muted); transition: color .2s, border-color .2s; }
.sf-au-copy .icon { width: 16px; height: 16px; }
.sf-au-copy:hover { color: var(--v2-accent); border-color: #00f0ff66; }
.sf-au-copy.is-copied { color: #3ee8a0; border-color: #3ee8a088; }
.sf-au-info .sf-tags { margin-bottom: 0; }
.sf-au .sf-tag.is-live { display: inline-flex; align-items: center; gap: 6px; border-color: #3ee8a088; color: #3ee8a0; }
.sf-au .sf-tag.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: sf-au-blink 1.4s ease-in-out infinite; }
.sf-au .sf-tag.is-demo { border-color: #3ee8a088; color: #3ee8a0; font-family: 'Noto Sans Thai', sans-serif; letter-spacing: 0; }
@keyframes sf-au-blink { 50% { opacity: .25; } }

/* market prices — a glass panel on the band */
.sf-au-prices { grid-area: prices; margin: 26px 0; padding: 14px 16px 16px; background: #0a0014b8; border: 1px solid #00f0ff2e; backdrop-filter: blur(6px); }
.sf-au-prices h2 { display: flex; align-items: center; gap: 8px; font: 800 12px/1.3 var(--v2-display); letter-spacing: .5px; text-transform: uppercase; color: var(--v2-accent); }
.sf-au-prices h2 .icon { width: 16px; height: 16px; }
.sf-au-prices > p { margin: 4px 0 10px; font-size: 11px; color: var(--v2-muted); }
.sf-au-price-rows { display: grid; gap: 6px; }
.sf-au-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(64px, auto) 12px; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--v2-line); background: #ffffff05; font-size: 12px; transition: border-color .2s, background .2s; }
a.sf-au-price-row:hover { border-color: #00f0ff66; background: #00f0ff0a; }
.sf-au-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sf-au-native { font: 11px var(--v2-mono); color: var(--v2-muted); white-space: nowrap; }
.sf-au-price-row b { font: 700 12.5px var(--v2-mono); color: var(--v2-accent); text-align: right; white-space: nowrap; }
.sf-au-price-row .icon { width: 12px; height: 12px; color: var(--v2-muted); }

/* summary — shop + the four figures */
.sf-au-sum { grid-area: sum; margin: 22px 22px 22px 0; padding: 16px 18px; background: #0a0014d1; border: 1px solid #00f0ff4d; box-shadow: inset 0 0 36px #00f0ff0a; backdrop-filter: blur(8px); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
/* Its cut edges on a pseudo: the phone rule swaps the panel's own background. */
.sf-au-sum::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: #00f0ff4d; background: var(--sf-diag) right top / 14px 14px no-repeat, var(--sf-diag) left bottom / 14px 14px no-repeat; }
.sf-au-shop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--v2-line); }
.sf-au-shop .sf-shop-logo { width: 44px; height: 44px; font-size: 17px; }
.sf-au-shop small { display: block; font-size: 10.5px; color: var(--v2-muted); }
.sf-au-shop b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-au-shop .icon { width: 16px; height: 16px; color: var(--v2-accent); }
a.sf-au-shop[href]:hover b { color: var(--v2-accent); }
.sf-au-rows { margin: 0; }
.sf-au-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #ffffff14; font-size: 13px; }
.sf-au-rows div:last-child { border-bottom: 0; }
.sf-au-rows dt { color: var(--v2-muted); }
.sf-au-rows dd { margin: 0; font: 700 14px var(--v2-mono); white-space: nowrap; }
.sf-au-rows .is-price dd { font-size: 24px; color: var(--sf-price); text-shadow: 0 0 16px #ffd24a40; }
.sf-au-fav { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 9px; border: 1px solid #ffffff24; font-size: 12.5px; color: #d9d0e6; transition: color .2s, border-color .2s, background .2s; }
.sf-au-fav .icon { width: 16px; height: 16px; }
.sf-au-fav:hover, .sf-au-fav.is-on { border-color: #ff006e88; color: #ff5c9d; }
.sf-au-fav.is-on { background: #ff006e12; }
.sf-au-fav.is-on .icon { fill: currentColor; }

/* ---------- Card (gallery) ---------- */
/* ONE frame round the big picture AND its thumbs (owner: the thumbs sat outside it). */
.sf-au-gallery { grid-area: gallery; position: sticky; top: 150px; min-width: 0; background: var(--v2-surface); border: 1px solid #00f0ff38; box-shadow: inset 0 0 50px #00f0ff0a; }
.sf-au-stage { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 22px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #00f0ff1c, transparent 62%); }
.sf-au-stage > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 34px #000c); transition: opacity .16s; }
.sf-au-stage > img.is-cycling { cursor: pointer; }
.sf-au-kind, .sf-au-grade { position: absolute; top: 14px; z-index: 3; padding: 4px 9px; font: 700 11px/1.4 'Noto Sans Thai', sans-serif; background: #0a0014e6; box-shadow: 0 4px 12px #0008; }
.sf-au-kind { left: 14px; border: 1px solid #00f0ff66; color: var(--v2-accent); }
.sf-au-kind.is-photo { border-color: #3ee8a088; color: #3ee8a0; }
.sf-au-grade { right: 14px; border: 1px solid #ffcf0088; color: #ffcf00; font-family: var(--v2-mono); letter-spacing: .5px; }

/* price + countdown over the art (last13) — one column: price and clock take the
   widest one's width. The TEST stamp between them is the /auctions tile's
   (partials/test-stamp: red, −12°), narrower than the column and with margin
   above and below, so its tilted corners stay clear of both boxes. */
.sf-au-over { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: stretch; gap: 8px; width: max-content; max-width: calc(100% - 28px); pointer-events: none; }
.sf-au-over-price { min-width: 190px; padding: 10px 20px; text-align: center; background: linear-gradient(to top right, transparent calc(50% - .9px), #00f0ff80 calc(50% - .9px), #00f0ff80 calc(50% + .9px), transparent calc(50% + .9px)) right top / 10px 10px no-repeat border-box, linear-gradient(to top right, transparent calc(50% - .9px), #00f0ff80 calc(50% - .9px), #00f0ff80 calc(50% + .9px), transparent calc(50% + .9px)) left bottom / 10px 10px no-repeat border-box, #0a0014cc; border: 1px solid #00f0ff80; box-shadow: 0 12px 34px #000b, inset 0 0 22px #00f0ff14; backdrop-filter: blur(8px); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.sf-au-over-price small { display: block; font: 700 10px var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-accent); }
.sf-au-over-price b { display: block; font: 700 28px/1.15 var(--v2-mono); color: #fff; text-shadow: 0 0 16px #00f0ff88; }
.sf-au-stamp { justify-self: center; margin: 14px 0; padding: 5px 16px 5px 21px; font: 900 24px/1.2 var(--v2-display); letter-spacing: 5px; color: #fff; text-shadow: 0 1px 3px #0009; background: #1b1313e6; border: 3px solid #e5342b; box-shadow: 0 6px 18px #000a, inset 0 0 0 1px #e5342b55; transform: rotate(-12deg); }
.sf-au-stamp.is-demo { padding: 4px 16px; font: 800 19px/1.4 'Noto Sans Thai', var(--v2-display); letter-spacing: .5px; background: #0b1f18e6; border-color: #10b981; box-shadow: 0 6px 18px #000a, inset 0 0 0 1px #10b98155; }
.sf-au-clock { padding: 10px 14px 9px; text-align: center; background: #0a0014dd; border: 1px solid #ff006e80; box-shadow: 0 12px 34px #000b; backdrop-filter: blur(8px); }
.sf-au-clock small { display: block; margin-bottom: 7px; font: 700 10px var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: #ff5c9d; }
.sf-au-clock-units { display: flex; justify-content: center; gap: 6px; }
.sf-au-clock-units > span { display: grid; justify-items: center; min-width: 46px; padding: 6px 4px 4px; background: #ffffff08; border: 1px solid #ffffff1f; }
.sf-au-clock-units b { font: 700 21px/1 var(--v2-mono); color: #fff; }
.sf-au-clock-units i { margin-top: 4px; font: normal 9.5px/1 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
.sf-au-clock em { display: block; margin-top: 8px; font: normal 10.5px 'Noto Sans Thai', sans-serif; color: #d9d0e6; }
.sf-au-clock.is-soon { border-color: var(--v2-pink); box-shadow: 0 12px 34px #000b, 0 0 24px #ff006e44; }
.sf-au-clock.is-soon b, .sf-au-clock.is-zero b { color: #ff5c9d; }
.sf-au-clock.is-soon .sf-au-clock-units { animation: sf-au-blink 1s steps(2) infinite; }
.sf-au-clock.is-over { border-color: #ffffff2e; }
.sf-au-clock.is-over small { margin-bottom: 0; color: #d9d0e6; font-size: 11px; }

.sf-au-zoom { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #fff; background: #0a0014e0; border: 1px solid #ffffff2e; transition: color .2s, border-color .2s; }
.sf-au-zoom .icon { width: 15px; height: 15px; }
.sf-au-zoom:hover { color: var(--v2-accent); border-color: var(--v2-accent); }

.sf-au-thumbs { display: flex; gap: 8px; padding: 12px 14px 14px; overflow-x: auto; background: #0a001466; border-top: 1px solid #00f0ff1f; }
.sf-au-thumbs button { position: relative; flex: 0 0 66px; height: 88px; padding: 3px; background: #0a0014; border: 1px solid #ffffff24; }
.sf-au-thumbs button.active { border-color: var(--v2-accent); box-shadow: 0 0 12px #00f0ff44; }
.sf-au-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sf-au-thumbs i { position: absolute; left: 3px; right: 3px; bottom: 3px; font: normal 600 9px/1.7 'Noto Sans Thai', sans-serif; text-align: center; color: #d9d0e6; background: #0a0014cc; }

/* ---------- Bid panel (Livewire island) ---------- */
.sf-au-main { grid-area: main; min-width: 0; }
.sf-au-island { display: grid; gap: 18px; }
.sf-au-island .sf-panel + .sf-panel { margin-top: 0; }
.sf-au-box { margin: 0; font-size: 13px; }
.sf-au-result { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: #ffe27a; border: 1px solid #ffcf0066; background: linear-gradient(90deg, #ffcf0017, #ffcf0005 70%); }
.sf-au-result > .icon { width: 30px; height: 30px; }
.sf-au-result b { display: block; font: 800 14px/1.3 var(--v2-display); letter-spacing: .5px; text-transform: uppercase; }
.sf-au-result span { display: block; margin-top: 4px; font-size: 13px; color: #f4e9b8; }
.sf-au-guest { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; padding: 16px 18px; border: 1px solid #00f0ff44; background: #00f0ff0a; }
.sf-au-guest p { font-size: 13px; color: #d9d0e6; }

.sf-au-bid-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.sf-au-bid-head label { font: 800 15px var(--v2-display); letter-spacing: .5px; text-transform: uppercase; }
.sf-au-bid-head span { font-size: 12px; color: var(--v2-muted); }
.sf-au-bid-head b { font-family: var(--v2-mono); color: var(--v2-text); }
.sf-au-leading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--v2-accent); border: 1px solid #00f0ff66; background: #00f0ff0d; }
.sf-au-leading .icon { width: 16px; height: 16px; }
.sf-au-bid-row { display: flex; gap: 10px; }
.sf-au-amount { position: relative; flex: 1 1 auto; min-width: 0; }
.sf-au-amount > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 700 18px var(--v2-mono); color: var(--v2-accent); pointer-events: none; }
.sf-au-amount .sf-input { min-height: 56px; padding-left: 36px; font: 700 22px var(--v2-mono); }
.sf-au-bid-row .button { flex: none; min-height: 56px; gap: 10px; font-size: 13px; }
.sf-au-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sf-au-quick .sf-chip { font-family: var(--v2-mono); }
.sf-au-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #ffffff1c; font-size: 12.5px; color: var(--v2-muted); }
.sf-au-credit b { font: 700 14px var(--v2-mono); color: var(--v2-text); }
.sf-au-credit .text-link { padding: 0; font-size: 12px; color: var(--v2-accent); }
.sf-au-bid-note { margin-top: 10px; font-size: 11.5px; line-height: 1.7; color: #ff8fb8; }
.sf-au-bid-note .text-link { padding: 0; margin-left: 6px; font-size: 11.5px; color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; }

.sf-au-history { padding: 0; }
.sf-au-history-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--v2-line); }
.sf-au-history-head h2 { margin: 0; }
.sf-au-count { font: 700 11px var(--v2-mono); padding: 4px 9px; color: var(--v2-accent); border: 1px solid #00f0ff55; white-space: nowrap; }
.sf-au-empty { padding: 40px 20px; text-align: center; color: var(--v2-muted); }
.sf-au-empty .icon { width: 34px; height: 34px; opacity: .35; }
.sf-au-empty p { margin-top: 8px; }
.sf-au-empty small { display: block; margin-top: 4px; font-size: 12px; color: var(--v2-accent); }
.sf-au-bids { list-style: none; margin: 0; padding: 0; }
.sf-au-bids li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid #ffffff0d; }
.sf-au-bids li:last-child { border-bottom: 0; }
.sf-au-bids li.is-top { background: linear-gradient(90deg, #00f0ff12, transparent 70%); }
.sf-au-bids li.is-mine { box-shadow: inset 3px 0 0 var(--v2-pink); }
.sf-au-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid #ffffff2e; background: linear-gradient(135deg, #6a2cff, #ff006e); font: 800 15px var(--v2-display); color: #fff; }
.sf-au-bids .is-top .sf-au-avatar { border-color: var(--v2-accent); box-shadow: 0 0 10px #00f0ff66; }
.sf-au-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sf-au-bidder { min-width: 0; }
.sf-au-bidder b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; word-break: break-all; }
.sf-au-bidder small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--v2-muted); }
.sf-au-lead, .sf-au-you { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; font: normal 700 9.5px/1 var(--v2-mono); letter-spacing: .8px; text-transform: uppercase; }
.sf-au-lead { color: var(--v2-bg); background: var(--v2-accent); }
.sf-au-lead .icon { width: 11px; height: 11px; }
.sf-au-you { font-family: 'Noto Sans Thai', sans-serif; letter-spacing: 0; color: #ff5c9d; border: 1px solid #ff006e88; }
.sf-au-amt { font: 700 16px var(--v2-mono); white-space: nowrap; }
.sf-au-bids .is-top .sf-au-amt { color: var(--v2-accent); text-shadow: 0 0 12px #00f0ff66; }
.sf-au-pager { margin: 0; padding: 14px; border-top: 1px solid var(--v2-line); }
.sf-au-pager button { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #ffffff1f; font: 13px var(--v2-mono); color: var(--v2-text); }
.sf-au-pager button:hover:not(:disabled) { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-au-pager button:disabled { opacity: .35; }

/* ---------- Rules dialog ---------- */
.sf-au-rules { width: min(640px, calc(100% - 32px)); }
.sf-au-rulelist { display: grid; gap: 10px; margin: 0 0 16px; padding-left: 20px; font-size: 13px; line-height: 1.75; color: #d9d0e6; }
.sf-au-rulelist b { color: var(--v2-text); }
.sf-au-rule-link { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; }
.sf-au-agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 13px; cursor: pointer; border: 1px solid #00f0ff44; background: #00f0ff0a; }
.sf-au-agree input { margin-top: 5px; accent-color: var(--v2-accent); }
.sf-au-rules-foot { justify-content: flex-end; margin-top: 16px; }

.effects-off .sf-au .sf-tag.is-live::before, .effects-off .sf-au-clock.is-soon .sf-au-clock-units { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-au .sf-tag.is-live::before, .sf-au-clock.is-soon .sf-au-clock-units { animation: none; }
}

/* ---------- Tablet: title across, summary + prices under it ---------- */
@media (max-width: 1180px) {
  .sf-au { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-areas: "info info" "sum sum" "gallery main"; }
  .sf-au.has-prices { grid-template-areas: "info info" "sum prices" "gallery main"; }
  .sf-au-band { grid-area: 1 / 1 / 3 / -1; }
  .sf-au-info { padding: 30px 30px 0; }
  .sf-au-sum { margin: 0 0 24px 24px; }
  .sf-au:not(.has-prices) .sf-au-sum { margin-right: 24px; }
  .sf-au-prices { margin: 0 24px 24px 0; }
}

/* ---------- Phone: title → card → summary → bid → prices ---------- */
@media (max-width: 760px) {
  .sf-au, .sf-au.has-prices { grid-template-columns: minmax(0, 1fr); row-gap: 16px; grid-template-areas: "info" "gallery" "sum" "main" "prices"; }
  .sf-au-band { grid-area: info; }
  .sf-au-info { padding: 22px 18px 20px; }
  .sf-au-title { margin: 10px 0 14px; font-size: 22px; }
  .sf-au-sum, .sf-au:not(.has-prices) .sf-au-sum { margin: 0; background: var(--v2-surface); backdrop-filter: none; }
  .sf-au-prices { margin: 0; background: var(--v2-surface); backdrop-filter: none; }
  .sf-au-gallery { position: static; }
  .sf-au-stage { padding: 14px; }
  .sf-au-over-price { min-width: 160px; padding: 8px 16px; }
  .sf-au-over-price b { font-size: 24px; }
  .sf-au-clock-units > span { min-width: 40px; }
  .sf-au-clock-units b { font-size: 18px; }
  .sf-au-stamp { margin: 10px 0; padding: 4px 12px 4px 15px; font-size: 18px; letter-spacing: 3px; border-width: 2px; }
  .sf-au-stamp.is-demo { padding: 3px 12px; font-size: 15px; letter-spacing: 0; }
  .sf-au-thumbs { padding: 10px; }
  .sf-au-bid-row { flex-direction: column; }
  .sf-au-bid-row .button { width: 100%; justify-content: center; }
  .sf-au-bids li { padding: 11px 14px; gap: 10px; }
  .sf-au-history-head { padding: 14px; }
  .sf-au-price-row { grid-template-columns: minmax(0, 1fr) auto 12px; }
  .sf-au-native { display: none; }
}

/* ======================================================================
 * Auction CARD — /auctions, /auctions/archive, home shelf (auctions/_card).
 * last13's tile: seller chip (pkg-browse.css) top-left; outcome / grade /
 * flip stack top-right; the ticking d/h:m:s over the art; bids + price; CTA
 * + follow heart. The title link stretches over the card; a flippable art
 * sits above it so a click flips instead. Every class is sf-auc-*.
 * ==================================================================== */
.sf-auc-card .sf-card-body h3 { -webkit-line-clamp: 2; }
.sf-auc-link { color: inherit; }
.sf-auc-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sf-auc-link:hover, .sf-auc-link:focus-visible { color: var(--v2-accent); }
.sf-auc-code { font: 700 11px/1 var(--v2-mono); letter-spacing: .5px; color: var(--sf-code); }
.sf-auc-card .sf-card-art { overflow: hidden; }
.sf-auc-art[data-auc-flip] { z-index: 2; cursor: pointer; perspective: 900px; }

/* two faces — catalog scan / seller photo */
.sf-auc-faces { position: relative; width: 78%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1), translate .35s, scale .35s; }
.sf-auc-art.is-flipped .sf-auc-faces { transform: rotateY(180deg); }
.sf-auc-art .sf-auc-face { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sf-auc-art .sf-auc-face.is-back { transform: rotateY(180deg); }
.sf-card:hover .sf-auc-art .sf-auc-face { transform: none; }
.sf-card:hover .sf-auc-art .sf-auc-face.is-back { transform: rotateY(180deg); }
.sf-card:hover .sf-auc-faces { translate: 0 -6px; scale: 1.04; }

/* top-right stack */
.sf-auc-corner { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 60px); }
.sf-auc-flag, .sf-auc-grade, .sf-auc-flipbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font: 700 10.5px/1.3 'Noto Sans Thai', sans-serif; background: #0a0014e6; border: 1px solid #ffffff33; color: var(--v2-text); box-shadow: 0 4px 12px #0008; white-space: nowrap; }
.sf-auc-flag .icon, .sf-auc-flipbtn .icon { width: 12px; height: 12px; flex: none; }
.sf-auc-flag.is-sold { border-color: #3ee8a088; color: #3ee8a0; }
.sf-auc-flag.is-off { border-color: #ffffff2e; color: var(--v2-muted); }
.sf-auc-flag.is-won { border-color: #ffcf00; color: #1a1200; background: linear-gradient(135deg, #ffe066, #ffb800); }
.sf-auc-flag.is-mine { border-color: #00f0ff88; color: var(--v2-accent); }
.sf-auc-grade { border-color: #ffcf0088; color: #ffcf00; font-family: var(--v2-mono); letter-spacing: .5px; }
.sf-auc-flipbtn { cursor: pointer; border-color: #00f0ff66; color: var(--v2-accent); transition: background .2s, color .2s; }
.sf-auc-flipbtn:hover { background: #00f0ff1f; }
.sf-auc-flipbtn[aria-pressed="true"] { background: var(--v2-accent); color: var(--v2-bg); }
.sf-auc-flipbtn .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-auc-card.is-won { --sf-edge: #ffcf0088; }

/* countdown over the art */
.sf-auc-cd { position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; padding: 7px 10px 8px; background: #0a0014dd; border: 1px solid #00f0ff66; box-shadow: 0 10px 26px #000b; backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap; }
.sf-auc-cd small { font: 700 9px/1 var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-accent); }
.sf-auc-cd-units { display: flex; align-items: center; gap: 3px; font: 700 13px/1 var(--v2-mono); color: #fff; }
.sf-auc-cd-units i { font-style: normal; min-width: 26px; padding: 5px 4px; text-align: center; background: #ffffff12; border: 1px solid #ffffff1f; }
.sf-auc-cd-units em { font-style: normal; color: var(--v2-muted); }
.sf-auc-cd.is-soon { border-color: #ff006e; }
.sf-auc-cd.is-soon small { color: #ff5c9d; }
.sf-auc-cd.is-soon .sf-auc-cd-units i { border-color: #ff006e88; background: #ff006e22; animation: sf-auc-pulse 1s steps(2) infinite; }
.sf-auc-cd.is-over { border-color: #ffffff2e; }
.sf-auc-cd.is-over small { color: var(--v2-muted); }
@keyframes sf-auc-pulse { 50% { background: #ff006e44; } }

/* figures + CTA */
.sf-auc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; padding: 9px 0; border-top: 1px dashed #ffffff1a; border-bottom: 1px dashed #ffffff1a; }
.sf-auc-stats dt { font-size: 10px; color: var(--v2-muted); }
.sf-auc-stats dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 4px; font: 700 15px/1.2 var(--v2-mono); white-space: nowrap; }
.sf-auc-stats dd .icon { width: 12px; height: 12px; color: var(--v2-accent); align-self: center; }
.sf-auc-stats dd small { font: 600 10px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
.sf-auc-stats dd.is-price { color: var(--sf-price); }
.sf-auc-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--v2-muted); }
.sf-auc-note .icon { width: 12px; height: 12px; }
.sf-auc-cta { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.sf-auc-cta .button { flex: 1; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; font-size: 12px; }
.sf-auc-cta .button .icon { width: 16px; height: 16px; }

.effects-off .sf-auc-cd.is-soon .sf-auc-cd-units i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-auc-cd.is-soon .sf-auc-cd-units i { animation: none; }
  .sf-auc-faces { transition: none; }
}
@media (max-width: 680px) {
  .sf-auc-corner { top: 7px; right: 7px; gap: 4px; max-width: calc(100% - 44px); }
  .sf-auc-flag, .sf-auc-grade, .sf-auc-flipbtn { padding: 3px 6px; font-size: 9.5px; }
  .sf-auc-flipbtn span { display: none; }
  .sf-auc-cd { bottom: 8px; padding: 5px 6px 6px; gap: 3px; }
  .sf-auc-cd small { font-size: 8px; letter-spacing: 1px; }
  .sf-auc-cd-units { font-size: 11px; gap: 2px; }
  .sf-auc-cd-units i { min-width: 20px; padding: 4px 2px; }
  .sf-auc-stats { gap: 6px; }
  .sf-auc-stats dd { font-size: 13px; }
  .sf-auc-cta .button { min-height: 38px; padding: 8px; font-size: 11px; gap: 6px; }
  .sf-auc-cta .button .icon { display: none; }
}