/*
 * ONYX 夜場（2026-10-05 V：「ONYX 的網站目前跟 S3CTOR 太像了」→ 三個方向選了 B 夜場，顏色選「白色的」）。
 * 疊在 style.css 上面，取代 s3.css。只改長相；首頁的結構在 app.js 的 home()（nhero＋原本的商品區）。
 * 規則：黑底 #0b0b0c、字是偏暖的白、**強調色就是白**（沒有紅、沒有紫、沒有螢光）——顏色留給衣服自己的印花。
 *   英文大標 Bebas Neue（瘦高、全大寫），中文大標思源黑體粗體；小標是拉開字距的 Inter。
 *   方角（4px），不是 S3CTOR 的圓角膠囊；沒有跑馬燈、沒有比賽數據、沒有等寬字。
 * 商品照是白底去背圖，所以商品格是黑底上的白卡，這是刻意的，不要去把照片壓暗。
 * 變數名沿用 style.css 的（--violet 現在的值是白）：亮底上的字一律用 var(--bg)。
 */
:root {
  --bg: #0b0b0c;
  --ink: #f1efe8;
  --ink2: #c9c7c0;
  --card: #161618;
  --soft: #1b1b1e;
  --mute: #8d8b84;
  --line: rgba(255, 255, 255, .1);
  --line2: rgba(255, 255, 255, .2);
  --hoverline: rgba(255, 255, 255, .5);
  --panel: #131315;
  --glass: rgba(11, 11, 12, .88);
  --scrim: rgba(0, 0, 0, .62);
  --shadow: rgba(0, 0, 0, .55);
  --violet: #f1efe8;
  --violet-hi: #ffffff;
  --glow: rgba(255, 255, 255, 0);
  --bad: #ff6b6b;
  --ok: #7ddc9c;
  --warn: #f0c26b;
  --r: 4px;
  --hd: 60px;
  --disp: "Bebas Neue", "Noto Sans TC", system-ui, sans-serif;
  --lab: "Inter", "Noto Sans TC", system-ui, sans-serif;
  --serif: var(--disp);
  --serif-tc: var(--disp);
  color-scheme: dark;
}
body { font-family: "Inter", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", sans-serif; font-size: 14px; }
h1, h2, h3 { font-synthesis: none; }
::selection { background: var(--ink); color: var(--bg); }
.icon--cart.has i, .bar__btn i, .copy.is-ok { color: var(--bg); }
.demo { background: #2a2410; color: #f0c26b; }

/* ─── 最上面那條（一句話，不會動） ─── */
.nbar { background: var(--ink); color: var(--bg); text-align: center; padding: 9px 12px; font: 600 10.5px/1.2 var(--lab); letter-spacing: .24em; text-transform: uppercase; }
body.is-focus .nbar { display: none; }

/* ─── 頁首：左導覽、中間手寫字標、右工具 ─── */
.hd { background: var(--glass); border-bottom: 1px solid var(--line); }
.hd__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; height: var(--hd); }
.nav { margin: 0; justify-self: start; grid-column: 1; grid-row: 1; }
.hd__mark { grid-column: 2; grid-row: 1; justify-self: center; }
.hd__mark img { display: block; height: 21px; width: auto; }
@media (min-width: 720px) { .hd__mark img { height: 24px; } }
.hd__tools { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
.hd__secure { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; font: 600 11px/1 var(--lab); letter-spacing: .12em; }
.nav__a { font: 600 11px/1 var(--lab); letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px; border-radius: 0; color: var(--mute); }
.nav__a:hover, .nav__a.is-on { color: var(--ink); }
.nav__a.is-on::after { width: 14px; height: 2px; border-radius: 0; bottom: 0; box-shadow: none; background: var(--ink); }
.mega { border-radius: 4px; box-shadow: 0 24px 60px -24px #000; border-color: var(--line2); }
.mega__d b { font: 400 18px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.icon:hover { background: transparent; opacity: .6; }
.icon svg { width: 19px; height: 19px; stroke-width: 1.5; }
.icon--cart i { background: transparent; color: var(--ink); font: 700 11px/1 var(--lab); top: 3px; right: -2px; }
.icon--cart.has i { background: var(--ink); color: var(--bg); box-shadow: none; }
@media (max-width: 959px) {
  .hd__in { grid-template-columns: auto 1fr auto; position: relative; }
  .hd__mark { grid-column: 2; }
  .hd__tools { grid-column: 3; }
  .icon--menu { position: absolute; left: calc(var(--pad) - 10px); top: 50%; margin-top: -21px; }
}

/* ─── 首頁第一屏：一張照片、超大字、一顆白色的鍵 ─── */
.nhero { position: relative; display: block; overflow: hidden; background: #000; height: min(86vh, 900px); text-decoration: none; color: var(--ink); }
.nhero h1, .nhero h1 s, .nhero p { text-decoration: none; }
.nhero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(.3) contrast(1.08); }
.nhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .35) 0, transparent 22%, transparent 45%, var(--bg) 100%); pointer-events: none; }
.nhero__txt { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(22px, 5vh, 56px); z-index: 2; max-width: var(--max); margin: 0 auto; }
.nhero h1 { margin: 0; font: 400 clamp(88px, 21vw, 260px)/.82 var(--disp); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.nhero h1 s { text-decoration: none; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.nhero p { margin: 14px 0 0; font-size: 14px; color: var(--ink2); }
.ncta { display: flex; justify-content: space-between; align-items: center; margin: 16px var(--pad) 0; padding: 17px 20px; background: var(--ink); color: var(--bg); text-decoration: none; font: 700 15px/1 "Noto Sans TC", sans-serif; border-radius: 4px; transition: opacity .2s; }
.ncta:hover { opacity: .86; }
.ncta i { font-style: normal; transition: transform .3s var(--ease); }
.ncta:hover i { transform: translateX(6px); }
@media (min-width: 960px) {
  /* 電腦：左邊黑底放字、右邊放照片。照片是直式的，鋪滿整個寬螢幕會被放大到糊掉，字也會壓在臉上。 */
  .nhero { display: grid; grid-template-columns: 1fr 1fr; height: min(84vh, 860px); background: var(--bg); }
  .nhero::after { display: none; }
  .nhero img { grid-column: 2; grid-row: 1; object-position: 50% 20%; min-height: 0; }
  .nhero__txt { position: static; grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 0 var(--pad) clamp(28px, 6vh, 64px) max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
  .nhero h1 { font-size: clamp(120px, 12.5vw, 210px); }   /* 第二行 EVERYDAY 八個字母，要塞得進左半邊 */
  .ncta { max-width: 420px; margin-left: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
}

/* ─── 區塊標題、分類頁 ─── */
.eyebrow { font: 600 10px/1 var(--lab); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.coll h1, .page h1 { font: 700 clamp(44px, 7vw, 84px)/.95 var(--disp); letter-spacing: .01em; text-transform: uppercase; }
.coll__line { font-size: 13px; color: var(--mute); }
.coll__face { opacity: .3; }
.crumbs { font: 600 10px/1 var(--lab); letter-spacing: .16em; text-transform: uppercase; }
.sec__hd h2 { font: 700 clamp(30px, 4vw, 44px)/1 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.sec__hd h2 em { font: 600 10px/1 var(--lab); letter-spacing: .24em; font-style: normal; color: var(--mute); text-transform: uppercase; }
.sec__more { font: 600 11px/1 var(--lab); letter-spacing: .14em; text-transform: uppercase; }
.tabs .tab, .tab { border-radius: 0; font: 600 11px/1 var(--lab); letter-spacing: .12em; text-transform: uppercase; }
.bar { background: var(--glass); }
.bar__btn { border-radius: 0; font: 600 11px/1 var(--lab); letter-spacing: .12em; text-transform: uppercase; height: 34px; }
.bar__btn i { background: var(--ink); border-radius: 0; }
.bar__n { font: 600 11px/1 var(--lab); letter-spacing: .12em; }
.bar__view { border-radius: 0; border: 0; }
.bar__view button { border-radius: 0; }

/* 商品格：黑底上的白卡，品名用瘦高大寫，價格小白字 */
.card__img { border: 0; border-radius: 4px; background: #f4f3ef; }
.card:hover .card__img { border-color: transparent; box-shadow: none; }
.card__meta { font: 600 9.5px/1 var(--lab); letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; color: var(--mute); }
.card__name { font: 700 20px/1.1 var(--disp); letter-spacing: .03em; text-transform: uppercase; margin-top: 7px; font-synthesis: none; }
.card__price { font: 600 12px/1 var(--lab); letter-spacing: .04em; color: var(--ink); margin-top: 7px; }
.card__price s { color: var(--mute); }
.tag { border-radius: 2px; font: 700 9.5px/1 var(--lab); letter-spacing: .14em; text-transform: uppercase; background: #0b0b0c; color: #f1efe8; }
.tag--hot { background: #0b0b0c; color: #f1efe8; }
.driver, .kind { border-radius: 4px; }
.promise { border-radius: 4px; }
.promise b { font: 700 22px/1.1 var(--disp); letter-spacing: .03em; font-synthesis: none; }

/* ─── 商品頁 ─── */
.pd__track { border: 0; border-radius: 4px; background: #f4f3ef; }
.pd__thumbs button { border-radius: 4px; border-color: transparent; background: #f4f3ef; }
.pd__thumbs button.is-on { border-color: var(--ink); }
.pd__eyebrow, .pd__eyebrow a:first-child { font: 600 10px/1.4 var(--lab); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); font-style: normal; }
.pd__name { font: 700 clamp(38px, 4.6vw, 60px)/.95 var(--disp); letter-spacing: .01em; text-transform: uppercase; font-synthesis: none; }
.pd__sub { font-size: 12px; }
.pd__price { font: 700 19px/1 var(--lab); }
.pd__label { font: 600 10px/1 var(--lab); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.opt { border-radius: 4px; font: 600 12px/1 var(--lab); padding: 11px 16px; min-width: 52px; justify-content: center; }
.opt.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
.opt--img { border-radius: 4px; }
.qty { border-radius: 4px; }
.btn { border-radius: 4px; font: 700 14px/1 "Noto Sans TC", var(--lab); letter-spacing: .04em; }
.btn:not(:disabled):hover { box-shadow: none; opacity: .86; }
.btn--line { border-color: var(--ink); }
.pill { border-radius: 4px; font-family: var(--lab); font-weight: 600; }
.pill--light:hover { box-shadow: none; opacity: .86; }
.stock { font: 600 10px/1 var(--lab); letter-spacing: .14em; text-transform: uppercase; }
.perks { font-size: 12px; }
.acc summary { font: 600 10px/1 var(--lab); letter-spacing: .2em; text-transform: uppercase; }
.spec dt { font: 600 10px/1.6 var(--lab); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.spec dd { font-size: 12px; }
.sizes table { font-size: 12px; }
.sizes th { font-weight: 700; }

/* ─── 購物車、選單、頁尾 ─── */
.drawer__hd b, .sheet__hd b { font: 700 24px/1 var(--disp); text-transform: uppercase; letter-spacing: .03em; font-synthesis: none; }
.menu__big { font: 700 44px/1.05 var(--disp); text-transform: uppercase; letter-spacing: .02em; font-synthesis: none; }
.menu__lab { font: 600 10px/1 var(--lab); letter-spacing: .24em; text-transform: uppercase; }
.menu__drivers a { font: 600 13px/1 var(--lab); border-radius: 4px; }
.ft { margin-top: 64px; border-top: 1px solid var(--line); }
.ft::before { display: none; }
.ft__mark span { display: none; }
.ft__mark img { display: block; height: 30px; width: auto; }
.ft__col p { font: 600 10px/1 var(--lab); letter-spacing: .24em; text-transform: uppercase; }
.ft__col a { font-size: 13px; }
.ft__fine p { font: 400 11px/1.7 var(--lab); color: var(--mute); }

/* ─── 查詢訂單（我的訂單頁） ─── */
.lookup { max-width: 440px; margin: 8px 0 36px; }
.lookup h2, .lookup__mine { margin: 0 0 8px; font: 700 26px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .03em; font-synthesis: none; }
.lookup .muted { font-size: 13px; margin: 0 0 18px; }
.lookup .err { margin: 0 0 12px; }
.lookup .btn { width: 100%; }

/* ─── DRIVER ID 識別證（/id；規則在 netlify/shared/members.mjs）───
 * 卡片＝一張黑底白字的證：大號碼、三個字母、名字，下面一排小字，最底一條條碼。沒有彩色。
 * 還沒填名字的卡（.idc--blank）整張變淡，填一格亮一格。 */
.idp h1 { font: 700 clamp(34px, 5vw, 54px)/1 var(--disp); letter-spacing: .02em; margin: 0 0 12px; font-synthesis: none; }
.idp__grid { display: grid; gap: 28px; align-items: start; margin-top: 18px; }
@media (min-width: 860px) { .idp__grid { grid-template-columns: minmax(0, 380px) minmax(0, 440px); gap: 56px; } }
.idp .lookup { margin: 0; max-width: 440px; }
.idp__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.idp__fine { font-size: 12px; margin-top: 14px; }
.idp__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.idp__acts .btn { width: auto; padding: 0 20px; height: 44px; }
.idc { position: relative; aspect-ratio: 5 / 7; max-width: 380px; padding: 22px 22px 20px; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #1d1d20 0%, #0e0e10 60%); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 30px 60px -30px #000; color: var(--ink); }
.idc::before { content: ""; position: absolute; left: 50%; top: 10px; width: 46px; height: 8px; margin-left: -23px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line2); }
.idc__top { display: flex; justify-content: space-between; margin-top: 14px; font: 600 9.5px/1 var(--lab); letter-spacing: .26em; color: var(--mute); }
.idc__no { margin-top: auto; font: 400 clamp(120px, 34vw, 168px)/.8 var(--disp); letter-spacing: -.01em; }
.idc__code { font: 400 44px/1 var(--disp); letter-spacing: .14em; margin-top: 6px; color: transparent; -webkit-text-stroke: 1px var(--ink); }
.idc__name { font: 700 20px/1.2 "Noto Sans TC", var(--lab); margin-top: 14px; overflow-wrap: anywhere; }
.idc__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line2); }
.idc__meta dt { font: 600 9px/1 var(--lab); letter-spacing: .2em; color: var(--mute); }
.idc__meta dd { margin: 6px 0 0; font: 600 12px/1.2 var(--lab); overflow-wrap: anywhere; }
.idc__bar { height: 26px; margin-top: 16px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 13px, transparent 13px 15px); }
.idc--blank .idc__no, .idc--blank .idc__code, .idc--blank .idc__name { opacity: .32; }
.idlog { margin-top: 56px; max-width: 880px; }
.idlog h2 { font: 700 30px/1 var(--disp); letter-spacing: .03em; margin: 0 0 14px; font-synthesis: none; }
.idlog h2 em { font: 600 10px/1 var(--lab); letter-spacing: .24em; font-style: normal; color: var(--mute); margin-left: 10px; }
.idlog .orders a > span { display: flex; flex-direction: column; gap: 5px; }
.idlog .orders a > span:last-child { text-align: right; flex: none; margin-left: 16px; }
.idlog .orders small { color: var(--mute); font-size: 12px; }
.idlog .btn { width: auto; padding: 0 22px; margin-top: 12px; display: inline-flex; }
/* 首頁上的識別證入口 */
.idt { position: relative; display: block; padding: 22px 56px 22px 22px; text-decoration: none; color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; background: linear-gradient(135deg, #18181b, var(--bg)); }
.idt small { font: 600 10px/1 var(--lab); letter-spacing: .26em; color: var(--mute); }
.idt b { display: block; font: 400 clamp(34px, 6vw, 56px)/1 var(--disp); letter-spacing: .02em; margin: 8px 0 6px; }
.idt span { font-size: 13px; color: var(--ink2); }
.idt i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 20px; transition: transform .3s var(--ease); }
.idt:hover i { transform: translate(6px, -50%); }
/* 識別證上的大頭照：右上角一張正方形，保留原本的顏色 */
.idc__ava { position: absolute; right: 22px; top: 56px; width: 40%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line2); background: #000; }
.idp__ava { display: block; margin: 0 0 14px; cursor: pointer; }
.idp__ava .btn { width: 100%; height: 46px; }
/* 號碼的大小跟著卡片寬度走（不是跟著螢幕）：電腦上卡片比較窄，照螢幕算會頂到大頭照 */
.idc { container-type: inline-size; }
.idc__no { font-size: 42cqw; }
/* 等級（ROOKIE → CONTENDER → PODIUM → CHAMPION）：卡上左上角一顆描邊的章；頁面上四格進度 */
.idc__tier { align-self: flex-start; margin-top: 14px; padding: 6px 10px 5px; border: 1px solid var(--ink); border-radius: 3px; font: 700 10px/1 var(--lab); letter-spacing: .22em; }
.idc__meta { grid-template-columns: 1fr 1fr; row-gap: 12px; }
.idtier { margin-top: 22px; padding: 18px; border: 1px solid var(--line2); border-radius: 4px; max-width: 440px; }
.idtier__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.idtier__hd b { font: 400 30px/1 var(--disp); letter-spacing: .04em; }
.idtier__hd span { font-size: 12px; color: var(--mute); }
.idtier__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.idtier__steps span { font: 600 8.5px/1 var(--lab); letter-spacing: .12em; color: var(--mute); }
.idtier__steps i { display: block; height: 4px; margin-bottom: 7px; background: var(--line2); }
.idtier__steps .is-on { color: var(--ink); }
.idtier__steps .is-on i { background: var(--ink); }
.idtier .muted { font-size: 12px; margin: 0; }
/* 卡片重排（2026-10-05 V：「頭像的比例位置怪怪的」）：上半部左邊是正方形大頭照、佔卡片寬度將近一半，
 * 右邊上面等級章、下面大號碼，兩邊底線對齊。照片不再浮在右上角。沒放照片時是一格淡淡的框。 */
.idc__hero { display: grid; grid-template-columns: 47% 1fr; gap: 14px; margin-top: 16px; align-items: stretch; }
.idc__ava { position: static; width: 100%; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); overflow: hidden; display: grid; place-items: center; }
.idc__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idc__ava span { font: 600 9px/1 var(--lab); letter-spacing: .24em; color: var(--mute); opacity: .6; }
.idc__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-width: 0; }
.idc__tier { margin-top: 0; align-self: flex-end; }
.idc__no { margin: 0; font-size: 40cqw; line-height: .78; text-align: right; }
.idc__code { margin-top: 18px; }
.idc__meta { margin-top: auto; }
.idc__name + .idc__meta { margin-top: auto; }
.idc { aspect-ratio: 5 / 7.4; }
/* 卡片高度跟著內容走，名字跟下面那排小字之間不要留一大片空白 */
.idc { aspect-ratio: auto; }
.idc__meta, .idc__name + .idc__meta { margin-top: 22px; }
.idc__no { align-self: flex-end; }
/* ─── 識別證 Y1 排版（2026-10-06 V 選的）───
 * 上：照片｜等級章＋號碼。中：代碼＋名字｜最喜歡的車手、車隊、賽道（靠右三行）。下：圓點 QR code｜編號、加入、場次、等級。
 * QR code 是直接點在黑卡上的白色圓點（沒有白色底塊）；顏色用 currentColor，跟卡上的字同一個白。 */
.idc__mid { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 20px; align-items: start; }
.idc__mid .idc__code { margin-top: 0; }
.idc__fav { margin: 0; display: flex; flex-direction: column; gap: 12px; text-align: right; min-width: 0; }
.idc__fav dt { font: 600 9px/1 var(--lab); letter-spacing: .2em; color: var(--mute); }
.idc__fav dd { margin: 5px 0 0; font: 400 7.2cqw/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.idc__foot { display: grid; grid-template-columns: 30% 1fr; gap: 18px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line2); }
.idc__qr { display: block; width: 100%; height: auto; color: var(--ink); }
.idc__foot .idc__meta, .idc__name + .idc__meta { margin: 0; padding: 0; border: 0; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.idc--blank .idc__fav, .idc--blank .idc__qr { opacity: .32; }
/* style.css 對所有 svg 都加了描邊（給圖示用的），QR code 的圓點會被描成一坨、掃不出來：這裡關掉，只留三個角的框線 */
.idc__qr { fill: currentColor; stroke: none; stroke-width: 0; }
.idc__qr rect[fill="none"] { fill: none; stroke: currentColor; stroke-width: 1; }

/* ─── F1 起跑燈＝選單鈕（左上角三顆燈，從 S3CTOR 搬過來；這裡亮的是白色，不是紅色）───
 * 平常是三個空心圓；按下去一顆一顆變實心，全亮後一起熄掉，選單才打開。選單開著時三顆都亮著，再按一次關。 */
.lights { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 0; margin: 0; background: none; border: 0; cursor: pointer; z-index: 2; }
.lights span { display: block; width: 9px; height: 9px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .14s ease, box-shadow .14s ease, transform .3s var(--ease); }
.lights span.on, .hd.menu-open .lights span { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 10px rgba(241, 239, 232, .55); }
.lights:hover span { transform: scale(1.12); }
.lights:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
/* 版面：燈在最左，電腦上導覽連結接在燈的右邊；手機上只有燈、字標置中、右邊搜尋與購物車 */
.hd__in { grid-template-columns: 1fr auto 1fr; }
.nav { grid-column: 1; margin-left: 46px; }
@media (max-width: 959px) { .hd__in { grid-template-columns: 1fr auto 1fr; } .hd__mark { grid-column: 2; } .hd__tools { grid-column: 3; } }
/* 選單面板：從左邊滑出來（燈在左邊，從右邊滑出來會對不上）；底色跟著夜場，不是原本寫死的白 */
.menu__panel { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--line2); background: var(--panel); transform: translateX(-100%); }
.menu.is-open .menu__panel { transform: none; }

/* ─── 黑底收尾（2026-10-06 逐頁檢查抓到的）：style.css 裡少數寫死淺色的地方，在夜場會變成白塊或看不到的字 ─── */
.tab.is-on small { color: rgba(11, 11, 12, .6); }                           /* 亮底分頁上的數量小字 */
.switch input:checked + i::after { background: var(--bg); }
.skel i { background: linear-gradient(90deg, var(--card), #232327, var(--card)); background-size: 200% 100%; }   /* 載入中的骨架 */
.pd__nav { background: rgba(11, 11, 12, .72); color: var(--ink); border-color: var(--line2); }                 /* 商品照左右箭頭 */
.pd__count { background: rgba(11, 11, 12, .72); color: var(--ink); }                                           /* 商品照「1 / 3」 */
.sending { background: rgba(11, 11, 12, .86); color: var(--ink); }                                             /* 送出訂單時的整頁遮罩 */
.bankcard { background: linear-gradient(140deg, #1f1f22, #0e0e10); border: 1px solid var(--line2); color: var(--ink); }   /* 訂單頁的轉帳卡：原本是舊的紫色漸層 */
.bankcard__mark { color: var(--mute); }
.bankcard .copy { color: var(--ink); }
.toast { color: var(--bg); }
.freebar b { background: var(--ink); box-shadow: none; }                    /* 免運進度條：原本是紫色漸層 */
.crumbs > * + *::before { color: var(--mute); }
.in::placeholder { color: var(--mute); }
.case { background: radial-gradient(120% 90% at 50% 0%, #1d1d20 0%, #131315 55%, var(--bg) 100%); }   /* 舊首頁的展示框（現在沒用到，留著也不能是白的） */

/* ─── 首頁第二版（2026-10-06 V：「主頁做得更好」）───
 * 第一屏 → 一段品牌的話配第二張照片 → 服飾 → 識別證一整塊（示範卡）→ 依車手逛 → 配件 → 三個承諾。區塊捲到才淡入。 */
.sec { margin-top: clamp(64px, 9vw, 120px); }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.nstate { max-width: var(--max); margin: clamp(56px, 8vw, 110px) auto 0; padding: 0 var(--pad); display: grid; gap: 28px; align-items: center; }
.nstate__txt h2 { margin: 14px 0 16px; font: 900 clamp(26px, 4.2vw, 46px)/1.25 "Noto Sans TC", sans-serif; letter-spacing: .01em; }
.nstate__txt p:not(.eyebrow) { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.9; color: var(--ink2); }
.nlink { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; font: 700 13px/1 "Noto Sans TC", sans-serif; letter-spacing: .06em; }
.nlink i { font-style: normal; transition: transform .3s var(--ease); }
.nlink:hover i { transform: translateX(6px); }
.nstate__ph { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; background: #000; }
.nstate__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(.3) contrast(1.06); transition: transform 1.2s var(--ease); }
.nstate__ph:hover img { transform: scale(1.04); }
@media (min-width: 960px) { .nstate { grid-template-columns: 1fr 46%; gap: 72px; } .nstate__ph { aspect-ratio: 5 / 6; } }
.idshow { display: grid; gap: 32px; align-items: center; }
.idshow__card { display: block; text-decoration: none; color: inherit; max-width: 360px; width: 100%; justify-self: center; transition: transform .6s var(--ease); }
.idshow__card:hover { transform: translateY(-6px) rotate(-1deg); }
.idshow__card .idc { max-width: none; }
.idshow__txt h2 { margin: 12px 0 14px; font: 400 clamp(44px, 7vw, 84px)/.9 var(--disp); letter-spacing: .02em; }
.idshow__txt p:not(.eyebrow) { margin: 0; max-width: 480px; font-size: 15px; line-height: 1.9; color: var(--ink2); }
.idshow__txt ul { margin: 18px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.idshow__txt li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.idshow__txt li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.idshow__txt .btn { width: auto; display: inline-flex; padding: 0 28px; }
@media (min-width: 860px) { .idshow { grid-template-columns: minmax(0, 380px) 1fr; gap: 80px; } .idshow__card { justify-self: start; } }
.nstate__txt h2, .idshow__txt p, .nstate__txt p { text-wrap: balance; }
/* 頁尾的聯絡方式：信箱與 Instagram，中間隔一個點 */
.ft__contact a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 1px; }
.ft__contact a:hover { color: var(--ink); border-color: var(--ink); }
.ft__contact a + a::before { content: "·"; margin: 0 10px; color: var(--mute); border: 0; display: inline-block; text-decoration: none; }

/* ─── 2026-10-06 V 用手機看完的三件事 ─── */
/* 1) 起跑燈是紅的：沒亮＝暗紅，亮＝F1 起跑燈那種亮紅帶光暈。整站只有這三顆燈有顏色。 */
.lights span { background: #5c0d0a; box-shadow: inset 0 0 0 1.5px #a3120c; }
.lights span.on, .hd.menu-open .lights span { background: #ff1e14; box-shadow: inset 0 0 0 1.5px #ff1e14, 0 0 12px rgba(255, 30, 20, .75), 0 0 2px #ff6a5e; }
/* 2) 選單不蓋住最上面那條橫幅：整層從頁首底下開始（位置是 open() 量的），手機上面板滿寬，右邊不再露一截 */
.menu { top: var(--menu-top, 0); }
.menu__body { padding-top: 22px; }
@media (max-width: 599px) { .menu__panel { width: 100%; border-right: 0; } }
/* 3) 識別證入口：頁首右上角的圖示、選單最上面那一大顆、首頁第一屏的第二顆鍵 */
.icon--id { text-decoration: none; color: var(--ink); display: inline-grid; place-items: center; }
.menu__id { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 26px; padding: 16px 18px; background: var(--ink); color: var(--bg); text-decoration: none; border-radius: 4px; }
.menu__id small { display: block; font: 600 9.5px/1 var(--lab); letter-spacing: .24em; opacity: .6; }
.menu__id b { display: block; margin-top: 7px; font: 900 24px/1 "Noto Sans TC", sans-serif; }
.menu__id i { font: 700 13px/1 "Noto Sans TC", sans-serif; font-style: normal; white-space: nowrap; }
.ncta--line { margin-top: 10px; background: transparent; color: var(--ink); border: 1px solid var(--line2); }
.ncta--line:hover { border-color: var(--ink); opacity: 1; }
@media (max-width: 420px) { .hd__tools .icon { width: 36px; height: 36px; } .hd__tools { gap: 0; } }
/* 頁首三欄嚴格等寬，手寫字標才會在正中間（右邊多了一顆識別證圖示之後，左右兩欄的內容不一樣寬） */
.hd__in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
@media (max-width: 959px) { .hd__in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .hd__tools { gap: 0; } }

/* ════════ C：圓角＋去框（2026-10-06 V 選的；她說「整體方格太多了，有點太邊邊角角」）════════
 * 規則：畫面上只留三種形狀——按鈕、商品圖、標籤——而且都是圓的；其餘的外框拿掉，改用留白或一條細線。
 * 這一段在檔案最後面，專門蓋掉上面那些 4px 直角與 1px 外框。之後加新元件照這個規則：先問「這個框非要不可嗎」。
 * 不動的：識別證卡片（它是一張證，要有邊）、輸入欄位的外框（沒有框看不出可以打字）。 */
:root { --r: 20px; --chip: rgba(255, 255, 255, .09); }
.btn, .ncta, .pill, .lookup .btn { border-radius: 999px; }
.btn--line { border: 0; background: var(--chip); }
.btn--line:not(:disabled):hover { background: rgba(255, 255, 255, .16); }
.opt { border-radius: 999px; border-color: transparent; background: var(--chip); }
.opt.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.opt--img { border-radius: 16px; }
.qty { border-radius: 999px; border-color: transparent; background: var(--chip); }
.tabs .tab, .tab { border-radius: 999px; border-color: transparent; background: var(--chip); }
.tab.is-on { background: var(--ink); color: var(--bg); }
.bar__btn { border-radius: 999px; border-color: transparent; background: var(--chip); padding: 0 16px; }
.bar__btn i, .bar__view, .bar__view button { border-radius: 999px; }
.card__img { border-radius: 20px; }
.pd__track { border-radius: 24px; }
.pd__thumbs button { border-radius: 12px; }
.tag, .tag--hot { border-radius: 999px; }
.driver, .kind { border-radius: 22px; }
.menu__drivers a { border-radius: 999px; border: 0; background: var(--chip); }
.menu__id { border-radius: 20px; }
.mega { border-radius: 22px; }
.promises { gap: 0; }
.promise { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0; background: none; }
.promise:first-child { border-top: 0; }
.idtier { border: 0; background: rgba(255, 255, 255, .06); border-radius: 22px; }
.idc { border-radius: 22px; }
.in { border-radius: 14px; }
.pay, .bankcard { border-radius: 22px; }
.picked { border-radius: 16px; border-color: var(--line2); }
.copy { border-color: transparent; background: var(--chip); }
.addon__btn { border: 0; background: var(--chip); }
.addon__img { border-radius: 16px; border: 0; }
.nstate__ph { border-radius: 24px; }
.mini__img, .mini__img img { border-radius: 12px; }
.ncta--line { border: 0; background: var(--chip); }

/* ─── 首頁 P3（V 選的）：照片＋RACE EVERYDAY 下面，兩個大入口（衣服／配件）＋一條識別證 ─── */
.doors { max-width: var(--max); margin: 16px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.door { display: block; border-radius: 22px; background: #f4f3ef; color: #0b0b0c; padding: 12px 12px 16px; text-decoration: none; transition: transform .5s var(--ease); }
.door:hover { transform: translateY(-4px); }
.door img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.door b { display: block; margin-top: 6px; font: 900 20px/1 "Noto Sans TC", sans-serif; }
.door span { display: block; margin-top: 7px; font-size: 12px; color: #55534e; }
.idbar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 22px; background: var(--chip); color: var(--ink); text-decoration: none; font: 700 15px/1 "Noto Sans TC", sans-serif; transition: background .3s; }
.idbar:hover { background: rgba(255, 255, 255, .16); }
.idbar small { display: block; margin-bottom: 8px; font: 600 9.5px/1 var(--lab); letter-spacing: .24em; color: var(--mute); }
.idbar i { font-style: normal; transition: transform .3s var(--ease); }
.idbar:hover i { transform: translateX(6px); }
@media (min-width: 960px) {
  .doors { grid-template-columns: 1fr 1fr 1.1fr; gap: 16px; margin-top: 28px; }
  .door img { aspect-ratio: 4 / 3; }
  .door b { font-size: 26px; }
  .idbar { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; padding: 26px; font-size: 24px; }
}

/* ─── 建立識別證（還沒登入的人看到的那一頁；2026-10-06 V：「沒有看到怎麼建立」）───
 * 手機上第一屏一定要看得到可以填的欄位：標題 → 名字、號碼、三個字母 → 卡片（當場跟著變）→ 最愛 → 信箱 → 按鈕。
 * 卡片在這一頁縮小一點，不然一張卡就佔滿整個螢幕、把欄位擠到看不見（原本就是這樣出事的）。 */
.idnew { max-width: 460px; margin-top: 14px; }
.idnew h1 { margin-bottom: 10px; }
.idnew > .muted { margin: 0 0 20px; font-size: 13.5px; line-height: 1.8; }
.idnew__card { max-width: 300px; margin: 8px auto 22px; }
.idnew .btn { width: 100%; margin-top: 4px; }
.idnew__steps { margin: 16px 0 18px; padding-left: 1.3em; display: grid; gap: 12px; font-size: 15px; line-height: 1.7; }
.idnew__steps b { font-weight: 700; }
.idnew__go { font-size: 16px; line-height: 1.7; margin: 14px 0 0; }
.idnew__go b { font-weight: 700; word-break: break-all; }

/* ─── 建立識別證 第二版（2026-10-07）：卡片釘在上面，往下填每一格都看得到它在變 ───
 * 手機：卡片是縮小版（不顯示最下面 QR 那一段），釘在頁首底下；欄位在它下面捲。電腦：左邊欄位、右邊整張卡片釘著。
 * 被釘住的那一條有底色，欄位捲到它後面不會透出來。輸入欄位有 scroll-margin，鍵盤跳出來時不會被卡片蓋住。 */
.idnew { max-width: none; margin-top: 10px; }
.idnew__head h1 { margin-bottom: 8px; }
.idnew__head .muted { margin: 0 0 6px; font-size: 13.5px; line-height: 1.8; max-width: 460px; }
.idnew__stick { position: sticky; top: var(--hd); z-index: 6; margin: 0 calc(var(--pad) * -1); padding: 12px var(--pad) 14px; background: linear-gradient(180deg, var(--bg) 82%, rgba(11, 11, 12, 0)); }
.idnew__card { max-width: 232px; margin: 0 auto; }
.idnew__fields { max-width: 460px; margin: 4px auto 0; }
.idnew__fields .in { scroll-margin-top: calc(var(--hd) + 330px); }
.idnew__step { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; font: 900 16px/1 "Noto Sans TC", sans-serif; }
.idnew__step b { font: 400 22px/1 var(--disp); letter-spacing: .04em; color: var(--mute); }
.idnew__step small { margin-left: auto; font: 500 11px/1 "Noto Sans TC", sans-serif; color: var(--mute); }
.idnew__photo { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.idnew__thumb { flex: none; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--chip); display: grid; place-items: center; }
.idnew__thumb:empty::after { content: "+"; font: 400 26px/1 var(--lab); color: var(--mute); }
.idnew__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idnew__pick { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--chip); font: 700 13px/1 "Noto Sans TC", sans-serif; }
.idnew .btn { width: 100%; margin-top: 22px; }
.idnew__sent { padding-top: 6px; }
@media (min-width: 900px) {
  .idnew { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 380px); column-gap: 80px; align-items: start; }
  .idnew__head { grid-column: 1; }
  .idnew__fields { grid-column: 1; margin: 0; }
  .idnew__stick { grid-column: 2; grid-row: 1 / span 3; top: calc(var(--hd) + 28px); margin: 0; padding: 0; background: none; }
  .idnew__card { max-width: 360px; }
  .idnew__fields .in { scroll-margin-top: calc(var(--hd) + 40px); }
}

/* 建立頁釘住的那張卡＝建立完拿到的那一張，整張等比例縮小（2026-10-07 V：「顯示的是有點正方形的，我想要它跟後面拿到的 driver id 一樣，有加入日期有 id」）。
 * 用 zoom 整張縮，不逐項改字級——逐項改就會變成另一張長得不一樣的卡（上一版就是這樣變成正方形的）。 */
.idnew__card { max-width: none; width: 236px; margin: 0 auto; }
.idnew__card .idc { zoom: .62; width: 380px; max-width: none; }
.idnew__fields .in { scroll-margin-top: calc(var(--hd) + 410px); }
@media (min-width: 900px) {
  .idnew__card { width: 360px; }
  .idnew__card .idc { zoom: 1; width: auto; }
  .idnew__fields .in { scroll-margin-top: calc(var(--hd) + 40px); }
}
.idnew__head h1 { font-size: clamp(32px, 3.6vw, 46px); white-space: nowrap; }

/* ─── 識別證卡片最下面：一排四格＋白色條碼標籤（2026-10-07 V：QR code 換回條碼，網站上的卡與申請畫面都換）───
 * 條碼一定是白底黑條才掃得到，所以這一塊是黑卡上唯一的白色區塊，做成一張貼在卡上的標籤。
 * style.css 對所有 svg 都加描邊（給圖示用的），條碼的線會被描粗、掃不出來：這裡關掉。 */
.idc__foot { display: block; }
.idc__foot .idc__meta, .idc__name + .idc__meta { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; }
.idc__bc { margin-top: 16px; padding: 10px 14px 7px; background: #f4f3ef; border-radius: 8px; }
.idc__bc svg { display: block; width: 100%; height: 40px; fill: #0b0b0c; stroke: none; stroke-width: 0; }
.idc__bc span { display: block; margin-top: 5px; text-align: center; color: #0b0b0c; font: 600 9.5px/1 var(--lab); letter-spacing: .42em; }
.idc--blank .idc__bc { opacity: .32; }

/* ─── 識別證＝白色通行證，畫在 canvas 上（2026-10-07；app.js 的 idDrawCard）───
 * 網站上每一張卡都是這個 <canvas class="idcv">，寬度跟著外面的框，高度自己等比例。陰影用 CSS 加（畫布本身是去掉四個圓角的白卡）。
 * 上面那些 .idc… 的規則是舊的黑色 HTML 卡片留下來的，已經沒有元素在用。 */
.idcv { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.idnew__card { width: 214px; }
.idnew__fields .in { scroll-margin-top: calc(var(--hd) + 400px); }
.idp__grid > [data-id-card] { max-width: 360px; width: 100%; margin: 0 auto; }
@media (min-width: 900px) { .idnew__card { width: 340px; } .idnew__fields .in { scroll-margin-top: calc(var(--hd) + 40px); } }
@media (min-width: 860px) { .idp__grid > [data-id-card] { margin: 0; } }
.idshow__card { max-width: 330px; }

/* ─── 識別證那一條（2026-10-10；index.html 的 [data-idstrip]，規則在 app.js 的 paintIdStrip） ─── */
.idstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
  padding: 8px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
.idstrip[hidden], body.is-focus .idstrip { display: none; }
.idstrip__l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.idstrip b { font: 400 19px/1 var(--disp); letter-spacing: .08em; white-space: nowrap; }
.idstrip em { font: 500 11.5px/1 var(--lab); font-style: normal; letter-spacing: .1em; color: var(--mute); white-space: nowrap; }
.idstrip.is-mine em { font: 400 18px/1 var(--disp); letter-spacing: .1em; color: var(--ink); }
.idstrip.is-mine b { color: var(--mute); }
@media (max-width: 430px) { .idstrip.is-mine b { font-size: 13px; letter-spacing: .14em; } .idstrip.is-mine .idstrip__l { gap: 8px; } }
.idstrip__go { flex: none; background: var(--ink); color: var(--bg); font: 700 12.5px/1 var(--lab); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }

/* ─── 首頁 D：一件一個畫面（2026-10-10；app.js 的 homeD，設計說明在那裡） ───
   左右滑的那一排是整個首頁的主角，所以第一個畫面要放得下：車手一排、圖、名字價格、尺寸、加入鍵。 */
.dh { padding-bottom: 96px; }
.dh-meta a, .dh-id, .dh-bar a { text-decoration: none; }
.dh-chips { display: flex; gap: 8px; overflow-x: auto; max-width: var(--max); margin: 0 auto; padding: 12px var(--pad) 2px; scrollbar-width: none; }
.dh-chips::-webkit-scrollbar { display: none; }
.dh-chips button { flex: none; border: 0; cursor: pointer; padding: 8px 15px; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 13.5px/1.2 var(--lab); }
.dh-chips button.is-on { background: var(--ink); color: var(--bg); }
.dh-chips small { font: inherit; font-weight: 500; opacity: .6; margin-left: 5px; }
.dh-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; max-width: var(--max); margin: 0 auto; padding: 12px var(--pad) 0; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.dh-track::-webkit-scrollbar { display: none; }
.dh-s { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
.dh-k { font: 500 11px/1 var(--lab); letter-spacing: .24em; color: var(--mute); margin-bottom: 8px; }
.dh-im { display: block; background: #fbfaf8; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1.1; }
.dh-im img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.12); }
.dh-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 10px; margin-top: 11px; }
.dh-meta small { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 500 11px/1.4 var(--lab); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.dh-meta small a { letter-spacing: .04em; text-transform: none; color: var(--ink2); font-size: 12.5px; }
.dh-meta b { font: 400 42px/.95 var(--disp); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-meta b.is-long { font-size: 27px; line-height: 1.05; white-space: normal; }
.dh-meta > span { font-size: 15px; font-weight: 700; padding-bottom: 4px; white-space: nowrap; }
.dh-meta s { color: var(--mute); font-weight: 400; font-size: 12px; text-decoration: line-through; margin-left: 5px; }
.dh-sizes { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin-top: 11px; }
.dh-sizes button { border: 0; cursor: pointer; height: 40px; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 13px/1 var(--lab); }
.dh-sizes button.is-on { background: var(--ink); color: var(--bg); }
.dh-sizes button:disabled { opacity: .3; text-decoration: line-through; cursor: default; }
.dh-add { display: block; width: 100%; margin-top: 8px; height: 48px; border: 0; cursor: pointer; border-radius: 999px; font: 700 14.5px/1 var(--lab); background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line2); }
.dh-add.is-ready { background: var(--ink); color: var(--bg); box-shadow: none; }
.dh-add.is-done { background: var(--ok); color: var(--bg); box-shadow: none; }
.dh-prog { height: 2px; max-width: calc(var(--max) - var(--pad) * 2); margin: 16px var(--pad) 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.dh-prog i { display: block; height: 100%; width: 8%; background: var(--ink); transition: width .25s; }
.dh-nav { display: none; }
.dh .sec { padding-top: 26px; padding-bottom: 8px; }
.dh-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.dh-thumbs button { display: block; width: 100%; min-width: 0; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.dh-thumbs img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #fbfaf8; border-radius: 10px; }
.dh-thumbs b { display: block; font: 400 15px/1.2 var(--disp); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-thumbs button.is-on img { box-shadow: 0 0 0 2px var(--ink); }
/* 限時販售（2026-10-12）：編號那一行的右邊寫到什麼時候；時間到了或賣完了，照片壓暗、中間一行 SOLD OUT，尺寸與按鈕都按不了 */
.dh-k { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dh-lim { font: 700 11px/1 var(--lab); letter-spacing: .14em; font-style: normal; color: var(--warn); white-space: nowrap; }
.dh-lim i { font-style: normal; font-weight: 500; letter-spacing: .04em; color: var(--ink2); margin-left: 8px; }
.dh-im { position: relative; }
.dh-out { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 11, 12, .58); color: #f1efe8; font: 400 34px/1 var(--disp); letter-spacing: .1em; }
.dh-s.is-out .dh-meta, .dh-s.is-out .dh-sizes { opacity: .45; }
.dh-add:disabled { cursor: default; }
.dh-thumbs button.is-out img { opacity: .35; }
.dh-id { display: flex; align-items: center; justify-content: space-between; max-width: calc(var(--max) - var(--pad) * 2); margin: 22px var(--pad) 0; padding: 16px 18px; border-radius: 16px; background: var(--card); }
.dh-id small { display: block; font: 500 11px/1.5 var(--lab); letter-spacing: .22em; color: var(--mute); }
.dh-id small em { font-style: normal; color: var(--ink2); margin-left: 8px; letter-spacing: .08em; }
.dh-id b { font: 900 18px/1.3 var(--serif-tc); }
.dh-id i { font-style: normal; font-size: 20px; }
.dh-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px var(--shadow), inset 0 0 0 1px var(--line); transform: translateY(160%); transition: transform .28s; }
.dh-bar.is-in { transform: none; }
.dh-bar__t { flex: 1; min-width: 0; }
.dh-bar__t b { display: block; font-size: 14px; }
.dh-bar__t span { display: block; font-size: 12px; color: var(--ink2); }
.dh-bar__t span.is-free { color: var(--ok); }
.dh-bar__go { flex: none; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 11px 20px; }
@media (prefers-reduced-motion: reduce) { .dh-bar, .dh-prog i { transition: none; } }
@media (min-width: 900px) {
  .dh-chips { justify-content: center; padding-top: 22px; }
  .dh-track { gap: 22px; padding-top: 20px; }
  .dh-s { flex-basis: 360px; }
  .dh-prog, .dh-id { margin-left: auto; margin-right: auto; }
  .dh-nav { display: flex; gap: 8px; justify-content: flex-end; max-width: var(--max); margin: 0 auto; padding: 14px var(--pad) 0; }
  .dh-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--card); color: var(--ink); font-size: 18px; }
  .dh-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .dh-bar { left: auto; right: 28px; width: 380px; }
}