@font-face{font-family:IranSans;src:url("fonts/iransans-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:IranSans;src:url("fonts/iransans-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4ede0;color:#35291e;font:16px/1.9 "IranSans",sans-serif}main,form{max-width:770px;margin:auto;padding:18px}header{padding:38px 7%;border-radius:22px;background:linear-gradient(270deg,#211b15 8%,#2b201ad9 48%,#281d171a),url(coffee.jpg) center/cover;color:#fff5df}small{font:11px "IranSans",sans-serif;letter-spacing:3px;color:#996942}header small{color:#e3c399}h1{font: bold 58px "IranSans",sans-serif;margin:20px 0 0}h1 span{display:block;font:18px/2 "IranSans",sans-serif;color:#e4bd91}nav{position:sticky;top:0;background:#f4ede0;display:flex;overflow:auto;gap:8px;padding:14px 0;z-index:1}nav a{white-space:nowrap;background:#304839;color:white;border-radius:25px;padding:4px 16px;text-decoration:none}section{background:#fffaf2;border:1px solid #dfd4bf;border-radius:16px;padding:22px;margin:12px 0;scroll-margin-top:78px}h2{margin:2px 0 10px}article{display:flex;gap:9px;align-items:center;padding:9px 0}article i{flex:1;border-bottom:1px dotted #c3b59e}article b{color:#755033}article img{width:60px;height:60px;object-fit:cover;border-radius:12px}em{float:left;font:13px/2 "IranSans",sans-serif}a{color:#3b513f}footer{padding:20px;text-align:center}#gallery img{max-width:140px}input,button,select{font:inherit;padding:8px;max-width:100%}label{display:block;margin:16px 0}

input::file-selector-button{font:inherit}
.quantity{display:flex;align-items:center;gap:4px}.quantity button,#basket button,#orders button{border:0;border-radius:8px;background:#314d3d;color:white;cursor:pointer}.quantity button{min-width:34px}#basket button:disabled{opacity:.5}#orders ul{max-height:22rem;overflow:auto}#orders li{padding:.5rem} @media(max-width:520px){article{flex-wrap:wrap}.quantity{margin-inline-start:auto}article b{font-size:14px}article:has(.quantity) strong{font-size:15px}}
/* Espresso, pistachio and warm amber */
:root {
  color-scheme: dark;
  --canvas: #171915;
  --surface: #232720;
  --ink: #faf3e5;
  --muted: #c7c9b9;
  --pistachio: #c1d994;
  --amber: #f5c581;
  --line: #464c3e;
}
body { background: var(--canvas); color: var(--ink); }
header {
  background-image: linear-gradient(270deg, #1a2b20 8%, #213326ef 43%, #1e29174d), url(coffee.jpg);
  border: 1px solid #526546;
}
header small, header h1 span { color: var(--pistachio); }
nav { background: var(--canvas); }
nav a { background: #30382d; color: #ecf2de; border: 1px solid #4c5645; }
nav a:first-child { background: var(--pistachio); color: #1b2815; }
nav a:hover, nav a:focus-visible { background: #dcebbd; color: #172512; }
section { background: var(--surface); border-color: var(--line); }
section small, a { color: var(--pistachio); }
h2 { color: var(--ink); }
article + article { border-top: 1px solid #363c31; }
article b { color: var(--amber); }
article i { border-color: #59604e; }
em, footer { color: var(--muted); }
.quantity button, #basket button, #orders button, input[type="submit"] {
  background: var(--pistachio); color: #1a2913; border: 0; border-radius: 8px;
}
.quantity button:last-child { background: #35402f; color: #e3ebd7; }
input:not([type="submit"]), select { background: #191e18; color: var(--ink); border: 1px solid #68735e; border-radius: 7px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 700px) {
  main { padding: 10px; }
  main > section { padding: 16px 12px; }
  article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 9px;
    padding-block: 12px;
  }
  article > img { grid-area: 1 / 1 / 3 / 2; width: 52px; height: 52px; }
  article > strong { grid-area: 1 / 2 / 2 / 4; line-height: 1.55; }
  article > b { grid-area: 2 / 2; align-self: start; font-size: 13px; line-height: 1.6; }
  article > i { display: none; }
  article > .quantity { grid-area: 2 / 3; gap: 2px; margin: 0; }
  .quantity button { min-width: 34px; min-height: 36px; padding: 2px; }
  .quantity span { min-width: 15px; text-align: center; }
  #basket { padding: 0; }
}
@media (max-width: 380px) {
  article { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 6px; }
  article > img { width: 44px; height: 44px; }
}
.admin-panel {width:100%;min-width:0}
.admin-panel select,.admin-panel input[type=file],.admin-panel input[type=text]{display:block;width:100%}
.photo-editor{display:flex;gap:12px;flex-wrap:wrap}
.photo-editor figure{margin:0}
.photo-editor figcaption{color:var(--muted);font-size:14px}
.photo-editor img{display:block;width:110px;height:110px;object-fit:contain;background:var(--canvas);border-radius:10px}
#orders{margin-bottom:24px;border-bottom:1px solid var(--line)}
#orders ul{list-style:none;padding:0;display:grid;gap:10px;max-height:65vh}
#orders .order-card{padding:12px;background:var(--canvas);border:1px solid var(--line);border-radius:12px}
.order-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.order-heading strong{color:var(--pistachio)}
.order-heading time,.order-card footer{font-size:12px;color:var(--muted)}
.order-card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;margin:8px 0}
.order-card dd{margin:0;color:var(--amber)}
.order-card footer{text-align:start;border-top:1px solid var(--line);padding:6px 0 0}
@media(max-width:600px){.admin-panel{padding:8px}.admin-panel>section{padding:14px}.admin-panel input[type=submit],#orders button{min-height:44px}}
.payment-summary{padding:10px 12px;margin:10px 0;background:var(--surface);border-radius:8px;color:var(--amber)} .payment-summary label{margin:6px 0;color:var(--ink)}
main>header{padding:12px 5%;border-radius:14px}
main>header h1{font-size:32px;margin:2px 0}
main>header h1 span{display:inline-block;font-size:13px;margin-inline-start:12px}
main>nav{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px 0;overflow:visible}
main>nav a{display:grid;place-items:center;text-align:center;white-space:normal;padding:4px;font-size:13px;min-height:35px;border-radius:10px}
@media(max-width:359px){main>nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
#cart-open{position:fixed;z-index:4;bottom:calc(12px + env(safe-area-inset-bottom));inset-inline:0;margin:auto;width:max-content;max-width:94%;border:1px solid #bbcf9d;border-radius:24px;padding:10px 24px;background:#d4e8bb;color:#1b2815;box-shadow:0 4px 20px #0008;font:inherit;font-weight:bold}
main:has(#cart-open:not([hidden])){padding-bottom:80px}
dialog#order{box-sizing:border-box;width:min(100% - 16px,480px);max-height:85dvh;overflow:auto;margin:auto auto 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border:1px solid var(--line);background:var(--canvas);color:var(--ink);font:inherit}
#order::backdrop{background:#101811aa}
#cart-close{float:inline-end;font:inherit;padding:6px 12px}
#basket li{display:flex;align-items:center;justify-content:space-between;gap:10px}
#basket li button,#basket button[type=button]{width:auto;color:#ffcfbf;background:#412d28;border:1px solid #755448;border-radius:10px;min-height:42px;padding:4px 14px;font:inherit}
#basket button[hidden]{display:none}
main>nav{position:sticky;top:0;z-index:3;padding-block:6px;border-bottom:1px solid var(--line)}
main>section[id^="s"]{scroll-margin-top:calc(var(--menu-height,120px) + 8px)}
@media(max-height:340px){main>nav{position:static}main>section[id^="s"]{scroll-margin-top:8px}}
#basket [hidden]{display:none}
#basket .delivery-choice{display:flex;align-items:center;gap:8px}
#basket input[type=checkbox]{width:20px;height:20px}
#delivery-fields{min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px}
#delivery-fields textarea{width:100%;box-sizing:border-box;font:inherit;min-height:60px}