@import url('live-catalog.css');

/* Shared retail shell: warm surfaces, clear actions, and one responsive menu. */
:root{--surface-raised:#fffdfa;--surface-wash:#f1e8d9;--shadow-soft:0 1px 2px #26171012,0 10px 28px #26171012}
::selection{background:#d9822b;color:#fff}
:focus-visible{outline:3px solid #d9822b;outline-offset:4px}
.bar{min-height:66px;box-shadow:0 1px 2px #2617100d,0 8px 22px #2617100a}
.desktop-nav{display:flex}.mobile-nav{display:none}
.icon-arrow{display:inline-block;position:relative;width:15px;height:2px;margin-left:7px;background:currentColor;vertical-align:middle}.icon-arrow:after{position:absolute;top:-4px;right:-1px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;content:'';transform:rotate(45deg)}.button .icon-arrow{margin-left:11px}
.app,.button{border-radius:999px;box-shadow:0 2px 0 #00000018;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.app:hover,.button:hover{box-shadow:0 7px 17px #26171020}.app:active,.button:active{transform:scale(.96);box-shadow:none}
.desktop-nav a:not(.app){transition:color .18s ease,border-color .18s ease}.desktop-nav a:hover:not(.app){color:var(--rust)}
.mobile-menu{position:relative}.mobile-menu summary{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;list-style:none;border:1px solid var(--ink);border-radius:50%;background:var(--surface-raised);transition:transform .18s ease,background-color .18s ease}.mobile-menu summary:hover{background:var(--surface-wash)}.mobile-menu summary:active{transform:scale(.94)}.mobile-menu summary::-webkit-details-marker{display:none}.menu-lines,.menu-lines:before,.menu-lines:after{display:block;width:17px;height:2px;background:var(--ink);content:''}.menu-lines{position:relative}.menu-lines:before{position:absolute;top:-6px}.menu-lines:after{position:absolute;top:6px}.mobile-menu[open] .menu-lines{background:transparent}.mobile-menu[open] .menu-lines:before{top:0;transform:rotate(45deg)}.mobile-menu[open] .menu-lines:after{top:0;transform:rotate(-45deg)}.mobile-menu nav{position:absolute;top:54px;right:0;display:grid;min-width:228px;padding:10px;background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft)}.mobile-menu nav a{padding:13px 12px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mobile-menu nav a:hover{background:var(--surface-wash)}.mobile-menu nav .app{margin-top:5px;color:#fff;text-align:center}
.warehouse-kicker{display:flex;align-items:center;gap:9px;margin-top:26px;color:var(--forest);font:500 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}.warehouse-kicker:before{width:8px;height:8px;border-radius:50%;background:#5e8b65;box-shadow:0 0 0 5px #5e8b6518;content:''}
.filter-panel{display:grid;gap:16px;margin:34px 0 4px;padding:22px;background:var(--surface-wash);border:1px solid #dfcba8;border-radius:14px}.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.filter-label{min-width:92px;color:var(--rust);font:10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}.filter-button{padding:9px 14px;border:1px solid #cbbcae;border-radius:999px;background:var(--surface-raised);color:var(--ink);font:11px 'Plus Jakarta Sans',sans-serif;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}.filter-button:hover{border-color:var(--ink);transform:translateY(-1px)}.filter-button:active{transform:scale(.96)}.filter-button.is-active{border-color:var(--ink);background:var(--ink);color:#fff}.coffee-card[hidden]{display:none}
.coffee-card,.home-coffee-card,.story,.article-pick{border-radius:12px;overflow:hidden}.coffee-card,.home-coffee-card,.story{box-shadow:0 1px 1px #2617100a;transition:transform .22s ease,box-shadow .22s ease}.coffee-card:hover,.home-coffee-card:hover,.story:hover{box-shadow:var(--shadow-soft)}
.feature>img,.feature-media img{mix-blend-mode:normal}.story img.journal-cat{padding:8px;object-fit:contain;mix-blend-mode:normal}.story img.harvest-cat{background:linear-gradient(145deg,#ead9ad,#c99a4c)}.story img.roasting-cat{background:linear-gradient(145deg,#5a3d2a,#ad6b37)}.story img.processing-cat{background:linear-gradient(145deg,#d6e1d0,#9aaf83)}
.feature-media,.story-media{display:block;overflow:hidden}.feature-media img,.story-media img{transition:transform .35s ease,filter .35s ease}.feature-media:hover img,.story-media:hover img{transform:scale(1.035);filter:saturate(1.07)}.feature h2 a:hover,.story h2 a:hover{color:var(--rust)}
.article-cat-figure{max-width:560px;margin:32px auto 52px}.article-cat-figure img{height:360px;object-fit:contain;background:linear-gradient(145deg,#ead9ad,#c99a4c);mix-blend-mode:normal}.article-cat-figure figcaption{text-align:center}
@media(max-width:760px){.article-cat-figure{max-width:100%;margin:26px auto 42px}.article-cat-figure img{height:270px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(max-width:760px){.desktop-nav{display:none}.mobile-nav{display:block}.bar{padding:14px 16px}.brand{font-size:25px}.brand small{margin-top:7px;font-size:8px}.filter-label{width:100%}}