:root { --orange:#f3a323; --red:#ee5749; --green:#2b8559; --ink:#24221f; --muted:#77726b; --cream:#fff8eb; --line:#eee4d6; --wrap:1240px; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fffdfa; }
button,input,select { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; text-decoration:none; }
.wrap { width:min(calc(100% - 42px),var(--wrap)); margin-inline:auto; }
.preview-bar { position:sticky; top:0; z-index:20; display:flex; min-height:64px; align-items:center; justify-content:center; gap:28px; padding:10px 24px; color:#fff; background:#0d0d0d; font-size:13px; }
.preview-back { position:absolute; left:24px; color:#aaa; }.preview-back:hover { color:#fff; }
.preview-modes,.preview-switch { display:flex; align-items:center; gap:10px; }.preview-modes span,.preview-switch span { color:#929292; }
.preview-modes button { width:34px; height:34px; border:1px solid #3d3d3d; border-radius:7px; color:#ccc; background:#181818; cursor:pointer; font-size:22px; line-height:1; }.preview-modes button.is-active { border-color:#f0a528; color:#ffc155; }
.preview-switch select { min-width:130px; padding:9px 32px 9px 12px; border:1px solid #3d3d3d; border-radius:7px; color:#fff; background:#181818; }
.preview-cta { padding:11px 17px; border-radius:8px; color:#fff; background:var(--red); font-weight:800; }
.demo-stage { min-height:calc(100vh - 64px); padding:0; scroll-margin-top:64px; background:#fffdfa; transition:padding .28s ease,background .28s ease; }
.demo-page { width:100%; margin-inline:auto; overflow:clip; background:#fffdfa; container-name:storefront; container-type:inline-size; transition:width .3s ease,border-radius .3s ease,box-shadow .3s ease; }
html[data-preview-size="mobile"] .demo-stage { padding:24px; background:#272522; }
html[data-preview-size="mobile"] .demo-page { width:420px; max-width:100%; border-radius:22px; box-shadow:0 28px 80px rgba(0,0,0,.42); }
.food-header { position:relative; z-index:10; border-bottom:1px solid var(--line); background:#fff; }
.food-header__inner { display:flex; min-height:102px; align-items:center; gap:38px; }
.food-logo { display:grid; min-width:150px; color:#e58c18; line-height:1; }.food-logo strong { font-size:24px; font-weight:950; letter-spacing:.5px; }.food-logo span { margin-top:5px; color:#5d574e; font-size:7px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; }
.food-header nav { display:flex; gap:28px; margin-left:auto; font-size:14px; font-weight:650; }.food-header nav a:hover { color:var(--orange); }
.city { order:-1; display:none; border:0; background:transparent; cursor:pointer; }
.food-actions { display:flex; align-items:center; gap:8px; }.food-actions > button { height:48px; border:1px solid var(--line); border-radius:11px; color:#786f63; background:#fff; cursor:pointer; }.food-actions > button:not(.cart-button) { width:48px; font-size:22px; }.food-actions > button.is-active { color:var(--red); }
.food-actions .cart-button { position:relative; display:flex; min-width:126px; align-items:center; justify-content:center; gap:7px; padding:0 12px; border-color:var(--orange); color:#fff; background:var(--orange); }.cart-button b { position:absolute; top:-7px; left:28px; display:grid; width:20px; height:20px; place-items:center; border:2px solid #fff; border-radius:50%; color:#fff; background:var(--red); font-size:9px; }.cart-button em { font-size:13px; font-style:normal; font-weight:800; }
.food-menu-toggle { display:none; border:0; background:transparent; font-size:26px; }.food-header .food-mobile-nav { display:none; padding:0 0 18px; }.food-header .food-mobile-nav.is-open { display:flex; gap:15px; }
.food-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:22px; padding-top:22px; }
.category-sidebar { position:sticky; top:20px; align-self:start; padding:24px 16px; border:1px solid var(--line); border-radius:18px; background:#fff; }.category-sidebar > span { display:block; padding:0 10px 12px; color:#9b9388; font-size:9px; font-weight:850; letter-spacing:.15em; }
.category-sidebar nav { display:grid; gap:4px; }.category-sidebar nav a { display:flex; align-items:center; gap:11px; padding:12px 10px; border-radius:10px; color:#5f5a52; font-size:14px; font-weight:650; }.category-sidebar nav a:hover,.category-sidebar nav a.is-active { color:#a45f00; background:#fff2d8; }.category-sidebar nav i { width:25px; font-size:18px; font-style:normal; text-align:center; }
.sidebar-offer { margin-top:20px; padding:18px; border-radius:15px; color:#fff; background:linear-gradient(145deg,#ef594b,#c43d34); }.sidebar-offer span { font-size:9px; font-weight:900; letter-spacing:.16em; }.sidebar-offer b { display:block; margin:8px 0 0; font-size:40px; line-height:1; }.sidebar-offer p { margin:5px 0 14px; font-size:13px; }.sidebar-offer small { padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.15); font-size:9px; }
.food-content { min-width:0; }
.delivery-panel { display:flex; min-height:80px; align-items:center; gap:22px; padding:13px 18px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.delivery-switch { display:flex; gap:7px; }.delivery-switch button { height:45px; padding:0 16px; border:1px solid #d9cec0; border-radius:9px; color:#6e665c; background:#fff; cursor:pointer; font-weight:750; }.delivery-switch button.is-active { border-color:var(--orange); color:#fff; background:var(--orange); }
.delivery-address { display:flex; align-items:center; gap:12px; }.delivery-address > i { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; color:#fff; background:#f8b64c; font-style:normal; }.delivery-address > span { display:grid; gap:3px; }.delivery-address small { color:#9a9288; font-size:10px; }.delivery-address b { font-size:13px; }.change-address { margin-left:auto; border:0; border-bottom:1px dashed #756e66; background:transparent; cursor:pointer; font-size:12px; }
.food-hero { position:relative; min-height:450px; margin-top:17px; overflow:hidden; border-radius:21px; background:linear-gradient(90deg,rgba(255,248,234,.98) 0 34%,rgba(255,248,234,.05) 68%),url("assets/hero.jpg") center/cover; }
.food-hero__copy { position:relative; z-index:2; max-width:520px; padding:61px 51px; }.food-hero__copy > span { display:inline-block; padding:8px 10px; border-radius:7px; color:#bd3d34; background:#ffe2dc; font-size:9px; font-weight:900; letter-spacing:.12em; }.food-hero h1 { margin:15px 0 16px; font-size:clamp(48px,5vw,70px); line-height:.9; letter-spacing:-3.5px; }.food-hero h1 strong { color:var(--red); }.food-hero p { max-width:390px; color:#70685f; font-size:15px; line-height:1.55; }.food-hero__copy a { display:inline-flex; margin-top:13px; padding:14px 17px; border-radius:9px; color:#fff; background:var(--ink); font-size:13px; font-weight:850; }
.hero-sticker { position:absolute; right:24px; bottom:21px; display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:13px; background:rgba(255,255,255,.92); box-shadow:0 12px 30px rgba(86,51,22,.12); }.hero-sticker b { color:var(--green); font-size:28px; }.hero-sticker span { font-size:10px; line-height:1.35; }
.mobile-categories { display:none; }
.food-products { padding:75px 0 90px; scroll-margin-top:20px; }.food-products > header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:25px; }.food-products > header span,.food-about > div:first-child > span { color:#9e7351; font-size:9px; font-weight:900; letter-spacing:.16em; }.food-products h2 { margin:7px 0 0; font-size:37px; letter-spacing:-1.5px; }
.food-search { display:flex; width:230px; height:43px; align-items:center; gap:9px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#fff; }.food-search input { width:100%; border:0; outline:0; background:transparent; font-size:12px; }
.food-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.food-card[hidden] { display:none; }.food-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.2s; }.food-card:hover { box-shadow:0 18px 40px rgba(91,61,30,.1); transform:translateY(-2px); }
.dish { position:relative; aspect-ratio:1.45/1; background-image:url("assets/products.jpg"); background-repeat:no-repeat; background-size:200% 200%; }.dish-1 { background-position:0 0; }.dish-2 { background-position:100% 0; }.dish-3 { background-position:0 100%; }.dish-4 { background-position:100% 100%; }
.dish > span { position:absolute; top:13px; left:13px; padding:7px 9px; border-radius:7px; color:#fff; background:var(--red); font-size:9px; font-weight:850; }.dish > span.green { background:var(--green); }.dish > span.dark { background:#252421; }.dish > button { position:absolute; top:12px; right:12px; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.9); cursor:pointer; font-size:21px; }.dish > button.is-active { color:var(--red); }
.food-card__body { padding:18px; }.food-card__body small { color:#a3988c; font-size:8px; font-weight:850; letter-spacing:.12em; }.food-card h3 { margin:7px 0 8px; font-size:19px; }.food-card p { min-height:44px; margin:0; color:#81796f; font-size:12px; line-height:1.55; }.food-card footer { display:flex; align-items:center; justify-content:space-between; margin-top:15px; }.food-card footer b { font-size:20px; }.food-card footer button { padding:11px 14px; border:0; border-radius:9px; color:#fff; background:var(--orange); cursor:pointer; font-size:12px; font-weight:850; }.food-card footer button:hover,.food-card footer button.is-added { background:#db8611; }
.food-empty { padding:60px 20px; border:1px dashed #d8cbbb; border-radius:18px; text-align:center; }.food-about { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:90px; padding:50px; border-radius:22px; color:#fff; background:#292b25; }.food-about h2 { margin:14px 0 0; font-size:40px; line-height:1.02; letter-spacing:-1.8px; }.about-points { display:grid; gap:1px; }.about-points article { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); }.about-points b { color:#f3b64b; }.about-points p { margin:0; color:#d2d5ce; }
.demo-page > footer { padding:52px 0; color:#b8b3ac; background:#191917; }.food-logo--light strong { color:#f0a32b; }.food-logo--light span { color:#b8b3ac; } .demo-page > footer .wrap { display:flex; align-items:center; gap:35px; } .demo-page > footer p { margin-right:auto; font-size:12px; } .demo-page > footer nav { display:flex; gap:22px; font-size:12px; }
.demo-toast { position:fixed; right:24px; bottom:24px; z-index:50; padding:14px 18px; border-radius:10px; color:#fff; background:#292621; box-shadow:0 14px 35px rgba(0,0,0,.2); opacity:0; transform:translateY(12px); transition:.2s; pointer-events:none; }.demo-toast.is-visible { opacity:1; transform:none; }
@media (max-width:1000px) {
  .preview-back { position:static; }.preview-back span,.preview-modes span,.preview-switch span { display:none; }
}
@container storefront (max-width:1000px) {
  .food-header nav { display:none; }.food-menu-toggle { display:block; margin-left:auto; }.food-actions { margin-left:auto; }.food-layout { grid-template-columns:1fr; }.category-sidebar { display:none; }.mobile-categories { display:flex; gap:8px; margin:20px 0 0; overflow-x:auto; }.mobile-categories button { flex:0 0 auto; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; }.mobile-categories button.is-active { border-color:var(--orange); color:#fff; background:var(--orange); }
}
@media (max-width:680px) {
  .preview-bar { justify-content:space-between; gap:9px; padding:9px 13px; }.preview-switch { display:none; }.preview-cta { padding:10px 11px; font-size:11px; }
  html[data-preview-size="mobile"] .demo-stage { padding:10px; }
}
@container storefront (max-width:680px) {
  .wrap { width:min(calc(100% - 26px),var(--wrap)); }
  .food-header__inner { min-height:76px; gap:10px; }.food-logo { min-width:113px; }.food-logo strong { font-size:19px; }.food-actions > button:not(.cart-button),.cart-button span { display:none; }.food-actions .cart-button { min-width:84px; height:42px; }.food-menu-toggle { margin-left:0; }.food-mobile-nav.is-open { flex-wrap:wrap; }
  .delivery-panel { align-items:flex-start; flex-direction:column; gap:12px; }.delivery-switch { width:100%; }.delivery-switch button { flex:1; }.change-address { display:none; }
  .food-hero { min-height:560px; background-position:68% center; }.food-hero__copy { padding:45px 26px; }.food-hero h1 { font-size:49px; }.food-hero p { max-width:290px; }.hero-sticker { right:13px; bottom:13px; }
  .food-products { padding:55px 0 70px; }.food-products > header { align-items:flex-start; flex-direction:column; }.food-products h2 { font-size:31px; }.food-search { width:100%; }.food-grid { grid-template-columns:1fr; }.dish { aspect-ratio:1.35/1; }
  .food-about { grid-template-columns:1fr; gap:30px; padding:35px 25px; }.food-about h2 { font-size:34px; }
  .demo-page > footer .wrap,.demo-page > footer nav { align-items:flex-start; flex-direction:column; } .demo-page > footer p { margin:0; }
}