/* Finola — visual system. Organic design-system tokens, retuned to the Finola brand.
   Type is Playfair Display + Inter because the display face must carry Cyrillic. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap&subset=cyrillic,cyrillic-ext,latin');

:root{
--color-bg:#F2EFE5;--color-surface:#FBF9F2;--color-sand:#EAE6D9;--color-text:#3B3A33;
--color-accent:#2C4A3A;--color-accent-2:#8A6B33;
--color-divider:color-mix(in srgb,#3B3A33 14%,transparent);
--color-accent-100:#edf3ee;--color-accent-200:#d9e6dd;--color-accent-300:#b8cfc0;--color-accent-400:#8db09b;--color-accent-500:#628f76;--color-accent-600:#416a54;--color-accent-700:#2C4A3A;--color-accent-800:#20372b;--color-accent-900:#16261d;
--color-accent-2-100:#faf2e0;--color-accent-2-200:#f2e4c6;--color-accent-2-300:#e6d0a1;--color-accent-2-400:#d3b478;--color-accent-2-500:#b99552;--color-accent-2-600:#9c7a3c;--color-accent-2-700:#8A6B33;--color-accent-2-800:#5f4923;--color-accent-2-900:#3f3018;
--color-neutral-100:#f9f6ee;--color-neutral-200:#eee9dc;--color-neutral-300:#dcd5c4;--color-neutral-400:#c0b8a5;--color-neutral-500:#a19986;--color-neutral-600:#827b6a;--color-neutral-700:#645e50;--color-neutral-800:#474338;--color-neutral-900:#2e2c25;
--font-heading:"Playfair Display",Georgia,serif;--font-body:"Inter",system-ui,sans-serif;
--space-1:4px;--space-2:9px;--space-3:13px;--space-4:18px;--space-6:26px;--space-8:36px;--space-12:54px;
--radius-sm:10px;--radius-md:18px;--radius-lg:30px;--radius-pill:999px;
--shadow-sm:0 1px 2px color-mix(in srgb,#2e2c25 12%,transparent);
--shadow-md:0 4px 14px color-mix(in srgb,#2e2c25 12%,transparent);
--shadow-lg:0 16px 40px color-mix(in srgb,#2e2c25 18%,transparent);
--tabbar-h:66px;--maxw:1080px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.14;letter-spacing:-.01em;margin:0 0 var(--space-2)}
h1{font-size:clamp(34px,7vw,54px)}h2{font-size:clamp(25px,4.4vw,34px)}h3{font-size:20px}h4{font-size:17px}
p{margin:0 0 var(--space-3);text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--color-accent-700);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--color-accent-2-700)}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:color-mix(in srgb,var(--color-accent) 24%,transparent)}
.muted{color:color-mix(in srgb,var(--color-text) 58%,transparent)}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)}
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-2-700);margin:0 0 var(--space-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:12px 20px;border-radius:var(--radius-pill);transition:background .15s,color .15s,border-color .15s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn svg{display:block;flex:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-primary:active:not(:disabled){background:var(--color-accent-800)}
.btn-secondary{border-color:var(--color-divider);background:var(--color-surface)}
.btn-secondary:hover{background:var(--color-sand)}
.btn-secondary:active{background:var(--color-neutral-300)}
.btn-gold{background:var(--color-accent-2);color:#fff}
.btn-gold:hover{background:var(--color-accent-2-600)}
.btn-ghost{color:var(--color-accent-700);padding:10px 12px}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 9%,transparent)}
.btn-block{width:100%}
.btn-lg{padding:15px 26px;font-size:16px}

/* tags */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.tag-accent{background:var(--color-accent-200);color:var(--color-accent-800)}
.tag-gold{background:var(--color-accent-2-200);color:var(--color-accent-2-800)}
.tag-neutral{background:var(--color-neutral-200);color:var(--color-neutral-800)}
.tag-out{background:var(--color-neutral-300);color:var(--color-neutral-800)}

/* cards & surfaces */
.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.panel{background:var(--color-sand);border-radius:var(--radius-lg)}

/* photos — warmed, gently lifted; food must stay appetising, so no desaturation */
.photo{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-sand);aspect-ratio:1}
.photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.02)}
.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 100% at 30% 20%,var(--color-accent-100),var(--color-sand));font-family:var(--font-heading);font-size:44px;color:var(--color-accent-300)}

/* forms */
.field{display:block;margin-bottom:var(--space-3)}
.field>label,.lbl{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:var(--color-neutral-700)}
.input,select.input,textarea.input{width:100%;font:inherit;font-size:16px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);padding:12px 16px;transition:border-color .15s,box-shadow .15s}
textarea.input{border-radius:var(--radius-md);resize:vertical;min-height:76px}
select.input{border-radius:var(--radius-pill);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-neutral-600) 50%),linear-gradient(135deg,var(--color-neutral-600) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.input:hover{border-color:var(--color-neutral-400)}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 16%,transparent);outline:none}
.input::placeholder{color:var(--color-neutral-500)}

/* segmented choice */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--color-sand);padding:4px;border-radius:var(--radius-pill)}
.seg-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 12px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:600;cursor:pointer;border:0;background:transparent;transition:background .15s,color .15s}
.seg-opt:hover{background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.seg-opt[aria-pressed=true]{background:var(--color-accent);color:var(--color-bg);box-shadow:var(--shadow-sm)}

/* qty stepper */
.qty{display:inline-flex;align-items:center;gap:2px;background:var(--color-sand);border-radius:var(--radius-pill);padding:3px}
.qty button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center;color:var(--color-accent-700);transition:background .15s}
.qty button:hover{background:var(--color-accent-200)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* table */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;font-weight:600;color:var(--color-neutral-700);padding:9px 0;border-bottom:1px solid var(--color-divider)}
.table td{padding:9px 0;border-bottom:1px solid var(--color-divider)}
.table tr:last-child td{border-bottom:0}
.table td:last-child,.table th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* sheets / dialogs */
.backdrop{position:fixed;inset:0;background:color-mix(in srgb,#20372b 46%,transparent);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .22s}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--color-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);transform:translateY(101%);transition:transform .3s cubic-bezier(.32,.72,0,1);max-height:92dvh;display:flex;flex-direction:column}
.sheet.open{transform:translateY(0)}
.sheet-grab{width:44px;height:5px;border-radius:999px;background:var(--color-neutral-400);margin:10px auto 0;flex:none}
.sheet-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:var(--space-4) var(--space-4) var(--space-6)}
.sheet-foot{flex:none;padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));border-top:1px solid var(--color-divider);background:var(--color-surface)}
@media(min-width:760px){
.sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,94vw);transform:translate(-50%,-46%) scale(.97);opacity:0;border-radius:var(--radius-lg);max-height:88vh;transition:transform .24s,opacity .24s}
.sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
.sheet-grab{display:none}
}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px);transform:translate(-50%,14px);z-index:80;background:var(--color-accent-800);color:var(--color-neutral-100);padding:12px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.toast{bottom:26px}}