@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}header{height:78px;padding:0 7%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e3d8;background:var(--bg);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand>b{display:grid;place-items:center;width:42px;height:42px;background:var(--p);color:white;border-radius:12px 12px 12px 3px;font:700 20px 'Space Grotesk'}.brand small{display:block;font-size:8px;letter-spacing:1.5px;color:#777}.pill{border:1px solid #ddd5c9;padding:9px 14px;border-radius:25px;font-size:11px;font-weight:700}nav{display:flex;gap:25px;font-size:12px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding:65px 9%;max-width:1450px;margin:auto;overflow:hidden}.hero>div:first-child{min-width:0}.hero h1{overflow-wrap:normal;word-break:normal}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--p)}h1,h2{font:600 clamp(42px,5vw,70px)/1.05 'Space Grotesk';letter-spacing:-2px;margin:20px 0}h1 em,h2 em{font-style:normal;color:var(--p)}.hero p{color:#777;font-size:14px;max-width:420px;line-height:1.9}.btn{display:inline-block;background:var(--p);color:white;padding:13px 18px;border:0;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer}.under{margin-left:18px;font-size:11px;font-weight:700}.tiny{font-size:10px;color:#777;margin-top:35px}.art{min-height:350px;display:grid;place-items:center;position:relative}.sun{position:absolute;width:330px;height:330px;background:var(--a);border-radius:50%;right:4%;top:0}.art>img{position:relative;width:76%;height:330px;object-fit:cover;border:9px solid var(--bg);border-radius:48% 48% 16px 16px;transform:rotate(2deg)}.round{position:absolute;bottom:25px;left:0;background:var(--bg);border:2px dashed var(--p);border-radius:50%;width:88px;height:88px;display:grid;align-content:center;text-align:center;font:700 22px 'Space Grotesk';color:var(--p);transform:rotate(-8deg)}.round small{font:700 8px 'DM Sans';color:var(--ink)}.benefits{display:flex;justify-content:center;gap:6vw;padding:20px 6%;border-block:1px solid #e8e3d8;background:#fffdf8;font-size:11px}.benefits span:first-letter{color:var(--p)}.catalog{padding:80px 8%;max-width:1450px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.heading h2{font-size:clamp(35px,4vw,52px);margin:10px 0}.heading p{max-width:350px;color:#777;font-size:12px}.search{display:flex;gap:8px;margin:25px 0;max-width:550px}.search input{flex:1;min-width:0;padding:12px;border:1px solid #e2dbcf;background:#fffdf8;font-size:11px}.categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.categories a{padding:8px 14px;border:1px solid #e1dbcf;border-radius:22px;background:#fffdf8;font-size:10px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{border:1px solid #e9e2d7;background:#fffdf8}.photo{height:200px;position:relative;background:#eee0c4}.photo img{width:100%;height:100%;object-fit:cover}.photo label{position:absolute;top:10px;left:10px;background:#fffdf0;padding:5px 8px;font-size:9px}.info{padding:15px}.info>small{color:var(--p);font-size:9px;text-transform:uppercase;display:flex;justify-content:space-between}.info>small b{color:var(--ink);font-size:12px}.info h3{font:600 18px 'Space Grotesk';margin:8px 0}.info>p{font-size:11px;color:#777;line-height:1.7;min-height:52px}.quantity{display:flex;justify-content:space-between;border-block:1px solid #eee8df;padding:8px 0;font-size:9px;color:#777}.quantity b{color:var(--ink)}details{font-size:10px;padding:7px 0;color:#666}summary{cursor:pointer;color:var(--p);font-weight:700}.allergens{font-size:9px!important;min-height:0!important;color:#8b5d47!important}.order{width:100%;background:none;border:0;border-top:1px solid #e9e2d7;padding:12px 0 0;text-align:left;font-size:10px;font-weight:700;cursor:pointer}.story{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;padding:65px 12%;background:#f0ebdf}.story img{width:100%;height:270px;object-fit:cover}.story h2{font-size:clamp(36px,4vw,51px)}.story p{font-size:12px;line-height:2;color:#777}.cta{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:50px 9%;background:var(--p);color:white}.cta h2{font-size:clamp(31px,4vw,45px);margin:10px 0}.cta .eyebrow{color:var(--a)}.cta p{font-size:12px}.light{background:var(--bg);color:var(--ink)}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:24px 7%;font-size:10px;color:#777}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#29271f;color:white;padding:12px 18px;border-radius:5px;opacity:0;pointer-events:none}#toast.show{opacity:1}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding-inline:6%}}@media(max-width:700px){header{height:68px;padding:0 5%;position:relative}nav{display:none}.pill{font-size:9px;padding:8px}.brand>b{width:36px;height:36px}.hero{grid-template-columns:minmax(0,1fr);padding:34px 7% 28px;gap:8px}.hero h1{font-size:clamp(39px,10vw,48px);line-height:1.05;letter-spacing:-1.7px;margin:15px 0}.hero p{font-size:13px}.art{min-height:255px;width:100%;overflow:hidden}.art>img{height:245px;width:min(78%,310px);object-fit:cover}.sun{width:235px;height:235px;right:8%;top:3px}.round{width:76px;height:76px;font-size:19px;bottom:12px;left:2%}.benefits{flex-wrap:wrap;justify-content:flex-start;gap:13px;padding:17px 6%}.benefits span{width:45%}.catalog{padding:58px 6%}.heading{display:block}.grid{gap:11px}.photo{height:165px}.info{padding:11px}.info h3{font-size:16px}.info>p{font-size:10px;min-height:75px}.story{grid-template-columns:1fr;padding:45px 7%;gap:25px}.story img{height:220px}.cta{display:block;padding:38px 7%}.light{margin-top:16px}footer{flex-wrap:wrap;padding:20px 6%}footer span{width:100%;order:3}}@media(max-width:380px){.grid{grid-template-columns:1fr}.photo{height:230px}.info>p{min-height:0}}
/* V3: responsive polish and real food photography */
.hero{overflow:hidden;min-height:unset}
.hero .art>img{object-fit:cover;object-position:center;height:clamp(260px,34vw,440px);width:82%;border-radius:22px;transform:none;box-shadow:0 18px 50px #4c2b171c}
.hero .sun{width:min(29vw,330px);height:min(29vw,330px)}
.photo img,.story img{object-fit:cover}
.card{overflow:hidden;border-radius:12px;box-shadow:0 5px 18px #51351a0b}
.photo{overflow:hidden}
.photo img{transition:transform .35s}
.card:hover .photo img{transform:scale(1.035)}
.info{padding:16px}
.order{color:var(--p);padding-top:13px}
.categories a:focus-visible,.btn:focus-visible,.order:focus-visible{outline:3px solid var(--a);outline-offset:3px}
@media(max-width:700px){
  html{scroll-padding-top:76px}
  header{position:relative;height:auto;min-height:68px;gap:10px;flex-wrap:wrap;padding:12px 5%}
  .brand{min-width:0;flex:1}
  .brand span{font-size:14px;line-height:1.25}
  .brand small{font-size:7px}
  header .pill{white-space:nowrap}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:34px 6% 28px}
  .hero>div:first-child{width:100%}
  .hero h1{font-size:clamp(39px,10vw,50px);line-height:1.02;letter-spacing:-1.7px;margin:15px 0}
  .hero p{font-size:14px;line-height:1.7}
  .hero .btn{margin-top:8px}
  .tiny{margin-top:20px;line-height:1.8}
  .art{width:100%;min-height:unset;height:auto;aspect-ratio:1.15/1;margin:0 auto}
  .art .sun{width:75%;height:auto;aspect-ratio:1;right:7%;top:2%}
  .hero .art>img{width:88%;height:100%;max-height:340px;border:0;border-radius:18px;object-fit:cover;object-position:center}
  .round{width:76px;height:76px;left:0;bottom:2%;font-size:19px}
  .benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:17px 6%}
  .benefits span{font-size:10px;line-height:1.5}
  .catalog{padding:48px 5%}
  .heading h2{font-size:clamp(32px,8vw,42px);line-height:1.08}
  .heading p{font-size:12px;line-height:1.7}
  .search{width:100%}
  .categories{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
  .categories a{flex:0 0 auto;white-space:nowrap}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .photo{height:auto;aspect-ratio:1.15/1}
  .photo label{font-size:8px;max-width:85%;line-height:1.3}
  .info{padding:11px}
  .info h3{font-size:15px;line-height:1.25}
  .info>p{font-size:10px;line-height:1.55;min-height:0}
  .info>small{gap:4px;font-size:8px}
  .info>small b{font-size:11px;white-space:nowrap}
  .quantity{font-size:8px;gap:5px}
  details{font-size:10px}
  .order{font-size:10px;line-height:1.4}
  .story{padding:40px 6%;gap:22px}
  .story img{height:auto;aspect-ratio:1.5/1;border-radius:12px}
  .story h2{font-size:clamp(32px,8vw,42px)}
  .cta{padding:36px 6%}
  .cta h2{font-size:34px;line-height:1.08}
  footer{gap:12px}
}
@media(max-width:380px){
  .hero h1{font-size:38px}
  .hero .btn{padding:12px;font-size:10px}
  .grid{gap:8px}
  .info{padding:9px}
  .info h3{font-size:14px}
  .photo label{left:6px;top:6px}
  .round{width:65px;height:65px;font-size:16px}
  .round small{font-size:7px}
}

/* V4: mobile-first layout and real product photography */
@media(max-width:700px){
  header{position:relative;height:auto;min-height:68px;gap:8px;flex-wrap:wrap;padding:10px 4%}
  .brand{min-width:0;flex:1}
  .brand span{font-size:14px;line-height:1.25}
  .brand small{font-size:7px}
  header .pill{font-size:9px;padding:8px 10px}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:30px 6% 26px}
  .hero h1{font-size:clamp(37px,10vw,48px);line-height:1.02;letter-spacing:-1.6px;margin:13px 0}
  .hero p{font-size:14px;max-width:100%;margin:12px 0 18px}
  .hero .btn{display:inline-flex;max-width:100%;padding:13px 15px}
  .tiny{margin-top:20px;font-size:10px}
  .art{width:100%;min-height:0;height:auto;aspect-ratio:1.25/1;margin:2px auto 0}
  .art .sun{width:78%;height:auto;aspect-ratio:1;right:8%;top:2%}
  .hero .art>img{width:88%;height:100%;max-height:340px;border:0;border-radius:18px;object-fit:cover;object-position:center}
  .round{width:70px;height:70px;font-size:18px;left:0;bottom:4px}
  .round small{font-size:7px}
  .benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 6%;font-size:10px}
  .catalog{padding:48px 5%}
  .heading{display:block}
  .heading h2{font-size:35px;line-height:1.08}
  .heading p{font-size:12px}
  .search{width:100%;gap:6px}
  .search input{width:0;min-width:0}
  .categories{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:8px;scrollbar-width:thin}
  .categories a{flex:0 0 auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .photo{aspect-ratio:1/0.92;height:auto}
  .photo img{width:100%;height:100%;object-fit:cover}
  .info{padding:10px}
  .info h3{font-size:15px;line-height:1.25}
  .info>p{font-size:10px;min-height:0;line-height:1.5}
  .quantity{font-size:8px;gap:6px}
  .order{font-size:9px;line-height:1.4}
  .story{grid-template-columns:1fr;gap:22px;padding:40px 6%}
  .story img{height:auto;aspect-ratio:1.4/1;object-fit:cover}
  .story h2{font-size:36px}
  .cta{display:block;padding:36px 6%}
  .cta h2{font-size:35px}
  .cta .btn{margin-top:12px}
  footer{flex-wrap:wrap;padding:20px 6%;font-size:10px}
}
@media(max-width:380px){
 .grid{gap:8px}.info{padding:8px}.info h3{font-size:14px}.photo label{left:5px;top:5px}
 .hero h1{font-size:36px}.round{width:62px;height:62px;font-size:16px}
}