:root {
  --bg: #eff8f2;
  --surface: #fff;
  --ink: #282828;
  --heading: #173f36;
  --muted: #707770;
  --accent: #25806d;
  --peach: #ffddc6;
  --peach-border: #efc6aa;
  --peach-ink: #6e442b;
  --lemon: #fff3de;
  --line: #e3eae4;
  font-family: Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  line-height: 1.65;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(ellipse 460px 310px at 8% 100px, #fff0b88c, #fff0b800 100%), radial-gradient(ellipse 420px 300px at 94% 240px, #ffddc66b, #ffddc600 100%), linear-gradient(to bottom, #f7fbf6, var(--bg) 800px); background-repeat: no-repeat; }
.image-effects { position: absolute; width: 0; height: 0; pointer-events: none; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { color: inherit; border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button:disabled, select:disabled { cursor: default; opacity: .55; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: 1168px; width: calc(100% - 112px); margin-inline: auto; }
.topbar { min-height: 128px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 16px; font-size: 22px; font-weight: 700; color: var(--heading); }
.logo-icon { color: #db8054; font-size: 32px; letter-spacing: -2px; line-height: 1.5; }
.text-button { background: transparent; font-size: 13px; min-height: 44px; padding: 8px 0 8px 12px; color: #666; }
.text-button span { margin-left: 4px; }
.catalog { padding-block: 32px 24px; }
.catalog-heading { margin-bottom: 28px; }
h1 { color: var(--heading); font-size: 36px; line-height: 1.5; margin: 0 0 8px; font-weight: 700; }
.catalog-heading p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.catalog-heading b { font-weight: 400; }
.mobile-heading, .mobile-filters { display: none; }
.search-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.brand-tabs { display: flex; gap: 12px; }
.brand-tabs button, .filters>label, .mobile-filters>label, #more-filters { background: var(--surface); border: 1px solid #e5e5e5; border-radius: 9px; }
.brand-tabs button { padding: 10px 12px; min-height: 44px; white-space: nowrap; font-size: 13px; color: #555; }
.brand-tabs button:hover, .filter-options button:hover { border-color: #9cbcad; }
.brand-tabs .selected, .filter-options .selected { background: var(--peach); border-color: var(--peach-border); color: var(--peach-ink); }
.search-box { display: flex; align-items: center; background: var(--surface); border: 1px solid #ddd; border-radius: 28px; width: min(440px, 48%); min-height: 44px; padding-inline: 16px 8px; }
.search-box:focus-within { border-color: var(--accent); }
.search-box input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 12px 0; color: var(--ink); font-size: 15px; outline-offset: 2px; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-box input::placeholder { color: #777; opacity: 1; }
#search-clear { flex: 0 0 36px; width: 36px; height: 36px; background: transparent; font-size: 23px; border-radius: 50%; line-height: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.filters>label { display: flex; gap: 10px; align-items: center; padding: 0 10px; min-height: 44px; color: #666; font-size: 13px; }
select { appearance: none; -webkit-appearance: none; color: var(--heading); font-size: 13px; line-height: 1.5; background-color: var(--surface); background-image: linear-gradient(45deg, transparent 50%, #588372 50%), linear-gradient(135deg, #588372 50%, transparent 50%); background-position: right 17px center, right 12px center; background-size: 5px 5px; background-repeat: no-repeat; border: 1px solid #cddfd4; border-radius: 10px; min-height: 44px; max-width: 100%; padding: 10px 36px 10px 12px; box-shadow: 0 2px 5px #173f3605; transition: border-color .2s ease, box-shadow .2s ease; }
select:hover:not(:disabled) { border-color: #8bb49e; }
select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px #25806d1a; outline: 2px solid transparent; outline-offset: 1px; }
select.has-value { background-color: #f3fbf6; border-color: #8bb49e; }
select option { color: var(--ink); background: var(--surface); }
select option:checked { color: var(--peach-ink); background: var(--peach); }
.filters>label, .mobile-filters>label { border: 0; background: transparent; }
.filters>label { padding: 0; }
.reset { padding: 10px; min-height: 44px; background: transparent; color: var(--muted); font-size: 13px; border-radius: 6px; }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.result-bar p { font-size: 14px; margin: 0; }
.result-bar p span { color: var(--muted); font-size: 12px; }
.result-bar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.result-bar select { font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.product-card { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #e9e9e9; border-radius: 16px; padding: 20px; overflow: hidden; }
.product-card.brand-luckin, .detail-layout.brand-luckin { --brand-color: #244877; }
.product-card.brand-cotti, .detail-layout.brand-cotti { --brand-color: #a53632; }
.product-visual { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; padding: 0; text-align: left; background: var(--surface); border-radius: 4px; }
.brand-pill { color: var(--brand-color); font-size: 11px; line-height: 1.5; font-weight: 600; }
.catalog-image { --catalog-cup-height: 180px; display: grid; place-items: center; width: 100%; height: 210px; pointer-events: none; }
.catalog-image-frame { position: relative; display: block; width: calc(100% * var(--coffee-ratio, 1) / var(--coffee-max-ratio, 1)); max-width: calc(var(--catalog-cup-height) * var(--coffee-ratio, 1)); aspect-ratio: var(--coffee-ratio, 1); pointer-events: none; }
.product-visual img { position: absolute; display: block; left: var(--coffee-image-left, 0%); top: var(--coffee-image-top, 0%); width: var(--coffee-image-width, 100%); height: var(--coffee-image-height, 100%); max-width: none; object-fit: contain; pointer-events: none; transform-origin: var(--coffee-origin-x, 50%) var(--coffee-origin-y, 50%); transition: transform .25s ease; }
.product-visual:focus-visible img { transform: translateY(-4px); }
.card-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 16px; padding-top: 20px; line-height: 1.7; }
.card-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #d8e4dc; box-shadow: 0 3px 7px #173f3624; pointer-events: none; }
.card-body h3 { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.flavor-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.flavor-tags>span+span::before { content: none; }
.energy-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-block: 6px; color: var(--heading); }
.energy-row strong { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.energy-row>span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.energy-row .unknown { font-size: 20px; color: var(--muted); letter-spacing: 0; }
.source-pill { display: inline-block; align-self: flex-start; color: #45694f; font-size: 11px; line-height: 1.7; }
.source-pill.third { color: #986224; }
.card-bottom { margin-top: auto; padding-top: 8px; }
.recipe-summary { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0; padding-top: 12px; border-top: 1px solid #ededed; min-height: 34px; }
.details-button { display: block; text-align: left; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; padding: 10px 0 4px; min-height: 44px; }
.compact-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 80px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.compact-footer small { font-size: inherit; }
.empty { border: 1px solid var(--line); border-radius: 16px; padding: 48px 24px; margin-block: 8px 24px; text-align: center; }
.empty h3 { color: var(--heading); margin: 0 0 12px; font-size: 22px; }
.empty p { color: var(--muted); line-height: 1.7; font-size: 14px; margin: 0 0 24px; }
.primary { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 8px; background: #2c2c2c; color: #fff; min-height: 44px; padding: 12px 20px; font-size: 14px; line-height: 1.4; }
.primary:hover { background: var(--heading); }
.image-fallback { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 140px; padding: 24px 12px; font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; }
/* 原生对话框共享关闭、焦点与背景处理。 */
dialog { width: min(660px, calc(100% - 40px)); max-height: 90dvh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px #173f3626; overscroll-behavior: contain; }
dialog::backdrop { background: #173f3659; backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }
html:has(dialog[open]) { overscroll-behavior: none; }
.close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; padding: 0; font-size: 26px; font-weight: 400; line-height: 1; background: transparent; color: #707770; }
.close:hover { background: #ffffffa6; }
#detail { width: min(1020px, calc(100% - 40px)); padding: 28px 40px 40px; }
.detail-header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.detail-art { position: sticky; top: 0; z-index: 0; isolation: isolate; min-width: 0; background: transparent; }
.detail-art::before { content: ''; position: absolute; inset: 6% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, #fff0ce99, #fff5df40 45%, #fff5df00 72%); }
/* 用可见杯身的边界展示原图，透明画布不再占用咖啡的展示尺寸。 */
.detail-sticker { --coffee-ratio: 1; --coffee-height: min(72dvh, 680px); display: grid; place-items: center; position: relative; width: 100%; height: var(--coffee-height); padding: 12px; background: transparent; isolation: isolate; overflow: visible; filter: drop-shadow(0 12px 11px #563c2324); transition: filter .35s ease; }
.detail-image-frame { display: block; position: relative; pointer-events: none; width: min(calc(100% * var(--coffee-ratio) / var(--coffee-max-ratio, 1)), calc((var(--coffee-height) - var(--coffee-frame-inset, 24px)) * var(--coffee-ratio))); aspect-ratio: var(--coffee-ratio); }
.detail-sticker img { display: block; position: absolute; pointer-events: none; left: var(--coffee-image-left, 0%); top: var(--coffee-image-top, 0%); width: var(--coffee-image-width, 100%); height: var(--coffee-image-height, 100%); max-width: none; object-fit: contain; filter: url(#coffee-sticker-outline); transform-origin: var(--coffee-origin-x, 50%) var(--coffee-origin-y, 50%); transform: translateY(0) scale(1); transition: transform .45s cubic-bezier(.2,.85,.25,1.25); }
.detail-sticker.opaque-photo img { filter: none; }
.detail-sticker:focus-visible { outline: 2px dashed #ad7b56; outline-offset: 2px; border-radius: 18px; }
.detail-sticker.is-zoomed, .detail-sticker:focus-visible { filter: drop-shadow(0 26px 17px #563c2340); }
.detail-sticker.is-zoomed img, .detail-sticker:focus-visible img { transform: translateY(-12px) scale(1.08) rotate(-1.5deg); }
.detail-main { position: relative; z-index: 1; min-width: 0; padding: 28px; line-height: 1.7; border-radius: 18px; background: var(--surface); overflow-wrap: anywhere; }
.eyebrow { color: var(--brand-color, var(--muted)); font-size: 12px; font-weight: 600; line-height: 1.6; }
.detail-main h2 { font-size: 34px; line-height: 1.5; color: var(--heading); margin: 16px 0; }
.detail-flavors { font-size: 13px; }
.detail-energy { background: var(--lemon); border: 1px solid #f1dfbd; padding: 20px; border-radius: 12px; margin-block: 16px; }
.detail-energy p { margin: 0; padding-block: 2px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.detail-energy-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-block: 8px; color: var(--heading); }
.detail-energy .value { color: var(--heading); font-size: 42px; font-weight: 700; line-height: 1.4; }
.detail-energy small { font-size: 18px; line-height: 1.5; font-weight: 600; }
.detail-energy .exact-note { color: #45694f; }
.detail-energy .estimate-note { color: #986224; }
.detail-energy .no-data { display: block; font-size: 23px; margin-bottom: 8px; }
.query-title { font-weight: 600; font-size: 17px; line-height: 1.6; }
.recipe-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; column-gap: 16px; margin-block: 24px; }
.recipe-controls label { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); min-width: 0; }
.recipe-controls select { width: 100%; padding: 10px 36px 10px 12px; border: 1px solid #cddfd4; border-radius: 10px; background-color: var(--surface); }
.recipe-footnote, .query-note { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 12px 0; }
.restore { font-size: 12px; color: var(--accent); background: transparent; min-height: 36px; padding: 8px 0; }
.provenance { border-top: 1px solid #ededed; margin-top: 12px; padding-top: 12px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.provenance summary { cursor: pointer; padding-block: 12px; color: #555; font-size: 14px; }
.source-content { padding-top: 12px; }
.source-content>p { margin: 12px 0; line-height: 1.9; }
.source-content>a { display: block; margin-block: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.provenance a, .about-links a, .reference-block a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.reference-block { background: var(--lemon); border: 1px solid #f1dfbd; border-radius: 9px; padding: 12px; font-size: 12px; line-height: 1.8; margin-block: 12px; }
.reference-block strong { color: var(--heading); font-size: 18px; }
.reference-block p { margin: 8px 0; }
.estimate-evidence { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.estimate-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; margin-block: 14px; }
.estimate-table caption { text-align: left; margin-bottom: 8px; }
.estimate-table th, .estimate-table td { padding: 8px 2px; text-align: center; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.estimate-table th { font-weight: 600; }
/* 数据说明与移动筛选。 */
#about { position: relative; }
#about>.close { position: absolute; top: 16px; right: 12px; }
.about-content { padding: 40px; }
.about-content h2 { color: var(--heading); font-size: 28px; margin: 0 36px 24px 0; line-height: 1.5; }
.about-content .about-updated { color: var(--muted); font-size: 13px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.about-content section { margin-bottom: 24px; }
.about-content h3 { font-size: 18px; margin: 0 0 12px; }
.about-content p { color: #666; font-size: 15px; line-height: 1.8; margin: 0; }
.about-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; margin-block: 24px; }
.about-content .primary { width: 100%; }
#filter-dialog { width: min(440px, calc(100% - 32px)); padding: 24px; }
.filter-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.filter-header h2 { color: var(--heading); font-size: 22px; margin: 0; line-height: 1.5; }
.filter-intro { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 12px 0 24px; }
#filter-fields fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 24px; }
#filter-fields legend { font-size: 15px; font-weight: 600; margin-bottom: 12px; padding: 0; }
.filter-options { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-options button { font-size: 13px; line-height: 1.6; background: var(--surface); border: 1px solid #e5e5e5; border-radius: 9px; min-height: 44px; padding: 10px 12px; color: #555; }
.filter-options button.selected { background: var(--peach); color: var(--peach-ink); border-color: var(--peach-border); }
.filter-actions { position: sticky; bottom: -24px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); padding: 16px 0 8px; border-top: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .product-visual:hover img { transform: translateY(-4px); } .detail-sticker:hover { filter: drop-shadow(0 26px 17px #563c2340); } .detail-sticker:hover img { transform: translateY(-12px) scale(1.08) rotate(-1.5deg); } }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #detail { padding: 24px; }
  .detail-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 24px; }
  .detail-main h2 { font-size: 30px; }
  .detail-sticker { --coffee-height: min(68dvh, 600px); }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .topbar { min-height: 78px; }
  .logo { font-size: 18px; gap: 12px; }
  .logo-icon { font-size: 27px; }
  .text-button { font-size: 12px; }
  .catalog { padding-block: 20px 24px; }
  .catalog-heading { margin-bottom: 22px; }
  .catalog-heading h1 { font-size: 27px; margin-bottom: 12px; }
  .catalog-heading p { font-size: 13px; }
  .desktop-heading { display: none; }
  .mobile-heading { display: block; }
  .search-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 16px; }
  .search-box { order: -1; width: 100%; }
  .search-box input { font-size: 16px; }
  .brand-tabs { gap: 8px; }
  .brand-tabs button { font-size: 13px; padding-inline: 12px; }
  .filters { display: none; }
  .mobile-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .mobile-filters>label { min-width: 0; max-width: 100%; }
  .mobile-filters select { padding: 10px 32px 10px 12px; font-size: 16px; max-width: 156px; }
  #more-filters { font-size: 12px; padding: 10px 12px; min-height: 44px; color: #555; display: inline-flex; gap: 6px; align-items: center; }
  #filter-count { border-radius: 50%; background: var(--peach); color: var(--peach-ink); padding: 1px 5px; font-size: 11px; }
  .result-bar { padding-block: 16px; }
  .result-bar p { font-size: 12px; }
  .result-bar>label { font-size: 0; gap: 0; }
  .result-bar select { font-size: 16px; max-width: min(52vw, 180px); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .product-card { padding: 16px; }
  .brand-pill { font-size: 10px; }
  .product-visual { gap: 8px; }
  .catalog-image { --catalog-cup-height: 110px; height: 128px; }
  .card-body { margin-top: 12px; padding-top: 16px; gap: 8px; }
  .card-body h3 { font-size: 15px; line-height: 1.65; margin-bottom: 0; }
  .flavor-tags { font-size: 12px; line-height: 1.7; }
  .energy-row { margin-block: 4px; gap: 8px; }
  .energy-row strong { font-size: 27px; }
  .energy-row>span { font-size: 10px; }
  .energy-row .unknown { font-size: 17px; }
  .source-pill { font-size: 11px; line-height: 1.8; }
  .recipe-summary { font-size: 11px; line-height: 1.9; }
  .details-button { min-height: 40px; font-size: 12px; }
  .compact-footer { font-size: 11px; gap: 12px; min-height: 68px; }
  #detail { --detail-art-height: min(30dvh, calc((var(--detail-viewport-height, 100dvh) - 104px) * .36)); position: fixed; inset: auto 8px auto; top: calc(var(--detail-viewport-top, 0px) + 8px); margin: 0; width: calc(100% - 16px); height: calc(var(--detail-viewport-height, 100dvh) - 16px); max-height: none; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow: hidden; }
  #detail[open] { display: flex; flex-direction: column; }
  #detail-content { flex: 1; min-height: 0; overflow: hidden; }
  #detail .detail-layout { height: 100%; min-height: 0; grid-template-rows: var(--detail-art-height) minmax(0, 1fr); gap: 12px; }
  #detail .detail-header { flex-shrink: 0; padding-bottom: 8px; margin-bottom: 12px; }
  #detail .detail-art { height: 100%; min-height: 0; }
  #detail .detail-sticker { --coffee-height: var(--detail-art-height); --coffee-frame-inset: 48px; padding: 24px 16px; }
  #detail .detail-main { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #a6c4b4 transparent; scroll-padding-block: 20px; }
  .recipe-controls select { font-size: 16px; }
  .detail-header { padding-bottom: 12px; margin-bottom: 20px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .detail-art { position: static; }
  .detail-sticker { --coffee-height: min(52dvh, 420px); padding: 12px; }
  .detail-main { padding: 20px; }
  .detail-main h2 { font-size: 27px; margin-block: 12px; }
  .detail-energy { padding: 16px; }
  .detail-energy .value { font-size: 32px; }
  .detail-energy small { font-size: 16px; }
  .detail-energy .no-data { font-size: 22px; }
  .about-content { padding: 40px 24px 24px; }
  #filter-dialog { width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .filter-actions { bottom: -20px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .product-card { padding: 16px; }
  .catalog-image { --catalog-cup-height: 96px; height: 116px; }
  .card-body h3 { font-size: 14px; }
  .energy-row strong { font-size: 25px; }
  .mobile-filters select { max-width: 142px; }
  #more-filters { padding-inline: 8px; }
  .detail-main { padding: 20px; }
  .recipe-controls { grid-template-columns: minmax(0, 1fr); }
  .detail-energy { padding: 12px; }
  .detail-energy .value { font-size: 30px; }
}
@media (max-width: 700px) and (max-height: 520px) and (orientation: landscape) {
  #detail .detail-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #detail .detail-sticker { --coffee-height: calc(var(--detail-viewport-height, 100dvh) - 104px); }
  #detail .detail-main { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-visual img, .detail-sticker img, .detail-sticker { transition: none; }
  .product-visual:hover img, .product-visual:focus-visible img, .detail-sticker:hover img, .detail-sticker:focus-visible img, .detail-sticker.is-zoomed img { transform: none; }
}

/* 自定义选项菜单：原生select仅作为值与选项的数据源，不再显示系统弹层。 */
.custom-select { display: inline-flex; min-width: 0; vertical-align: middle; }
.custom-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #cddfd4; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px #173f3605; color: var(--heading); font-size: 13px; line-height: 1.5; text-align: left; touch-action: manipulation; }
.custom-select-trigger:hover:not(:disabled) { border-color: #8bb49e; }
.custom-select-trigger.has-value { background: #f3fbf6; border-color: #8bb49e; }
.custom-select-trigger[aria-expanded="true"], .custom-select-trigger:focus-visible { border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 3px #25806d1f; }
.custom-select-trigger:disabled { cursor: default; opacity: .5; background: #f1f4f1; }
.custom-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-arrow { flex: 0 0 7px; width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 2px solid #588372; border-bottom: 2px solid #588372; transform: rotate(45deg); transition: transform .15s ease; }
.custom-select-trigger[aria-expanded="true"] .custom-select-arrow { transform: rotate(225deg); margin-top: 3px; }
.custom-select-menu { position: fixed; z-index: 10000; isolation: isolate; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 6px; border: 1px solid #cddfd4; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #173f3629, 0 2px 6px #173f3610; scrollbar-width: thin; scrollbar-color: #a6c4b4 transparent; }
.custom-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 7px; color: #3f5148; font-size: 14px; line-height: 1.65; cursor: pointer; user-select: none; }
.custom-select-option>span:first-child { min-width: 0; overflow-wrap: anywhere; }
.custom-select-option.is-active, .custom-select-option:not([aria-disabled="true"]):hover { background: #edf7f1; color: var(--heading); }
.custom-select-option[aria-selected="true"] { color: var(--peach-ink); background: var(--peach); }
.custom-select-option[aria-selected="true"].is-active { box-shadow: inset 0 0 0 1px var(--peach-border); }
.custom-select-option[aria-disabled="true"] { opacity: .4; cursor: default; }
.custom-select-check { flex: 0 0 16px; width: 16px; font-weight: 700; text-align: center; }
.filters .custom-select { min-width: 120px; max-width: 220px; }
.result-bar .custom-select { max-width: 200px; }
.recipe-controls .custom-select { width: 100%; }
@media (max-width: 700px) {
  .custom-select-trigger, .custom-select-option { font-size: 16px; }
  .mobile-filters .custom-select { max-width: 156px; }
  .result-bar .custom-select { max-width: min(52vw, 200px); }
}
@media (prefers-reduced-motion: reduce) { .custom-select-arrow { transition: none; } }