/* ═══════════════════════════════════════════════════════════
   BOBI PREMIUM KEBAB — Design System v2.0
   SaaS Restaurant Template — BrandBuilders.pl
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --c-black:    #080808;
  --c-dark:     #0f0f0f;
  --c-surface:  #151515;
  --c-card:     #1a1a1a;
  --c-card2:    #202020;
  --c-border:   #252525;
  --c-border2:  #303030;
  --c-orange:   #d4621a;
  --c-orange2:  #f07030;
  --c-od:       rgba(212,98,26,.13);
  --c-od2:      rgba(212,98,26,.07);
  --c-white:    #f5f0ea;
  --c-muted:    rgba(245,240,234,.65);
  --c-gray:     #666;
  --c-gray2:    #3a3a3a;
  --c-green:    #22c55e;
  --c-red:      #ef4444;
  --c-blue:     #3b82f6;

  --f-display:  'Bebas Neue', 'Arial Black', sans-serif;
  --f-body:     'Barlow', 'Helvetica Neue', sans-serif;

  --r:          4px;
  --r-lg:       8px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.4);
  --shadow:     0 8px 32px rgba(0,0,0,.55);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.7);

  --nav-h:      66px;
  --max-w:      1240px;
  --pad:        5%;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100% }
body { background: var(--c-black); color: var(--c-white); font-family: var(--f-body); line-height: 1.55; overflow-x: hidden }
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
button { font-family: var(--f-body); cursor: pointer }
ul { list-style: none }
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--c-dark) }
::-webkit-scrollbar-thumb { background: var(--c-orange); border-radius: 3px }
::selection { background: var(--c-orange); color: var(--c-black) }

/* ── UTILS ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad) }
.sec { padding: 5.5rem 0 }
.sec--dark { background: var(--c-dark) }
.sec--surface { background: var(--c-surface) }
.label { display: inline-block; color: var(--c-orange); font-size: .68rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: .6rem }
.display { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .95; letter-spacing: 2px }
.sub { color: var(--c-gray); font-size: .97rem; line-height: 1.7; margin-top: .7rem; max-width: 480px }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease }
.reveal.in { opacity: 1; transform: none }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-body); font-weight: 700; font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .9rem 2rem; border: none; border-radius: var(--r); cursor: pointer; transition: background .2s, transform .15s, border-color .2s; white-space: nowrap }
.btn--primary { background: var(--c-orange); color: var(--c-black) }
.btn--primary:hover { background: var(--c-orange2); transform: translateY(-2px) }
.btn--ghost { background: transparent; color: var(--c-white); border: 1px solid rgba(245,240,234,.2) }
.btn--ghost:hover { border-color: var(--c-orange); color: var(--c-orange) }
.btn--sm { padding: .55rem 1.1rem; font-size: .75rem }
.btn--full { width: 100% }
.btn--disabled, .btn:disabled { background: var(--c-border2) !important; color: var(--c-gray) !important; cursor: not-allowed !important; transform: none !important }

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  height: var(--nav-h);
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.6) }
.nav__brand { display: flex; align-items: center; gap: 10px }
.nav__logo { font-family: var(--f-display); font-size: 2rem; letter-spacing: 3px; line-height: 1 }
.nav__logo span { color: var(--c-orange) }
.nav__tag { background: var(--c-od); border: 1px solid rgba(212,98,26,.35); color: var(--c-orange); font-size: .6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: .22rem .55rem; border-radius: 2px }
.nav__links { display: flex; gap: 1.6rem; align-items: center }
.nav__links a { color: rgba(245,240,234,.5); font-weight: 600; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; transition: color .2s }
.nav__links a:hover, .nav__links a.active { color: var(--c-white) }
.nav__right { display: flex; align-items: center; gap: .7rem }
.nav__cart { position: relative; background: var(--c-card); border: 1px solid var(--c-border2); color: var(--c-white); padding: .45rem 1rem; border-radius: var(--r); font-size: .8rem; font-weight: 700; letter-spacing: 1px; transition: border-color .2s; display: flex; align-items: center; gap: .45rem }
.nav__cart:hover { border-color: var(--c-orange) }
.nav__cart-dot { position: absolute; top: -6px; right: -6px; background: var(--c-orange); color: var(--c-black); width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; font-weight: 700; display: none; align-items: center; justify-content: center }
.nav__cart-dot.on { display: flex }
.nav__ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px }
.nav__ham span { display: block; width: 22px; height: 2px; background: var(--c-white); border-radius: 2px; transition: all .3s }
.nav__ham.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav__ham.active span:nth-child(2) { opacity: 0 }
.nav__ham.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.nav__mobile { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(8,8,8,.99); border-bottom: 1px solid var(--c-border); padding: 1.2rem var(--pad); flex-direction: column; gap: .8rem }
.nav__mobile.on { display: flex }
.nav__mobile a { color: rgba(245,240,234,.65); font-weight: 600; font-size: .9rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .5rem 0; border-bottom: 1px solid var(--c-border); transition: color .2s }
.nav__mobile a:hover { color: var(--c-orange) }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--nav-h) + 3rem) var(--pad) 5rem;
  position: relative; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 58%, rgba(212,98,26,.12) 0%, transparent 70%) }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none }
.hero__vignette { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient(transparent, var(--c-black)); pointer-events: none }
.hero__content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: var(--c-od); border: 1px solid rgba(212,98,26,.35); color: var(--c-orange); font-size: .68rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: .32rem .9rem; border-radius: 2px; margin-bottom: 1.8rem; animation: fadeUp .5s ease both }
.hero__h1 { font-family: var(--f-display); font-size: clamp(5rem, 20vw, 15rem); line-height: .88; letter-spacing: 2px; animation: fadeUp .6s .1s ease both }
.hero__h1 em { display: block; font-style: normal; font-size: clamp(1.5rem, 5vw, 3.8rem); color: var(--c-orange); letter-spacing: 10px; margin-top: .7rem }
.hero__sub { max-width: 520px; margin: 1.8rem auto 2.5rem; font-size: 1.05rem; color: var(--c-muted); line-height: 1.75; animation: fadeUp .7s .2s ease both }
.hero__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeUp .8s .3s ease both }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: .3; animation: fadeUp 1s .9s ease both }
.hero__scroll-label { font-size: .6rem; letter-spacing: 3px; text-transform: uppercase }
.hero__scroll-bar { width: 1px; height: 34px; background: linear-gradient(var(--c-white), transparent); animation: scrollPulse 2s ease-in-out infinite }

/* ══════════════════════════════════════
   TRUST BAR
══════════════════════════════════════ */
.trust { background: var(--c-orange); display: flex; flex-wrap: nowrap; overflow-x: auto }
.trust::-webkit-scrollbar { display: none }
.trust__item { flex: 1; min-width: 160px; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem; color: var(--c-black); font-weight: 700; font-size: .73rem; letter-spacing: 1.5px; text-transform: uppercase; border-right: 1px solid rgba(0,0,0,.15); white-space: nowrap }
.trust__item:last-child { border-right: none }
.trust__icon { width: 16px; height: 16px; flex-shrink: 0 }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: 3rem }
.about__p { color: var(--c-muted); font-size: 1.02rem; line-height: 1.8; margin-bottom: 1rem }
.about__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem }
.pillar { background: var(--c-card); border: 1px solid var(--c-border2); padding: 1.4rem; border-left: 3px solid var(--c-orange); transition: transform .2s }
.pillar:hover { transform: translateX(4px) }
.pillar__num { font-family: var(--f-display); font-size: 2.2rem; color: var(--c-orange); line-height: 1 }
.pillar__lbl { font-size: .72rem; color: var(--c-gray); text-transform: uppercase; letter-spacing: 1.5px; margin-top: .25rem }
.logo-showcase { background: var(--c-card); border: 1px solid var(--c-border2); padding: 3rem 2.5rem; text-align: center; position: relative; overflow: hidden }
.logo-showcase::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-orange), transparent) }
.logo-showcase__name { font-family: var(--f-display); font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: 5px; line-height: 1 }
.logo-showcase__sub { color: var(--c-orange); font-size: .82rem; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; border-top: 1px solid var(--c-orange); border-bottom: 1px solid var(--c-orange); padding: .4rem 0; margin: .6rem 0 1rem }
.logo-showcase__addr { color: var(--c-gray); font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase }
.logo-showcase__badge { position: absolute; bottom: 0; right: 0; background: var(--c-orange); color: var(--c-black); font-family: var(--f-display); font-size: .95rem; letter-spacing: 2px; padding: .65rem 1rem }

/* ══════════════════════════════════════
   ORDER SYSTEM
══════════════════════════════════════ */
.order__layout { display: grid; grid-template-columns: 1fr 400px; gap: 2.5rem; align-items: start; margin-top: 3rem }

/* ── Tabs ── */
.tabs { display: flex; gap: .4rem; margin-bottom: 1.8rem; flex-wrap: wrap }
.tab-btn { background: var(--c-card); border: 1px solid var(--c-border2); color: var(--c-gray); font-weight: 700; font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .5rem 1.1rem; border-radius: var(--r); transition: all .2s; display: flex; align-items: center; gap: .4rem }
.tab-btn:hover { border-color: var(--c-orange); color: var(--c-white) }
.tab-btn.active { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-black) }
.tab-panel { display: none }
.tab-panel.active { display: block }

/* ── Configurator ── */
.cfg__header { background: var(--c-card); border: 1px solid var(--c-border2); border-bottom: none; padding: 1.4rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.cfg__title { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: 2px }
.cfg__meta { font-size: .73rem; color: var(--c-gray); margin-top: .2rem }
.cfg__price { font-family: var(--f-display); font-size: 2.2rem; color: var(--c-orange); display: flex; align-items: baseline; gap: .3rem; white-space: nowrap }
.cfg__price small { font-family: var(--f-body); font-size: .85rem; color: var(--c-gray); font-weight: 400 }
.cfg__body { background: var(--c-card); border: 1px solid var(--c-border2) }

/* ── Steps ── */
.step { border-bottom: 1px solid var(--c-border) }
.step:last-child { border-bottom: none }
.step__head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem; cursor: pointer; transition: background .15s; user-select: none }
.step__head:hover { background: rgba(255,255,255,.018) }
.step__head.open { background: var(--c-od2) }
.step__num { width: 26px; height: 26px; border-radius: 50%; background: var(--c-od); border: 1px solid rgba(212,98,26,.4); color: var(--c-orange); font-family: var(--f-display); font-size: .92rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s }
.step__num.done { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-black) }
.step__num--bez { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); color: var(--c-red) }
.step__name { font-weight: 700; font-size: .9rem; flex: 1 }
.step__chosen { font-size: .73rem; color: var(--c-orange); font-weight: 600; max-width: 180px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.step__chosen--bez { color: var(--c-red) }
.step__arrow { color: var(--c-gray2); font-size: .72rem; transition: transform .3s; flex-shrink: 0 }
.step__head.open .step__arrow { transform: rotate(180deg) }
.step__body { display: none; padding: .2rem 1.5rem 1.2rem }
.step__body.open { display: block }

/* ── Options ── */
.opt-list { display: flex; flex-direction: column; gap: .28rem }
.opt { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s }
.opt:hover { background: rgba(255,255,255,.025); border-color: var(--c-border2) }
.opt.sel { background: var(--c-od); border-color: rgba(212,98,26,.4) }
.opt__radio { width: 15px; height: 15px; border: 2px solid var(--c-border2); border-radius: 50%; flex-shrink: 0; position: relative; transition: border-color .15s }
.opt.sel .opt__radio { border-color: var(--c-orange) }
.opt.sel .opt__radio::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange) }
.opt__check { width: 15px; height: 15px; border: 2px solid var(--c-border2); border-radius: 3px; flex-shrink: 0; position: relative; transition: all .15s }
.opt.sel .opt__check { border-color: var(--c-orange); background: var(--c-orange) }
.opt.sel .opt__check::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .58rem; color: var(--c-black); font-weight: 900 }
.opt__name { flex: 1; font-size: .88rem }
.opt__badge { font-size: .6rem; background: rgba(212,98,26,.12); color: var(--c-orange); padding: .14rem .38rem; border-radius: 2px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase }
.opt__badge--green { background: rgba(34,197,94,.1); color: #4ade80 }
.opt__extra { font-size: .78rem; color: var(--c-orange); font-weight: 700; flex-shrink: 0 }

/* ── "Czego nie lubisz" ── */
.bez__note { font-size: .74rem; color: var(--c-gray); line-height: 1.55; padding: .6rem .8rem; background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.15); border-radius: var(--r); margin-bottom: .8rem }
.bez__note strong { color: var(--c-red) }
.bez__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem }
.bez-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: var(--r); cursor: pointer; border: 1px solid var(--c-border); font-size: .82rem; transition: all .15s; user-select: none }
.bez-item:hover { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04) }
.bez-item.sel { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08) }
.bez-item__ico { width: 14px; height: 14px; border: 2px solid var(--c-border2); border-radius: 3px; flex-shrink: 0; position: relative; transition: all .15s }
.bez-item.sel .bez-item__ico { border-color: var(--c-red); background: var(--c-red) }
.bez-item.sel .bez-item__ico::after { content: '✕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .5rem; color: #fff; font-weight: 900; line-height: 1 }

/* ── Cfg add btn ── */
.cfg__add { width: 100%; background: var(--c-orange); color: var(--c-black); font-weight: 700; font-size: .87rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 1rem; border: none; border-radius: var(--r); transition: background .2s; margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem }
.cfg__add:hover:not(:disabled) { background: var(--c-orange2) }
.cfg__add:disabled { background: var(--c-border2); color: var(--c-gray); cursor: not-allowed }

/* ── Menu item cards ── */
.menu-items { display: flex; flex-direction: column; gap: .65rem }
.mi { background: var(--c-card); border: 1px solid var(--c-border2); padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; transition: border-color .2s, transform .15s, background .15s; cursor: pointer; border-radius: var(--r) }
.mi:hover { border-color: rgba(212,98,26,.5); transform: translateX(3px) }
.mi--hot { border-color: rgba(212,98,26,.35); background: rgba(212,98,26,.04) }
.mi__ico { width: 44px; height: 44px; background: var(--c-od); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0 }
.mi__ico svg { width: 22px; height: 22px }
.mi__info { flex: 1; min-width: 0 }
.mi__badge { display: inline-block; font-size: .58rem; background: var(--c-orange); color: var(--c-black); font-weight: 700; letter-spacing: 1.5px; padding: .15rem .45rem; text-transform: uppercase; border-radius: 2px; margin-bottom: .3rem }
.mi__name { font-weight: 700; font-size: .92rem; margin-bottom: .2rem }
.mi__desc { font-size: .77rem; color: var(--c-gray); line-height: 1.35 }
.mi__right { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; flex-shrink: 0 }
.mi__price { font-family: var(--f-display); font-size: 1.4rem; color: var(--c-orange); line-height: 1; white-space: nowrap }
.mi__price small { font-size: .82rem }
.mi__add { background: var(--c-orange); color: var(--c-black); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; line-height: 1 }
.mi__add:hover { background: var(--c-orange2); transform: scale(1.15) }

/* ══════════════════════════════════════
   CART PANEL
══════════════════════════════════════ */
.cart-panel { background: var(--c-card); border: 1px solid var(--c-border2); position: sticky; top: calc(var(--nav-h) + 18px); max-height: calc(100vh - var(--nav-h) - 36px); display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden }
.cart__head { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0 }
.cart__title { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: 2px; display: flex; align-items: center; gap: .6rem }
.cart__cnt { background: var(--c-orange); color: var(--c-black); font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 2px; letter-spacing: 1px }
.cart__promo { padding: .75rem 1rem; border-bottom: 1px solid var(--c-border); flex-shrink: 0 }
.cart__promo-row { display: flex; gap: .45rem }
.promo-input { flex: 1; background: var(--c-card2); border: 1px solid var(--c-border2); color: var(--c-white); font-family: var(--f-body); font-size: .8rem; padding: .52rem .8rem; border-radius: var(--r); outline: none; transition: border-color .2s; text-transform: uppercase; letter-spacing: 1px }
.promo-input:focus { border-color: var(--c-orange) }
.promo-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--c-gray) }
.promo-btn { background: var(--c-border2); border: none; color: var(--c-white); font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: 1px; padding: .52rem .85rem; border-radius: var(--r); transition: background .2s; white-space: nowrap }
.promo-btn:hover { background: var(--c-orange); color: var(--c-black) }
.promo-msg { font-size: .7rem; margin-top: .35rem; height: 1rem }
.promo-msg--ok { color: var(--c-green) }
.promo-msg--err { color: var(--c-red) }
.cart__body { flex: 1; overflow-y: auto; padding: .8rem 1rem }
.cart__empty { text-align: center; padding: 2.5rem 1rem; pointer-events: none }
.cart__empty-ico { font-size: 2.8rem; display: block; margin-bottom: .7rem; opacity: .3 }
.cart__empty-txt { font-size: .82rem; color: var(--c-gray); line-height: 1.65 }
/* cart lines */
.cl { display: flex; gap: .7rem; padding: .72rem 0; border-bottom: 1px solid var(--c-border); align-items: flex-start }
.cl:last-child { border-bottom: none }
.cl__ico { font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem }
.cl__info { flex: 1; min-width: 0 }
.cl__name { font-weight: 700; font-size: .83rem; line-height: 1.3; margin-bottom: .15rem }
.cl__sub { font-size: .7rem; color: var(--c-gray); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cl__bez { font-size: .67rem; color: var(--c-red); margin-top: .12rem; line-height: 1.3 }
.cl__right { display: flex; flex-direction: column; align-items: flex-end; gap: .38rem; flex-shrink: 0 }
.cl__price { font-family: var(--f-display); font-size: 1.05rem; color: var(--c-orange) }
.cl__qty { display: flex; align-items: center; gap: .32rem }
.qty-btn { background: var(--c-border2); border: none; color: var(--c-white); width: 22px; height: 22px; border-radius: 3px; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .12s; line-height: 1 }
.qty-btn:hover { background: var(--c-orange) }
.qty-num { font-size: .82rem; font-weight: 700; min-width: 16px; text-align: center }
/* min order */
.cart__min { padding: .5rem 1rem; border-top: 1px solid var(--c-border); flex-shrink: 0 }
.cart__min-labels { display: flex; justify-content: space-between; font-size: .67rem; color: var(--c-gray); margin-bottom: .3rem }
.min-bar { height: 3px; background: var(--c-border2); border-radius: 2px; overflow: hidden }
.min-bar__fill { height: 100%; background: var(--c-orange); border-radius: 2px; transition: width .4s ease }
/* summary */
.cart__summary { padding: .9rem 1rem 1rem; border-top: 1px solid var(--c-border); flex-shrink: 0 }
.sum-row { display: flex; justify-content: space-between; align-items: center; font-size: .79rem; margin-bottom: .3rem }
.sum-row .lbl { color: var(--c-gray) }
.sum-row .val { font-weight: 600 }
.sum-row--disc .val { color: var(--c-green) }
.sum-row--total { border-top: 1px solid var(--c-border); padding-top: .6rem; margin-top: .3rem }
.sum-row--total .lbl { font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-gray) }
.sum-row--total .val { font-family: var(--f-display); font-size: 1.85rem; color: var(--c-white) }
.cart__order-btn { width: 100%; background: var(--c-orange); color: var(--c-black); font-family: var(--f-body); font-weight: 700; font-size: .87rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .95rem; border: none; border-radius: var(--r); transition: background .2s; margin-top: .75rem; display: flex; align-items: center; justify-content: center; gap: .5rem }
.cart__order-btn:hover:not(:disabled) { background: var(--c-orange2) }
.cart__order-btn:disabled { background: var(--c-border2); color: var(--c-gray); cursor: not-allowed }
.cart__note { font-size: .67rem; color: var(--c-gray); text-align: center; margin-top: .55rem; line-height: 1.5 }

/* ══════════════════════════════════════
   WHY SECTION
══════════════════════════════════════ */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 3rem }
.why-card { background: var(--c-card); border: 1px solid var(--c-border2); padding: 1.8rem; border-radius: var(--r); position: relative; overflow: hidden; transition: border-color .3s, transform .25s }
.why-card:hover { border-color: rgba(212,98,26,.5); transform: translateY(-4px) }
.why-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--c-orange); transform: scaleX(0); transition: transform .3s }
.why-card:hover::after { transform: scaleX(1) }
.why-card__ico { margin-bottom: 1rem; display: flex; align-items: center; justify-content: flex-start }
.why-card__ico svg { width: 32px; height: 32px; color: var(--c-orange) }
.why-card__h { font-weight: 700; font-size: .97rem; margin-bottom: .45rem }
.why-card__p { font-size: .83rem; color: var(--c-gray); line-height: 1.65 }

/* ══════════════════════════════════════
   REVIEWS
══════════════════════════════════════ */
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 3rem }
.review-card { background: var(--c-card); border: 1px solid var(--c-border2); padding: 1.6rem; border-radius: var(--r); transition: border-color .25s }
.review-card:hover { border-color: rgba(212,98,26,.4) }
.review-card__stars { color: var(--c-orange); font-size: .9rem; letter-spacing: 2px; margin-bottom: .75rem; display: flex; align-items: center; gap: .3rem }
.review-card__stars-count { font-size: .75rem; color: var(--c-gray); font-weight: 600; margin-left: .2rem }
.review-card__text { font-size: .88rem; color: rgba(245,240,234,.78); line-height: 1.75; margin-bottom: .9rem; font-style: italic }
.review-card__text::before { content: '\201C'; color: var(--c-orange); font-size: 1.35rem; line-height: 0; vertical-align: -.3em; margin-right: .12rem }
.review-card__author { display: flex; align-items: center; gap: .7rem; margin-top: auto }
.review-card__av { width: 34px; height: 34px; border-radius: 50%; background: var(--c-od); border: 1px solid rgba(212,98,26,.35); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: var(--c-orange); flex-shrink: 0 }
.review-card__name { font-weight: 700; font-size: .85rem }
.review-card__date { font-size: .68rem; color: var(--c-gray) }
.reviews__summary { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 2rem; color: var(--c-gray); font-size: .82rem }
.reviews__summary strong { color: var(--c-orange) }

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; margin-top: 3rem }
.contact-cards { display: flex; flex-direction: column; gap: .85rem }
.cc { background: var(--c-card); border: 1px solid var(--c-border2); padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; border-radius: var(--r); transition: border-color .2s }
.cc:hover { border-color: rgba(212,98,26,.4) }
.cc__ico { width: 40px; height: 40px; background: var(--c-od); border: 1px solid rgba(212,98,26,.25); border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.cc__ico svg { width: 18px; height: 18px; color: var(--c-orange) }
.cc__lbl { font-size: .65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-gray); margin-bottom: .18rem }
.cc__val { font-size: .9rem; font-weight: 600 }
.cc__val a { color: var(--c-orange) }
.map-box { background: var(--c-card); border: 1px solid var(--c-border2); border-radius: var(--r); overflow: hidden }
.map-box iframe { width: 100%; height: 300px; border: none; display: block; filter: grayscale(70%) contrast(1.05); opacity: .9 }
.map-box__footer { padding: .85rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--c-border) }
.map-box__addr { font-size: .78rem; color: var(--c-gray) }
.map-box__addr strong { color: var(--c-white); display: block; font-size: .87rem; margin-bottom: .1rem }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { background: #050505; padding: 4rem 0 2rem; border-top: 1px solid var(--c-border) }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--c-border) }
.footer__brand-name { font-family: var(--f-display); font-size: 2.3rem; letter-spacing: 4px }
.footer__brand-name span { color: var(--c-orange) }
.footer__brand-tag { color: var(--c-gray); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; margin-top: .2rem }
.footer__brand-desc { color: rgba(245,240,234,.35); font-size: .82rem; line-height: 1.75; margin-top: 1rem; max-width: 260px }
.footer__col-title { font-size: .66rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--c-orange); margin-bottom: .85rem }
.footer__links { display: flex; flex-direction: column; gap: .5rem }
.footer__links a { color: rgba(245,240,234,.42); font-size: .85rem; transition: color .2s }
.footer__links a:hover { color: var(--c-orange) }
.footer__pay { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem }
.pay-badge { display: flex; align-items: center; gap: .5rem; background: var(--c-card2); border: 1px solid var(--c-border2); padding: .48rem .8rem; border-radius: var(--r); font-size: .77rem; font-weight: 600; color: rgba(245,240,234,.55) }
.pay-badge__icon { width: 18px; height: 18px; flex-shrink: 0 }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.4rem; flex-wrap: wrap; gap: .5rem }
.footer__copy { font-size: .7rem; color: rgba(100,100,100,.6) }
.footer__seo { font-size: .65rem; color: rgba(100,100,100,.3) }

/* ══════════════════════════════════════
   ORDER MODAL
══════════════════════════════════════ */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 600; display: none; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto }
.overlay.on { display: flex }
.modal { background: var(--c-dark); border: 1px solid var(--c-border2); width: 100%; max-width: 560px; border-radius: var(--r-lg); position: relative; margin: auto; box-shadow: var(--shadow-lg) }
.modal__head { padding: 1.3rem 1.7rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--c-dark); position: sticky; top: 0; z-index: 1 }
.modal__title { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: 2px }
.modal__steps { display: flex; gap: .4rem; margin-top: .35rem }
.modal__step-dot { width: 26px; height: 3px; background: var(--c-border2); border-radius: 2px; transition: background .3s }
.modal__step-dot.active { background: var(--c-orange) }
.modal__close { background: none; border: 1px solid var(--c-border2); color: var(--c-gray); width: 30px; height: 30px; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all .2s; font-size: .95rem; flex-shrink: 0 }
.modal__close:hover { border-color: var(--c-orange); color: var(--c-white) }
.modal__body { padding: 1.7rem }
.mstep { display: none }
.mstep.active { display: block }
/* delivery */
.del-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.4rem }
.del-btn { background: var(--c-card); border: 1px solid var(--c-border2); color: var(--c-gray); font-family: var(--f-body); font-weight: 700; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; padding: .75rem; border-radius: var(--r); transition: all .2s; text-align: center }
.del-btn.active { background: var(--c-od); border-color: var(--c-orange); color: var(--c-white) }
/* form */
.fg { margin-bottom: 1.1rem }
.fg label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-gray); margin-bottom: .42rem }
.finput, .fselect, .ftextarea { width: 100%; background: var(--c-card); border: 1px solid var(--c-border2); color: var(--c-white); font-family: var(--f-body); font-size: .92rem; padding: .7rem .95rem; border-radius: var(--r); outline: none; transition: border-color .2s }
.finput:focus, .fselect:focus, .ftextarea:focus { border-color: var(--c-orange) }
.finput::placeholder { color: var(--c-gray2) }
.finput.error { border-color: var(--c-red) }
.ftextarea { resize: vertical; min-height: 70px }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem }
.fhint { font-size: .68rem; color: var(--c-gray); margin-top: .3rem }
/* order summary in modal */
.ord-sum { background: var(--c-card2); border: 1px solid var(--c-border2); padding: 1rem 1.2rem; border-radius: var(--r); margin-bottom: 1.2rem }
.ord-sum__title { font-size: .66rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-gray); margin-bottom: .6rem }
.ord-sum__items { font-size: .82rem; color: var(--c-muted); line-height: 1.75 }
.ord-sum__total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--c-border); margin-top: .6rem; padding-top: .6rem }
.ord-sum__total-lbl { font-size: .73rem; font-weight: 700; color: var(--c-gray); text-transform: uppercase; letter-spacing: 1px }
.ord-sum__total-val { font-family: var(--f-display); font-size: 1.45rem; color: var(--c-orange) }
/* pay methods */
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem }
.pay-method { background: var(--c-card); border: 2px solid var(--c-border2); padding: .9rem .7rem; border-radius: var(--r); cursor: pointer; text-align: center; transition: all .2s }
.pay-method:hover { border-color: var(--c-gray2) }
.pay-method.active { border-color: var(--c-orange); background: var(--c-od) }
.pay-method__ico { display: block; margin: 0 auto .4rem; width: 24px; height: 24px }
.pay-method__ico svg { width: 24px; height: 24px }
.pay-method__name { font-weight: 700; font-size: .78rem; display: block; margin-bottom: .1rem }
.pay-method__desc { font-size: .65rem; color: var(--c-gray) }
.pay-method.active .pay-method__desc { color: rgba(245,240,234,.55) }
/* p24 notice */
.p24-info { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.2); padding: .85rem 1rem; border-radius: var(--r); margin-bottom: 1.1rem; font-size: .77rem; color: rgba(245,240,234,.65); line-height: 1.6 }
.p24-info strong { color: var(--c-blue) }
/* blik input */
.blik-input { width: 100%; background: var(--c-card); border: 1px solid var(--c-border2); color: var(--c-white); font-family: var(--f-display); font-size: 2.2rem; letter-spacing: 8px; text-align: center; padding: .8rem; border-radius: var(--r); outline: none; transition: border-color .2s }
.blik-input:focus { border-color: var(--c-orange) }
.blik-timer { font-size: .72rem; color: var(--c-gray); text-align: center; margin-top: .35rem }
/* confirmation */
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-size: .82rem; background: var(--c-card2); border: 1px solid var(--c-border2); padding: 1rem 1.1rem; border-radius: var(--r) }
.confirm-field { padding: .3rem 0 }
.confirm-field__lbl { color: var(--c-gray); font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .15rem }
.confirm-field__val { font-weight: 600 }
/* modal nav */
.modal-nav { display: flex; gap: .6rem; margin-top: 1.4rem }
.modal-back { flex: 1; background: var(--c-card2); border: 1px solid var(--c-border2); color: var(--c-gray); font-family: var(--f-body); font-weight: 700; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .82rem; border-radius: var(--r); transition: all .2s }
.modal-back:hover { border-color: var(--c-gray2); color: var(--c-white) }
.modal-next { flex: 2; background: var(--c-orange); color: var(--c-black); font-family: var(--f-body); font-weight: 700; font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase; padding: .82rem; border: none; border-radius: var(--r); transition: background .2s; display: flex; align-items: center; justify-content: center; gap: .5rem }
.modal-next:hover:not(:disabled) { background: var(--c-orange2) }
.modal-next:disabled { background: var(--c-border2); color: var(--c-gray); cursor: not-allowed }
/* success */
.success { display: none; text-align: center; padding: 2.5rem 1.5rem }
.success.on { display: block }
.success__ico { font-size: 4rem; display: block; margin-bottom: 1rem; animation: bounceIn .6s ease both }
.success__title { font-family: var(--f-display); font-size: 2.1rem; letter-spacing: 2px; color: var(--c-orange); margin-bottom: .5rem }
.success__id { display: inline-block; background: var(--c-card2); border: 1px solid var(--c-border2); padding: .45rem 1.2rem; border-radius: var(--r); font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 2px; color: var(--c-orange); margin: .5rem 0 1rem }
.success__sub { color: var(--c-muted); font-size: .9rem; line-height: 1.75 }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes scrollPulse { 0%,100% { opacity:.3; height: 34px } 50% { opacity:.8; height: 20px } }
@keyframes bounceIn { 0% { transform: scale(.3); opacity: 0 } 60% { transform: scale(1.1) } 80% { transform: scale(.95) } 100% { transform: scale(1); opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .order__layout { grid-template-columns: 1fr }
  .cart-panel { position: static; max-height: none }
  .footer__grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px) {
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: 2.5rem }
  .why__grid, .reviews__grid { grid-template-columns: repeat(2, 1fr) }
  .pay-methods { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px) {
  :root { --pad: 4% }
  .nav__links { display: none }
  .nav__ham { display: flex }
  .trust { flex-wrap: wrap }
  .trust__item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(0,0,0,.15); justify-content: flex-start; padding: .7rem 1.2rem }
  .frow { grid-template-columns: 1fr }
  .bez__grid { grid-template-columns: 1fr }
  .footer__grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px) {
  .hero__btns { flex-direction: column; align-items: stretch }
  .about__pillars { grid-template-columns: 1fr 1fr }
  .trust__item { flex: 0 0 100% }
  .why__grid, .reviews__grid { grid-template-columns: 1fr }
  .pay-methods { grid-template-columns: repeat(2, 1fr) }
  .footer__grid { grid-template-columns: 1fr }
  .modal__body { padding: 1.2rem }
  .confirm-grid { grid-template-columns: 1fr }
}
@media (max-width: 380px) {
  .hero__h1 { font-size: 4.5rem }
  .tabs { gap: .3rem }
  .tab-btn { font-size: .68rem; padding: .45rem .8rem }
}

/* ── Print / accessibility ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } }
@media print { .nav, .cart-panel, .overlay, .hero__scroll, .trust { display: none } }