/* ==========================================================================
   Aroast — theme tokens
   Every colour in this stylesheet resolves through a token, so the whole UI
   re-themes from these blocks alone. Dark is the brand default. Light is used
   when the visitor's system asks for it, and an explicit choice (stored by the
   theme switch as data-theme on <html>) wins over both.
   ========================================================================== */
:root{color-scheme:dark;--k1:rgba(255,255,255,0.004);--k2:rgba(255,255,255,0.024);--k3:rgba(255,255,255,0.055);--k4:rgba(209,160,109,0.176);--k5:rgba(209,160,109,0.247);--k6:rgba(215,168,118,0.118);--k7:rgba(216,160,104,0.020);--k8:rgba(216,160,104,0.278);--k9:rgba(255,255,255,0.027);--k10:rgba(255,255,255,0.059);--k11:rgba(255,255,255,0.067);--k12:rgba(255,255,255,0.149);--k13:rgba(210,145,84,0.078);--k14:rgba(187,137,85,0.098);--k15:rgba(55,30,17,0.349);--k16:rgba(13,10,8,0.878);--k17:rgba(10,8,7,0.549);--k18:rgba(0,0,0,0.176);--k19:rgba(0,0,0,0.220);--k20:rgba(0,0,0,0.349);--k21:rgba(0,0,0,0.478);--k22:rgba(9,7,6,0.937);--k23:rgba(10,8,7,0.667);--k24:rgba(16,12,10,0.600);--k25:rgba(19,15,12,0.600);--k26:rgba(159,95,50,0.122);--k27:rgba(162,106,66,0.188);--k28:#050505;--k29:#070605;--k30:#080706;--k31:#090504;--k32:#090a07;--k33:#090d0a;--k34:#0b0705;--k35:#0b0806;--k36:#0b0807;--k37:#0c0806;--k38:#0d0806;--k39:#0d0907;--k40:#0d0a08;--k41:#0e0a08;--k42:#0e0b09;--k43:#0e110c;--k44:#0f0c0a;--k45:#100c09;--k46:#100d0a;--k47:#10120d;--k48:#110d0b;--k49:#110e0b;--k50:#120a06;--k51:#120e0b;--k52:#130b07;--k53:#130d08;--k54:#130f0c;--k55:#13100d;--k56:#14100d;--k57:#15100d;--k58:#151515;--k59:#160b06;--k60:#160b07;--k61:#160c08;--k62:#16241b;--k63:#163421;--k64:#17110d;--k65:#17120f;--k66:#171311;--k67:#173525;--k68:#19120e;--k69:#191c14;--k70:#1b110b;--k71:#1b120c;--k72:#1c130e;--k73:#1c1410;--k74:#1c1510;--k75:#1e1009;--k76:#20140d;--k77:#203628;--k78:#21140c;--k79:#21140d;--k80:#23150d;--k81:#24150e;--k82:#24160e;--k83:#241711;--k84:#241b16;--k85:#25140d;--k86:#251b16;--k87:#26170f;--k88:#2a1911;--k89:#2a1b12;--k90:#2a201a;--k91:#2b170d;--k92:#2b1e16;--k93:#2b211a;--k94:#2c1e18;--k95:#2c211b;--k96:#2e2119;--k97:#2e241d;--k98:#2e6f4a;--k99:#302016;--k100:#30231c;--k101:#30241c;--k102:#30241d;--k103:#312016;--k104:#33241b;--k105:#33251d;--k106:#33261e;--k107:#34251d;--k108:#34261d;--k109:#34261f;--k110:#351d10;--k111:#36281f;--k112:#382214;--k113:#392a21;--k114:#3a2a20;--k115:#3a2c23;--k116:#3b2114;--k117:#3b291d;--k118:#3b2b21;--k119:#3b2b22;--k120:#3b3926;--k121:#3c1717;--k122:#3c2518;--k123:#3c2c22;--k124:#3c2d24;--k125:#3d2114;--k126:#3d2d23;--k127:#3e2a1e;--k128:#3e7d59;--k129:#3f2e24;--k130:#403027;--k131:#421b1b;--k132:#423127;--k133:#452a1a;--k134:#453226;--k135:#4a2a18;--k136:#4a3426;--k137:#4a3528;--k138:#4b382a;--k139:#5a4030;--k140:#5a4332;--k141:#5c4432;--k142:#5d4433;--k143:#5e351e;--k144:#604530;--k145:#65594f;--k146:#694a35;--k147:#6a3c22;--k148:#6a3e24;--k149:#6c4b35;--k150:#6d3c22;--k151:#6d6259;--k152:#6f5038;--k153:#70523e;--k154:#725944;--k155:#746960;--k156:#755a47;--k157:#75695f;--k158:#77695e;--k159:#7e7166;--k160:#814040;--k161:#855334;--k162:#86694f;--k163:#8a6448;--k164:#8c7c70;--k165:#8d5a36;--k166:#8d7d70;--k167:#8e8074;--k168:#8f512b;--k169:#8f8175;--k170:#928277;--k171:#9c8060;--k172:#9f8873;--k173:#9f8b78;--k174:#a84e4e;--k175:#a86e6e;--k176:#a9988a;--k177:#a99a8d;--k178:#a99b8e;--k179:#ab9c8f;--k180:#ad9987;--k181:#b0a093;--k182:#b37a4f;--k183:#b49e88;--k184:#b79d83;--k185:#baa897;--k186:#bca998;--k187:#bda58d;--k188:#c0a994;--k189:#c6b6a8;--k190:#c9ac8a;--k191:#cfc0ab;--k192:#d1a06d;--k193:#d2a06e;--k194:#d6b07f;--k195:#d8a366;--k196:#d8b792;--k197:#d8c0a8;--k198:#d9bb99;--k199:#e1b57f;--k200:#e4c6a3;--k201:#e5d5c4;--k202:#e5d5c5;--k203:#e5ddd3;--k204:#e6d6c5;--k205:#e7d4bf;--k206:#e8dfd2;--k207:#ede3d4;--k208:#f0deca;--k209:#f0dfcb;--k210:#f0e3d5;--k211:#f1c98f;--k212:#f3d7b7;--k213:#f4ecdf;--k214:#f5eadf;--k215:#f7f0e6;--k216:rgba(0,0,0,0.333);--k217:rgba(0,0,0,0.467);--k218:rgba(0,0,0,0.533);--k219:rgba(0,0,0,0.600);--k220:#000000;--k221:#222222;--k222:#ffffff}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--k1:rgba(30,30,30,0.004);--k2:rgba(30,30,30,0.024);--k3:rgba(30,30,30,0.055);--k4:rgba(134,90,45,0.176);--k5:rgba(134,90,45,0.247);--k6:rgba(139,93,44,0.118);--k7:rgba(140,90,39,0.020);--k8:rgba(140,90,39,0.278);--k9:rgba(30,30,30,0.027);--k10:rgba(30,30,30,0.059);--k11:rgba(30,30,30,0.067);--k12:rgba(30,30,30,0.149);--k13:rgba(133,84,38,0.078);--k14:rgba(116,83,49,0.098);--k15:rgba(237,231,229,0.349);--k16:rgba(250,248,247,0.878);--k17:rgba(250,249,248,0.549);--k18:rgba(0,0,0,0.176);--k19:rgba(0,0,0,0.220);--k20:rgba(0,0,0,0.349);--k21:rgba(0,0,0,0.478);--k22:rgba(250,249,249,0.937);--k23:rgba(250,249,248,0.667);--k24:rgba(249,247,246,0.600);--k25:rgba(247,245,244,0.600);--k26:rgba(202,178,162,0.122);--k27:rgba(196,170,151,0.188);--k28:#000000;--k29:#fbfaf9;--k30:#fafaf9;--k31:#945241;--k32:#f9faf8;--k33:#416c4b;--k34:#faf9f8;--k35:#faf9f8;--k36:#faf8f8;--k37:#faf8f8;--k38:#faf8f7;--k39:#faf8f7;--k40:#faf8f7;--k41:#f9f8f7;--k42:#f9f8f7;--k43:#f6f8f5;--k44:#f9f7f6;--k45:#f9f7f6;--k46:#f9f7f6;--k47:#f6f7f4;--k48:#f8f6f5;--k49:#f8f7f5;--k50:#f9f7f6;--k51:#f8f6f5;--k52:#f9f7f6;--k53:#f8f7f5;--k54:#f7f5f4;--k55:#f7f5f4;--k56:#f7f5f3;--k57:#f6f4f2;--k58:#f2f2f2;--k59:#f8f6f5;--k60:#f8f5f5;--k61:#f8f5f4;--k62:#406c50;--k63:#317b4c;--k64:#f6f3f2;--k65:#f5f3f1;--k66:#f4f2f1;--k67:#327a54;--k68:#f5f2f0;--k69:#f0f2ee;--k70:#f5f3f1;--k71:#f5f2f0;--k72:#f4f1ef;--k73:#f4f0ee;--k74:#f4f1ee;--k75:#f5f2f0;--k76:#f4f0ee;--k77:#3f6d50;--k78:#f4f0ee;--k79:#f3f0ee;--k80:#f3efed;--k81:#f2eeec;--k82:#f2eeec;--k83:#f2edeb;--k84:#f0ece9;--k85:#f2eeec;--k86:#f0ebe9;--k87:#f2edeb;--k88:#f0ebe9;--k89:#f0ebe9;--k90:#eee9e6;--k91:#f1ecea;--k92:#efeae7;--k93:#eee9e6;--k94:#eee8e6;--k95:#ede8e5;--k96:#ede8e5;--k97:#ece7e3;--k98:#317c51;--k99:#eee8e5;--k100:#ece6e3;--k101:#ece7e3;--k102:#ece6e3;--k103:#ede8e5;--k104:#ece6e2;--k105:#ebe5e2;--k106:#ebe5e1;--k107:#ebe5e1;--k108:#ebe5e1;--k109:#ebe4e1;--k110:#eee9e6;--k111:#eae4e0;--k112:#ece7e3;--k113:#eae2de;--k114:#eae2dd;--k115:#e9e2dd;--k116:#ece5e2;--k117:#ebe3de;--k118:#eae2dd;--k119:#e9e1dd;--k120:#e7e6dd;--k121:#9a3b3b;--k122:#eae4e0;--k123:#e9e1dc;--k124:#e8e1dc;--k125:#ebe5e1;--k126:#e9e1dc;--k127:#eae2dd;--k128:#387552;--k129:#e8e0db;--k130:#e7dfda;--k131:#983e3e;--k132:#e6ded9;--k133:#e9e1dc;--k134:#e7ddd8;--k135:#e9e0db;--k136:#e6dcd6;--k137:#e5dbd5;--k138:#e5dbd4;--k139:#dfd3cb;--k140:#ded3ca;--k141:#ded2c9;--k142:#ddd0c8;--k143:#e3d8d2;--k144:#ddd1c8;--k145:#c9c2bc;--k146:#d8cac0;--k147:#ded1ca;--k148:#ded1c9;--k149:#d7c8be;--k150:#ddd0c8;--k151:#c1bab5;--k152:#d5c7bb;--k153:#d3c2b7;--k154:#cfc1b5;--k155:#b9b4b0;--k156:#ccbdb2;--k157:#bab4af;--k158:#bab3ae;--k159:#b4ada8;--k160:#904545;--k161:#cfbdb1;--k162:#c2b3a7;--k163:#c6b3a5;--k164:#a59c96;--k165:#ccb9ac;--k166:#a49c95;--k167:#a09892;--k168:#cfbcb1;--k169:#9f9790;--k170:#9c938c;--k171:#ad9e8d;--k172:#9c8d7f;--k173:#988a7d;--k174:#6a3333;--k175:#9f7777;--k176:#84766a;--k177:#81746a;--k178:#807469;--k179:#7e7267;--k180:#867567;--k181:#7a6c62;--k182:#6f4c32;--k183:#847260;--k184:#88735d;--k185:#746557;--k186:#746354;--k187:#7e6a56;--k188:#786351;--k189:#635448;--k190:#7d5f3c;--k191:#5f513e;--k192:#865a2d;--k193:#875a2d;--k194:#8a622f;--k195:#8c5d27;--k196:#8b6235;--k197:#87633f;--k198:#8b6437;--k199:#966426;--k200:#986830;--k201:#906b42;--k202:#906943;--k203:#3d3429;--k204:#926b42;--k205:#966b3b;--k206:#927346;--k207:#987542;--k208:#a56f32;--k209:#a57133;--k210:#9f6f3c;--k211:#ad711a;--k212:#b16e22;--k213:#382c1a;--k214:#392918;--k215:#352917;--k216:rgba(0,0,0,0.333);--k217:rgba(0,0,0,0.467);--k218:rgba(0,0,0,0.533);--k219:rgba(0,0,0,0.600);--k220:#000000;--k221:#eaeaea;--k222:#1e1e1e}}
:root[data-theme="light"]{color-scheme:light;--k1:rgba(30,30,30,0.004);--k2:rgba(30,30,30,0.024);--k3:rgba(30,30,30,0.055);--k4:rgba(134,90,45,0.176);--k5:rgba(134,90,45,0.247);--k6:rgba(139,93,44,0.118);--k7:rgba(140,90,39,0.020);--k8:rgba(140,90,39,0.278);--k9:rgba(30,30,30,0.027);--k10:rgba(30,30,30,0.059);--k11:rgba(30,30,30,0.067);--k12:rgba(30,30,30,0.149);--k13:rgba(133,84,38,0.078);--k14:rgba(116,83,49,0.098);--k15:rgba(237,231,229,0.349);--k16:rgba(250,248,247,0.878);--k17:rgba(250,249,248,0.549);--k18:rgba(0,0,0,0.176);--k19:rgba(0,0,0,0.220);--k20:rgba(0,0,0,0.349);--k21:rgba(0,0,0,0.478);--k22:rgba(250,249,249,0.937);--k23:rgba(250,249,248,0.667);--k24:rgba(249,247,246,0.600);--k25:rgba(247,245,244,0.600);--k26:rgba(202,178,162,0.122);--k27:rgba(196,170,151,0.188);--k28:#000000;--k29:#fbfaf9;--k30:#fafaf9;--k31:#945241;--k32:#f9faf8;--k33:#416c4b;--k34:#faf9f8;--k35:#faf9f8;--k36:#faf8f8;--k37:#faf8f8;--k38:#faf8f7;--k39:#faf8f7;--k40:#faf8f7;--k41:#f9f8f7;--k42:#f9f8f7;--k43:#f6f8f5;--k44:#f9f7f6;--k45:#f9f7f6;--k46:#f9f7f6;--k47:#f6f7f4;--k48:#f8f6f5;--k49:#f8f7f5;--k50:#f9f7f6;--k51:#f8f6f5;--k52:#f9f7f6;--k53:#f8f7f5;--k54:#f7f5f4;--k55:#f7f5f4;--k56:#f7f5f3;--k57:#f6f4f2;--k58:#f2f2f2;--k59:#f8f6f5;--k60:#f8f5f5;--k61:#f8f5f4;--k62:#406c50;--k63:#317b4c;--k64:#f6f3f2;--k65:#f5f3f1;--k66:#f4f2f1;--k67:#327a54;--k68:#f5f2f0;--k69:#f0f2ee;--k70:#f5f3f1;--k71:#f5f2f0;--k72:#f4f1ef;--k73:#f4f0ee;--k74:#f4f1ee;--k75:#f5f2f0;--k76:#f4f0ee;--k77:#3f6d50;--k78:#f4f0ee;--k79:#f3f0ee;--k80:#f3efed;--k81:#f2eeec;--k82:#f2eeec;--k83:#f2edeb;--k84:#f0ece9;--k85:#f2eeec;--k86:#f0ebe9;--k87:#f2edeb;--k88:#f0ebe9;--k89:#f0ebe9;--k90:#eee9e6;--k91:#f1ecea;--k92:#efeae7;--k93:#eee9e6;--k94:#eee8e6;--k95:#ede8e5;--k96:#ede8e5;--k97:#ece7e3;--k98:#317c51;--k99:#eee8e5;--k100:#ece6e3;--k101:#ece7e3;--k102:#ece6e3;--k103:#ede8e5;--k104:#ece6e2;--k105:#ebe5e2;--k106:#ebe5e1;--k107:#ebe5e1;--k108:#ebe5e1;--k109:#ebe4e1;--k110:#eee9e6;--k111:#eae4e0;--k112:#ece7e3;--k113:#eae2de;--k114:#eae2dd;--k115:#e9e2dd;--k116:#ece5e2;--k117:#ebe3de;--k118:#eae2dd;--k119:#e9e1dd;--k120:#e7e6dd;--k121:#9a3b3b;--k122:#eae4e0;--k123:#e9e1dc;--k124:#e8e1dc;--k125:#ebe5e1;--k126:#e9e1dc;--k127:#eae2dd;--k128:#387552;--k129:#e8e0db;--k130:#e7dfda;--k131:#983e3e;--k132:#e6ded9;--k133:#e9e1dc;--k134:#e7ddd8;--k135:#e9e0db;--k136:#e6dcd6;--k137:#e5dbd5;--k138:#e5dbd4;--k139:#dfd3cb;--k140:#ded3ca;--k141:#ded2c9;--k142:#ddd0c8;--k143:#e3d8d2;--k144:#ddd1c8;--k145:#c9c2bc;--k146:#d8cac0;--k147:#ded1ca;--k148:#ded1c9;--k149:#d7c8be;--k150:#ddd0c8;--k151:#c1bab5;--k152:#d5c7bb;--k153:#d3c2b7;--k154:#cfc1b5;--k155:#b9b4b0;--k156:#ccbdb2;--k157:#bab4af;--k158:#bab3ae;--k159:#b4ada8;--k160:#904545;--k161:#cfbdb1;--k162:#c2b3a7;--k163:#c6b3a5;--k164:#a59c96;--k165:#ccb9ac;--k166:#a49c95;--k167:#a09892;--k168:#cfbcb1;--k169:#9f9790;--k170:#9c938c;--k171:#ad9e8d;--k172:#9c8d7f;--k173:#988a7d;--k174:#6a3333;--k175:#9f7777;--k176:#84766a;--k177:#81746a;--k178:#807469;--k179:#7e7267;--k180:#867567;--k181:#7a6c62;--k182:#6f4c32;--k183:#847260;--k184:#88735d;--k185:#746557;--k186:#746354;--k187:#7e6a56;--k188:#786351;--k189:#635448;--k190:#7d5f3c;--k191:#5f513e;--k192:#865a2d;--k193:#875a2d;--k194:#8a622f;--k195:#8c5d27;--k196:#8b6235;--k197:#87633f;--k198:#8b6437;--k199:#966426;--k200:#986830;--k201:#906b42;--k202:#906943;--k203:#3d3429;--k204:#926b42;--k205:#966b3b;--k206:#927346;--k207:#987542;--k208:#a56f32;--k209:#a57133;--k210:#9f6f3c;--k211:#ad711a;--k212:#b16e22;--k213:#382c1a;--k214:#392918;--k215:#352917;--k216:rgba(0,0,0,0.333);--k217:rgba(0,0,0,0.467);--k218:rgba(0,0,0,0.533);--k219:rgba(0,0,0,0.600);--k220:#000000;--k221:#eaeaea;--k222:#1e1e1e}
:root{--bg:var(--k40);--bg2:var(--k55);--panel:var(--k65);--panel2:var(--k74);--line:var(--k108);--line2:var(--k136);--text:var(--k213);--muted:var(--k179);--gold:var(--k192);--gold2:var(--k211);--cream:var(--k207);--black:var(--k30);--danger:var(--k174);--success:var(--k128);--shell:min(1480px,calc(100% - 64px));--r:28px;--shadow:0 30px 100px var(--k20)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif;line-height:1.7;overflow-x:hidden}body::selection{background:var(--gold);color:var(--k53)}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.shell{width:var(--shell);margin-inline:auto}.site-noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.kicker,.hero-kicker{font-size:11px;letter-spacing:3.5px;color:var(--gold);font-weight:700}.btn-gold,.btn-line{display:inline-flex;align-items:center;gap:14px;border-radius:999px;padding:13px 22px;font-weight:700;transition:.3s}.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--k76);box-shadow:0 10px 35px var(--k4)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 45px var(--k5)}.btn-line{border:1px solid var(--k146);color:var(--k204);background:var(--k25)}.btn-line:hover{border-color:var(--gold);color:var(--k222)}.site-header{position:absolute;z-index:90;top:0;left:0;right:0;border-bottom:1px solid var(--k11);transition:.35s}.site-header.is-scrolled{position:fixed;background:var(--k16);backdrop-filter:blur(18px);box-shadow:0 14px 45px var(--k216)}.nav-shell{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;justify-self:start;direction:ltr}.brand img{width:55px;height:55px;object-fit:contain;filter:drop-shadow(0 6px 16px var(--k217))}.brand span{display:flex;flex-direction:column}.brand strong{font-family:Georgia,serif;font-size:21px;letter-spacing:5px;font-weight:500;color:var(--k199)}.brand small{font-size:7px;letter-spacing:2px;color:var(--k187)}.desktop-nav{display:flex;align-items:center;gap:36px;font-size:14px}.desktop-nav a{position:relative;color:var(--k203)}.desktop-nav a::after{content:"";position:absolute;right:0;bottom:-11px;width:0;height:1px;background:var(--gold);transition:.25s}.desktop-nav a:hover::after{width:100%}.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;direction:ltr}.icon-btn,.cart-btn,.menu-btn{border:0;color:var(--k222);background:transparent;display:grid;place-items:center;position:relative;width:42px;height:42px}.cart-btn b{position:absolute;right:0;top:0;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--k80);font-size:11px;display:grid;place-items:center}.i-search{width:17px;height:17px;border:1.8px solid currentColor;border-radius:50%;position:relative}.i-search::after{content:"";position:absolute;width:7px;height:1.8px;background:currentColor;transform:rotate(45deg);right:-5px;bottom:-2px}.i-user{width:16px;height:17px;border:1.6px solid currentColor;border-radius:8px 8px 5px 5px;position:relative;border-top-color:transparent}.i-user::before{content:"";position:absolute;width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%;top:-7px;left:3px;background:transparent}.i-bag{width:18px;height:19px;border:1.6px solid currentColor;border-radius:2px;position:relative}.i-bag::before{content:"";position:absolute;width:8px;height:6px;border:1.6px solid currentColor;border-bottom:0;border-radius:8px 8px 0 0;top:-6px;left:3px}.menu-btn{display:none}.menu-btn i{display:block;width:18px;height:1px;background:var(--k222);margin:3px}.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(390px,100%);background:var(--k45);z-index:200;transform:translateX(105%);transition:.35s;padding:28px;display:flex;flex-direction:column;gap:18px}.mobile-menu.open{transform:none}.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.mobile-menu-head img{width:58px}.mobile-menu-head button{background:transparent;border:0;color:var(--k222);font-size:32px}.mobile-menu>a{padding:13px 0;border-bottom:1px solid var(--k90);font-size:18px}.search-overlay{position:fixed;inset:0;background:var(--k22);backdrop-filter:blur(18px);z-index:250;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}.search-overlay.open{opacity:1;visibility:visible}.search-overlay form{width:min(760px,calc(100% - 40px))}.search-overlay form>span{display:block;color:var(--gold);font-size:13px;margin-bottom:15px}.search-overlay form>div{display:flex;border-bottom:1px solid var(--k153)}.search-overlay input{flex:1;background:transparent;border:0;color:var(--k222);font-size:30px;padding:16px 0;outline:0}.search-overlay button{border:0;background:transparent;color:var(--gold)}.search-close{position:absolute;top:30px;left:30px;color:var(--k222);background:transparent;border:0;font-size:35px}.toast{position:fixed;z-index:400;top:104px;right:24px;max-width:420px;padding:14px 18px;border-radius:14px;box-shadow:0 20px 50px var(--k218);animation:toastin .35s ease}.toast.success{background:var(--k67);border:1px solid var(--k98)}.toast.error{background:var(--k131);border:1px solid var(--k160)}@keyframes toastin{from{transform:translateY(-10px);opacity:0}}
/* HERO */
.hero3d{height:min(840px,94vh);min-height:690px;position:relative;overflow:hidden;background:radial-gradient(circle at 28% 45%,var(--k116) 0,var(--k15) 22%,transparent 48%),radial-gradient(circle at 80% 80%,var(--k81) 0,transparent 38%),linear-gradient(180deg,var(--k35),var(--k45) 80%,var(--k49));border-bottom:1px solid var(--k93)}.hero3d::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--k19),transparent 40%,var(--k18)),repeating-linear-gradient(120deg,transparent 0 2px,var(--k1) 3px 4px);pointer-events:none}.hero-ambient{position:absolute;width:700px;height:700px;border-radius:50%;left:8%;top:6%;background:radial-gradient(circle,var(--k26) 0,transparent 66%);filter:blur(10px);animation:ambient 8s ease-in-out infinite alternate}@keyframes ambient{to{transform:scale(1.14) translate(30px,-15px);opacity:.7}}.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1),visibility .8s}.hero-slide.is-active{opacity:1;visibility:visible;transform:scale(1)}.hero-layout{height:100%;padding-top:110px;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:50px}.hero-copy{position:relative;z-index:5;max-width:620px;transform:translateY(35px);opacity:0;transition:1s .2s cubic-bezier(.2,.8,.2,1)}.is-active .hero-copy{transform:none;opacity:1}.hero-copy h1{font-size:clamp(44px,5vw,78px);font-weight:700;line-height:1.23;margin:20px 0 24px;letter-spacing:-2.5px}.hero-copy p{font-size:18px;color:var(--k189);max-width:570px;line-height:2;margin:0 0 34px}.hero-cta{display:flex;gap:12px;flex-wrap:wrap}.hero-scene{position:relative;height:590px;perspective:1300px;transform-style:preserve-3d;--rx:0deg;--ry:0deg;--mx:0px;--my:0px}.hero-slide .hero-scene{opacity:0;transform:translate3d(-70px,18px,-120px) rotateY(-13deg) scale(.92);transform-origin:50% 50%;transition:opacity .65s ease,transform 1.05s cubic-bezier(.18,.8,.16,1)}.hero-slide.is-active .hero-scene{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}.hero-slide:not(.is-active) .float-bean{opacity:0;translate:-35px 25px}.hero-slide.is-active .float-bean{transition:opacity .7s .22s,translate 1s .18s cubic-bezier(.18,.8,.16,1)}.hero-scene>*{transform-style:preserve-3d}.scene-ring{position:absolute;width:440px;height:440px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(66deg) translateZ(-100px);border:1px solid var(--k8);box-shadow:0 0 0 35px var(--k7),0 0 90px var(--k13)}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.25}.orb-a{width:240px;height:240px;background:var(--k168);left:16%;top:15%;filter:blur(80px)}.orb-b{width:170px;height:170px;background:var(--k195);right:8%;bottom:10%;filter:blur(90px)}.coffee-pack{position:relative;background:linear-gradient(145deg,var(--k66),var(--k29) 62%,var(--k71));border:1px solid var(--k130);box-shadow:0 28px 70px var(--k219), inset 0 0 0 1px var(--k9);overflow:hidden}.coffee-pack::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,var(--k3) 42%,transparent 62%);transform:translateX(-70%);transition:.7s}.coffee-pack:hover::before{transform:translateX(70%)}.hero-pack{position:absolute;width:290px;height:410px;left:50%;top:50%;margin:-205px 0 0 -145px;border-radius:18px 18px 12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--mx),var(--my),70px) rotate(-3deg);transition:transform .16s ease-out;z-index:4}.hero-pack::after{content:"";position:absolute;top:15px;left:14px;right:14px;height:7px;border-top:1px solid var(--k12);border-bottom:1px solid var(--k10)}.hero-pack img{width:105px;height:105px;object-fit:contain;margin-bottom:4px;filter:drop-shadow(0 10px 18px var(--k218))}.hero-pack .pack-brand,.compact-pack .pack-brand{font-family:Georgia,serif;letter-spacing:7px;font-size:18px;color:var(--k193)}.hero-pack strong{font-family:Georgia,serif;letter-spacing:2px;font-size:25px;margin:23px 0 8px}.hero-pack small{font-size:9px;letter-spacing:1.5px;color:var(--k188)}.hero-pack i{position:absolute;bottom:24px;font-size:7px;font-style:normal;letter-spacing:2px;color:var(--k162)}.pack-copper{background:linear-gradient(150deg,var(--k88),var(--k34) 65%,var(--k112))}.pack-forest{background:linear-gradient(150deg,var(--k62),var(--k33) 65%,var(--k77))}.pack-ivory{background:linear-gradient(150deg,var(--k206),var(--k191) 65%,var(--k215));color:var(--k83);border-color:var(--k171)}.pack-ivory .pack-brand,.pack-ivory strong{color:var(--k122)}.pack-ivory small,.pack-ivory i{color:var(--k154)}.pack-cocoa{background:linear-gradient(150deg,var(--k94),var(--k39) 65%,var(--k127))}.pack-noir{background:linear-gradient(150deg,var(--k58),var(--k28) 65%,var(--k221))}.float-bean{position:absolute;width:52px;height:78px;border-radius:48% 52% 47% 53%/55% 45% 55% 45%;background:radial-gradient(circle at 35% 28%,var(--k165) 0,var(--k135) 20%,var(--k75) 62%,var(--k31) 100%);box-shadow:inset 8px 4px 9px var(--k10),inset -8px -10px 13px var(--k218),0 16px 35px var(--k218);transform:rotate(var(--rot,20deg)) translateZ(var(--z,20px));opacity:.95}.float-bean::after{content:"";position:absolute;left:47%;top:8%;bottom:8%;width:4px;border-radius:50%;background:linear-gradient(var(--k59),var(--k148),var(--k52));transform:rotate(8deg)}.bean-1{left:13%;top:18%;--rot:26deg;--z:55px;scale:.72}.bean-2{right:10%;top:15%;--rot:-22deg;--z:120px;scale:.55}.bean-3{left:5%;bottom:22%;--rot:-9deg;--z:25px;scale:.48}.bean-4{right:17%;bottom:15%;--rot:44deg;--z:75px;scale:.82}.bean-5{left:27%;top:2%;--rot:70deg;--z:15px;scale:.36}.bean-6{right:3%;top:47%;--rot:18deg;--z:145px;scale:.42}.bean-7{left:19%;bottom:4%;--rot:-52deg;--z:80px;scale:.38}.bean-8{right:28%;top:34%;--rot:5deg;--z:160px;scale:.28}.is-active .float-bean{animation:beanfloat 5s ease-in-out infinite alternate}.is-active .bean-2,.is-active .bean-6{animation-delay:-1.2s}.is-active .bean-4,.is-active .bean-7{animation-delay:-2.4s}@keyframes beanfloat{to{translate:12px -24px;rotate:8deg}}.scene-word{position:absolute;left:-3%;bottom:7%;font-family:Georgia,serif;font-size:110px;letter-spacing:16px;color:transparent;-webkit-text-stroke:1px var(--k6);transform:translateZ(-120px);white-space:nowrap}.hero-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:20;display:flex;align-items:center;gap:22px;direction:ltr}.hero-count{display:flex;align-items:center;gap:10px;color:var(--k180);font-size:12px}.hero-count i{width:30px;height:1px;background:var(--k141)}.hero-progress{width:150px;height:1px;background:var(--k126);overflow:hidden}.hero-progress b{display:block;height:100%;background:var(--gold);width:0}.hero-arrows{display:flex;gap:8px}.hero-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--k142);background:var(--k17);color:var(--k205);font-size:18px}.hero-arrows button:hover{border-color:var(--gold);background:var(--k72)}.hero-side-note{position:absolute;left:34px;top:45%;font-family:Georgia,serif;letter-spacing:4px;font-size:10px;line-height:2;color:var(--k183);border-left:1px solid var(--k149);padding-left:16px;direction:ltr}
/* trust */
.trust-bar{background:var(--k51);border-bottom:1px solid var(--k102)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:112px;align-items:center}.trust-grid>div{display:grid;grid-template-columns:54px 1fr;column-gap:13px;align-items:center;padding:20px 32px;border-left:1px solid var(--k102)}.trust-grid>div:last-child{border-left:0}.trust-grid b{font-size:13px}.trust-grid small{color:var(--k169);font-size:11px}.line-icon{grid-row:span 2;width:45px;height:45px;border:1px solid var(--k152);border-radius:50%;position:relative}.bean-icon::after{content:"";position:absolute;width:13px;height:23px;border:1.5px solid var(--gold);border-radius:50%;left:15px;top:9px;transform:rotate(30deg)}.bean-icon::before{content:"";position:absolute;width:1px;height:18px;background:var(--gold);left:22px;top:12px;transform:rotate(30deg)}.flame-icon::after{content:"";position:absolute;width:14px;height:22px;border:1.5px solid var(--gold);border-radius:70% 30% 60% 40%;left:14px;top:10px;transform:rotate(45deg)}.truck-icon::after{content:"";position:absolute;width:22px;height:12px;border:1.5px solid var(--gold);left:7px;top:15px}.truck-icon::before{content:"••";position:absolute;color:var(--gold);letter-spacing:10px;left:8px;top:20px}.seal-icon::after{content:"✓";position:absolute;color:var(--gold);left:14px;top:8px;font-size:20px}
/* categories */
.section-dark{padding:58px 0 25px;background:linear-gradient(180deg,var(--k42),var(--k46))}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.type-card{min-height:300px;border:1px solid var(--k118);border-radius:20px;overflow:hidden;position:relative;display:grid;grid-template-columns:1.05fr .95fr;background:var(--k54);isolation:isolate}.type-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--k21));z-index:-1}.type-copy{padding:54px 42px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}.type-copy>span{font-size:11px;color:var(--k156)}.type-copy h2{font-size:29px;margin:6px 0 4px}.type-copy p{color:var(--k177);margin:0 0 28px}.type-copy b{font-size:12px;color:var(--k200)}.type-art{position:relative;min-height:300px}.bean-field{overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--k133),var(--k37) 72%)}.bean-field i{position:absolute;width:56px;height:78px;border-radius:50%;background:radial-gradient(circle at 36% 25%,var(--k161),var(--k125) 38%,var(--k50) 100%);box-shadow:inset 6px 6px 8px var(--k27),0 10px 22px var(--k218);transform:rotate(calc(var(--i,1)*17deg))}.bean-field i::after{content:"";position:absolute;width:3px;top:9px;bottom:9px;left:48%;background:var(--k60);border-radius:50%;transform:rotate(8deg)}.bean-field i:nth-child(1){left:8%;top:12%;--i:1}.bean-field i:nth-child(2){left:25%;top:3%;--i:2;scale:.7}.bean-field i:nth-child(3){left:42%;top:20%;--i:3;scale:.9}.bean-field i:nth-child(4){left:66%;top:8%;--i:4;scale:.75}.bean-field i:nth-child(5){left:78%;top:32%;--i:5;scale:.95}.bean-field i:nth-child(6){left:3%;top:48%;--i:6;scale:.8}.bean-field i:nth-child(7){left:28%;top:52%;--i:7;scale:1.05}.bean-field i:nth-child(8){left:54%;top:52%;--i:8;scale:.7}.bean-field i:nth-child(9){left:72%;top:68%;--i:9;scale:.6}.bean-field i:nth-child(n+10){display:none}.powder-art{background:radial-gradient(circle at 48% 48%,var(--k147),var(--k85) 43%,var(--k38) 72%)}.powder-art::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(64deg);background:radial-gradient(ellipse,var(--k143),var(--k91) 60%,var(--k61) 62%);box-shadow:0 30px 50px var(--k219)}.powder-art i{position:absolute;width:200px;height:8px;background:var(--k182);left:22%;top:48%;transform:rotate(-30deg);border-radius:10px;box-shadow:0 5px 15px var(--k218)}.powder-art b{position:absolute;width:90px;height:90px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(64deg);background:radial-gradient(ellipse,var(--k150),var(--k110));filter:contrast(1.2)}
/* products */
.products-section{padding:70px 0 90px;background:var(--k42)}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.section-title h2{font-size:35px;margin:5px 0 0}.section-title p{margin:3px 0 0;color:var(--k169)}.section-title>a{font-size:12px;color:var(--k190)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:var(--k56);border:1px solid var(--k97);border-radius:16px;overflow:hidden;transition:.35s}.product-card:hover{transform:translateY(-6px);border-color:var(--k138);box-shadow:0 25px 55px var(--k216)}.product-visual{height:320px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 34%,var(--k104),var(--k57) 63%,var(--k44));overflow:hidden}.product-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 30%,var(--k2),transparent 64%)}.wish-dot{position:absolute;top:16px;right:16px;z-index:3;width:35px;height:35px;border:1px solid var(--k140);border-radius:50%;background:var(--k24);color:var(--k197);font-size:19px}.compact-pack{width:145px;height:205px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;transform:rotate(-1.5deg);transition:.35s}.product-card:hover .compact-pack{transform:rotate(1deg) translateY(-6px) scale(1.025)}.compact-pack img{width:55px;height:55px;object-fit:contain}.compact-pack .pack-brand{font-size:10px;letter-spacing:3px}.compact-pack strong{font-family:Georgia,serif;font-size:14px;margin-top:17px;letter-spacing:1px}.compact-pack small{font-size:7px;color:var(--k184);margin-top:7px}.uploaded-product{max-height:88%;max-width:80%;object-fit:contain;position:relative;z-index:2}.bean-shadow{position:absolute;width:180px;height:24px;border-radius:50%;background:var(--k220);filter:blur(17px);bottom:33px;opacity:.6}.product-copy{padding:18px}.product-tags{display:flex;gap:7px}.product-tags span{font-size:9px;color:var(--k172);border:1px solid var(--k115);padding:3px 7px;border-radius:999px}.product-copy h3{font-size:16px;margin:10px 0 4px}.product-copy p{color:var(--k169);font-size:12px;min-height:42px;margin:0 0 15px}.product-bottom{display:flex;justify-content:space-between;align-items:end}.product-bottom>div{display:flex;flex-direction:column}.product-bottom del{font-size:10px;color:var(--k151)}.product-bottom strong{font-size:14px;color:var(--k210)}.quick-add button{width:38px;height:38px;border-radius:10px;border:0;background:var(--gold);color:var(--k79);font-size:22px}.quick-add button:hover{background:var(--gold2)}
/* story */
.origin-story{min-height:430px;display:grid;grid-template-columns:1.2fr .8fr;background:var(--k57);border-top:1px solid var(--k105);border-bottom:1px solid var(--k105)}.origin-visual{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 80%,var(--k120),var(--k47) 56%,var(--k32));min-height:430px}.origin-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--k23),transparent 50%),radial-gradient(circle at 20% 25%,var(--k14),transparent 35%)}.mountain{position:absolute;left:-10%;right:-10%;bottom:-5%;height:66%;background:var(--k69);clip-path:polygon(0 78%,12% 61%,24% 67%,37% 38%,46% 49%,58% 25%,70% 47%,81% 30%,100% 60%,100% 100%,0 100%)}.m2{bottom:-12%;height:58%;background:var(--k43);transform:scaleX(1.1)}.origin-lines{position:absolute;left:8%;bottom:18%;direction:ltr;font-family:Georgia,serif;letter-spacing:5px;line-height:1.8;color:var(--k194);font-size:18px}.origin-copy{padding:70px 8vw 60px 5vw;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 90% 50%,var(--k87),var(--k51) 65%)}.origin-copy h2{font-size:36px;line-height:1.65;margin:10px 0 16px}.origin-copy p{color:var(--k178);line-height:2;max-width:590px}.circle-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:13px}.circle-link span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--k70)}.journal{padding:80px 0}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.journal-grid article{border-top:1px solid var(--k144);padding:24px 8px 15px}.journal-grid span{font-family:Georgia,serif;color:var(--gold);font-size:12px}.journal-grid h3{font-size:18px}.journal-grid p{color:var(--k167);font-size:13px}
/* newsletter/footer */
.newsletter-strip{border-top:1px solid var(--k101);background:radial-gradient(circle at 10% 50%,var(--k99),var(--k45) 52%);padding:45px 0}.newsletter-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.newsletter-grid h2{margin:6px 0;font-size:28px}.newsletter-grid p{color:var(--k170);margin:0}.newsletter-form{display:flex;border:1px solid var(--k139);border-radius:999px;padding:5px;background:var(--k40)}.newsletter-form input{flex:1;border:0;background:transparent;color:var(--k222);padding:12px 19px;outline:0}.newsletter-form button{border:0;border-radius:999px;padding:12px 30px;background:var(--gold);color:var(--k78);font-weight:800}.site-footer{background:var(--k36);padding:60px 0 25px;border-top:1px solid var(--k96)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px}.footer-grid>div{display:flex;flex-direction:column;gap:10px}.footer-grid h3{font-size:13px;color:var(--k201);margin:0 0 9px}.footer-grid a,.footer-grid span{font-size:12px;color:var(--k166)}.footer-brand img{width:75px}.footer-brand>div{display:flex;flex-direction:column;direction:ltr;align-items:flex-start}.footer-brand strong{font-family:Georgia,serif;color:var(--k192);letter-spacing:5px;font-size:19px}.footer-brand small{font-size:7px;letter-spacing:2px}.footer-brand p{font-size:12px;color:var(--k164);max-width:330px}.footer-bottom{border-top:1px solid var(--k86);margin-top:45px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;color:var(--k145);font-size:10px}.footer-quote{color:var(--k173)}.socials{display:flex;gap:10px}.socials span{border:1px solid var(--k114);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
/* generic pages */
.page-hero{padding:180px 0 70px;background:radial-gradient(circle at 20% 20%,var(--k103),var(--k42) 55%);border-bottom:1px solid var(--k100)}.page-hero.compact{padding-bottom:46px}.page-hero h1{font-size:46px;margin:8px 0}.page-hero p{color:var(--k176)}.section{padding:65px 0}.flash{padding:13px 16px;border-radius:12px;margin-bottom:18px}.flash.error{background:var(--k121)}.flash.success{background:var(--k63)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--k186)}input,textarea,select{width:100%;background:var(--k51);border:1px solid var(--k124);color:var(--k214);border-radius:12px;padding:13px 14px;outline:0}input:focus,textarea:focus,select:focus{border-color:var(--k163)}.btn{border:0;border-radius:12px;padding:13px 20px;font-weight:800}.btn.primary{background:var(--gold);color:var(--k82)}.btn.ghost{background:var(--k68);color:var(--k202);border:1px solid var(--k134)}.btn.full{width:100%}.muted{color:var(--k167)}.empty-state{text-align:center;padding:80px 20px;border:1px dashed var(--k132);border-radius:22px}.empty-state img{width:90px;opacity:.7}.empty-state h2{font-size:26px}
/* shop */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px}.filters{position:sticky;top:110px;align-self:start;border:1px solid var(--k109);border-radius:18px;padding:20px;background:var(--k48)}.filters h3{margin-top:0}.filter-group{padding:16px 0;border-top:1px solid var(--k95)}.filter-group label{margin:8px 0}.filter-group a{display:block;padding:7px 0;color:var(--k177);font-size:13px}.filter-group a.active{color:var(--gold)}.shop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.shop-head select{width:auto}.shop-grid{grid-template-columns:repeat(3,1fr)}
/* product detail */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.detail-visual{min-height:650px;background:radial-gradient(circle at 50% 38%,var(--k117),var(--k64) 55%,var(--k41) 85%);border:1px solid var(--k113);border-radius:24px;display:grid;place-items:center;position:sticky;top:110px;overflow:hidden}.detail-visual .coffee-pack{width:260px;height:370px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center}.detail-visual .coffee-pack img{width:95px}.detail-visual .coffee-pack .pack-brand{font-size:16px}.detail-visual .coffee-pack strong{font-size:23px;margin:25px 0 7px}.detail-visual .coffee-pack small{font-size:9px}.detail-copy{padding:20px 0}.breadcrumbs{font-size:11px;color:var(--k157);margin-bottom:18px}.detail-copy h1{font-size:42px;line-height:1.4;margin:8px 0 12px}.detail-sub{color:var(--k181);font-size:15px}.detail-price{font-size:24px;color:var(--k209);margin:25px 0}.detail-price del{font-size:13px;color:var(--k155);margin-left:9px}.coffee-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--k107);border:1px solid var(--k107);border-radius:15px;overflow:hidden;margin:28px 0}.coffee-facts div{background:var(--k51);padding:16px}.coffee-facts small{display:block;color:var(--k158);font-size:10px}.coffee-facts b{font-size:13px}.grind-select{margin:24px 0}.grind-select>span{display:block;font-size:12px;margin-bottom:10px;color:var(--k185)}.grind-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grind-options label{position:relative}.grind-options input{position:absolute;opacity:0}.grind-options span{border:1px solid var(--k129);border-radius:10px;padding:10px 8px;text-align:center;font-size:11px;cursor:pointer}.grind-options input:checked+span{border-color:var(--gold);background:var(--k89);color:var(--k212)}.buy-row{display:grid;grid-template-columns:100px 1fr;gap:10px}.buy-row input{text-align:center}.stock-note{margin-top:12px;font-size:11px;color:var(--k159)}.product-long{margin-top:35px;padding-top:28px;border-top:1px solid var(--k102);color:var(--k177);line-height:2}.related{margin-top:70px}
/* cart/checkout */
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:34px}.cart-list{display:flex;flex-direction:column;gap:10px}.cart-item{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;border:1px solid var(--k106);border-radius:16px;padding:14px;background:var(--k48)}.cart-mini-pack{height:90px;background:var(--k73);border-radius:10px;display:grid;place-items:center}.cart-mini-pack img{width:56px}.cart-item h3{margin:0 0 4px;font-size:15px}.cart-item small{color:var(--k169)}.cart-item .qty-row{display:flex;align-items:center;gap:8px}.cart-item .qty-row input{width:68px;padding:8px}.remove-link{color:var(--k175);font-size:11px;background:none;border:0}.summary{border:1px solid var(--k119);background:var(--k51);border-radius:18px;padding:22px;height:max-content;position:sticky;top:110px}.summary h3{margin-top:0}.summary>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:13px}.summary hr{border:0;border-top:1px solid var(--k106)}.summary .total{font-size:16px;color:var(--k208)}.coupon-box{display:flex;gap:8px;margin:16px 0}.coupon-box input{padding:10px}.coupon-box button{border:0;border-radius:10px;padding:0 12px;background:var(--k92);color:var(--k198)}.checkout-form{border:1px solid var(--k111);border-radius:18px;padding:24px;background:var(--k46)}.checkout-form h3{margin-top:0}
/* tracking/thankyou */
.track-box{max-width:650px;margin:auto}.status-card{margin-top:25px;border:1px solid var(--k123);border-radius:18px;padding:22px}.status-pill{display:inline-block;border-radius:999px;padding:5px 10px;background:var(--k90);color:var(--k196);font-size:11px}.order-items{margin-top:15px;border-top:1px solid var(--k102)}.order-items>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--k84);font-size:12px}
@media(max-width:1100px){:root{--shell:min(100% - 36px,1100px)}.desktop-nav{gap:18px;font-size:12px}.hero-layout{grid-template-columns:1fr 1fr}.hero-copy h1{font-size:52px}.product-grid{grid-template-columns:repeat(2,1fr)}.shop-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-grid>div:nth-child(2){border-left:0}.trust-grid>div:nth-child(-n+2){border-bottom:1px solid var(--k102)}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid>div:last-child{display:none}}
@media(max-width:780px){:root{--shell:calc(100% - 28px)}.site-header{position:absolute}.nav-shell{height:74px;grid-template-columns:1fr auto}.brand img{width:44px;height:44px}.brand strong{font-size:17px}.brand small{font-size:5.5px}.desktop-nav,.nav-actions .icon-btn{display:none}.nav-actions{display:flex}.menu-btn{display:grid}.hero3d{min-height:760px;height:88vh}.hero-layout{grid-template-columns:1fr;padding-top:95px;align-content:start;gap:0}.hero-copy{text-align:center;max-width:none}.hero-copy h1{font-size:38px;letter-spacing:-1px;margin:13px 0 16px}.hero-copy p{font-size:14px;line-height:1.9;margin-inline:auto}.hero-cta{justify-content:center}.hero-scene{height:360px;margin-top:5px}.hero-pack{width:190px;height:270px;margin:-135px 0 0 -95px}.hero-pack img{width:72px;height:72px}.hero-pack strong{font-size:17px;margin-top:14px}.scene-ring{width:285px;height:285px}.scene-word{font-size:55px;left:2%;bottom:4%}.float-bean{width:35px;height:52px}.hero-controls{bottom:18px}.hero-side-note{display:none}.trust-grid{grid-template-columns:1fr}.trust-grid>div{border-left:0!important;border-bottom:1px solid var(--k102)!important;padding:16px 4px}.type-grid{grid-template-columns:1fr}.type-card{grid-template-columns:1fr 1fr;min-height:230px}.type-art{min-height:230px}.type-copy{padding:30px 22px}.product-grid,.shop-grid{grid-template-columns:1fr 1fr;gap:10px}.product-visual{height:230px}.compact-pack{width:115px;height:165px}.product-copy{padding:13px}.product-copy p{display:none}.origin-story{grid-template-columns:1fr}.origin-copy{padding:42px 24px}.origin-copy h2{font-size:29px}.journal-grid{grid-template-columns:1fr}.newsletter-grid{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:last-child{display:flex}.footer-brand{grid-column:1/-1}.footer-bottom{gap:12px;flex-wrap:wrap}.shop-layout{grid-template-columns:1fr}.filters{position:static}.product-detail{grid-template-columns:1fr;gap:20px}.detail-visual{position:relative;top:auto;min-height:460px}.detail-copy h1{font-size:32px}.grind-options{grid-template-columns:repeat(2,1fr)}.cart-layout,.checkout-layout{grid-template-columns:1fr}.summary{position:static}.form-grid{grid-template-columns:1fr}.page-hero{padding-top:125px}.page-hero h1{font-size:34px}}
@media(max-width:500px){.product-grid,.shop-grid{grid-template-columns:1fr}.product-visual{height:310px}.compact-pack{width:145px;height:205px}.type-card{grid-template-columns:1fr;min-height:360px}.type-art{min-height:190px}.type-copy{padding:22px}.hero-copy h1{font-size:34px}.hero-copy p{font-size:13px}.btn-gold,.btn-line{padding:11px 16px;font-size:12px}.newsletter-form{flex-direction:column;border:0;background:transparent}.newsletter-form input{border:1px solid var(--k137);border-radius:999px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-grid>div:last-child{display:flex}.cart-item{grid-template-columns:64px 1fr}.cart-item>div:last-child{grid-column:1/-1}.coffee-facts{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-scene{transform:none!important}}
/* ==========================================================================
   Aroast — layer 2
   Typography, the semantic colour aliases the new components speak in, the
   mobile app shell, the blog, and the richer product/order UI.
   The tokens (--k*) above are generated; everything below is hand-written.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
      url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Vazirmatn Static';
  src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ------------------------------------------------- semantic colour layer --- */
/* The generated ramp gives surfaces and text; these name the meanings the new
   components need, and they are defined per theme so contrast holds in both. */
:root{
  --font-fa:'Vazirmatn','Vazirmatn Static',Tahoma,Arial,sans-serif;

  --ok:#4bb07a;      --ok-bg:rgba(75,176,122,.14);   --ok-line:rgba(75,176,122,.34);
  --warn:#e0a44f;    --warn-bg:rgba(224,164,79,.14); --warn-line:rgba(224,164,79,.34);
  --bad:#e0706b;     --bad-bg:rgba(224,112,107,.14); --bad-line:rgba(224,112,107,.34);
  --info:#5fa8d3;    --info-bg:rgba(95,168,211,.14); --info-line:rgba(95,168,211,.34);
  --purple:#a98ad1;  --purple-bg:rgba(169,138,209,.14); --purple-line:rgba(169,138,209,.34);
  --accentc:#d1a06d; --accentc-bg:rgba(209,160,109,.14); --accentc-line:rgba(209,160,109,.36);
  --neutral:#9d9086; --neutral-bg:rgba(157,144,134,.12); --neutral-line:rgba(157,144,134,.3);

  /* Named explicitly rather than aliased to a generated token: these are the
     colours the new components are designed around, and they must not drift
     when the generated ramp is regenerated. */
  --surface:#151110;          /* card on the page */
  --surface-2:#1c1613;        /* raised card */
  --hairline:#302319;
  --ink:#f4ecdf;
  --ink-soft:#ab9c8f;
  --brand:#d1a06d;            /* Aroast gold */
  --brand-2:#f1c98f;          /* gold highlight, for gradients */
  --on-brand:#20140d;         /* text that sits on a gold fill */

  --tap:44px;                  /* minimum comfortable touch target */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"],
:root:not([data-theme="dark"]){
  --surface:#fffdfa;
  --surface-2:#f6f0e7;
  --hairline:#e6dbcb;
  --ink:#241a12;
  --ink-soft:#6a5d51;
  --brand:#8a5a24;
  --brand-2:#b07c38;
  --on-brand:#fff8ec;
  --ok:#1e7a4c;      --ok-bg:rgba(30,122,76,.10);    --ok-line:rgba(30,122,76,.26);
  --warn:#a86a12;    --warn-bg:rgba(168,106,18,.10); --warn-line:rgba(168,106,18,.26);
  --bad:#b5322c;     --bad-bg:rgba(181,50,44,.10);   --bad-line:rgba(181,50,44,.24);
  --info:#1d6c99;    --info-bg:rgba(29,108,153,.10); --info-line:rgba(29,108,153,.24);
  --purple:#6c4ea0;  --purple-bg:rgba(108,78,160,.10); --purple-line:rgba(108,78,160,.24);
  --accentc:#8a5a24; --accentc-bg:rgba(138,90,36,.10); --accentc-line:rgba(138,90,36,.26);
  --neutral:#6b615a; --neutral-bg:rgba(107,97,90,.09); --neutral-line:rgba(107,97,90,.24);
}
/* A system-light visitor with no stored choice gets the light semantics too. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#151110;
    --surface-2:#1c1613;
    --hairline:#302319;
    --ink:#f4ecdf;
    --ink-soft:#ab9c8f;
    --brand:#d1a06d;
    --brand-2:#f1c98f;
    --on-brand:#20140d;
    --ok:#4bb07a;      --ok-bg:rgba(75,176,122,.14);   --ok-line:rgba(75,176,122,.34);
    --warn:#e0a44f;    --warn-bg:rgba(224,164,79,.14); --warn-line:rgba(224,164,79,.34);
    --bad:#e0706b;     --bad-bg:rgba(224,112,107,.14); --bad-line:rgba(224,112,107,.34);
    --info:#5fa8d3;    --info-bg:rgba(95,168,211,.14); --info-line:rgba(95,168,211,.34);
    --purple:#a98ad1;  --purple-bg:rgba(169,138,209,.14); --purple-line:rgba(169,138,209,.34);
    --accentc:#d1a06d; --accentc-bg:rgba(209,160,109,.14); --accentc-line:rgba(209,160,109,.36);
    --neutral:#9d9086; --neutral-bg:rgba(157,144,134,.12); --neutral-line:rgba(157,144,134,.3);
  }
}

/* ----------------------------------------------------------------- base --- */
body{
  font-family:var(--font-fa);
  font-feature-settings:'ss01','ss02';
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  padding-bottom:0;
}
h1,h2,h3,h4{letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;right:16px;z-index:5000;background:var(--brand);color:var(--on-brand);
  padding:12px 20px;border-radius:0 0 14px 14px;font-weight:700;transition:.25s}
.skip-link:focus{top:0}

/* ------------------------------------------------------- theme switcher --- */
.i-sun,.i-moon{width:18px;height:18px;display:block;position:relative}
.i-sun{border-radius:50%;box-shadow:inset 0 0 0 2px currentColor}
.i-sun::before,.i-sun::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle at 50% 0,currentColor 0 1.6px,transparent 1.8px) top/100% 4px no-repeat,
             radial-gradient(circle at 50% 100%,currentColor 0 1.6px,transparent 1.8px) bottom/100% 4px no-repeat,
             radial-gradient(circle at 0 50%,currentColor 0 1.6px,transparent 1.8px) left/4px 100% no-repeat,
             radial-gradient(circle at 100% 50%,currentColor 0 1.6px,transparent 1.8px) right/4px 100% no-repeat}
.i-sun::after{transform:rotate(45deg)}
.i-moon{border-radius:50%;box-shadow:inset -4px 2px 0 0 currentColor;transform:rotate(-24deg)}
[data-theme-toggle]{position:relative}
[data-theme-toggle] .i-moon{display:none}
:root[data-theme="light"] [data-theme-toggle] .i-sun{display:none}
:root[data-theme="light"] [data-theme-toggle] .i-moon{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) [data-theme-toggle] .i-sun{display:none}
  :root:not([data-theme="dark"]) [data-theme-toggle] .i-moon{display:block}
}
.menu-theme{display:flex;align-items:center;gap:12px;margin-top:auto;background:var(--surface-2);
  border:1px solid var(--hairline);color:var(--ink);border-radius:14px;padding:14px 18px;font-size:15px;width:100%}

/* --------------------------------------------------------- breadcrumbs --- */
.breadcrumbs{padding:96px 0 0;font-size:13px}
.home-page .breadcrumbs{display:none}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:var(--ink-soft)}
.breadcrumbs li+li::before{content:"‹";margin-left:8px;opacity:.5}
.breadcrumbs a{color:var(--ink-soft);transition:.2s}
.breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}

/* -------------------------------------------------------- status pills --- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1.6;white-space:nowrap;border:1px solid transparent}
.pill i{font-style:normal;font-size:11px;line-height:1}
.pill-success{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.pill-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.pill-danger{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.pill-info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.pill-purple{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-line)}
.pill-accent{color:var(--accentc);background:var(--accentc-bg);border-color:var(--accentc-line)}
.pill-muted{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-line)}

/* --------------------------------------------------- mobile app shell --- */
.tabbar{display:none}
@media (max-width:900px){
  body{padding-bottom:calc(66px + var(--safe-b))}
  .tabbar{
    position:fixed;z-index:180;inset:auto 0 0 0;display:grid;grid-template-columns:repeat(5,1fr);
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
    border-top:1px solid var(--hairline);padding-bottom:var(--safe-b);
  }
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    min-height:62px;color:var(--ink-soft);font-size:10.5px;position:relative;transition:.2s var(--ease)}
  .tabbar a b{font-weight:600}
  .tabbar a.is-active{color:var(--brand)}
  .tabbar a.is-active::before{content:"";position:absolute;top:0;width:26px;height:2.5px;border-radius:0 0 4px 4px;background:var(--brand)}
  .tabbar a:active{transform:scale(.94)}
  .tab-dot{position:absolute;top:8px;left:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;
    border-radius:9px;background:var(--brand);color:var(--on-brand);font-size:10px;font-style:normal;
    display:grid;place-items:center;font-weight:800}
  .desktop-only{display:none}
}
.to-top{position:fixed;z-index:150;inset:auto 22px calc(22px + var(--safe-b)) auto;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--hairline);background:var(--surface-2);color:var(--ink);
  font-size:19px;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.28);
  opacity:0;transform:translateY(14px);transition:.3s var(--ease)}
.to-top.show{opacity:1;transform:none}
@media (max-width:900px){.to-top{inset:auto 16px calc(80px + var(--safe-b)) auto;width:42px;height:42px}}

/* ------------------------------------------------------------- toasts --- */
.toast{position:fixed;z-index:400;top:calc(20px + var(--safe-t));left:50%;transform:translateX(-50%);
  padding:13px 22px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 18px 44px rgba(0,0,0,.32);
  border:1px solid transparent;animation:toastIn .4s var(--ease)}
.toast.success{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line);backdrop-filter:blur(14px)}
.toast.error{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line);backdrop-filter:blur(14px)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-18px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:900px){.toast{top:auto;bottom:calc(84px + var(--safe-b));width:calc(100% - 32px);text-align:center}}

/* ---------------------------------------------------------- blog: list --- */
.page-head{padding:150px 0 40px;text-align:center}
.page-head .kicker{display:block;margin-bottom:14px}
.page-head h1{font-size:clamp(30px,5vw,52px);margin:0 0 14px}
.page-head p{color:var(--ink-soft);max-width:660px;margin:0 auto;font-size:16px}

.blog-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 42px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;
  border:1px solid var(--hairline);color:var(--ink-soft);font-size:13.5px;transition:.25s var(--ease);background:var(--surface)}
.chip:hover{border-color:var(--brand);color:var(--ink)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.chip small{opacity:.7;font-size:11px}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);
  border-radius:22px;overflow:hidden;transition:.35s var(--ease)}
.post-card:hover{transform:translateY(-5px);border-color:var(--accentc-line);box-shadow:0 26px 60px rgba(0,0,0,.24)}
.post-card .pc-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.post-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.post-card:hover .pc-media img{transform:scale(1.06)}
.post-card .pc-cat{position:absolute;top:12px;right:12px;padding:6px 13px;border-radius:999px;
  background:rgba(12,9,7,.72);color:#f0dcc4;font-size:11.5px;font-weight:700;backdrop-filter:blur(8px)}
.post-card .pc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.post-card h3{margin:0;font-size:19px;line-height:1.6}
.post-card h3 a{transition:.2s}
.post-card h3 a:hover{color:var(--brand)}
.post-card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.9;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--ink-soft);font-size:12.5px;align-items:center}
.post-meta span{display:inline-flex;align-items:center;gap:5px}

.post-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--surface);
  border:1px solid var(--hairline);border-radius:26px;overflow:hidden;margin-bottom:42px}
.post-feature .pf-media{position:relative;min-height:340px;overflow:hidden}
.post-feature .pf-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.post-feature .pf-body{padding:44px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.post-feature h2{margin:0;font-size:clamp(22px,3vw,32px);line-height:1.55}
.post-feature p{color:var(--ink-soft);margin:0;line-height:2}
@media (max-width:860px){.post-feature{grid-template-columns:1fr}.post-feature .pf-media{min-height:220px}.post-feature .pf-body{padding:28px 22px}}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 12px;
  border-radius:12px;border:1px solid var(--hairline);color:var(--ink-soft);font-size:14px;transition:.25s}
.pagination a:hover{border-color:var(--brand);color:var(--ink)}
.pagination .is-current{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}

/* -------------------------------------------------------- blog: article --- */
.article-hero{padding:140px 0 0}
.article-hero .shell{max-width:900px}
.article-hero h1{font-size:clamp(27px,4.4vw,46px);line-height:1.45;margin:16px 0 18px}
.article-hero .lede{color:var(--ink-soft);font-size:17.5px;line-height:2;margin:0 0 24px}
.article-cover{margin:30px 0 0;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-cover figcaption{padding:12px 18px;font-size:12.5px;color:var(--ink-soft);text-align:center}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start;
  max-width:1180px;margin-inline:auto;padding:44px 0 20px}
@media (max-width:1000px){.article-layout{grid-template-columns:1fr;gap:34px}}

.toc{position:sticky;top:110px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:20px;padding:22px 24px}
.toc h2{font-size:14px;letter-spacing:1.5px;color:var(--brand);margin:0 0 14px;text-transform:uppercase}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;
  max-height:60vh;overflow:auto;scrollbar-width:thin}
.toc a{display:block;padding:7px 12px;border-radius:9px;font-size:13.5px;color:var(--ink-soft);
  line-height:1.7;border-right:2px solid transparent;transition:.2s}
.toc a:hover{color:var(--ink);background:var(--surface-2)}
.toc a.is-active{color:var(--brand);border-right-color:var(--brand);background:var(--accentc-bg);font-weight:600}
.toc .lv3{padding-right:26px;font-size:12.5px}
@media (max-width:1000px){
  .toc{position:static;max-height:none}
  .toc ol{max-height:none}
}

.article-body{font-size:16.5px;line-height:2.15;color:var(--ink)}
.article-body>*+*{margin-top:1.25em}
.article-body h2{font-size:clamp(21px,2.6vw,29px);margin-top:2em;line-height:1.6;scroll-margin-top:110px;position:relative}
.article-body h3{font-size:clamp(18px,2.1vw,22px);margin-top:1.7em;line-height:1.7;scroll-margin-top:110px}
.article-body h2::after{content:"";display:block;width:52px;height:3px;border-radius:3px;background:var(--brand);margin-top:12px;opacity:.75}
.article-body p{color:var(--ink-soft)}
.article-body strong{color:var(--ink);font-weight:700}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.article-body a:hover{text-decoration-thickness:2px}
.article-body ul,.article-body ol{padding-right:22px;color:var(--ink-soft)}
.article-body li{margin:.55em 0}
.article-body li::marker{color:var(--brand)}
.article-body img{border-radius:18px;width:100%;height:auto}
.article-body figure{margin:2em 0}
.article-body figcaption{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:10px}
.article-body blockquote{margin:2em 0;padding:22px 26px;border-right:3px solid var(--brand);
  background:var(--surface);border-radius:0 18px 18px 0;color:var(--ink);font-size:17px;line-height:2}
.article-body blockquote p{color:var(--ink)}
.article-body pre{background:var(--surface-2);border:1px solid var(--hairline);border-radius:16px;
  padding:18px 20px;overflow-x:auto;direction:ltr;text-align:left;font-size:13.5px;line-height:1.8}
.article-body code{background:var(--surface-2);border:1px solid var(--hairline);border-radius:6px;
  padding:2px 7px;font-size:.9em;direction:ltr;display:inline-block}
.article-body pre code{border:0;background:none;padding:0}
.article-body table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:12px 14px;border:1px solid var(--hairline);text-align:right}
.article-body th{background:var(--surface-2);font-weight:700;color:var(--ink)}
.article-body hr{border:0;height:1px;background:var(--hairline);margin:2.4em 0}

.read-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:300;background:transparent}
.read-progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accentc));transition:width .1s linear}

.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:38px 0 0;
  padding-top:26px;border-top:1px solid var(--hairline)}
.share-row b{font-size:13.5px;color:var(--ink-soft);margin-left:4px}
.share-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border-radius:11px;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink-soft);font-size:13px;transition:.25s}
.share-btn:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-2px)}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.tag{padding:7px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--hairline);
  font-size:12.5px;color:var(--ink-soft);transition:.2s}
.tag:hover{border-color:var(--brand);color:var(--brand)}
.tag::before{content:"#";opacity:.55;margin-left:2px}

.faq-block{margin:46px 0 0}
.faq-item{border:1px solid var(--hairline);border-radius:16px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.faq-item summary{padding:17px 22px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:14px;transition:.2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:21px;color:var(--brand);transition:.3s var(--ease);line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--brand)}
.faq-item .faq-a{padding:0 22px 20px;color:var(--ink-soft);line-height:2;font-size:15px}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:44px 0 0}
.post-nav a{padding:20px 22px;border:1px solid var(--hairline);border-radius:18px;background:var(--surface);transition:.3s var(--ease)}
.post-nav a:hover{border-color:var(--brand);transform:translateY(-3px)}
.post-nav small{display:block;color:var(--ink-soft);font-size:12px;margin-bottom:7px}
.post-nav strong{font-size:15px;line-height:1.7;font-weight:600}
.post-nav .pn-next{text-align:left}
@media (max-width:640px){.post-nav{grid-template-columns:1fr}}

.author-card{display:flex;gap:18px;align-items:center;padding:24px;border:1px solid var(--hairline);
  border-radius:20px;background:var(--surface);margin:40px 0 0}
.author-card img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none}
.author-card h4{margin:0 0 5px;font-size:16px}
.author-card p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.9}

.sidebar-card{background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:22px 24px;margin-bottom:20px}
.sidebar-card h3{font-size:14px;letter-spacing:1.4px;color:var(--brand);margin:0 0 16px;text-transform:uppercase}
.mini-post{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--hairline)}
.mini-post:last-child{border-bottom:0}
.mini-post img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.mini-post b{font-size:13.5px;font-weight:600;line-height:1.7;display:block;transition:.2s}
.mini-post:hover b{color:var(--brand)}
.mini-post small{color:var(--ink-soft);font-size:11.5px}

/* -------------------------------------------------------- product extras --- */
.gallery{display:flex;flex-direction:column;gap:14px}
.gallery-main{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1;background:var(--surface-2);border:1px solid var(--hairline)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gallery-thumbs button{width:70px;height:70px;border-radius:14px;overflow:hidden;border:1.5px solid var(--hairline);
  background:var(--surface-2);padding:0;transition:.25s}
.gallery-thumbs button img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs button.is-active{border-color:var(--brand);transform:translateY(-2px)}

.taste-meters{display:flex;flex-direction:column;gap:13px;margin:24px 0}
.tm-row{display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center;font-size:13.5px}
.tm-bar{height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden;border:1px solid var(--hairline)}
.tm-bar b{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accentc),var(--brand))}
.tm-row span:last-child{color:var(--ink-soft);font-size:12px}

.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;margin:26px 0}
.spec-grid div{background:var(--surface);padding:16px 18px}
.spec-grid small{display:block;color:var(--ink-soft);font-size:11.5px;margin-bottom:6px;letter-spacing:.4px}
.spec-grid b{font-size:14.5px;font-weight:600}

.brew-table{width:100%;border-collapse:collapse;font-size:14px;margin:22px 0}
.brew-table th,.brew-table td{padding:13px 15px;border-bottom:1px solid var(--hairline);text-align:right}
.brew-table th{color:var(--brand);font-size:12.5px;letter-spacing:.6px;font-weight:700}
.brew-table tr:last-child td{border-bottom:0}

.rating-stars{display:inline-flex;gap:2px;color:var(--brand);font-size:15px;letter-spacing:1px}
.rating-stars .off{opacity:.28}
.review{padding:20px 0;border-bottom:1px solid var(--hairline)}
.review:last-child{border-bottom:0}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.review-head b{font-size:14.5px}
.review-head small{color:var(--ink-soft);font-size:12px}
.review p{margin:0;color:var(--ink-soft);line-height:2;font-size:14.5px}

/* Sticky purchase bar keeps the primary action reachable on a phone. */
.buy-bar{display:none}
@media (max-width:900px){
  .buy-bar{position:fixed;z-index:170;inset:auto 0 calc(66px + var(--safe-b)) 0;display:flex;gap:12px;
    align-items:center;padding:12px 16px;background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--hairline);
    transform:translateY(120%);transition:.4s var(--ease)}
  .buy-bar.show{transform:none}
  .buy-bar .bb-price{display:flex;flex-direction:column;line-height:1.4}
  .buy-bar .bb-price small{color:var(--ink-soft);font-size:11px}
  .buy-bar .bb-price b{font-size:16px}
  .buy-bar form{flex:1}
  .buy-bar button{width:100%;min-height:var(--tap);border:0;border-radius:13px;font-weight:800;
    background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);font-size:15px}
}

/* ------------------------------------------------------------- filters --- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:30px}
.filter-bar select,.filter-bar input{background:var(--surface);border:1px solid var(--hairline);
  color:var(--ink);border-radius:12px;padding:11px 15px;font-size:14px;min-height:var(--tap)}
.filter-count{margin-right:auto;color:var(--ink-soft);font-size:13.5px}
@media (max-width:640px){
  .filter-bar{gap:8px}
  .filter-bar select,.filter-bar input{flex:1;min-width:calc(50% - 4px)}
  .filter-count{width:100%;margin:4px 0 0}
}

/* --------------------------------------------------------- content pages --- */
.prose{max-width:820px;margin-inline:auto;font-size:16.5px;line-height:2.15;color:var(--ink-soft)}
.prose>*+*{margin-top:1.2em}
.prose h2{color:var(--ink);font-size:clamp(21px,2.6vw,28px);margin-top:1.9em;scroll-margin-top:110px}
.prose h3{color:var(--ink);font-size:19px;margin-top:1.6em}
.prose ul,.prose ol{padding-right:22px}
.prose li{margin:.5em 0}
.prose li::marker{color:var(--brand)}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
.prose strong{color:var(--ink)}
.info-card{background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:26px 28px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0}

/* ------------------------------------------------------------- credits --- */
.credit-hero{padding:150px 0 50px;text-align:center}
.credit-card{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--hairline);
  border-radius:26px;padding:44px 40px;text-align:center}
.credit-card .cc-logo{width:76px;height:76px;margin:0 auto 20px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accentc-bg),transparent);border:1px solid var(--accentc-line);
  font-size:30px;font-weight:800;color:var(--brand)}
.credit-card h2{margin:0 0 12px;font-size:26px}
.credit-card .cc-link{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:14px 26px;
  border-radius:999px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);font-weight:800}
.credit-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:34px 0 0;text-align:right}
.credit-list div{background:var(--surface-2);border:1px solid var(--hairline);border-radius:16px;padding:18px 20px}
.credit-list b{display:block;margin-bottom:6px;font-size:14.5px}
.credit-list span{color:var(--ink-soft);font-size:13px;line-height:1.9}

/* ------------------------------------------------------------ timeline --- */
.timeline{position:relative;padding-right:26px;margin:22px 0}
.timeline::before{content:"";position:absolute;top:6px;bottom:6px;right:7px;width:2px;background:var(--hairline)}
.tl-item{position:relative;padding:0 0 22px}
.tl-item::before{content:"";position:absolute;right:-24px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--hairline)}
.tl-item.done::before{background:var(--brand);border-color:var(--brand)}
.tl-item.current::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px var(--accentc-bg)}
.tl-item b{display:block;font-size:14.5px;margin-bottom:4px}
.tl-item small{color:var(--ink-soft);font-size:12.5px;line-height:1.8}

/* -------------------------------------------------------------- misc --- */
.empty-state{text-align:center;padding:70px 20px}
.empty-state img{width:76px;opacity:.5;margin-bottom:20px}
.empty-state h2{margin:0 0 10px}
.empty-state p{color:var(--ink-soft);margin:0 0 24px}
.search-hints{margin:16px 0 0;font-size:13px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.search-hints a{color:var(--brand);border-bottom:1px dashed currentColor}
.footer-logo{display:flex;align-items:center;gap:12px;direction:ltr;margin-bottom:16px}
.footer-logo strong{display:block;font-family:Georgia,serif;letter-spacing:4px;color:var(--brand);font-size:19px}
.footer-logo small{font-size:7px;letter-spacing:1.8px;color:var(--ink-soft)}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fbadge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);
  border:1px solid var(--hairline);border-radius:999px;padding:6px 12px}
.fbadge i{font-style:normal;color:var(--brand)}
.fc-line{display:flex;align-items:center;gap:9px;padding:5px 0;color:var(--ink-soft);font-size:13.5px;transition:.2s}
a.fc-line:hover{color:var(--brand)}
.fc-line i{font-style:normal;color:var(--brand);width:16px;text-align:center}
.footer-credit{font-size:13px;color:var(--ink-soft)}
.footer-credit a{color:var(--brand);font-weight:700;border-bottom:1px solid transparent;transition:.25s}
.footer-credit a:hover{border-bottom-color:currentColor}
.trust-seals{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.trust-seals img{max-width:86px;height:auto;border-radius:10px;background:#fff;padding:4px}

/* Honeypot: present in the DOM for bots, never visible to people.
   It must not be pushed off-canvas with a large negative offset — in an RTL
   document that extends the scrollable area far to the left and the browser
   lands the initial viewport on empty space, blanking the page. Clipping in
   place keeps the field unreachable without touching layout. */
.hp-field{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;opacity:0;pointer-events:none}

@media print{
  .site-header,.tabbar,.to-top,.newsletter-strip,.site-footer,.breadcrumbs,.buy-bar,.toast{display:none!important}
  body{background:#fff;color:#000}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------ product card overrides ---
   The original card was built around a rendered CSS "pack". Now that real
   photography ships with the catalogue, the visual becomes a proper cover
   image and the copy column gets a predictable vertical rhythm. */
.product-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.product-card{display:flex;flex-direction:column;border-radius:20px}
.product-visual{height:auto;aspect-ratio:1;display:block;padding:0}
.product-visual picture,.product-visual>img{display:block;width:100%;height:100%}
.product-visual .uploaded-product{max-height:none;max-width:none;width:100%;height:100%;
  object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .uploaded-product{transform:scale(1.05)}
.product-visual .coffee-pack{position:absolute;inset:0;margin:auto}
.product-copy{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.product-copy h3{margin:2px 0 0;font-size:16.5px;line-height:1.65}
.product-copy p{min-height:0;margin:0;font-size:13px;line-height:1.85;flex:1}
.product-bottom{margin-top:6px;align-items:center;gap:12px}
.product-bottom>div{display:flex;flex-direction:column;line-height:1.35}
.product-bottom del{font-size:12px;color:var(--ink-soft);opacity:.75}
.product-bottom strong{font-size:16px;color:var(--ink)}
.badge-off,.badge-out{position:absolute;z-index:3;top:12px;right:12px;padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;backdrop-filter:blur(8px)}
.badge-off{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.badge-out{background:rgba(12,9,7,.78);color:#f0dcc4;right:auto;left:12px}
.wish-dot{position:absolute;z-index:3;top:12px;left:12px}
.product-card .quick-add button{width:42px;height:42px;border-radius:13px;font-size:20px;line-height:1;
  border:0;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);font-weight:700;
  transition:.25s var(--ease)}
.product-card .quick-add button:hover{transform:translateY(-2px) scale(1.04)}
.product-card .quick-add button:disabled{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------- filter bar sizing */
.filter-bar{flex-wrap:wrap;align-items:center}
.filter-bar input[type="search"]{flex:2 1 240px;min-width:200px}
.filter-bar select{flex:1 1 160px;min-width:150px;max-width:230px;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:16px calc(50% - 2px),21px calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:38px}

/* ---------------------------------------------------- product detail page */
.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
@media (max-width:900px){.product-detail{grid-template-columns:1fr;gap:30px}}
.detail-copy h1{font-size:clamp(24px,3.4vw,38px);line-height:1.5;margin:10px 0 14px}
.detail-sub{color:var(--ink-soft);line-height:2}
.detail-price{display:flex;align-items:baseline;gap:12px;font-size:clamp(22px,3vw,30px);
  font-weight:800;color:var(--ink);margin:18px 0 12px}
.detail-price del{font-size:16px;font-weight:400;color:var(--ink-soft);opacity:.7}
.grind-select{margin:26px 0 18px}
.grind-select>span{display:block;font-size:14px;margin-bottom:12px;color:var(--ink-soft)}
.grind-options{display:flex;flex-wrap:wrap;gap:9px}
.grind-options label{position:relative;cursor:pointer}
.grind-options input{position:absolute;opacity:0;inset:0}
.grind-options span{display:block;padding:10px 16px;border-radius:12px;border:1px solid var(--hairline);
  background:var(--surface);font-size:13.5px;transition:.25s var(--ease);min-height:var(--tap);
  display:flex;align-items:center}
.grind-options input:checked+span{border-color:var(--brand);background:var(--accentc-bg);color:var(--ink);font-weight:600}
.grind-options input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.buy-row{display:flex;gap:12px;align-items:stretch;margin-top:8px}
.buy-row input{width:92px;text-align:center;background:var(--surface);border:1px solid var(--hairline);
  color:var(--ink);border-radius:13px;font-size:15px;min-height:var(--tap)}
.buy-row .btn.primary{flex:1;min-height:52px;border:0;border-radius:14px;font-weight:800;font-size:15.5px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);transition:.28s var(--ease)}
.buy-row .btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 40px var(--accentc-bg)}
.buy-row .btn.primary:disabled{opacity:.45;cursor:not-allowed}
.stock-note{margin-top:14px;font-size:13px;color:var(--ink-soft)}

/* ------------------------------------------------------------ form bits */
.checkout-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkout-form .form-grid .full{grid-column:1/-1}
@media (max-width:640px){.checkout-form .form-grid{grid-template-columns:1fr}}
.checkout-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-soft)}
.checkout-form input,.checkout-form textarea,.checkout-form select{
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink);
  border-radius:13px;padding:13px 15px;font-size:14.5px;min-height:var(--tap);width:100%}
.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accentc-bg)}
.checkout-form textarea{min-height:110px;resize:vertical}
.btn.primary.full{width:100%;margin-top:20px;min-height:52px;border:0;border-radius:14px;font-weight:800;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);font-size:15.5px}
/* One pill that holds both the field and the button, instead of a rounded
   input sitting next to a square button with a gap between them. */
.newsletter-form{
  display:flex;align-items:center;gap:6px;padding:6px;
  border:1px solid var(--hairline);border-radius:999px;background:var(--surface);
  transition:.25s var(--ease);max-width:520px}
.newsletter-form:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--accentc-bg)}
.newsletter-form input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  padding:0 20px;min-height:46px;font-size:14.5px;outline:0;border-radius:999px}
.newsletter-form input::placeholder{color:var(--ink-soft)}
.newsletter-form button{
  flex:none;border:0;border-radius:999px;padding:0 28px;min-height:46px;
  font-weight:800;font-size:14.5px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);
  transition:.24s var(--ease)}
.newsletter-form button:hover{filter:brightness(1.06)}
.newsletter-form button:active{transform:scale(.97)}
.newsletter-grid{align-items:center}
.nl-copy h2{margin:10px 0 8px;font-size:clamp(21px,2.8vw,30px)}
.nl-copy p{color:var(--ink-soft);margin:0;line-height:2;max-width:46ch}
@media (max-width:560px){
  .newsletter-form{flex-direction:column;border-radius:18px;padding:10px;gap:9px;max-width:none}
  .newsletter-form input{width:100%;border-radius:12px;background:var(--surface-2);
    border:1px solid var(--hairline);padding:0 16px}
  .newsletter-form button{width:100%;border-radius:12px}
}

/* <picture> is inline by default, so it collapses inside fixed-size boxes.
   Every place the site uses it, the wrapper must fill its container. */
picture{display:contents}
.gallery-thumbs button picture,.gallery-main picture,.pc-media picture,
.mini-post picture,.product-visual picture{display:block;width:100%;height:100%}
.gallery-thumbs button img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-main img{display:block;width:100%;height:100%;object-fit:cover}
.pc-media img{display:block;width:100%;height:100%;object-fit:cover}
.mini-post picture{width:56px;height:56px;flex:none}
.mini-post img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.article-cover picture{display:block;width:100%;height:100%}
.article-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pf-media picture{display:block;position:absolute;inset:0}
.pf-media img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------- mobile header ---
   The original stylesheet hid every .icon-btn below 780px. Theme switching and
   search are primary actions, so they come back; only the order-tracking
   shortcut stays in the slide-out menu. */
@media (max-width:780px){
  .nav-actions{display:flex;align-items:center;gap:6px}
  .nav-actions .icon-btn{display:grid;place-items:center;width:38px;height:38px}
  .nav-actions .icon-btn.desktop-only{display:none}
  .nav-shell{gap:12px}
  .brand img{width:38px;height:38px}
  .brand strong{font-size:15px;letter-spacing:3.5px}
  .brand small{font-size:5px;letter-spacing:1.4px}
}
@media (max-width:400px){
  .brand small{display:none}
}

/* Discount and stock badges sit on photography, so they need their own ground
   rather than a translucent tint that disappears over a light image. */
.badge-off{background:#b5322c;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.badge-out{background:rgba(14,11,9,.86);color:#f0dcc4;border:1px solid rgba(255,255,255,.16)}

/* Compare-at price needs to read as struck-through, not as noise. */
.product-bottom del{text-decoration-thickness:1.5px;opacity:.85}

/* ------------------------------------------- decorative art in light mode ---
   The bean field and powder swirl are drawn in CSS as light shapes on a dark
   ground. Flipping the palette turned them into pale-on-pale. In light mode
   they get an explicit dark-roast palette so the illustration keeps its form. */
:root[data-theme="light"] .bean-field{
  background:radial-gradient(circle at 50% 40%,#3a2a1e,#1d140e 72%)}
:root[data-theme="light"] .bean-field i{
  background:radial-gradient(circle at 36% 25%,#a9704a,#7a4a2c 38%,#43261a 100%);
  box-shadow:inset 6px 6px 8px rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.28)}
:root[data-theme="light"] .bean-field i::after{background:#2a170f}
:root[data-theme="light"] .powder-art{background:radial-gradient(circle at 50% 45%,#3a2a1e,#1d140e 74%)}
:root[data-theme="light"] .type-card{background:#1b1410;border-color:#33251b}
:root[data-theme="light"] .type-card .type-copy h2,
:root[data-theme="light"] .type-card .type-copy span{color:#f3e7d7}
:root[data-theme="light"] .type-card .type-copy p{color:#c3b1a0}
:root[data-theme="light"] .type-card .type-copy b{color:#e0b078}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bean-field{
    background:radial-gradient(circle at 50% 40%,#3a2a1e,#1d140e 72%)}
  :root:not([data-theme="dark"]) .bean-field i{
    background:radial-gradient(circle at 36% 25%,#a9704a,#7a4a2c 38%,#43261a 100%);
    box-shadow:inset 6px 6px 8px rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.28)}
  :root:not([data-theme="dark"]) .bean-field i::after{background:#2a170f}
  :root:not([data-theme="dark"]) .powder-art{background:radial-gradient(circle at 50% 45%,#3a2a1e,#1d140e 74%)}
  :root:not([data-theme="dark"]) .type-card{background:#1b1410;border-color:#33251b}
  :root:not([data-theme="dark"]) .type-card .type-copy h2,
  :root:not([data-theme="dark"]) .type-card .type-copy span{color:#f3e7d7}
  :root:not([data-theme="dark"]) .type-card .type-copy p{color:#c3b1a0}
  :root:not([data-theme="dark"]) .type-card .type-copy b{color:#e0b078}
}

/* CSS-drawn coffee art keeps its roast palette in the light theme; it always
   sits on a dark ground, so flipping it would wash the illustration out. */

  :root[data-theme="light"] .powder-art{background:radial-gradient(circle at 48% 48%,#6b4326,#3b2417 43%,#1d130d 72%)}
  :root[data-theme="light"] .powder-art::before{background:radial-gradient(ellipse,#8a5a34,#4d2f1d 60%,#33200f 62%);
    box-shadow:0 30px 50px rgba(0,0,0,.45)}
  :root[data-theme="light"] .powder-art i{background:#c99a68;box-shadow:0 5px 15px rgba(0,0,0,.35)}
  :root[data-theme="light"] .powder-art b{background:#e8c79b}
  :root[data-theme="light"] .float-bean{
    background:radial-gradient(circle at 35% 28%,#c08a5c 0,#9c6238 20%,#6b3f22 62%,#3a2113 100%);
    box-shadow:inset 8px 4px 9px rgba(255,255,255,.10),inset -8px -10px 13px rgba(0,0,0,.42),0 16px 35px rgba(0,0,0,.34)}
  :root[data-theme="light"] .float-bean::after{background:linear-gradient(#2c1809,#5a3319,#2c1809)}
@media (prefers-color-scheme:light){

  :root:not([data-theme="dark"]) .powder-art{background:radial-gradient(circle at 48% 48%,#6b4326,#3b2417 43%,#1d130d 72%)}
  :root:not([data-theme="dark"]) .powder-art::before{background:radial-gradient(ellipse,#8a5a34,#4d2f1d 60%,#33200f 62%);
    box-shadow:0 30px 50px rgba(0,0,0,.45)}
  :root:not([data-theme="dark"]) .powder-art i{background:#c99a68;box-shadow:0 5px 15px rgba(0,0,0,.35)}
  :root:not([data-theme="dark"]) .powder-art b{background:#e8c79b}
  :root:not([data-theme="dark"]) .float-bean{
    background:radial-gradient(circle at 35% 28%,#c08a5c 0,#9c6238 20%,#6b3f22 62%,#3a2113 100%);
    box-shadow:inset 8px 4px 9px rgba(255,255,255,.10),inset -8px -10px 13px rgba(0,0,0,.42),0 16px 35px rgba(0,0,0,.34)}
  :root:not([data-theme="dark"]) .float-bean::after{background:linear-gradient(#2c1809,#5a3319,#2c1809)}
}

/* ------------------------------------------------------------ coffee bean ---
   The floating beans and the bean field were CSS blobs: an ellipse with a
   gradient and a hairline down the middle. At the sizes they render at, the
   hairline vanished and they read as brown pebbles. They now use a drawn bean
   whose fissure survives scaling and rotation, and which keeps its roast colour
   in both themes. The positions, scales and animations above are untouched. */
.float-bean,
.bean-field i{
  background:url('../img/bean.svg') center/contain no-repeat !important;
  box-shadow:none !important;
  border-radius:0 !important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.42));
}
.float-bean::after,
.bean-field i::after{display:none !important}

/* Give the floating beans the proportions of the artwork so they are not squashed. */
.float-bean{width:56px;height:80px}
.bean-field i{width:58px;height:82px}

@media (max-width:780px){
  .float-bean{width:42px;height:60px}
}

/* ==========================================================================
   Layer 3 — icon system, footer, variant picker, contact page, motion
   ========================================================================== */

/* --------------------------------------------------------------- icons --- */
.ic{display:block;flex:none;stroke:currentColor;fill:none;transition:transform .28s var(--ease)}
.icon-btn,.cart-btn,.menu-btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  position:relative;transition:.24s var(--ease);cursor:pointer}
.icon-btn:hover,.cart-btn:hover,.menu-btn:hover{
  border-color:var(--hairline);background:var(--surface);color:var(--brand)}
.icon-btn:active,.cart-btn:active,.menu-btn:active{transform:scale(.93)}
.icon-btn:hover .ic{transform:scale(1.06)}
.cart-btn b{
  position:absolute;top:2px;left:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--brand);color:var(--on-brand);
  font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.nav-actions{display:flex;align-items:center;gap:4px}
.menu-btn{display:none}
@media (max-width:780px){.menu-btn{display:grid}}

.line-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--hairline);color:var(--brand);background:var(--surface);flex:none}
.trust-grid div:hover .line-icon{border-color:var(--accentc-line);background:var(--accentc-bg)}

.menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.menu-cta{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  border-radius:14px;background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:var(--on-brand);font-weight:800}
.menu-tel{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
  border-radius:14px;border:1px solid var(--hairline);color:var(--ink-soft);font-size:14px}

/* --------------------------------------------------------- type cards --- */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.type-grid{grid-template-columns:1fr}}
.type-card{
  position:relative;min-height:270px;display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid var(--hairline);border-radius:22px;overflow:hidden;
  background:var(--surface);isolation:isolate;transition:.4s var(--ease)}
.type-card::after{display:none}
.type-card:hover{transform:translateY(-5px);border-color:var(--accentc-line);
  box-shadow:0 30px 70px rgba(0,0,0,.30)}
.type-card .type-art{position:relative;min-height:270px;overflow:hidden;background:var(--surface-2)}
.type-card .type-art picture{display:block;position:absolute;inset:0}
.type-card .type-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.type-card:hover .type-art img{transform:scale(1.07)}
.type-card .type-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,transparent 35%,var(--surface))}
.type-copy{padding:34px 32px;display:flex;flex-direction:column;justify-content:center;gap:10px;z-index:2}
.type-copy span{font-size:12px;letter-spacing:2px;color:var(--brand);font-weight:700}
.type-copy h2{margin:0;font-size:clamp(21px,2.6vw,28px)}
.type-copy p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.95}
.type-copy b{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  color:var(--brand);font-size:14px;transition:gap .25s var(--ease)}
.type-card:hover .type-copy b{gap:12px}
@media (max-width:560px){
  .type-card{grid-template-columns:1fr;min-height:0}
  .type-card .type-art{min-height:190px}
  .type-card .type-art::after{background:linear-gradient(0deg,var(--surface),transparent 60%)}
  .type-copy{padding:22px}
}

/* ------------------------------------------------------ product cards --- */
.card-rating{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
.card-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card-sizes{color:var(--ink-soft);font-size:11.5px}
.card-price{display:flex;flex-direction:column;line-height:1.35}
.card-price del{font-size:12px;color:var(--ink-soft);opacity:.8}
.card-price strong{font-size:16.5px;color:var(--ink);display:flex;align-items:baseline;gap:4px}
.card-price strong i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-soft)}
.card-cta{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;
  border-radius:12px;background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:var(--on-brand);font-size:13px;font-weight:700;transition:.26s var(--ease);white-space:nowrap}
.card-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px var(--accentc-bg)}
.card-cta.is-disabled{background:var(--surface-2);color:var(--ink-soft);
  border:1px solid var(--hairline);box-shadow:none}
@media (max-width:420px){.card-cta span{display:none}.card-cta{padding:0 13px}}

/* --------------------------------------------------- variant picker --- */
.variant-select{margin:24px 0 6px}
.variant-select>span{display:block;font-size:14px;margin-bottom:12px;color:var(--ink-soft)}
.variant-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.variant-options label{position:relative;cursor:pointer}
.variant-options input{position:absolute;opacity:0;inset:0;cursor:pointer}
.variant-options label>span{
  display:flex;flex-direction:column;gap:3px;padding:14px 15px;border-radius:15px;
  border:1.5px solid var(--hairline);background:var(--surface);
  transition:.25s var(--ease);height:100%}
.variant-options b{font-size:14.5px;font-weight:700}
.variant-options em{font-style:normal;font-size:15px;font-weight:800;color:var(--brand)}
.variant-options small{font-size:11px;color:var(--ink-soft)}
.variant-options small.v-out{color:var(--bad)}
.variant-options label:hover>span{border-color:var(--accentc-line);transform:translateY(-2px)}
.variant-options input:checked+span{
  border-color:var(--brand);background:var(--accentc-bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.variant-options input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.variant-options label.is-out>span{opacity:.45}
.variant-options label.is-out{cursor:not-allowed}
.detail-price b[data-price-now]{font-weight:800}
.buy-row .btn.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.buy-bar button[data-bar-buy]{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:var(--tap);border:0;border-radius:13px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:var(--on-brand);cursor:pointer}

/* --------------------------------------------------------------- footer --- */
.site-footer{background:var(--surface);border-top:1px solid var(--hairline);
  padding:0 0 26px;margin-top:80px}
.footer-promise{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--hairline);border-bottom:1px solid var(--hairline);
  margin:0 calc(50% - 50vw) 46px}
.footer-promise>div{display:flex;align-items:center;gap:13px;padding:24px 26px;background:var(--surface)}
.footer-promise .ic{color:var(--brand)}
.footer-promise span{display:flex;flex-direction:column;gap:2px;min-width:0}
.footer-promise b{font-size:14px;font-weight:700}
.footer-promise small{color:var(--ink-soft);font-size:12px}

.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:38px}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  .footer-brand{grid-column:1/-1}
  .footer-contact{grid-column:1/-1}
}
@media (max-width:440px){.footer-grid{grid-template-columns:1fr}}

.site-footer h3{font-size:12px;letter-spacing:1.6px;color:var(--brand);
  text-transform:uppercase;margin:0 0 16px}
.footer-grid nav{display:flex;flex-direction:column;gap:2px}
.footer-grid nav a{display:inline-block;padding:6px 0;color:var(--ink-soft);font-size:13.5px;
  transition:.22s var(--ease);width:fit-content}
.footer-grid nav a:hover{color:var(--brand);transform:translateX(-4px)}
.footer-brand p{color:var(--ink-soft);font-size:13.5px;line-height:2;margin:0 0 18px;max-width:38ch}
.footer-logo{display:flex;align-items:center;gap:12px;direction:ltr;margin-bottom:16px;width:fit-content}
.footer-logo img{width:52px;height:52px;object-fit:contain}
.footer-logo strong{display:block;font-family:Georgia,serif;letter-spacing:4px;color:var(--brand);font-size:19px}
.footer-logo small{display:block;font-size:6.5px;letter-spacing:1.8px;color:var(--ink-soft)}
.socials{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;align-items:center}
/* The base stylesheet stacks every div inside the footer column; the social
   row is the one place that has to stay horizontal. */
.socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  border:1px solid var(--hairline);color:var(--ink-soft);transition:.25s var(--ease)}
.socials a:hover{border-color:var(--brand);color:var(--brand);background:var(--accentc-bg);transform:translateY(-2px)}
.fc-line{display:flex;align-items:flex-start;gap:10px;padding:7px 0;color:var(--ink-soft);
  font-size:13.5px;line-height:1.8;transition:.22s}
a.fc-line:hover{color:var(--brand)}
.fc-line .ic{margin-top:3px;color:var(--brand)}
.trust-seals{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.trust-seals img{max-width:84px;height:auto;border-radius:10px;background:#fff;padding:4px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--hairline);padding-top:22px;color:var(--ink-soft);font-size:12.5px}
.footer-quote{color:var(--brand);opacity:.75}
.footer-credit a{color:var(--brand);font-weight:700;border-bottom:1px solid transparent;transition:.25s}
.footer-credit a:hover{border-bottom-color:currentColor}
@media (max-width:640px){
  .footer-bottom{flex-direction:column;text-align:center;gap:9px}
  .footer-promise{margin-bottom:34px}
  .footer-promise>div{padding:18px 20px}
}

/* -------------------------------------------------------------- contact --- */
.contact-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px;margin-bottom:40px}
.ch-card{display:flex;flex-direction:column;gap:5px;padding:22px 22px 20px;
  border:1px solid var(--hairline);border-radius:20px;background:var(--surface);
  transition:.3s var(--ease)}
.ch-card:hover{transform:translateY(-4px);border-color:var(--accentc-line);
  box-shadow:0 22px 50px rgba(0,0,0,.2)}
.ch-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--accentc-bg);border:1px solid var(--accentc-line);color:var(--brand);margin-bottom:8px}
.ch-card b{font-size:15px}
.ch-card em{font-style:normal;font-size:14px;color:var(--brand);font-weight:700}
.ch-card small{color:var(--ink-soft);font-size:12px}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:960px){.contact-layout{grid-template-columns:1fr}}
.contact-form-card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:22px;padding:30px 30px 34px}
.contact-form-card h2{margin:0 0 6px;font-size:21px}
.cf-lead{color:var(--ink-soft);font-size:14px;margin:0 0 22px}
.cf-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-soft);text-align:center}
.cf-note a{color:var(--brand)}
.cf-done{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;
  background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);margin-bottom:20px}
.cf-done b{display:block;font-size:15px}
.cf-done small{color:var(--ink-soft);font-size:13px}
.topic-picker{border:0;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.topic-picker legend{font-size:14px;color:var(--ink-soft);margin-bottom:10px;padding:0}
.topic-picker label{position:relative;cursor:pointer}
.topic-picker input{position:absolute;opacity:0;inset:0;cursor:pointer}
.topic-picker span{display:block;padding:9px 16px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--surface-2);font-size:13px;transition:.24s var(--ease)}
.topic-picker input:checked+span{background:var(--brand);border-color:var(--brand);
  color:var(--on-brand);font-weight:700}
.topic-picker input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.contact-aside{display:flex;flex-direction:column;gap:16px}
.contact-aside .info-card h3{display:flex;align-items:center;gap:9px;font-size:15px;margin:0 0 10px}
.contact-aside .info-card h3 .ic{color:var(--brand)}
.contact-aside .info-card p{font-size:13.5px;line-height:2;margin:0 0 6px}

/* --------------------------------------------------------------- motion --- */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* The attribute is only ever set by JS, so a page with scripting off — or a
   crawler — sees fully opaque content and never a blank panel. */
[data-reveal]{opacity:0;animation:riseIn .7s var(--ease) 1.4s forwards}
[data-reveal].in{animation:riseIn .7s var(--ease) forwards}
.product-card,.post-card,.ch-card,.type-card{will-change:transform}
a,button{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;animation:none !important}
}

/* Persian digits share the text font, so prices line up with the copy. */
.detail-price,.card-price strong,.order-totals b,.admin-cards b,.variant-options em{
  font-variant-numeric:tabular-nums}

/* ==========================================================================
   Layer 4 — hero shortcuts, origin story, landing pages, region selects
   ========================================================================== */

/* ------------------------------------------------------- hero shortcuts --- */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-cta .btn-gold,.hero-cta .btn-line{display:inline-flex;align-items:center;gap:9px}
.hero-ghost{opacity:.85}
.hero-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-quick a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--hairline);background:color-mix(in srgb,var(--surface) 70%,transparent);
  color:var(--ink-soft);font-size:12.5px;transition:.25s var(--ease);backdrop-filter:blur(6px)}
.hero-quick a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.hero-quick .ic{color:var(--brand)}
@media (max-width:780px){
  .hero-cta{justify-content:center}
  .hero-ghost{display:none}
  .hero-quick{justify-content:center;margin-top:14px}
}

/* ---------------------------------------------------------- origin story --- */
.origin{padding:96px 0;background:var(--surface-2);border-block:1px solid var(--hairline)}
.origin-head{text-align:center;max-width:680px;margin:0 auto 46px}
.origin-head h2{font-size:clamp(24px,3.6vw,38px);margin:14px 0 12px;line-height:1.5}
.origin-head p{color:var(--ink-soft);margin:0;line-height:2}
.origin-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
@media (max-width:1000px){.origin-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.origin-steps{grid-template-columns:1fr}}
.origin-step{
  background:var(--surface);border:1px solid var(--hairline);border-radius:22px;
  overflow:hidden;display:flex;flex-direction:column;transition:.35s var(--ease)}
.origin-step:hover{transform:translateY(-5px);border-color:var(--accentc-line);
  box-shadow:0 26px 60px rgba(0,0,0,.24)}
.os-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.os-media picture{display:block;width:100%;height:100%}
.os-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.origin-step:hover .os-media img{transform:scale(1.06)}
.os-num{
  position:absolute;top:12px;right:12px;min-width:34px;height:34px;padding:0 9px;
  display:grid;place-items:center;border-radius:11px;font-size:12.5px;font-weight:800;
  background:rgba(12,9,7,.72);color:#f0dcc4;backdrop-filter:blur(8px)}
.os-copy{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px}
.os-copy b{font-size:16px}
.os-copy p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.95}
.origin-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:40px;padding-top:30px;border-top:1px solid var(--hairline)}
.origin-foot p{margin:0;color:var(--ink);font-size:16px;max-width:44ch;line-height:1.9}
.origin-actions{display:flex;gap:10px;flex-wrap:wrap}
.origin-actions .btn-gold,.origin-actions .btn-line{display:inline-flex;align-items:center;gap:8px}
@media (max-width:640px){
  .origin{padding:64px 0}
  .origin-foot{flex-direction:column;align-items:stretch;text-align:center}
  .origin-actions{justify-content:center}
}

/* --------------------------------------------------------- landing pages --- */
.landing-hero{position:relative;padding:150px 0 70px;overflow:hidden;isolation:isolate}
.lh-media{position:absolute;inset:0;z-index:-1}
.lh-media picture{display:block;width:100%;height:100%}
.lh-media img{width:100%;height:100%;object-fit:cover;opacity:.30}
.lh-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--surface) 2%,transparent 40%,var(--surface))}
.lh-inner{text-align:center;max-width:820px}
.landing-hero h1{font-size:clamp(27px,4.6vw,46px);line-height:1.45;margin:14px 0 14px}
.lh-sub{color:var(--ink-soft);font-size:17px;line-height:2;margin:0 auto 26px;max-width:60ch}
.lh-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lh-cta .btn-gold,.lh-cta .btn-line{display:inline-flex;align-items:center;gap:9px}

.lh-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.lh-card{background:var(--surface);border:1px solid var(--hairline);border-radius:20px;
  padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px;transition:.3s var(--ease)}
.lh-card:hover{transform:translateY(-4px);border-color:var(--accentc-line)}
.lh-num{font-size:12px;letter-spacing:2px;color:var(--brand);font-weight:800}
.lh-card b{font-size:16px}
.lh-card p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.95}

.lh-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  padding:34px 36px;border-radius:24px;border:1px solid var(--accentc-line);
  background:linear-gradient(120deg,var(--accentc-bg),transparent 70%),var(--surface)}
.lh-final h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,26px)}
.lh-final p{margin:0;color:var(--ink-soft);line-height:1.95;max-width:56ch}
.lh-final .btn-gold{display:inline-flex;align-items:center;gap:9px;flex:none}
@media (max-width:640px){.lh-final{padding:26px 22px;flex-direction:column;align-items:stretch;text-align:center}
  .lh-final .btn-gold{justify-content:center}}

/* ------------------------------------------------------- region selects --- */
.checkout-form select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:16px calc(50% - 2px),21px calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:38px}
.checkout-form select:disabled{opacity:.55;cursor:not-allowed}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr}}
.summary{background:var(--surface);border:1px solid var(--hairline);border-radius:22px;padding:26px 26px 28px;
  position:sticky;top:100px;display:flex;flex-direction:column;gap:10px}
@media (max-width:900px){.summary{position:static}}
.summary h3{margin:0 0 10px;font-size:17px}
.summary>div{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink-soft)}
.summary>div b{color:var(--ink)}
.summary hr{border:0;border-top:1px solid var(--hairline);margin:8px 0;width:100%}
.summary .total{border-top:1px solid var(--hairline);padding-top:14px;margin-top:6px;font-size:17px}
.summary .total b{font-size:19px;font-weight:800}
.checkout-form h3{margin:0 0 18px;font-size:17px}
.checkout-form .btn.primary.full{display:flex;align-items:center;justify-content:center;gap:9px}

/* ==========================================================================
   Layer 5 — hero pack: cast shadow and 3D stacking
   ==========================================================================
   The scene is a preserve-3d context, so children are painted by where their
   planes actually sit in space — z-index does not decide the order. Any element
   given a rotateX becomes a tilted plane whose near edge can swing in FRONT of
   the pack (which floats at translateZ(70px)) and slice across its face.

   Both the ground ring and the cast shadow used to do exactly that. They are
   now drawn flat, at z = 0, with scaleY() standing in for the tilt: visually
   identical at this size, but they can never intersect the pack, so the pack
   always reads as one solid object sitting in front of them.
   ========================================================================== */

.hero-pack{
  /* keep the rim highlight, drop the cast shadow: a box-shadow paints in the
     element's own space and so tilted along with the card */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.027) !important;
}

/* Ground ring: was rotateX(66deg) translateZ(-100px) — a tilted disc reaching
   z=+101, i.e. in front of the pack. Flattened; scale(.93) reproduces the
   perspective shrink the old translateZ gave it. */
.scene-ring{
  transform:translate(-50%,-50%) scale(.93) scaleY(.4067) !important;
  z-index:1;
}

.pack-shadow{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  /* Authored at its final on-screen size, so no rotation is needed to squash
     it onto the floor. */
  width:330px;
  height:76px;
  margin:-38px 0 0 -165px;
  border-radius:50%;
  pointer-events:none;
  /* Two falloffs: a tight, dark contact patch where the pack meets the floor,
     inside a wide soft pool. On a near-black scene a single soft gradient just
     disappears. */
  background:
    radial-gradient(ellipse 30% 60% at 50% 44%,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 80%),
    radial-gradient(ellipse 52% 94% at 50% 50%,
      rgba(0,0,0,.60) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,0) 78%);
  filter:blur(15px);
  /* 216px puts the ellipse centre on the pack's contact line. It only slides
     with a fraction of the pointer offset, the way a shadow trails an object
     that leans — no rotation, so the floor never turns. */
  transform:translate(calc(var(--mx) * -0.42), 216px);
  transition:transform .16s ease-out, opacity .16s ease-out;
  opacity:1;
}

/* The scene's entrance animation should carry the shadow with it. */
.hero-slide:not(.is-active) .pack-shadow{opacity:0}

/* bean-8 sat at --z:160px, in front of the pack and overlapping its right
   edge, so it read as a bean stuck on the packet. Moved into the clear gap
   outside the pack, where the extra depth still helps. */
.bean-8{right:6%;top:36%;--rot:5deg;--z:150px;scale:.30}

@media (max-width:780px){
  .pack-shadow{
    width:215px;height:56px;margin:-28px 0 0 -107px;
    filter:blur(11px);
    transform:translate(calc(var(--mx) * -0.42), 143px);
  }
}

@media (prefers-reduced-motion:reduce){
  .pack-shadow{transition:none}
}

/* ==========================================================================
   Layer 6 — brands and nested categories
   ==========================================================================
   A brand archive opens with the brand itself, not with a filter bar, so the
   page reads as "this is who they are, here is what they roast". Category
   archives get a chip row of their children for the same reason: the parent
   must be a destination, not a dead end.
   ========================================================================== */

/* ---------------------------------------------------------- brand header */
.brand-head{position:relative;padding:150px 0 46px;overflow:hidden;
  background:linear-gradient(180deg,#1a110a,#150e08 68%,#120c07)}
.bh-media{position:absolute;inset:0;opacity:.30}
.bh-media img{width:100%;height:100%;object-fit:cover}
/* The wash keeps the copy legible over any hero photo an operator uploads. */
.brand-head::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,12,7,.94),rgba(18,12,7,.62) 52%,rgba(18,12,7,.9))}
.bh-inner{position:relative;z-index:2;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.bh-logo{flex:0 0 auto;width:132px;height:132px;border-radius:22px;display:grid;place-items:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(214,158,102,.26);padding:16px;
  box-shadow:0 20px 46px rgba(0,0,0,.45)}
.bh-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bh-copy{flex:1 1 320px;min-width:0}
.bh-copy h1{font-size:clamp(32px,4vw,48px);line-height:1.3;margin:10px 0 8px}
.bh-tag{color:var(--gold);font-size:16px;margin:0 0 10px}
.bh-copy p{color:var(--k189);line-height:2;max-width:660px;margin:0}
.bh-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--k183)}
.bh-meta span{display:inline-flex;align-items:center;gap:7px}
.bh-meta svg{color:var(--gold)}

/* ----------------------------------------------------------- brand index */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.brand-card{display:flex;flex-direction:column;border:1px solid var(--k113);border-radius:20px;
  overflow:hidden;background:var(--k51);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.brand-card:hover{transform:translateY(-5px);border-color:var(--gold)}
.bcard-art{height:170px;display:grid;place-items:center;padding:26px;
  background:radial-gradient(circle at 50% 40%,var(--k117),var(--k64) 70%);border-bottom:1px solid var(--k107)}
.bcard-art img{max-width:100%;max-height:118px;object-fit:contain}
.bcard-initial{font-family:Georgia,serif;font-size:58px;color:var(--gold);opacity:.8}
.bcard-copy{padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard-copy h2{font-size:19px;margin:0}
.bcard-tag{color:var(--gold);font-size:12.5px;margin:0}
.bcard-copy p{color:var(--k181);font-size:13px;line-height:1.95;margin:0}
.bcard-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--k102);
  display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--k157)}
.bcard-foot b{color:var(--k209);display:inline-flex;align-items:center;gap:6px;font-weight:600}

/* ------------------------------------------------- brand strip on /shop */
.brand-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.brand-chip{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--k129);background:var(--k51);transition:border-color .25s,background .25s}
.brand-chip:hover{border-color:var(--gold);background:var(--k89)}
.bc-logo{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center}
.bc-logo img{max-width:100%;max-height:100%;object-fit:contain}
.brand-chip b{font-size:13.5px;display:block}
.brand-chip i{font-style:normal;font-size:11px;color:var(--k157);display:block;margin-top:2px}

/* ------------------------------------------------------- subcategory row */
.sub-cats{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.sub-cats a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--k129);font-size:13px;transition:border-color .25s,background .25s}
.sub-cats a:hover{border-color:var(--gold);background:var(--k89)}
.sub-cats i{font-style:normal;font-size:11px;color:var(--k157)}

/* The card already shows a category; the brand is the second line of context. */
.product-copy .pc-brand{font-size:11px;color:var(--gold);letter-spacing:.04em}

@media(max-width:780px){
  .brand-head{padding:110px 0 34px}
  .bh-inner{gap:20px}
  .bh-logo{width:88px;height:88px;border-radius:16px;padding:11px}
  .brand-grid{grid-template-columns:1fr}
  .brand-strip{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Layer 7 — article sidebar and the scrolled header
   ==========================================================================
   The table of contents is sticky, but sticky is bounded by its containing
   block. With align-items:start the <aside> was only as tall as its own cards
   (~1000px) while the article ran to ~3500px, so the box unpinned a third of
   the way down and slid up under the header instead of staying put.

   Letting the aside stretch to the grid row gives sticky the full height of the
   article to work with. The cards below simply scroll away behind it; the TOC
   is positioned, so it already paints above its static siblings.
   ========================================================================== */

.article-layout{align-items:stretch}
.article-layout > aside{position:relative;min-width:0}

.toc{
  /* Never taller than the space between the header and the viewport floor, so
     a long article's list scrolls inside the box rather than off the screen. */
  z-index:2;
  max-height:calc(100vh - 140px);
  display:flex;
  flex-direction:column;
}
.toc ol{max-height:none;flex:1 1 auto;min-height:0;overscroll-behavior:contain}

/* The cards ride along under the pinned TOC. */
.article-layout > aside .sidebar-card:first-child{margin-top:0}

@media (max-width:1000px){
  .article-layout{align-items:start}
  .toc{max-height:none;display:block}
}

/* --------------------------------------------------------- scrolled header */
/* backdrop-filter is what makes the translucent bar readable. Where it is
   unsupported — older WebKit, some in-app browsers, any GPU-less renderer — the
   page used to read straight through the bar and collide with the nav labels,
   so those browsers get a solid bar instead. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .site-header.is-scrolled{background:var(--surface)}
}
.site-header.is-scrolled{-webkit-backdrop-filter:blur(18px)}