:root{--forest:#18392b;--forest2:#254937;--sage:#a7ac89;--paper:#f7f0e3;--cream:#fffaf0;--ink:#243329;--line:#e7dcc9;--shadow:0 14px 45px #253b2418}*{box-sizing:border-box}body{margin:0;background:#e9decb;color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bdc98e;outline-offset:3px}.shell{max-width:1500px;margin:26px auto;background:var(--paper);border-radius:18px;box-shadow:0 30px 85px #433f3030;overflow:hidden}.top{height:40px;background:#fdf8ef;display:flex;align-items:center;padding:0 23px;gap:8px;border-bottom:1px solid var(--line)}.dot{width:9px;height:9px;border-radius:50%;background:#d96b59}.dot:nth-child(2){background:#e7b45e}.dot:nth-child(3){background:#75a36d}.top span{margin-left:auto;font-size:11px;letter-spacing:.12em;color:#777}.header{height:90px;display:flex;align-items:center;gap:36px;padding:0 34px 0 106px;background:#fffaf2}.logo{font-family:'Playfair Display',serif;font-size:27px;color:var(--forest);white-space:nowrap}.logo small{display:block;font:11px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-left:38px}.moon{font-size:34px;vertical-align:middle;margin-right:7px}.search{flex:1;max-width:560px;margin:auto;display:flex;align-items:center;border:1px solid #d8d3bf;border-radius:40px;background:#fff;padding:5px 8px 5px 22px}.search input{border:0;outline:0;flex:1;min-width:0;background:none;font-size:13px}.search button{border:0;background:var(--forest);color:white;width:37px;height:37px;border-radius:50%}.actions{display:flex;gap:15px}.iconbtn{border:0;background:transparent;color:var(--forest);font-size:22px;position:relative}.badge{position:absolute;right:-8px;top:-5px;background:#b6c28d;border-radius:12px;font-size:10px;padding:2px 5px}.layout{display:grid;grid-template-columns:82px 1fr;min-height:760px}.rail{background:#eee6d4;padding:14px 11px;display:flex;flex-direction:column;gap:5px;position:relative;z-index:10}.rail button{border:0;background:transparent;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--forest);transition:.2s}.rail button:hover,.rail button.active{background:#cbd1b5}.rail svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.main{min-width:0}.nav{height:53px;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,54px);padding:0 18px}.nav a{color:#f4f2e9;text-decoration:none;font-size:12px;white-space:nowrap}.nav a:hover{color:#d7e4aa}.hero{height:390px;position:relative;overflow:hidden;background:#8b7b5c}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111d13a8 0%,#1c271a68 43%,transparent 75%);z-index:1}.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;transition:opacity .4s}.hero-content{position:absolute;z-index:2;left:7%;top:17%;width:min(440px,62%);color:white}.eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase}.hero h1{font:600 clamp(34px,4vw,62px)/1.08 'Playfair Display',serif;margin:16px 0}.hero p{font-size:15px;line-height:1.8;max-width:350px}.primary{background:#b7bd93;color:#203426;border:0;padding:13px 24px;border-radius:25px;font-weight:700;margin-top:16px}.primary:hover{background:#d1d8ac}.hero-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);border:1px solid #ffffff88;background:#ffffffb8;color:var(--forest);width:38px;height:38px;border-radius:50%;font-size:24px}.hero-arrow.prev{left:17px}.hero-arrow.next{right:17px}.dots{position:absolute;z-index:3;bottom:20px;left:50%;display:flex;gap:8px}.dots button{border:1px solid white;width:9px;height:9px;border-radius:50%;padding:0;background:#ffffff88}.dots button.active{background:white}.section{padding:30px 40px}.section h2{font:600 30px 'Playfair Display',serif;margin:0 0 20px}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px 40px;background:#efe8d9}.benefit{display:flex;align-items:center;gap:12px;font-size:12px}.benefit b{display:block}.benefit span{font-size:25px;color:var(--forest)}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.cat{border:1px solid var(--line);background:#fffaf2;border-radius:12px;overflow:hidden;text-align:left;padding:0;transition:transform .2s}.cat:hover,.product:hover{transform:translateY(-4px)}.cat img{width:100%;height:142px;object-fit:cover;display:block}.cat div{padding:12px;font-size:13px;font-weight:700}.cat div span{float:right}.products{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.product{position:relative;background:#fffdf8;border:1px solid #ece2d3;border-radius:12px;padding:10px;box-shadow:0 6px 15px #40341c0a;transition:transform .2s}.product img{width:100%;height:160px;object-fit:cover;border-radius:8px}.product h3{font-size:13px;margin:10px 0 4px}.product small{color:#827a6d}.product .price{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.product .price button{background:var(--forest);color:white;border:0;border-radius:7px;padding:7px 11px}.heart{position:absolute;top:16px;right:16px;border:0;background:#fffc;border-radius:50%;width:30px;height:30px;font-size:19px}.heart.liked{color:#c35a52}.stars{color:#bc9650;font-size:12px}.story{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:#e7e6d5}.story img{width:100%;height:270px;object-fit:cover;border-radius:14px}.story p{line-height:1.8;font-size:14px}.footer{background:#173729;color:#f5efe4;padding:36px 45px;display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:25px;font-size:12px}.footer h3{font:24px 'Playfair Display',serif}.footer p{line-height:1.8;color:#d6ddce}.footer a{display:block;color:#d6ddce;margin:10px 0;text-decoration:none}.newsletter{display:flex;background:white;border-radius:25px;overflow:hidden}.newsletter input{min-width:0;flex:1;border:0;padding:12px;outline:0}.newsletter button{border:0;background:#a8b88a;padding:0 15px}.flyout{position:fixed;z-index:30;width:330px;background:#fffaf0;border:1px solid #ddd4c1;box-shadow:var(--shadow);border-radius:14px;padding:20px;display:none}.flyout.open{display:block}.flyout h3{font:24px 'Playfair Display',serif;margin:0 0 12px}.flyout-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.flyout-item img{width:55px;height:55px;object-fit:cover;border-radius:8px}.flyout-item button{margin-left:auto;border:0;background:#d9e2bd;border-radius:6px;padding:8px}.drawer-back{position:fixed;inset:0;background:#13251b80;z-index:50;display:none}.drawer-back.open{display:block}.drawer{position:absolute;right:0;top:0;bottom:0;width:min(410px,100%);background:var(--cream);padding:28px;overflow:auto}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h2{font:30px 'Playfair Display',serif}.drawer-head button{border:0;background:none;font-size:26px}.cartrow{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:13px 0}.cartrow img{width:65px;height:65px;object-fit:cover;border-radius:7px}.cartrow button{margin-left:auto;border:0;background:#e5d9c6;border-radius:5px}.toast{position:fixed;bottom:25px;right:25px;background:var(--forest);color:white;padding:13px 20px;border-radius:12px;z-index:100;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1}.empty{font-size:13px;color:#777}.dark{--paper:#1b2922;--cream:#23352b;--ink:#f0ecdc;--line:#425446;background:#101b15}.dark .header,.dark .top,.dark .cat,.dark .product,.dark .flyout{background:#26382d;color:#f0ecdc}.dark .logo,.dark .iconbtn{color:#e3ebd5}.dark .rail,.dark .benefits{background:#24372b}.dark .cat,.dark .product{border-color:#405243}.dark .story{background:#2b3e31}.dark .search{background:#e8e7d8}.dark .footer{background:#0d2218}@media(max-width:1000px){.header{padding-left:20px;gap:15px}.logo{font-size:21px}.categories,.products{grid-template-columns:repeat(3,1fr)}.nav{gap:16px;overflow:auto;justify-content:flex-start}.benefits{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.shell{margin:0;border-radius:0}.top{display:none}.header{height:auto;padding:14px;flex-wrap:wrap}.logo{font-size:22px}.search{order:3;flex-basis:100%;max-width:none}.actions{margin-left:auto}.layout{grid-template-columns:56px 1fr}.rail{padding:7px 4px}.rail button{height:54px}.rail svg{width:27px}.nav{height:44px}.hero{height:370px}.hero-content{left:9%;top:17%;width:80%}.hero h1{font-size:37px}.section{padding:24px 15px}.section h2{font-size:25px}.categories,.products{grid-template-columns:repeat(2,1fr)}.cat img{height:110px}.product img{height:130px}.benefits{padding:18px;gap:18px}.story,.footer{grid-template-columns:1fr}.flyout{width:min(300px,calc(100vw - 65px))}.footer{padding:30px}.story img{height:190px}}

/* V3: compact one-row grocery navigation based on supplied reference */
.header{height:88px;background:#20351c;color:#f9f4e9;padding:0 23px;gap:20px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:6px;color:#fff9e9;text-decoration:none;font-size:19px;line-height:1.05;flex:0 0 auto}
.logo small{font-size:9px;margin:5px 0 0;letter-spacing:.08em;color:#e6e4d5}.moon{font-size:31px;margin:0}
.search{max-width:270px;margin:0;flex:0 1 270px;border-radius:4px;background:#fbf3df;padding:3px 5px 3px 12px;border:1px solid #ded4b8}
.search input{font-size:12px}.search button{background:transparent;color:#20351c;width:29px;height:29px;font-size:21px}
.food-nav{display:flex;align-items:center;justify-content:center;gap:clamp(7px,1.1vw,20px);flex:1;min-width:0}
.food-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:0;border-radius:10px;background:transparent;color:#f6f2e5;min-width:46px;padding:7px 3px;transition:background .2s,transform .2s}
.food-nav button:hover,.food-nav button:focus-visible{background:#ffffff1a;transform:translateY(-2px)}
.food-nav svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.food-nav span{font-size:9px;white-space:nowrap;color:#e8e7d8}
.header .iconbtn{color:#f8f5eb}.header .actions{gap:11px}.header .badge{color:#20351c}
.layout{grid-template-columns:82px 1fr}.nav{height:40px;background:#e8e2d1;color:#20351c;justify-content:flex-start;padding-left:32px;gap:26px}
.nav a{color:#29452c;font-size:11px}.nav a:hover{color:#6d7f43}
.rail{background:#eee8d9}.rail button{height:64px}.rail svg{stroke-width:1.3}
.dark .header{background:#10241a}.dark .nav{background:#253b2b}.dark .nav a{color:#e8eedf}
@media(max-width:1150px){.header{gap:12px;padding:0 15px}.logo{font-size:16px}.food-nav{gap:3px}.food-nav button{min-width:35px}.food-nav svg{width:25px;height:25px}.food-nav span{display:none}.search{flex-basis:220px}}
@media(max-width:760px){.header{height:auto;min-height:110px;flex-wrap:wrap;padding:12px}.logo{font-size:18px}.search{order:3;flex:1 1 100%;max-width:none}.food-nav{order:4;flex:1 1 100%;justify-content:space-around;overflow-x:auto}.food-nav button{min-width:40px}.food-nav svg{width:26px}.actions{margin-left:auto}.nav{overflow-x:auto;gap:15px;padding-left:12px}}