
:root{
  --sea-900:#0B181D; --sea-800:#0E1E24; --sea-700:#122932; --sea-600:#163540;
  --card:#12262E; --card-2:#16303A; --line:rgba(227,177,90,.16); --line-soft:rgba(255,255,255,.07);
  --red:#E23A2E; --red-deep:#B22A20; --gold:#E3B15A; --gold-soft:#f0cd8e;
  --cream:#F4ECE0; --muted:#9DB1B6; --green:#71C6A4;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --r:18px;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--sea-800); color:var(--cream);
  font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4,.disp{font-family:'Oswald',sans-serif; font-weight:600; line-height:1.05; margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.eyebrow{font-family:'Oswald'; text-transform:uppercase; letter-spacing:.26em; font-size:.74rem; font-weight:600; color:var(--gold)}
.section{padding:76px 0}
.section-head{margin-bottom:34px}
.section-head h2{font-size:clamp(1.9rem,4vw,3rem); text-transform:uppercase; letter-spacing:.02em}
.section-head p{color:var(--muted); max-width:56ch; margin:.7rem 0 0}
.accent-bar{display:inline-block; width:52px; height:4px; border-radius:3px; background:var(--red); margin-bottom:16px}
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  padding:15px 26px; border-radius:60px; border:0; cursor:pointer; font-size:1rem; transition:transform .16s ease, box-shadow .16s ease, background .2s;}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red); color:#fff; box-shadow:0 12px 26px -10px rgba(226,58,46,.7)}
.btn-red:hover{background:#f04537}
.btn-gold{background:var(--gold); color:#20140a; box-shadow:0 12px 26px -12px rgba(227,177,90,.6)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent; color:var(--cream); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- promo strip ---------- */
.promo{background:linear-gradient(90deg,var(--red-deep),var(--red)); color:#fff; font-size:.9rem; text-align:center; position:relative}
.promo .wrap{display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 46px; min-height:40px}
.promo b{font-family:'Oswald'; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.promo span{opacity:.92}
.promo-x{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.8}
.promo-x:hover{opacity:1}
@media(max-width:640px){.promo span{display:none}}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(11,24,29,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
.bar{display:flex; align-items:center; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0}
.brand img{width:46px; height:46px; flex:none; border-radius:50%; box-shadow:0 0 0 1.5px var(--gold)}
.brand span{min-width:0}
.brand .bt{font-family:'Oswald'; font-weight:700; font-size:1.3rem; letter-spacing:.08em; text-transform:uppercase; line-height:1}
.brand .bs{font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold)}
.nav{display:flex; gap:26px}
.nav a{font-size:.92rem; color:var(--muted); font-weight:600; transition:color .18s}
.nav a:hover{color:var(--cream)}
.hphone{display:flex; align-items:center; gap:9px; font-family:'Oswald'; font-weight:600; font-size:1.06rem; letter-spacing:.02em; white-space:nowrap}
.hphone .ic{color:var(--gold)}
.cart-btn{position:relative; flex:none; display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; border:0; cursor:pointer;
  font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:11px 18px; border-radius:50px; font-size:.9rem}
.cart-btn:hover{background:#f04537}
.cart-count{position:absolute; top:-8px; right:-8px; min-width:22px; height:22px; padding:0 5px; background:var(--gold); color:#20140a;
  border-radius:50px; font-size:.76rem; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:'Manrope';
  transform:scale(0); transition:transform .2s cubic-bezier(.3,1.5,.6,1)}
.cart-count.on{transform:scale(1)}
.burger{display:none; flex:none; background:transparent; border:0; color:var(--cream); cursor:pointer}
@media(max-width:960px){.nav{display:none} .hphone{display:none} .burger{display:inline-flex}}
@media(max-width:600px){
  .wrap{padding:0 16px}
  .bar{gap:12px}
  .brand{gap:10px}
  .brand img{width:42px; height:42px}
  .brand .bt{font-size:1.1rem}
  .brand .bs{font-size:.58rem; letter-spacing:.24em}
  .cart-btn{padding:11px 15px}
}
@media(max-width:400px){
  .brand .bs{display:none}
  .brand .bt{font-size:1rem}
  .cart-btn .ci-lb{display:none}
  .cart-btn{padding:11px 13px}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end; overflow:hidden}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05)}
.hero::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 20% 30%, rgba(11,24,29,.35), transparent 60%),
             linear-gradient(180deg, rgba(11,24,29,.55) 0%, rgba(11,24,29,.2) 35%, rgba(11,24,29,.86) 82%, var(--sea-800) 100%),
             linear-gradient(90deg, rgba(11,24,29,.8), transparent 55%)}
.hero-inner{position:relative; z-index:2; margin-bottom:62px; max-width:720px}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem); text-transform:uppercase; letter-spacing:.005em; margin:.5rem 0 0}
.hero h1 .r{color:var(--red)} .hero h1 .g{color:var(--gold)}
.hero .lead{font-size:clamp(1.02rem,1.6vw,1.22rem); color:#e6ddce; margin:20px 0 0; max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.fact{display:inline-flex; align-items:center; gap:9px; background:rgba(18,41,50,.72); border:1px solid var(--line);
  padding:9px 15px; border-radius:50px; font-size:.86rem; font-weight:600; backdrop-filter:blur(4px)}
.fact .ic{color:var(--gold)}
.hero-rating{display:flex; width:fit-content; max-width:100%; align-items:center; gap:9px; background:rgba(18,41,50,.66); border:1px solid var(--line);
  padding:7px 15px; border-radius:50px; font-size:.83rem; color:#e6ddce; margin-bottom:20px; backdrop-filter:blur(4px)}
.hero-rating .st{color:var(--gold); letter-spacing:1px; font-size:.86rem}
.hero-rating b{color:#fff; font-weight:700}
@media(max-width:430px){.hero-rating .ya{display:none}}
@keyframes heroUp{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.hero-inner>*{animation:heroUp .75s cubic-bezier(.2,.7,.3,1) both}
.hero-inner>*:nth-child(1){animation-delay:.04s}
.hero-inner>*:nth-child(2){animation-delay:.12s}
.hero-inner>*:nth-child(3){animation-delay:.20s}
.hero-inner>*:nth-child(4){animation-delay:.30s}
.hero-inner>*:nth-child(5){animation-delay:.40s}
.hero-inner>*:nth-child(6){animation-delay:.50s}
.scroll-cue{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; color:#fff;
  animation:bob 1.9s ease-in-out infinite; opacity:.85}
.scroll-cue:hover{border-color:var(--gold); color:var(--gold)}
@keyframes bob{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)}}
@media(max-width:760px){.scroll-cue{display:none}}
.featured{background:var(--sea-900)}
#featured-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){#featured-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#featured-grid{grid-template-columns:1fr}}
.feat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:30px; flex-wrap:wrap}
.feat-head .allbtn{white-space:nowrap}

/* ---------- usp strip ---------- */
.usp{background:var(--sea-900); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.usp .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:2px}
.usp .u{display:flex; gap:16px; align-items:center; padding:26px 8px}
.usp .u .n{font-family:'Oswald'; font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em}
.usp .u .d{font-size:.85rem; color:var(--muted); margin-top:2px}
.usp .u .ic{flex:none; width:46px; height:46px; border-radius:12px; background:rgba(226,58,46,.12); color:var(--red);
  display:flex; align-items:center; justify-content:center}
@media(max-width:760px){.usp .wrap{grid-template-columns:1fr} .usp .u{padding:18px 8px; border-bottom:1px solid var(--line-soft)}}

/* ---------- info note ---------- */
.note{background:linear-gradient(135deg,var(--card),var(--card-2)); border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--r); padding:24px 26px; display:flex; gap:18px; align-items:flex-start; box-shadow:var(--shadow)}
.note .ic{flex:none; color:var(--red); margin-top:2px}
.note h3{font-size:1.2rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px}
.note p{margin:0 0 6px; color:#d8d0c4; font-size:.94rem}
.note b{color:var(--gold)}

/* ---------- menu ---------- */
.catnav{position:sticky; top:72px; z-index:40; background:rgba(11,24,29,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft); padding:12px 0}
.catnav .wrap{position:relative}
.catnav .row{display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:0 4px 2px;
  -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain; scroll-snap-type:x proximity}
.catnav .row::-webkit-scrollbar{display:none}
.catnav .fade{position:absolute; top:0; bottom:2px; width:34px; pointer-events:none; z-index:2; opacity:0; transition:opacity .2s}
.catnav .fade.r{right:0; background:linear-gradient(90deg,transparent,rgba(11,24,29,.92))}
.catnav .fade.l{left:0; background:linear-gradient(270deg,transparent,rgba(11,24,29,.92))}
.catnav .fade.on{opacity:1}
.chip{flex:none; scroll-snap-align:start; font-family:'Oswald'; font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:.86rem;
  padding:9px 17px; border-radius:50px; border:1px solid var(--line-soft); color:var(--muted); background:transparent; cursor:pointer; transition:.18s; white-space:nowrap}
.chip:hover{color:var(--cream); border-color:var(--line)}
.chip.active{background:var(--red); color:#fff; border-color:var(--red)}

.cat-block{padding-top:46px; scroll-margin-top:150px}
section[id]{scroll-margin-top:150px}
.menu-region{position:relative; scroll-margin-top:72px}
.cat-title{display:flex; align-items:center; gap:16px; margin-bottom:26px}
.cat-title h2{font-size:clamp(1.6rem,3.4vw,2.4rem); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap}
.cat-title .ln{height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent)}
.cat-title .cnt{font-family:'Manrope'; font-size:.8rem; color:var(--muted); font-weight:600}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s; opacity:0; transform:translateY(18px)}
.card.in{opacity:1; transform:none}
.card:hover{transform:translateY(-5px); border-color:var(--line)}
.card .ph{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sea-700)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.06)}
.badge-av{position:absolute; top:12px; left:12px; background:rgba(11,24,29,.72); backdrop-filter:blur(4px); color:var(--green);
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:50px; display:flex; align-items:center; gap:6px; border:1px solid rgba(113,198,164,.25)}
.badge-av .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(113,198,164,.2)}
.card .body{padding:16px 17px 18px; display:flex; flex-direction:column; flex:1}
.card .nm{display:block; font-family:'Oswald'; font-weight:600; font-size:1.12rem; text-transform:uppercase; letter-spacing:.01em; line-height:1.12; color:inherit; text-decoration:none; transition:color .18s}
.card a.nm:hover{color:var(--gold)}
.card .un{color:var(--muted); font-size:.85rem; margin-top:5px}
.card .sauce{font-size:.76rem; color:var(--gold); margin-top:6px; opacity:.85}
.card .opt{margin-top:12px}
.card select{width:100%; background:var(--sea-700); color:var(--cream); border:1px solid var(--line-soft); border-radius:10px;
  padding:9px 12px; font-family:'Manrope'; font-size:.9rem; font-weight:600; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E3B15A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.card .foot{margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.price{font-family:'Oswald'; font-weight:700; font-size:1.5rem; color:var(--gold); line-height:1; white-space:nowrap}
.price small{font-size:.9rem; font-weight:500; margin-left:2px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-soft); border-radius:50px; overflow:hidden; margin-left:auto}
.qty button{width:34px; height:36px; background:var(--sea-700); border:0; color:var(--cream); font-size:1.2rem; cursor:pointer; line-height:1}
.qty button:hover{color:var(--gold)}
.qty span{min-width:32px; text-align:center; font-weight:700; font-family:'Manrope'}
.add{flex:none; width:44px; height:44px; border-radius:50%; background:var(--red); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.18s}
.add:hover{background:#f04537; transform:scale(1.06)}
.add.added{background:var(--green)}

/* ---------- delivery / payment ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.panel{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:30px; box-shadow:var(--shadow)}
.panel h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:16px; display:flex; align-items:center; gap:12px}
.panel h3 .ic{color:var(--gold)}
.panel ul{list-style:none; margin:0; padding:0}
.panel li{position:relative; padding:9px 0 9px 26px; border-bottom:1px dashed var(--line-soft); font-size:.95rem; color:#ddd5c9}
.panel li:last-child{border-bottom:0}
.panel li::before{content:""; position:absolute; left:2px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--red)}
.panel li b{color:var(--gold)}
.pay-big{font-family:'Oswald'; font-weight:700; font-size:1.5rem; color:var(--cream); text-transform:uppercase; letter-spacing:.03em; text-align:center; padding:14px 0}
.pay-big span{color:var(--gold)}

/* ---------- how ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:26px 22px; position:relative}
.step .n{font-family:'Oswald'; font-weight:700; font-size:2.6rem; color:transparent; -webkit-text-stroke:1.5px var(--gold); line-height:1}
.step h4{font-size:1.12rem; text-transform:uppercase; letter-spacing:.02em; margin:12px 0 8px}
.step p{margin:0; color:var(--muted); font-size:.9rem}

/* ---------- about ---------- */
.about{background:var(--sea-900)}
.about-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.about p{color:#d4ccc0; margin:0 0 16px}
.about .lead-p{font-size:1.1rem; color:var(--cream)}
.wcard{background:linear-gradient(160deg,var(--card),var(--card-2)); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow)}
.wcard h4{font-size:1.25rem; text-transform:uppercase; letter-spacing:.03em; color:var(--gold); margin-bottom:14px}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px}
.tag{background:rgba(227,177,90,.1); border:1px solid var(--line); color:var(--gold-soft); font-size:.82rem; font-weight:600; padding:7px 13px; border-radius:50px}

/* ---------- reviews / map ---------- */
.rev-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; align-items:stretch}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}
.rev-summary{display:flex; flex-direction:column; gap:14px; text-align:center; align-items:center}
.rate-big{font-family:'Oswald'; font-weight:700; font-size:4.6rem; line-height:.9; color:var(--gold)}
.rate-big span{font-size:1.6rem; color:var(--muted); font-weight:500}
.rate-sub{color:var(--muted); font-size:.9rem}
.feat{justify-content:center}
.soc{display:flex; gap:12px; margin-top:4px}
.socbtn{width:46px; height:46px; border-radius:50%; background:var(--sea-700); border:1px solid var(--line-soft); color:var(--cream);
  display:flex; align-items:center; justify-content:center; transition:.18s}
.socbtn:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}
.rev-widget{border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft); background:#fff; min-height:420px}
.rev-widget iframe{width:100%; height:100%; min-height:420px; border:0; display:block}
.stars{color:var(--gold); font-size:1.4rem; letter-spacing:2px}
.map-frame{border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft); min-height:340px; background:var(--card)}
.map-frame iframe{width:100%; height:100%; min-height:360px; border:0; display:block}

/* ---------- contacts ---------- */
.contacts{background:var(--sea-900)}
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cgrid{grid-template-columns:1fr}}
.cc{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:24px}
.cc .ic{width:44px; height:44px; border-radius:12px; background:rgba(227,177,90,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.cc .lb{font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); font-weight:700}
.cc .vl{font-family:'Oswald'; font-weight:600; font-size:1.16rem; margin-top:6px; line-height:1.2}
.cc .sub{font-size:.85rem; color:var(--muted); margin-top:5px}

/* ---------- footer ---------- */
footer{background:var(--sea-900); border-top:1px solid var(--line-soft); padding:40px 0 30px}
.foot-row{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.foot-brand{display:flex; align-items:center; gap:12px}
.foot-brand img{width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 1.5px var(--gold)}
.foot-links{display:flex; flex-wrap:wrap; gap:20px; font-size:.9rem; color:var(--muted)}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}
.requisites{margin-top:24px; border-top:1px solid var(--line-soft); padding-top:18px}
.requisites summary{cursor:pointer; font-family:'Oswald'; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-size:.92rem; list-style:none; display:inline-flex; align-items:center; gap:8px}
.requisites summary::-webkit-details-marker{display:none}
.requisites summary::after{content:"▾"; font-size:.8rem; transition:transform .2s}
.requisites[open] summary::after{transform:rotate(180deg)}
.req-body{display:grid; grid-template-columns:1fr 1fr; gap:6px 40px; margin-top:14px; font-size:.82rem; color:var(--muted); line-height:1.55}
@media(max-width:640px){.req-body{grid-template-columns:1fr; gap:4px}}
.req-body .rt{font-family:'Oswald'; text-transform:uppercase; letter-spacing:.05em; color:#cdc4b7; font-size:.8rem; margin-bottom:4px}
.req-body .rcol div{margin:1px 0}

/* ---------- cart drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(6,14,17,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.3s; z-index:90}
.overlay.on{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(430px,100%); background:var(--sea-800); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); z-index:100; display:flex; flex-direction:column; box-shadow:-20px 0 60px -20px rgba(0,0,0,.7)}
.drawer.on{transform:none}
.dhead{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line-soft)}
.dhead h3{font-size:1.4rem; text-transform:uppercase; letter-spacing:.04em}
.dhead .x{background:transparent; border:0; color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1}
.dhead .x:hover{color:var(--cream)}
.ditems{flex:1; overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; padding:8px 22px}
.drawer.checkout .ditems{display:none}
.drawer.checkout .dfoot{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.empty{text-align:center; color:var(--muted); padding:60px 20px}
.empty .ic{color:var(--line); margin-bottom:14px}
.ci{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft)}
.ci img{width:64px; height:64px; border-radius:12px; object-fit:cover; flex:none}
.ci .cinfo{flex:1; min-width:0}
.ci .cnm{font-family:'Oswald'; font-weight:600; font-size:1rem; text-transform:uppercase; line-height:1.1}
.ci .copt{font-size:.78rem; color:var(--gold); margin-top:3px}
.ci .cpr{font-size:.85rem; color:var(--muted); margin-top:3px}
.ci .crow{display:flex; align-items:center; gap:10px; margin-top:8px}
.ci .qty{margin-left:0}
.ci .rm{margin-left:auto; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:.82rem}
.ci .rm:hover{color:var(--red)}
.ci .lt{font-family:'Oswald'; font-weight:700; color:var(--gold); white-space:nowrap}
.dfoot{border-top:1px solid var(--line); padding:18px 22px 22px; background:var(--sea-900)}
.minbar{height:6px; border-radius:5px; background:var(--sea-600); overflow:hidden; margin-bottom:8px}
.minbar i{display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); width:0; transition:width .4s}
.minnote{font-size:.82rem; color:var(--muted); margin-bottom:14px}
.minnote b{color:var(--gold)}
.minnote.ok{color:var(--green)}
.trow{display:flex; justify-content:space-between; font-size:.92rem; color:#d6cec2; margin-bottom:7px}
.trow.total{font-family:'Oswald'; font-size:1.5rem; color:var(--cream); text-transform:uppercase; margin-top:6px; padding-top:12px; border-top:1px dashed var(--line-soft)}
.trow.total b{color:var(--gold)}
.checkout-btn{width:100%; margin-top:14px; justify-content:center}

/* checkout form */
.co{display:none; flex-direction:column; gap:12px}
.co.on{display:flex}
.field label{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; display:block; margin-bottom:5px}
.field input,.field textarea,.field select{width:100%; background:var(--sea-700); border:1px solid var(--line-soft); color:var(--cream);
  border-radius:10px; padding:11px 13px; font-family:'Manrope'; font-size:.95rem}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--gold)}
.field textarea{resize:vertical; min-height:56px}
.seg{display:flex; gap:8px}
.seg button{flex:1; background:var(--sea-700); border:1px solid var(--line-soft); color:var(--muted); border-radius:10px; padding:11px; cursor:pointer;
  font-family:'Oswald'; text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:.9rem}
.seg button.active{background:var(--red); color:#fff; border-color:var(--red)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; line-height:1.45; color:var(--muted); cursor:pointer}
.consent>span{flex:1; min-width:0}          /* текст и ссылка — одним потоком, не двумя колонками */
.consent a{color:var(--gold); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(227,177,90,.45)}
.consent a:hover{text-decoration-color:var(--gold)}
/* галочка в фирменном цвете */
.consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none; margin:1px 0 0;
  width:18px; height:18px; border-radius:5px; cursor:pointer;
  background:var(--sea-700); border:1.5px solid var(--line);
  transition:background .16s, border-color .16s, box-shadow .16s;
}
.consent input[type="checkbox"]:hover{border-color:var(--gold)}
.consent input[type="checkbox"]:checked{
  background:var(--gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  border-color:var(--gold);
}
.consent input[type="checkbox"]:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(227,177,90,.3)}
.back-link{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:.85rem;text-align:left;padding:0}
.back-link:hover{color:var(--cream)}
.co-msg{font-size:.86rem; padding:11px 13px; border-radius:10px; background:rgba(113,198,164,.12); border:1px solid rgba(113,198,164,.3); color:var(--green); text-align:center}
.co-msg.err{background:rgba(226,58,46,.12); border-color:rgba(226,58,46,.35); color:#f0a89f}

/* floating cart (mobile) */
.fab{position:fixed; right:18px; bottom:18px; z-index:50; display:none; align-items:center; gap:10px; background:var(--red); color:#fff; border:0;
  padding:14px 20px; border-radius:50px; font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
  box-shadow:0 14px 30px -8px rgba(226,58,46,.6)}
.fab .fc{background:var(--gold); color:#20140a; border-radius:50px; padding:1px 8px; font-family:'Manrope'; font-weight:800; font-size:.85rem}
@media(max-width:960px){.fab.show{display:flex}}

/* mobile menu */
.mmenu{position:fixed; inset:0; z-index:95; background:linear-gradient(165deg,#143039 0%,#0d1a20 55%,#0a1519 100%);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); padding:20px 24px calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; overflow:hidden}
.mmenu.on{transform:none}
.mm-glow{position:absolute; right:-130px; top:-90px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(226,58,46,.24),transparent 62%); pointer-events:none}
.mm-glow::after{content:""; position:absolute; left:-220px; bottom:-260px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,177,90,.12),transparent 64%)}
.mm-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2}
.mmenu .brand img{width:46px; height:46px; flex:none; border-radius:50%; box-shadow:0 0 0 1.5px var(--gold)}
.mmenu .brand .bt{font-family:'Oswald'; font-weight:700; font-size:1.25rem; letter-spacing:.08em; text-transform:uppercase}
.mmenu .brand .bs{font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold)}
.mmenu .mx{background:rgba(255,255,255,.06); border:1px solid var(--line-soft); color:var(--cream); width:46px; height:46px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s}
.mmenu .mx:hover{color:var(--gold); border-color:var(--gold); transform:rotate(90deg)}
.mm-nav{display:flex; flex-direction:column; margin-top:22px; position:relative; z-index:2}
.mm-nav a{display:flex; align-items:center; gap:16px; font-family:'Oswald'; text-transform:uppercase; letter-spacing:.04em;
  font-size:1.4rem; color:var(--cream); padding:16px 2px; border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateX(26px); transition:opacity .45s ease, transform .45s ease, color .2s}
.mmenu.on .mm-nav a{opacity:1; transform:none}
.mmenu.on .mm-nav a:nth-child(1){transition-delay:.08s}
.mmenu.on .mm-nav a:nth-child(2){transition-delay:.14s}
.mmenu.on .mm-nav a:nth-child(3){transition-delay:.20s}
.mmenu.on .mm-nav a:nth-child(4){transition-delay:.26s}
.mmenu.on .mm-nav a:nth-child(5){transition-delay:.32s}
.mmenu.on .mm-nav a:nth-child(6){transition-delay:.38s}
.mm-nav a:active{color:var(--gold)}
.mm-i{font-family:'Manrope'; font-size:.78rem; color:var(--gold); font-weight:800; min-width:24px}
.mm-ar{margin-left:auto; color:var(--muted); font-size:1.2rem; transition:transform .2s}
.mm-nav a:hover{color:var(--gold)} .mm-nav a:hover .mm-ar{transform:translateX(5px); color:var(--gold)}
.mm-foot{margin-top:auto; padding-top:22px; position:relative; z-index:2;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease .42s, transform .5s ease .42s}
.mmenu.on .mm-foot{opacity:1; transform:none}
.mm-phone{display:inline-flex; align-items:center; gap:12px; font-family:'Oswald'; font-weight:700; font-size:1.55rem; color:var(--gold)}
.mm-info{color:var(--muted); font-size:.86rem; margin-top:10px; line-height:1.5}
.mm-soc{display:flex; gap:12px; margin-top:20px}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important} .card{opacity:1;transform:none}}
svg{stroke-width:1.7}

/* ===== product page ===== */
.crumbs{font-size:.85rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--gold)} .crumbs span{color:var(--gold)}
.pp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding:26px 0 10px}
@media(max-width:840px){.pp{grid-template-columns:1fr;gap:24px}}
.pp-media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:4/3;background:var(--sea-700)}
.pp-media img{width:100%;height:100%;object-fit:cover}
.pp-media .badge-av{position:absolute;top:14px;left:14px}
.pp-cat{font-family:'Oswald';text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:.8rem;font-weight:600}
.pp h1{font-size:clamp(1.7rem,4.4vw,2.7rem);text-transform:uppercase;letter-spacing:.01em;margin:10px 0 6px}
.pp-unit{color:var(--muted);font-size:.98rem}
.pp-sauce{color:var(--gold);font-size:.86rem;margin-top:6px;opacity:.9}
.pp-price{font-family:'Oswald';font-weight:700;font-size:2.6rem;color:var(--gold);margin:18px 0 6px;line-height:1}
.pp-price small{font-size:1.1rem;font-weight:500}
.pp-opt{margin:14px 0}
.pp-opt select{width:100%;max-width:320px;background:var(--sea-700);color:var(--cream);border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;font-family:'Manrope';font-weight:600;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E3B15A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.pp-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0 6px}
.pp-desc{color:#d4ccc0;margin:20px 0;line-height:1.7;max-width:60ch}
.pp-note{background:var(--card);border:1px solid var(--line-soft);border-left:3px solid var(--red);border-radius:12px;padding:14px 16px;color:#cdc4b7;font-size:.9rem;margin-top:12px}
.pp-note b{color:var(--gold)}
.related h2{font-size:clamp(1.4rem,3vw,2rem);text-transform:uppercase;margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rel-card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.rel-card:hover{transform:translateY(-4px);border-color:var(--line)}
.rel-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rel-card .rb{padding:12px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.rel-card .rn{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:.98rem;line-height:1.1}
.rel-card .rp{font-family:'Oswald';font-weight:700;color:var(--gold);margin-top:auto}
.cart-btn.link{text-decoration:none}

/* ---------- карточка товара: количество + корзина ---------- */
.pp-qty{display:flex; align-items:center; gap:10px}
.pp-qty .lb{font-size:.82rem; color:var(--muted)}
.pp-qty .qty{display:inline-flex; align-items:center; gap:2px; background:var(--sea-700); border:1px solid var(--line); border-radius:60px; padding:4px}
.pp-qty .qty button{width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--cream); font-size:1.2rem; line-height:1; cursor:pointer}
.pp-qty .qty button:hover{background:rgba(255,255,255,.07); color:var(--gold)}
.pp-qty .qty span{min-width:26px; text-align:center; font-weight:700}
@media(max-width:520px){
  .pp-buy{gap:10px}
  .pp-buy .btn{width:100%; justify-content:center}
  .pp-qty{width:100%; justify-content:space-between}
}

/* ---------- текстовые страницы (политика, 404) ---------- */
.doc{max-width:820px; margin:0 auto; padding:46px 0 70px}
.doc h1{font-size:clamp(1.7rem,4vw,2.6rem); text-transform:uppercase; margin-bottom:8px}
.doc .upd{color:var(--muted); font-size:.86rem; margin-bottom:26px}
.doc h2{font-size:1.25rem; text-transform:uppercase; margin:30px 0 10px; color:var(--gold)}
.doc p,.doc li{color:#d7cfc3; margin:0 0 10px}
.doc ul{padding-left:20px; margin:0 0 14px}
.doc a{color:var(--gold); text-decoration:underline}
.err-page{text-align:center; padding:90px 0 110px}
.err-page .code{font-family:'Oswald',sans-serif; font-size:clamp(5rem,18vw,10rem); line-height:1; color:var(--red); letter-spacing:.04em}
.err-page h1{font-size:clamp(1.4rem,4vw,2.2rem); text-transform:uppercase; margin:6px 0 12px}
.err-page p{color:var(--muted); max-width:46ch; margin:0 auto 26px}
.err-page .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ==========================================================
   ГЛАВНАЯ · редизайн первого экрана и порядка блоков
   (идёт после базовых правил и перекрывает их)
   ========================================================== */
.hero{min-height:auto; align-items:stretch}
/* фото приглушено и слегка размыто — текст поверх читается спокойно */
.hero-bg{transform:scale(1.04); filter:brightness(.8) saturate(1.05) blur(1px); background-position:18% 45%}
@media(max-width:760px){
  /* на узком экране широкий кроп теряет блюдо — берём квадратный кадр */
  .hero-bg{background-image:url('../img/hero-square.webp')!important; background-position:center 55%; filter:brightness(.9) saturate(1.05) blur(1px)}
}
.hero::after{
  background:
    linear-gradient(100deg, rgba(11,24,29,.95) 0%, rgba(11,24,29,.82) 32%, rgba(11,24,29,.42) 58%, rgba(11,24,29,.3) 100%),
    linear-gradient(180deg, rgba(11,24,29,.82) 0%, rgba(11,24,29,.1) 24%, rgba(14,30,36,.9) 100%);
}
.hero-inner{
  max-width:var(--wrap); margin:0 auto; padding:54px 22px 44px; width:100%;
  display:grid; grid-template-columns:1.04fr .96fr; gap:46px 52px; align-items:center;
}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(2rem,3.6vw,3.35rem); line-height:1.06; margin:.55rem 0 0}
.hero h1 .nb{white-space:nowrap}
.hero .lead{margin:18px 0 0; max-width:46ch; color:#dfd6c8}
.hero-cta{margin-top:26px}
.hero-rating{margin:22px 0 0; transition:border-color .16s, background .16s}
.hero-rating:hover{border-color:var(--gold)}
.hero-facts{grid-column:1/-1; margin-top:6px; gap:8px}
.hero-facts .fact{font-size:.86rem}

/* карточка «Сегодня в наличии» — заполняет правую половину */
.hero-card{
  background:rgba(16,35,43,.74); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:22px; padding:22px 22px 20px;
  box-shadow:var(--shadow); align-self:center;
}
.hc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.hc-live{display:inline-flex; align-items:center; gap:8px; font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--gold)}
.hc-live .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(113,198,164,.16)}
.hc-hours{font-size:.76rem; color:var(--muted)}
.hc-list{display:grid; gap:7px}
.hc-item{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px solid transparent; transition:.16s ease;
}
.hc-item:hover{background:rgba(227,177,90,.1); border-color:var(--line); transform:translateX(3px)}
.hc-item .tx{display:flex; flex-direction:column; min-width:0}
.hc-item .nm{font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-size:.97rem; color:var(--cream)}
.hc-item .cnt{font-size:.74rem; color:var(--muted); margin-top:1px}
.hc-item .pr{margin-left:auto; color:var(--gold); font-family:'Oswald',sans-serif; font-weight:600; font-size:1.02rem; white-space:nowrap}
.hc-all{width:100%; justify-content:center; margin-top:14px; font-size:.92rem; padding:13px 20px}

/* меню сразу после первого экрана */
.menu-top{padding-top:30px}
.menu-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.menu-head p{margin-top:.6rem}
.menu-hint{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:.88rem;
  background:var(--card); border:1px solid var(--line-soft); border-radius:60px; padding:10px 18px}
.menu-hint .ic{color:var(--gold); display:flex}
.menu-region .note{margin-top:34px}
.usp .u .d{max-width:34ch}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:28px; padding:40px 22px 36px}
  .hero-card{order:3}
  .hero-facts{order:4; margin-top:0}
  .hero h1{font-size:clamp(1.9rem,7vw,2.6rem)}
  .hero .lead{max-width:none}
  .menu-hint{display:none}
}
@media(max-width:560px){
  .hero-inner{padding:30px 18px 30px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%; justify-content:center}
  .hc-item{padding:10px 12px}
  .hero-facts .fact{font-size:.8rem}
}

@media(max-width:560px){
  /* мобильный первый экран короче — быстрее до товаров */
  .hero-inner{gap:22px}
  .hero .lead{font-size:1rem; margin-top:14px}
  .hero-cta{margin-top:20px}
  .hero-rating{margin-top:16px}
  .hero-card{padding:18px 16px 16px; border-radius:18px}
  .hc-item{padding:9px 12px}
  .hc-item:nth-child(n+5){display:none}
  .hc-all{margin-top:11px}
  .hero-facts{gap:7px}
  .hero-facts .fact:nth-child(n+4){display:none}
}

/* ---------- галерея «Наш магазин» ---------- */
.shop{background:var(--sea-900)}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gal .g{position:relative; margin:0; border-radius:var(--r); overflow:hidden; cursor:pointer;
  border:1px solid var(--line-soft); background:var(--card); aspect-ratio:3/4; box-shadow:var(--shadow)}
.gal .g-wide{grid-column:span 2; aspect-ratio:16/10}
.gal .g img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gal .g:hover img{transform:scale(1.06)}
.gal .g figcaption{position:absolute; inset:auto 0 0 0; padding:34px 16px 14px; font-size:.82rem; color:#d6cec2;
  background:linear-gradient(180deg,transparent,rgba(9,20,25,.92) 55%)}
.gal .g figcaption b{display:block; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:.98rem; color:var(--cream); margin-bottom:3px}
.gal .g::after{content:""; position:absolute; inset:0; border:1px solid transparent; border-radius:var(--r); transition:.2s}
.gal .g:hover::after{border-color:var(--gold)}

/* лайтбокс */
.lb{position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:40px 16px;
  background:rgba(6,14,18,.94); backdrop-filter:blur(6px)}
.lb.on{display:grid}
.lb img{max-width:min(1000px,92vw); max-height:82vh; border-radius:14px; object-fit:contain;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.lb-cap{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:#cfc7bb; font-size:.9rem; padding:0 20px}
.lb-x{position:absolute; top:16px; right:20px; background:transparent; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; opacity:.75}
.lb-x:hover{opacity:1; color:var(--gold)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:#fff; font-size:2rem; line-height:1; cursor:pointer}
.lb-nav:hover{background:rgba(227,177,90,.18); color:var(--gold)}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}

@media(max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr); gap:12px}
  .gal .g-wide{grid-column:span 2; aspect-ratio:16/9}
}
@media(max-width:560px){
  .gal .g figcaption{font-size:.76rem; padding:28px 12px 11px}
  .gal .g figcaption b{font-size:.88rem}
  .lb-nav{width:44px; height:44px; font-size:1.6rem}
}

/* ---------- анимация добавления в корзину ---------- */
.fly{
  position:fixed; z-index:200; pointer-events:none; object-fit:cover; border-radius:14px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75);
  transition:transform .62s cubic-bezier(.4,.05,.3,1), opacity .62s ease, border-radius .62s ease;
  will-change:transform,opacity;
}
@keyframes bump{
  0%{transform:scale(1)} 30%{transform:scale(1.16)} 55%{transform:scale(.94)} 100%{transform:scale(1)}
}
.cart-btn.bump, .fab.bump{animation:bump .42s cubic-bezier(.3,.8,.4,1)}
.cart-btn.bump{box-shadow:0 0 0 6px rgba(226,58,46,.22)}
@keyframes ccPop{0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.25)} 100%{transform:scale(1);opacity:1}}
.cart-count.on{animation:ccPop .34s cubic-bezier(.3,.9,.4,1)}
/* кнопка «+» на карточке: подтверждение галочкой */
.card .add.added{background:var(--green)!important; transform:scale(1.08)}
.card .add{transition:transform .18s cubic-bezier(.3,.9,.4,1), background .18s}
@media(prefers-reduced-motion:reduce){
  .fly{display:none}
  .cart-btn.bump,.fab.bump,.cart-count.on{animation:none}
}

/* ---------- кнопки мессенджеров: фирменные цвета при наведении ---------- */
.socbtn{transition:background .18s, color .18s, border-color .18s, transform .18s}
.socbtn:hover{transform:translateY(-2px)}
.socbtn.s-wa:hover{background:rgba(37,211,102,.16); color:#25D366; border-color:rgba(37,211,102,.5)}
.socbtn.s-tg:hover{background:rgba(42,171,238,.16); color:#2AABEE; border-color:rgba(42,171,238,.5)}
.socbtn.s-vk:hover{background:rgba(7,112,255,.16); color:#4d8bff; border-color:rgba(77,139,255,.5)}
.socbtn svg{display:block}

/* ---------- выбор варианта: переключатель вместо выпадающего списка ---------- */
.seg2{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 0 2px;
  background:var(--sea-700); border:1px solid var(--line-soft); border-radius:60px; padding:4px;
}
.seg2 button{
  appearance:none; border:0; cursor:pointer; border-radius:60px; padding:9px 8px;
  background:transparent; color:var(--muted);
  font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-size:.76rem; line-height:1.15;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg2 button:hover{color:var(--cream)}
.seg2 button.on{
  background:linear-gradient(180deg,var(--red),var(--red-deep)); color:#fff;
  box-shadow:0 6px 14px -8px rgba(226,58,46,.9);
}
.seg2 button:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(227,177,90,.35)}

/* на странице товара переключатель крупнее */
.pp-opt .seg2{max-width:420px; margin:14px 0 4px}
.pp-opt .seg2 button{padding:12px 10px; font-size:.86rem}

@media(max-width:380px){
  .seg2 button{font-size:.7rem; padding:8px 6px; letter-spacing:.02em}
}

/* номер заказа на экране благодарности */
.ditems .empty .ord-no{
  display:inline-block; margin:0 0 10px; padding:7px 16px; border-radius:60px;
  background:rgba(227,177,90,.12); border:1px solid var(--line);
  color:var(--muted); font-size:.84rem;
}
.ditems .empty .ord-no b{color:var(--gold); font-family:'Oswald',sans-serif; letter-spacing:.04em}


/* товар временно снят с продажи */
.pp-off{
  margin:16px 0 4px; padding:13px 16px; border-radius:14px;
  background:rgba(226,58,46,.12); border:1px solid rgba(226,58,46,.45);
  color:#ffd9d6; font-size:.9rem; line-height:1.45;
}
.pp-buy-off .btn-red, .pp-buy-off .btn-gold, .pp-buy-off .pp-qty{display:none}
.pp-buy-off .btn-ghost{border-color:var(--gold); color:var(--gold)}
