:root{
color-scheme: light;
--bg:#3b0612; --bg2:#5b0f1f; --panel:#4b0c19; --card:#4f0e1c;
--border:rgba(255,255,255,.12);
--text:#ffffff; --muted:#f1d9de; --brand:#ffd9e2; --accent:#ff9ab3;
--search-h: 30px;
}
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
background:
radial-gradient(1100px 600px at 15% -10%, #5b0f1f 0%, transparent 60%),
radial-gradient(900px 800px at 110% 20%, #4a0d18 0%, transparent 50%),
linear-gradient(180deg, var(--bg) 0%, #2a0410 100%);
color:var(--text);
font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
.container{
display:grid;grid-template-columns:320px minmax(0,1fr);
grid-template-areas:'header header' 'aside main' 'footer footer';
gap:16px;max-width:1300px;margin:0 auto;padding:8px 16px 16px;
}
.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.brand{
font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
font-size:20px;
line-height:1.05;
font-weight:800;
letter-spacing:.3px;
background:linear-gradient(180deg,#fff 0%, #ffe7ee 70%, #ffd2e0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 2px 18px rgba(255,160,185,.18);
transform:translateY(-1px)
}
@media (max-width: 900px){
.brand{ font-size:18px; }
}
.btn-like, .menu-toggle, .searchbox button, .agegate button{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 12px;border-radius:12px;border:1px solid var(--border);
background:rgba(0,0,0,.22);color:#fff;font-weight:700;cursor:pointer;
box-shadow:0 1px 2px rgba(0,0,0,.25);font-size:16px;
}
.btn-like[disabled]{opacity:.6;cursor:default}
aside#sidemenu{grid-area:aside}
.menu{
position:static;background:var(--panel);border:1px solid var(--border);
border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.28);display:block;width:100%
}
.langbar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.lang{
display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;border:1px solid var(--border);
background:transparent;color:#ffe5eb;font-size:12px;overflow:hidden;padding:0
}
.lang img{width:100%;height:100%;display:block;border-radius:50%}
.lang.active{outline:2px solid var(--accent);outline-offset:1px}
.searchbox input[type="text"]{
flex: 1;
margin-bottom:16px;
height: var(--search-h);
line-height: var(--search-h);
padding: 0 8px;
border: 1px solid var(--border);
border-radius: 6px 0 0 6px;
background: rgba(0,0,0,.18);
color: #fff;
font-size: 14px;
}
.searchbox input[type="text"]::placeholder{ color:#f6dae1 }
.searchbox button{
height: var(--search-h);
padding: 0 8px;
font-size: 14px;
border-left: 0;
border-radius: 0 6px 6px 0;
background: rgba(0,0,0,.22);
display: inline-flex;
align-items: center;
justify-content: center;
}
.menulist{list-style:none;margin:0;padding:0}
.menulist > li.lvl1{margin-top:6px;color:#ffe9ee;font-size:20px;font-weight:800;}
.menul2{list-style:none;margin:2px 0 6px 0;padding:0}
.menul2 > li.lvl2{margin:4px 0 6px 0}
.lvl2-toggle{
display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;
padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.12);border:1px solid var(--border);color:#ffe5ea;cursor:pointer
}
.lvl2-toggle:hover{background:rgba(0,0,0,.18)}
.lvl2-toggle .lvl2-text{font-size:16px;font-weight:700;color:#ffe5ea}
.lvl2-toggle .arrow{width:22px;height:22px;min-width:22px;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;position:relative}
.lvl2-toggle .arrow::before{content:'';display:block;width:6px;height:6px;border-right:2px solid #ffe5ea;border-bottom:2px solid #ffe5ea;transform:rotate(45deg);transition:transform .15s ease}
.lvl2-toggle[aria-expanded="true"] .arrow::before{ transform:rotate(225deg); }
.lvl2-toggle .lvl2-text{
flex: 1 1 auto;
min-width: 0;
display: block;
text-align: left;
white-space: normal;
}
.lvl2-toggle .arrow{
flex: 0 0 22px;
}
.lvl2-toggle{
align-items: flex-start;
}
.lvl2-toggle .arrow { align-self: center; }
.menul3{list-style:none;margin:6px 0 8px 12px;padding:0}
.menul3[hidden]{display:none}
.menul3 > .lvl3{margin:2px 0}
.menul3 > .lvl3 > a{font-size:16px;font-weight:400;color:#ffe1ea}
.menul3 > .lvl3 > a.active{color:#ffffff;font-weight:700;text-decoration:underline}
.main{grid-area:main;min-width:0}
.heading-gradient{
font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
background:linear-gradient(90deg,#ffffff 0%, #ffe5ec 45%, #ffd4e1 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 2px 20px rgba(255,180,200,.25)
}
.page h1,.drink h1,.main > h1{ @apply: none; font-size:40px;line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:.2px}
.page h1,.drink h1,.main > h1{
font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
background:linear-gradient(90deg,#ffffff 0%, #ffe5ec 45%, #ffd4e1 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 2px 20px rgba(255,180,200,.25)
}
.page .intro{margin:12px 0 18px;color:#ffe0e6}
.drink h2{
font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;margin:10px 0 8px;font-size:26px;line-height:1.2;font-weight:800;
background:linear-gradient(90deg,#ffffff 0%, #ffe5ec 45%, #ffd4e1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 18px rgba(255,170,195,.25)
}
.drink .more{
margin-top: 12px;
padding-top: 6px;
}
.drink .more > h2{
margin: 10px 0 8px;}
.hero{width:100%;max-height:520px;object-fit:cover;border-radius:16px;border:1px solid var(--border);margin:8px 0 8px;box-shadow:0 10px 26px rgba(0,0,0,.38)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .08s ease}
.card:hover{transform:translateY(-2px)}
.thumb{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center}
.card-body{padding:12px}
.card h3{margin:.2em 0 .1em;font-size:16px;color:#fff}
.card .small{font-size:12px}
.muted{color:#f0c9d2}
.cat-group{
grid-column:1 / -1;margin:12px 0 0;
font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
font-size:28px;line-height:1.2;font-weight:800;
background:linear-gradient(90deg,#ffffff 0%, #ffe5ec 45%, #ffd4e1 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 2px 16px rgba(255,170,195,.22)
}
.elements{display:grid;gap:12px;grid-template-columns:repeat(1,1fr);margin:14px 0 20px}
@media (min-width:900px){.elements{grid-template-columns:repeat(2,1fr)}}
.element{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 8px 22px rgba(0,0,0,.32)}
.element--full{grid-column:1 / -1}
.el-val{color:#fff}
.scale.scale--compact{width:4cm;max-width:none;display:flex;gap:4px}
.scale.scale--compact .bar{height:8px;flex:1;border-radius:4px;background:rgba(255,255,255,.12);border:1px solid var(--border)}
.scale.scale--compact .bar.on{background:linear-gradient(180deg, #ff82a3, #ffc1d1)}
.prep{margin:6px 0 12px;color:#ffdbe4}
.prep-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.prep-row .lbl{min-width:180px;color:#ffd7e1;font-weight:700}
.instr-row{display:flex;gap:8px;margin:6px 0}
.instr-row .num{min-width:2ch;font-weight:800;color:#ffb3c6}
.instr-row .text{flex:1}
.dietary-row{display:flex;align-items:center;gap:8px}
.yn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);font-weight:800}
.yn.yes{background:rgba(50,215,75,.25);color:#fff;border-color:rgba(255,255,255,.18)}
.yn.no{background:rgba(255,59,48,.25);color:#ffd0d0;border-color:rgba(255,255,255,.18)}
.ing-list{list-style:disc;padding-left:18px;margin:0}
.ing-list li{margin:4px 0}
.ing-line{display:grid;grid-template-columns:minmax(140px,1fr) auto auto;column-gap:10px;align-items:baseline;}
.ing-name{min-width:0}
.ing-qty{white-space:nowrap}
.ing-opt{white-space:nowrap;font-style:italic;color:#ffd3de}
.ing-notes{display:block;margin-top:2px;color:#ffe0e7;font-size:0.95em}
.ad-slot{margin:18px 0;border:1px dashed var(--border);border-radius:12px;padding:12px;text-align:center;color:#ffd7e1;background:transparent}
.footer{grid-area:footer;margin-top:24px;color:#ffcedb;border-top:1px solid var(--border);padding:12px 0}
@media (max-width: 900px){
.container{grid-template-columns:1fr;grid-template-areas:'header' 'aside' 'main' 'footer';}
.menu{display:none; position:relative;}
.menu.open{display:block; margin-bottom:12px;}
.menu-toggle{display:inline-flex;}
.header{position:sticky; top:0; z-index:1001; background:none; backdrop-filter:none}
.header.scrolled .brand{
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.header .brand{ flex: 0 0 auto; }
.header .menu-toggle{ flex: 0 0 auto; margin-left: auto; }
.header.scrolled .menu-toggle{
background: var(--bg) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}
.menu-toggle{
border:0 !important;
box-shadow:none !important;
background:transparent !important;
padding:12px 10px !important;
}
.ing-line{grid-template-columns:1fr auto auto;}
}
@media (min-width: 901px){
.menu{display:block;}
.menu-toggle{display:none !important;}
}
.agegate{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 2147483647;
display: none;
padding: 10px 14px;
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
border-top: 1px solid var(--border);
backdrop-filter: blur(4px);
}
.agegate .wrap{
max-width: 1300px; margin: 0 auto;
display: flex; gap: 10px; align-items: center; justify-content: space-between;
}
.agegate p{ margin: 0; color: #fff; font-weight: 700 }
.agegate .btns{ display:flex; gap:8px; }
.agegate .btn-like.primary{ background: rgba(255,154,179,.25); }
@media (max-width: 600px){
.agegate .wrap{ flex-direction: column; align-items: stretch; gap: 8px; }
.agegate .btns{ justify-content: stretch; }
.agegate .btns .btn-like{ width: 100%; }
}