/* Hallmark · component: coffee detail / flavor wheel · theme: supplied Eighty Plus CI
   Pre-emit critique: P4 H5 E4 S5 R4 V4. Existing page shape retained by request. */
.mast img{filter:brightness(0) invert(1)}.mast a{background:var(--color-ink);padding:var(--space-sm)}
#detail{padding:0;max-width:980px;border:2px solid var(--color-ink)}
.wheel-header{padding:var(--space-lg);background:var(--color-ink);color:var(--color-paper);display:flex;justify-content:space-between;align-items:start;gap:var(--space-md)}
.wheel-header .sku{color:var(--color-paper);margin-bottom:var(--space-sm)}
.wheel-header h2{font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.035em;max-width:30ch}
.wheel-header button{flex-shrink:0;width:44px;padding:0;background:var(--color-ink);color:var(--color-paper);border-color:var(--color-paper);font-size:24px}
.wheel-header button:focus-visible{outline-color:var(--color-gold)}
.wheel-header button:hover{background:var(--color-legacy)}
.wheel-body{display:grid;grid-template-columns:minmax(0,1fr)}
.wheel-visual{padding:var(--space-lg);border-bottom:1px solid var(--color-ink);min-width:0}
.wheel-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.08em;margin-bottom:var(--space-lg)}
.wheel-canvas{position:relative;max-width:400px;margin:auto;aspect-ratio:1}
.wheel-canvas svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-body)}
.wheel-canvas img{position:absolute;width:22%;height:22%;left:39%;top:39%;object-fit:contain;border-radius:50%;pointer-events:none}
.wheel-caption{font-size:11px;color:var(--color-muted);text-align:center;margin-top:var(--space-md);min-height:32px}
.wheel-info{padding:var(--space-lg);min-width:0}.wheel-info .detail-prices{margin:0 0 var(--space-lg);padding:0 0 var(--space-lg);border-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}
.wheel-info .price{font-size:34px;color:var(--color-ink)}.wheel-info .price small{font-size:11px;line-height:1.5}
.wheel-info .bag-price{color:var(--color-umber)}
.wheel-note-list{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-md) 0 var(--space-lg)}
.wheel-note{display:flex;align-items:center;gap:var(--space-sm);font-size:13px;padding:8px 12px;min-height:44px;background:var(--color-paper)}
.wheel-note i{width:10px;height:10px;background:var(--note-color);border:1px solid var(--color-ink)}
.wheel-note:hover,.wheel-note.is-hover{background:var(--color-hover)}.wheel-note[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper)}
.wheel-note:focus-visible,.wheel-note.is-focus{outline:2px solid var(--color-focus);outline-offset:3px}.wheel-note.is-active{transform:translateY(2px)}
.wheel-note[data-state=loading]{cursor:wait}.wheel-note[data-state=error]{border-color:var(--color-danger);color:var(--color-danger)}.wheel-note[data-state=success]{background:var(--color-hover)}
.wheel-meta{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--space-sm);font-size:12px;border-top:1px solid var(--color-line);padding-top:var(--space-md)}.wheel-meta dt{color:var(--color-muted)}.wheel-meta dd{margin:0}
.minimum-order{display:inline-block;background:var(--color-gold);color:var(--color-umber);padding:8px 12px;margin-top:var(--space-lg);font-size:13px}
.wheel-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-ink);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);font-size:11px;color:var(--color-muted)}
.wheel-empty{height:280px;display:grid;place-items:center;text-align:center}.wheel-footer .solid{min-width:200px}
.wheel-export-actions{display:flex;gap:8px}.wheel-export-actions button{min-height:44px;font-size:13px}.export-status{flex-basis:100%;font-size:11px}.export-status:empty{display:none}
@media(min-width:48rem){.wheel-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.wheel-visual{border-bottom:0;border-right:1px solid var(--color-ink)}}
/* Hallmark · mobile component: full-height sheet with independent content scroll.
   Fixed header/footer remain reachable; original desktop composition is preserved. */
@media(max-width:47.999rem){
 #detail{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;overflow:hidden}
 #detail-content{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 .wheel-header{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;gap:12px}
 .wheel-header h2{font-size:22px;line-height:1.2;max-height:4.8em;overflow:auto}.wheel-header .sku{font-size:10px;margin-bottom:4px}
 .wheel-body{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:0;padding:0 16px 20px}
 .wheel-info{display:contents}
 .wheel-info .detail-prices{order:0;margin:0;padding:16px 0 12px;border-bottom:1px solid var(--color-line);gap:16px;flex-shrink:0}
 .wheel-info .price{font-size:30px}.wheel-info .price small{font-size:10px;margin-top:4px}
 .wheel-visual{order:1;padding:16px 0 12px;border:0;flex-shrink:0}
 .wheel-label{margin-bottom:8px;font-size:10px}.wheel-canvas{width:100%;max-width:280px}
 .wheel-caption{font-size:10px;min-height:0;margin-top:8px}
 .wheel-info>.overline{order:2;padding-top:12px;border-top:1px solid var(--color-line)}
 .wheel-note-list{order:3;gap:8px;margin:12px 0 16px}.wheel-note{font-size:12px;padding:8px 10px;max-width:100%;white-space:normal;text-align:left}
 .wheel-meta{order:4;margin:0;grid-template-columns:88px minmax(0,1fr);font-size:12px}
 .minimum-order{order:5;align-self:start;margin-top:16px;font-size:12px}
 .wheel-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px;background:var(--color-paper);display:flex;flex-direction:column;align-items:stretch;font-size:10px}
 .wheel-footer .solid{width:100%;min-height:48px;font-size:14px}.wheel-footer>span{text-align:center}
 .wheel-export-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.export-status{max-height:44px;overflow:auto}
 .wheel-empty{height:200px}
}