/* Layout: dark steakhouse world; full-bleed photography, brass accents, prices set in the display face under each photo */
:root{
  --bg:#121110; --bg-2:#1a1817; --card:#1f1c1a; --line:#34302c; --ink:#f3ede4; --muted:#a59d93;
  --brass:#c9a46a; --brass-2:#e2c48f; --blood:#9b2226; --blood-2:#b8323a; --cream:#f3ede4;
  --display:"Bodoni Moda", "Didot", Georgia, serif;
  --body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
img{max-width:100%; display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
html[data-lang="ro"] .en, html[data-lang="en"] .ro{display:none}
.wrap{max-width:1200px; margin:0 auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0; line-height:1.05; text-wrap:balance}
.kicker{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0 0 14px; display:flex; align-items:center; gap:12px}
.kicker::before{content:""; width:28px; height:1px; background:var(--brass)}
.btn{white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border:1px solid var(--brass); cursor:pointer; transition:background .2s, color .2s}
.btn.solid{background:var(--brass); color:#1a1510}
.btn.solid:hover{background:var(--brass-2)}
.btn.line{background:transparent; color:var(--ink)}
.btn.line:hover{background:var(--brass); color:#1a1510}

/* top bar + header */
.topbar{background:var(--blood); color:var(--cream); font-size:13px; letter-spacing:.04em}
.topbar .wrap{display:flex; justify-content:space-between; gap:12px; padding-block:8px; flex-wrap:wrap}
.topbar b{font-weight:700}
.head{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(18,17,16,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; gap:20px; padding-block:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-width:0}
.brand .logo{width:58px; height:58px; flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--display); font-size:22px; font-weight:700}
.brand-txt small{font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--brass); margin-top:5px}
.nav{display:flex; gap:2px}
.nav a{text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:10px 12px; color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brass)}
.tools{display:flex; align-items:center; gap:10px; flex:none}
.lang{display:flex; border:1px solid var(--line)}
.lang button{border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.1em; padding:9px 11px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.cartbtn{position:relative; display:flex; align-items:center; gap:8px; border:1px solid var(--brass); background:transparent; color:var(--ink); padding:9px 14px; cursor:pointer; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.cartbtn svg{width:18px; height:18px}
.cartbtn .n{min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--blood-2); color:#fff; font-size:12px; display:grid; place-items:center}
.navm{display:none}

/* hero */
.hero{position:relative; min-height:min(78vh,720px); display:flex; align-items:flex-end; overflow:hidden; background:var(--bg-2)}
.hero img,.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero video{opacity:0; transition:opacity 1.2s ease}
.hero video.on{opacity:1}
.hero .clip{position:absolute; z-index:1; right:max(20px,env(safe-area-inset-right,0px)); bottom:24px; display:flex; gap:6px}
.hero .clip i{width:22px; height:3px; background:rgba(243,237,228,.3)}
.hero .clip i.on{background:var(--brass)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,11,10,.94) 0%, rgba(12,11,10,.72) 45%, rgba(12,11,10,.25) 100%), linear-gradient(0deg, rgba(12,11,10,.9) 0%, transparent 40%)}
.hero .wrap{position:relative; z-index:1; padding-block:110px 72px; width:100%}
.hero h1{font-size:clamp(46px,8vw,104px); letter-spacing:-.01em; max-width:12ch}
.hero h1 em{font-style:italic; color:var(--brass)}
.hero p.lede{font-size:clamp(17px,2vw,20px); color:#d9d1c6; max-width:46ch; margin:24px 0 34px}
.hero .ctas{display:flex; flex-wrap:wrap; gap:14px}
.hero .seal{position:absolute; right:max(20px,env(safe-area-inset-right,0px)); top:40px; z-index:1; width:150px; height:150px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}

.facts{border-bottom:1px solid var(--line); background:var(--bg-2)}
.facts .wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.fact{padding:28px 24px; border-left:1px solid var(--line); display:flex; gap:16px; align-items:flex-start}
.fact:first-child{border-left:0; padding-left:0}
.fact .num{font-family:var(--display); font-size:34px; color:var(--brass); line-height:1}
.fact b{display:block; font-size:16px; letter-spacing:.02em}
.fact span{color:var(--muted); font-size:14px}

section{padding-block:96px}
.sh{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px 40px; margin-bottom:44px}
.sh h2{font-size:clamp(36px,5vw,60px)}
.sh p{color:var(--muted); max-width:44ch; margin:0}

/* categories */
.cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.cat{position:relative; aspect-ratio:3/4; overflow:hidden; text-decoration:none; background:var(--card); display:block}
.cat img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease}
.cat:hover img{transform:scale(1.06)}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.1) 60%)}
.cat .t{position:absolute; left:22px; right:22px; bottom:22px; z-index:1}
.cat h3{font-size:36px}
.cat .meta{display:flex; justify-content:space-between; margin-top:10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass)}

/* products */
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px}
.p{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line)}
.p .ph{position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(160deg,#2a2522,#151312)}
.p .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.p:hover .ph img{transform:scale(1.05)}
.p .badge{position:absolute; top:12px; left:12px; background:rgba(18,17,16,.85); color:var(--brass); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border:1px solid rgba(201,164,106,.4)}
.p .b{padding:18px 18px 20px; display:flex; flex-direction:column; gap:4px; flex:1}
.p h3{font-family:var(--body); font-weight:600; font-size:17px; line-height:1.3; letter-spacing:.01em}
.p .sub{color:var(--muted); font-size:13px}
.p .price{display:flex; align-items:baseline; gap:8px; margin:10px 0 14px; font-variant-numeric:tabular-nums}
.p .price b{font-family:var(--display); font-weight:700; font-size:32px; color:var(--brass); line-height:1}
.p .price span{color:var(--muted); font-size:14px}
.p .act{margin-top:auto}
.add{width:100%; border:1px solid var(--brass); background:transparent; color:var(--ink); padding:12px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.add:hover{background:var(--brass); color:#1a1510}
.step{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--brass)}
.step button{width:46px; height:44px; border:0; background:var(--brass); color:#1a1510; font-size:20px; font-weight:700; cursor:pointer}
.step output{font-weight:700; font-variant-numeric:tabular-nums}

/* page banner */
.banner{position:relative; overflow:hidden; background:var(--bg-2)}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,11,10,.95), rgba(12,11,10,.5))}
.banner .wrap{position:relative; z-index:1; padding-block:84px 64px}
.crumbs{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.banner h1{font-size:clamp(48px,8vw,96px)}
.banner p{color:#d9d1c6; max-width:52ch; margin:16px 0 0; font-size:18px}
.group{margin-bottom:64px}
.group h2{font-size:34px; margin-bottom:24px; display:flex; align-items:baseline; gap:14px}
.group h2 small{font-family:var(--body); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.note{border:1px solid var(--line); padding:22px 24px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px}
.note b{color:var(--ink)}

/* story */
.story{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.story .img{aspect-ratio:4/5; overflow:hidden; background:var(--card)}
.story .img img{width:100%; height:100%; object-fit:cover}
.story h2{font-size:clamp(36px,5vw,58px); margin-bottom:22px}
.story p{color:#cfc7bc; margin:0 0 18px; max-width:50ch}
.story ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px}
.story li{display:flex; gap:14px; align-items:baseline}
.story li::before{content:""; width:8px; height:8px; background:var(--brass); transform:rotate(45deg); flex:none; margin-top:8px}

/* xmas band */
.band{background:var(--blood); position:relative; overflow:hidden}
.band .wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; padding-block:72px}
.band h2{font-size:clamp(36px,5vw,58px); color:#fff}
.band h2 em{color:#f6d9a8}
.band p{color:#f3dcdc; margin:16px 0 0; max-width:50ch}
.band .box{border:1px solid rgba(255,255,255,.5); padding:28px; text-align:center}
.band .box small{display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#f3dcdc}
.band .box b{display:block; font-family:var(--display); font-size:clamp(28px,3.6vw,38px); color:#fff; margin-top:8px; font-variant-numeric:tabular-nums}

/* contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.card{background:var(--card); border:1px solid var(--line); padding:36px}
.card h3{font-size:30px; margin-bottom:22px}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:22px; counter-reset:s}
.steps li{display:grid; grid-template-columns:44px 1fr; gap:16px; counter-increment:s}
.steps li::before{content:counter(s); font-family:var(--display); font-size:30px; color:var(--brass); line-height:1}
.steps b{display:block}
.steps span{color:var(--muted); font-size:15px}
.row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .k{width:100%; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.row .v{font-size:19px; font-weight:500; overflow-wrap:anywhere; min-width:0}
.row .v a{text-decoration:none}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 12px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer}
.chip:hover{border-color:var(--brass); color:var(--brass)}

/* specialities */
.specs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}

/* footer */
footer{border-top:1px solid var(--line); background:#0d0c0b; padding-block:56px 120px; color:var(--muted); font-size:14px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
footer .logo{width:96px; height:96px; margin-bottom:14px}
footer h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 14px}
footer nav{display:grid; gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.legal{grid-column:1/-1; border-top:1px solid var(--line); padding-top:22px; margin-top:8px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px}

/* cart */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--brass); color:#1a1510;
  padding:12px max(20px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.bar .in{max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px}
.bar b{font-size:17px; font-variant-numeric:tabular-nums}
.bar button{background:#1a1510; color:var(--brass); border:0; padding:12px 18px; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
.shade{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6)}
.drawer{position:fixed; z-index:71; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 22px}
.drawer header{display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line)}
.drawer h2{font-size:32px}
.x{width:42px; height:42px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:22px; cursor:pointer}
.lines{flex:1; overflow:auto; padding-block:6px}
.line{display:grid; grid-template-columns:56px 1fr auto; gap:6px 14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center}
.line img{width:56px; height:56px; object-fit:cover; grid-row:span 2; background:var(--card)}
.line .nm{font-weight:600; line-height:1.3}
.line .lp{font-weight:700; color:var(--brass); font-variant-numeric:tabular-nums}
.line .ctl{grid-column:2/-1; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.line .ctl button{width:32px; height:30px; border:1px solid var(--line); background:transparent; color:var(--ink); font-weight:700; cursor:pointer}
.line .ctl .rm{width:auto; padding:0 10px; margin-left:auto; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.empty{color:var(--muted); padding:30px 0; text-align:center}
.tot{display:flex; justify-content:space-between; align-items:baseline; padding:16px 0 4px; font-size:16px}
.tot b{font-family:var(--display); font-size:30px; color:var(--brass); font-variant-numeric:tabular-nums}
.small{color:var(--muted); font-size:13px; margin:0 0 14px}
.send{display:grid; gap:10px}
.send .btn{width:100%}

@media (max-width:1060px){
  .nav{display:none}
  .navm{display:flex; gap:6px; overflow-x:auto; padding:0 0 12px; scrollbar-width:none}
  .navm::-webkit-scrollbar{display:none}
  .navm a{flex:none; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:8px 13px; border:1px solid var(--line); color:var(--muted)}
  .navm a[aria-current="page"]{border-color:var(--brass); color:var(--brass)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat{aspect-ratio:4/3}
}
@media (max-width:860px){
  .facts .wrap, .story, .band .wrap, .contact, .specs{grid-template-columns:1fr}
  .fact{border-left:0; border-top:1px solid var(--line); padding-left:0}
  .fact:first-child{border-top:0}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .about{grid-column:1/-1}
  .hero .seal{display:none}
  section{padding-block:72px}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px}
  .cats{grid-template-columns:1fr 1fr; gap:10px}
  .cat h3{font-size:26px}
  .cat .t{left:14px; right:14px; bottom:14px}
  .cat .meta{font-size:11px}
  .p .b{padding:14px 12px 14px}
  .p h3{font-size:15px}
  .p .price b{font-size:25px}
  .brand .logo{width:46px; height:46px}
  .brand-txt b{font-size:18px}
  .brand-txt small{display:none}
  .cartbtn .lbl{display:none}
  .topbar .wrap{justify-content:center}
  .topbar .hide-s{display:none}
  .card{padding:24px}
  .hero{min-height:auto}
  .hero .wrap{padding-block:90px 48px}
  .hero .btn{padding:14px 18px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .cat img, .p .ph img{transition:none} .cat:hover img, .p:hover .ph img{transform:none} }
