/* 長輩友善：字 20px 起、按鈕至少 60px 高、高對比、不用滑動手勢、不靠滑鼠移上去才出現的東西 */
:root {
  --bg: #fffaf2;
  --card: #ffffff;
  --ink: #1f1a17;
  --muted: #5b524b;
  --brand: #a8341f;
  --brand-dark: #7d2414;
  --line: #06c755;
  --line-dark: #04a347;
  --border: #e7dccd;
  --focus: #1d5fd1;
  --radius: 16px;
  font-size: 20px;
}
html.big-text { font-size: 25px; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-dark); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
main { padding-bottom: 180px; }

/* ── 頁首 ── */
.top {
  background: var(--brand);
  color: #fff;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.top .wrap { display: flex; align-items: center; gap: 10px; min-height: 72px; }
.top .shop { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; flex: 1; line-height: 1.3; }
.top button, .top .cart-link {
  min-height: 52px; padding: 0 14px;
  border: 2px solid #fff; border-radius: 12px;
  background: transparent; color: #fff;
  font: inherit; font-size: .85rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; cursor: pointer;
}
.badge {
  background: #ffd84d; color: #000; border-radius: 999px;
  min-width: 1.6em; padding: 0 .4em; text-align: center; font-size: .85rem;
}

.draft-notice, .preview-bar {
  background: #fff3c4; border: 2px dashed #c79a00; border-radius: 12px;
  padding: 10px 14px; margin: 16px 0; font-size: .85rem;
}
.preview-bar { margin: 0; border-radius: 0; text-align: center; }
.preview-bar button { font: inherit; min-height: 44px; margin-left: 8px; }
.error-box { background: #ffe5e0; padding: 20px; border-radius: 12px; margin-top: 24px; }

/* ── 按鈕 ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; padding: 10px 18px;
  border: 0; border-radius: 14px;
  font: inherit; font-size: 1.05rem; font-weight: 800;
  text-decoration: none; text-align: center; cursor: pointer;
  touch-action: manipulation;
}
.btn-main { background: var(--brand); color: #fff; }
.btn-main:active { background: var(--brand-dark); }
.btn-line { background: var(--line); color: #fff; }
.btn-line:active { background: var(--line-dark); }
.btn-ghost { background: #fff; color: var(--ink); border: 3px solid var(--ink); }
.btn-disabled { background: #d9d4ce; color: #4a4440; cursor: not-allowed; }
.soldout .pic img { filter: grayscale(.8); opacity: .7; }
.card .pic { position: relative; }
.soldout-tag {
  position: absolute; left: 12px; top: 12px;
  background: #4a4440; color: #fff; font-weight: 800; border-radius: 10px; padding: 4px 12px;
}
.soldout-box { background: #eee8e2; border: 3px solid #4a4440; border-radius: 12px; padding: 12px 14px; }
fieldset:disabled { opacity: .5; }
fieldset:disabled .opt { cursor: not-allowed; }
.info h2 { font-size: 1.15rem; margin: 18px 0 8px; }
.info .facts dt { width: 7em; }
.tbd { color: var(--muted); }
.order-removed { background: #fff3c4; border-radius: 12px; padding: 10px 14px; }
.btn small { font-weight: 500; font-size: .75rem; display: block; }
.line-icon {
  background: #fff; color: var(--line); border-radius: 8px;
  padding: 0 6px; font-size: .7rem; font-weight: 900; letter-spacing: .5px;
}

/* ── 首頁 ── */
.hero { padding: 22px 0 6px; }
.hero h1 { font-size: 1.5rem; margin: 0 0 6px; line-height: 1.35; }
.hero p { margin: 0; color: var(--muted); }
.steps {
  list-style: none; padding: 0; margin: 18px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.steps li {
  background: var(--card); border: 2px solid var(--border); border-radius: 12px;
  padding: 10px 6px; text-align: center; font-size: .8rem; font-weight: 700;
}
.steps b {
  display: block; width: 36px; height: 36px; line-height: 36px; margin: 0 auto 4px;
  background: var(--brand); color: #fff; border-radius: 50%; font-size: .9rem;
}
.cat-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.cat-nav a {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 3px solid var(--border); border-radius: var(--radius);
  padding: 8px; min-height: 76px; text-decoration: none; color: var(--ink); font-weight: 800;
}
.cat-nav img { width: 56px; height: 56px; flex: none; }
.cat-section { margin-top: 30px; scroll-margin-top: 90px; }
.cat-section h2 { font-size: 1.3rem; margin: 0; }
.cat-section .sub { color: var(--muted); margin: 0 0 12px; font-size: .9rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 2px 0 var(--border);
}
.card .pic { aspect-ratio: 4 / 3; background: #f4ece0; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card .short { margin: 0; color: var(--muted); font-size: .85rem; }
.card .price { font-size: 1.1rem; font-weight: 800; color: var(--brand); margin-top: auto; }
.card .price small { color: var(--muted); font-weight: 500; }
.card .btn { min-height: 60px; margin-top: 4px; }

.contact { margin-top: 36px; text-align: center; }
.contact p { color: var(--muted); font-size: .9rem; }

/* ── 商品頁 ── */
.crumbs { font-size: .85rem; margin: 14px 0 10px; color: var(--muted); }
.crumbs a { padding: 6px 0; display: inline-block; }
.back { margin: 0 0 14px; }
.product-pic { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); background: #f4ece0; aspect-ratio: 4 / 3; }
.product-pic img { width: 100%; height: 100%; object-fit: cover; }
.product h1 { font-size: 1.5rem; margin: 16px 0 4px; line-height: 1.3; }
.product .short { color: var(--muted); margin: 0 0 12px; }
.facts { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 4px 14px; margin: 0 0 18px; }
.facts div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-weight: 800; flex: none; width: 4.5em; }
.facts dd { margin: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; padding: 0; }
legend .num {
  display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center;
  background: var(--brand); color: #fff; border-radius: 50%; margin-right: 6px; font-size: .9em;
}
.options { display: grid; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .box {
  display: flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 10px 16px;
  background: var(--card); border: 3px solid var(--border); border-radius: 14px;
}
.opt .dot {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 3px solid var(--muted); background: #fff;
}
.opt .what { flex: 1; font-weight: 800; }
.opt .what small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }
.opt .p { font-weight: 800; font-size: 1.05rem; }
.opt input:checked + .box { border-color: var(--brand); background: #fff1ec; }
.opt input:checked + .box .dot { border-color: var(--brand); background: radial-gradient(var(--brand) 45%, #fff 50%); }
.opt input:focus-visible + .box { outline: 4px solid var(--focus); outline-offset: 2px; }

.qty { display: flex; align-items: stretch; gap: 10px; }
.qty button {
  width: 72px; min-height: 64px; flex: none;
  font: inherit; font-size: 1.6rem; font-weight: 800;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; cursor: pointer;
  touch-action: manipulation;
}
.qty button:disabled { opacity: .35; }
.qty output {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
  background: var(--card); border: 3px solid var(--border); border-radius: 14px;
}
.desc { margin-top: 8px; }

/* 底部固定：小計＋按鈕，手指一直碰得到 */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: #fff; border-top: 3px solid var(--border);
  box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.buybar .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.buybar .total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.buybar .total span:first-child { font-size: .85rem; color: var(--muted); }
.buybar .total .amount { font-size: 1.6rem; color: var(--brand); }
.buybar .btn { min-height: 64px; font-size: .95rem; }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: 190px; z-index: 30;
  max-width: 728px; margin: 0 auto;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.toast[hidden] { display: none; }
.toast .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toast .btn { min-height: 60px; font-size: .9rem; }

/* ── 訂購單 ── */
.order-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.order-item {
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: grid; grid-template-columns: 84px 1fr; gap: 12px;
}
.order-item img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.order-item h3 { margin: 0; font-size: 1.05rem; }
.order-item .spec { color: var(--muted); font-size: .85rem; }
.order-item .sub { font-weight: 800; color: var(--brand); }
.order-item .qty { grid-column: 1 / -1; }
.order-item .remove {
  grid-column: 1 / -1; min-height: 52px; font: inherit; font-size: .85rem;
  background: #fff; border: 2px solid #b33; color: #b33; border-radius: 12px; cursor: pointer;
}
.empty { text-align: center; padding: 30px 0; }
.stack { display: grid; gap: 12px; }
.help { color: var(--muted); font-size: .85rem; }
pre.order-text {
  white-space: pre-wrap; background: #fff; border: 2px solid var(--border); border-radius: 12px;
  padding: 12px; font: inherit; font-size: .85rem;
}