:root {
  --green: #2f6b34; --green-d: #23522a; --cream: #f6f0e3; --cream-d: #ece2cc;
  --brown: #4f3b2a; --gold: #c39a4a; --ink: #2a241d; --muted: #7a6f62; --line: #e6dccb;
  --bg: #f5eedf; --card: #fbf7ef; --err: #a33a2b; --ok: #2f6b34;
  --r: 14px; --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 20px rgba(60, 40, 20, .06);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 'Nunito Sans', system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: 'Lora', Georgia, serif; color: var(--brown); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
/* секциите — по цялата ширина на екрана, с отстъп от краищата като лентата */
.wrap { max-width: none; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
.sec { padding: 36px clamp(16px, 3vw, 48px); }
.narrow { max-width: 820px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.12rem; color: var(--muted); }
.err { color: var(--err); font-weight: 600; }
.ok { color: var(--ok); font-weight: 700; }
.box { background: var(--cream); border-radius: var(--r); padding: 16px 20px; margin: 16px 0; }

/* бутони */
/* 3D бутони: релеф отгоре, долен ръб, при натискане потъват */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff;
  background: linear-gradient(180deg, #3f8a45 0%, var(--green) 55%, #285d2d 100%);
  border: 0; border-radius: 999px; padding: 12px 26px; font: 700 1rem 'Nunito Sans', sans-serif; cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25); text-decoration: none !important; position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 4px 0 #1d4521, 0 8px 16px rgba(30, 60, 30, .3);
  transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 5px 0 #1d4521, 0 10px 18px rgba(30, 60, 30, .32); }
.btn:active { transform: translateY(4px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 #1d4521, 0 2px 4px rgba(30, 60, 30, .3); }
.btn.sm { padding: 8px 16px; font-size: .9rem; }
.btn.ghost { background: linear-gradient(180deg, #fff 0%, #f3ede0 100%); color: var(--green); text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--green), 0 4px 0 #c9bda4, 0 8px 14px rgba(60, 40, 20, .15); }
.btn.ghost:active { box-shadow: inset 0 0 0 2px var(--green), inset 0 2px 4px rgba(0, 0, 0, .15), 0 0 0 #c9bda4; }
.btn.wide { width: 100%; }
/* замръзнал бутон — продуктът не може да се купи сега */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active { background: linear-gradient(180deg, #d6d0c4, #bdb5a6); color: #f4f1ea; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 #a39b8c; cursor: not-allowed; transform: none; filter: grayscale(1); }
.price.zamr { color: var(--muted); }

.proba { background: #a33a2b; color: #fff; text-align: center; font-weight: 700; font-size: .85rem; padding: 6px 16px; }

/* горна лента */
/* горната лента — същото светло дърво като подвала, менюто черно гравирано */
.top { position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(255, 240, 215, .14), rgba(0, 0, 0, .05)), #d8b88a url(img/darvo-svetlo2.webp) center / cover;
  border-bottom: 1px solid rgba(60, 35, 10, .45); box-shadow: 0 1px 0 rgba(255, 235, 200, .5), 0 4px 12px rgba(60, 35, 10, .18); }
.logo { display: block; padding: 6px 12px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 3px 4px 6px rgba(45, 22, 6, .55), inset -2px -2px 3px rgba(255, 236, 205, .55), 1px 1px 0 rgba(255, 236, 205, .6), -1px -1px 0 rgba(60, 30, 8, .35); }
/* горната лента — по цялата ширина на екрана */
.top-in { display: flex; align-items: center; gap: 20px; height: 84px; padding: 0 clamp(16px, 3vw, 48px); }
.logo img { height: 66px; width: auto; display: block; filter: drop-shadow(1px 2px 2px rgba(40, 20, 5, .4)); }
.nav { display: flex; gap: 16px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav { align-items: center; justify-content: center; gap: clamp(18px, 2.6vw, 44px); overflow: visible; }
.nav > a, .dd-t { color: #22120a !important; font-weight: 800; font-size: 1.08rem; white-space: nowrap; text-decoration: none !important;
  text-shadow: 1px 1px 0 rgba(255, 232, 196, .6), -.5px -.5px 0 rgba(0, 0, 0, .25); }
.nav > a:hover, .dd-t:hover { color: #000 !important; }
.dd-m a { color: var(--brown); font-weight: 600; white-space: nowrap; }
.nav .nav-pdf { color: #1f3d17 !important; }
.dd { position: relative; }
.dd-t { display: inline-flex; align-items: center; gap: 5px; }
.dd-m { position: absolute; top: 100%; left: -14px; min-width: 220px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px 0; display: none; margin-top: 10px; }
.dd-m::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.dd:hover .dd-m, .dd:focus-within .dd-m { display: block; }
.dd-m a { display: block; padding: 7px 16px; font-weight: 600; }
.dd-m a:hover { background: var(--cream); text-decoration: none; }
.search input { border: 0; background: rgba(246, 240, 227, .28); border-radius: 999px; padding: 8px 14px; width: 170px; font: inherit; font-size: .9rem;
  color: #22120a; font-weight: 700; box-shadow: inset 2px 2px 4px rgba(45, 22, 6, .5), inset -1px -1px 2px rgba(255, 236, 205, .55); }
.search input::placeholder { color: rgba(40, 20, 8, .62); font-weight: 600; }
.search input:focus { outline: 0; background: rgba(246, 240, 227, .5); }
.lang { font-weight: 800; color: #22120a; border-radius: 8px; padding: 4px 9px; font-size: .9rem; text-decoration: none !important;
  box-shadow: inset 2px 2px 3px rgba(45, 22, 6, .45), inset -1px -1px 2px rgba(255, 236, 205, .5); text-shadow: 1px 1px 0 rgba(255, 232, 196, .6); }
/* количката: 3D бутон с плетена кошница */
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .92rem;
  padding: 8px 16px 8px 12px; border-radius: 999px; text-decoration: none !important;
  background: linear-gradient(180deg, #3f8a45 0%, var(--green) 55%, #285d2d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #1d4521, 0 6px 12px rgba(30, 60, 30, .25); transition: transform .08s, box-shadow .08s; }
.cart-btn:hover { transform: translateY(-1px); }
.cart-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 #1d4521; }
.cart-btn .kosh { color: #f3e2bd; }
.cart-btn.skok .kosh { animation: skok .6s ease; }
@keyframes skok { 0%, 100% { transform: none; } 25% { transform: translateY(-6px) rotate(-8deg); } 50% { transform: translateY(0) rotate(6deg); } 75% { transform: translateY(-2px) rotate(-3deg); } }
.cart-n { position: absolute; top: -6px; right: -6px; border: 2px solid #fff; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 3px; border-radius: 2px; background: #22120a; box-shadow: 1px 1px 0 rgba(255, 232, 196, .6); margin: 4px 0; transition: transform .2s, opacity .2s; }
.burger.x span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.x span:nth-child(2) { opacity: 0; }
.burger.x span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* менюто на телефон: плочки с иконки + категориите като кръгли снимки */
.mmenu { position: sticky; top: 84px; z-index: 19; background: rgba(255, 253, 249, .98); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(60, 40, 20, .12); padding: 14px 16px 16px; }
.mm-plochki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mm-plochki a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; text-align: center;
  color: var(--brown); font-weight: 700; font-size: .78rem; text-decoration: none !important;
  background: linear-gradient(180deg, #fff, #f6efe1); box-shadow: 0 3px 0 #e2d6bd, 0 6px 12px rgba(60, 40, 20, .08); }
.mm-plochki a svg { color: var(--green); }
.mm-plochki a:active { transform: translateY(3px); box-shadow: 0 0 0 #e2d6bd; }
.mm-kat { display: flex; gap: 12px; overflow-x: auto; padding: 14px 2px 2px; scrollbar-width: none; }
.mm-kat::-webkit-scrollbar { display: none; }
.mm-kat a { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  font-size: .7rem; font-weight: 600; color: var(--brown); line-height: 1.2; text-decoration: none !important; }
.mm-kat img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 8px rgba(60, 40, 20, .2); }
@media (min-width: 961px) { .mmenu { display: none !important; } }

/* начало */
.hero { overflow: hidden; background: linear-gradient(135deg, var(--cream) 0%, #fbf7ee 60%, var(--cream-d) 100%); }
.hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 48px 16px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.hero p { font-size: 1.15rem; color: var(--muted); max-width: 30em; margin-bottom: 1.6em; }
/* въртящата се купа: сянката е на обвивката, за да не се върти заедно с купата */
.hero-show { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-left: auto;
  filter: drop-shadow(14px 22px 26px rgba(60, 40, 20, .35)); }
.hero-show img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease;
  animation: vartene 112s linear infinite; }
.hero-show img.on { opacity: 1; }
@keyframes vartene { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-show img { animation: none; } }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.cat { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-align: center; color: var(--brown); font-weight: 700; transition: transform .15s; }
.cat:hover { transform: translateY(-3px); text-decoration: none; }
.cat img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.cat span { display: block; padding: 10px 8px 12px; font-size: .95rem; }

/* карти */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.card { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card-img { display: block; background: var(--card); }
.card-img img { aspect-ratio: 1; object-fit: contain; width: 100%; transition: transform .25s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-cat { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.card h3 { font-size: 1.12rem; margin: 2px 0 6px; }
.card h3 a { color: var(--brown); }
.card p { margin: 0 0 12px; font-size: .9rem; color: var(--muted); flex: 1; }
.card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.card h3 { min-height: 2.5em; display: flex; align-items: flex-start; }
.price { font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.price small { font-weight: 400; color: var(--muted); font-size: .8rem; }
/* превключвател „само наличните“ */
.nal { display: inline-flex; align-items: center; gap: 10px; color: var(--brown); font-weight: 700; font-size: .9rem; text-decoration: none !important;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 8px; box-shadow: 0 2px 0 #e2d6bd; }
.nal-sw { width: 38px; height: 22px; border-radius: 999px; background: #d8d0c0; position: relative; transition: background .2s; flex: 0 0 auto; }
.nal-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s; }
.nal.on .nal-sw { background: var(--green); }
.nal.on .nal-sw::after { left: 19px; }
.sec-h { flex-wrap: wrap; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--brown); font-size: .9rem; background: var(--card); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }

/* продукт */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 56px); align-items: start; max-width: 1500px; margin: 0 auto; }
.prod-img { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 96px; }
.prod-img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.prod h1 { margin-top: 4px; }
.buy { background: var(--cream); border-radius: var(--r); padding: 18px; margin: 18px 0 24px; }
.lbl { font-weight: 700; color: var(--brown); margin-bottom: 8px; }
.vgrp + .vgrp { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cream-d); }
.buy { max-height: none; }
.packs { display: flex; gap: 10px; flex-wrap: wrap; }
.pack { background: linear-gradient(180deg, #fff, #f7f2e8); border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; cursor: pointer;
  text-align: left; font: inherit; min-width: 96px; box-shadow: 0 3px 0 #ddd2bc; transition: transform .08s, box-shadow .08s; }
.pack:active { transform: translateY(3px); box-shadow: 0 0 0 #ddd2bc; }
.pack b { display: block; color: var(--brown); }
.pack span { font-size: .9rem; color: var(--muted); }
.pack.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pack.off { opacity: .5; cursor: default; }
.buy-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.qty button { background: none; border: 0; width: 40px; height: 44px; font-size: 1.2rem; cursor: pointer; color: var(--brown); }
.qty input { width: 40px; border: 0; text-align: center; font: 700 1rem inherit; background: transparent; }
.desc { font-size: 1.02rem; }

/* разфасовките — таблица: грамажите са колони */
.vtab { display: grid; gap: 8px; }
.vred { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(var(--n), 96px); gap: 8px; align-items: center; }
.vred .vime { font-weight: 700; color: var(--brown); font-size: .92rem; line-height: 1.25; }
.vglava span { font-size: .78rem; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.vglava .vime { text-align: left; }
.vred .pack { min-width: 0; width: 100%; text-align: center; padding: 7px 4px; }
.vred .pack small { display: none; }
.vred .pack b { display: block; font-size: .92rem; color: var(--ink); }
.vred .pack.off b { color: var(--muted); font-weight: 500; font-size: .75rem; }
.vred.izch { opacity: .55; }
.vred + .vred { padding-top: 8px; border-top: 1px solid var(--cream-d); }
.vglava + .vred { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
  .vred { grid-template-columns: repeat(var(--n), 1fr); }
  .vred .vime { grid-column: 1 / -1; }
  .vglava { display: none; }
  .vred .pack small { display: block; font-size: .72rem; color: var(--muted); }
}

.izcherpan { display: inline-block; margin: 14px 0 20px; padding: 8px 18px; border-radius: 999px; background: var(--cream); color: var(--muted); font-weight: 700; }

/* количка */
.co { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; max-width: 1400px; margin: 0 auto; }
.lines { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 26px; }
.line { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line img { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; }
.line .ln { flex: 1; min-width: 0; }
.line .ln b { display: block; color: var(--brown); }
.line .ln small { color: var(--muted); }
.line .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.3rem; padding: 4px 8px; }
.line .qty input { width: 32px; }
.line .qty button { width: 32px; height: 36px; }
.lines.static { margin: 20px 0; }
.line.tot, .sum-r.tot { font-size: 1.15rem; }
.line.tot { justify-content: space-between; }
.static .line { justify-content: space-between; }
.form h2 { margin-top: 26px; }
.form label { display: block; font-weight: 600; font-size: .9rem; color: var(--brown); margin-bottom: 12px; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { display: block; width: 100%; margin-top: 4px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: var(--card); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: transparent; }
.form .bad { border-color: var(--err) !important; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.seg label { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
.seg label:has(input:checked) { border-color: var(--green); background: #eef5ec; }
.seg input { accent-color: var(--green); }
.check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.check input { margin-top: 5px; accent-color: var(--green); }
.pays { display: grid; gap: 8px; margin-bottom: 16px; }
.pay { display: flex !important; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 !important; cursor: pointer; }
.pay:has(input:checked) { border-color: var(--green); background: #eef5ec; }
.pay input { accent-color: var(--green); }
.sum { position: sticky; top: 96px; }
.sum-in { background: var(--cream); border-radius: var(--r); padding: 20px; }
.sum-r { display: flex; justify-content: space-between; padding: 6px 0; }
.sum-r.tot { border-top: 1px solid var(--cream-d); margin-top: 6px; padding-top: 12px; }
.sum .btn { margin-top: 12px; }
.empty { text-align: center; padding: 40px 0; }

/* B2B и „За нас“ */
.row-btn { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.tri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tri-b { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; border-top: 4px solid var(--gold); }
.tri-b p { margin: 0; color: var(--muted); }
.edro { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.edro-g { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; }
.edro-g summary { cursor: pointer; font-weight: 700; color: var(--brown); }
.edro-g ul { margin: 10px 0 0; padding-left: 18px; columns: 1; font-size: .92rem; }
.edro-g li { margin-bottom: 3px; }
.lbl + .seg { margin-top: 0; }
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.about img { max-width: 320px; margin: 0 auto; }
@media (max-width: 760px) { .tri, .about { grid-template-columns: 1fr; } }

/* началото: коктейл — купи с ядки вляво, със сушени плодове вдясно, всяка се върти */
.hero-k { display: grid; grid-template-columns: 1fr minmax(260px, 1.05fr) 1fr; align-items: center; gap: 0; }
.hero-k { position: relative; }
/* истинските снимки отзад: лешник вляво, кайсия вдясно — избледняват към текста */
.hk-bg { position: absolute; top: 0; height: 100%; width: 40%; object-fit: cover; z-index: 0; pointer-events: none; }
.hk-bg-l { left: 0; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 98%); mask-image: linear-gradient(to right, #000 35%, transparent 98%); }
.hk-bg-r { right: 0; object-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 98%); mask-image: linear-gradient(to left, #000 35%, transparent 98%); }
/* композицията с купите пази пропорцията си — навсякъде изглежда като на широк екран, само в друг мащаб */
.hk-s { position: relative; width: 100%; aspect-ratio: 1.13 / 1; height: auto; z-index: 1; }
.hk-s span { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1;
  filter: drop-shadow(10px 16px 18px rgba(60, 40, 20, .38)); }
.hk-s img { width: 100%; height: 100%; animation: vartene var(--t) linear infinite; animation-direction: var(--d); }
.hk-t { text-align: center; padding: 30px 12px; position: relative; z-index: 2; }
.hk-t h1 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.hk-t p { margin: 0 auto 1.6em; }
@media (prefers-reduced-motion: reduce) { .hk-s img { animation: none; } }
@media (max-width: 860px) {
  .hero-k { grid-template-columns: 1fr; min-height: 0; padding: 10px 0; }
  .hk-s { height: auto; aspect-ratio: auto; display: flex; justify-content: center; padding: 10px 0; }
  .hk-s span:nth-of-type(n+6) { display: none; }
  .hk-s span { position: relative; left: auto; top: auto; width: 29%; margin: 0 -4.5%; }
  .hk-l { padding-top: 70px; } .hk-r { padding-bottom: 70px; }
  /* телефон: снимка с лешник горе, кайсия долу; избледняват към текста в средата */
  .hk-bg { width: 100%; height: 34%; object-position: center; }
  .hk-bg-l { top: 0; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
  .hk-bg-r { top: auto; bottom: 0; -webkit-mask-image: linear-gradient(to top, #000 60%, transparent); mask-image: linear-gradient(to top, #000 60%, transparent); }
  .hk-l { order: 0; } .hk-t { order: 1; padding: 10px 16px; } .hk-r { order: 2; }
}

/* тясна дървена лента под картината в началото */
.darvo-lenta { height: 11px; background: linear-gradient(180deg, rgba(255, 240, 215, .12), rgba(0, 0, 0, .06)), #d8b88a url(img/darvo-svetlo2.webp) center / cover;
  border-top: 1px solid rgba(60, 35, 10, .45); border-bottom: 1px solid rgba(60, 35, 10, .45);
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, .5), inset 0 -1px 0 rgba(255, 235, 200, .35), 0 3px 8px rgba(60, 35, 10, .15); }

/* документи */
.doc h2 { margin-top: 1.6em; font-size: 1.25rem; }

/* долу — нисък, на два реда */
/* подвалът — светло дърво като на купите, надписите черно гравирани като „BioNuts“ на купите */
.foot { margin-top: 40px; font-size: .9rem; color: #22120a;
  background: linear-gradient(180deg, rgba(255, 240, 215, .12), rgba(0, 0, 0, .06)), #d8b88a url(img/darvo-svetlo2.webp) center / cover;
  box-shadow: inset 0 3px 6px rgba(60, 35, 10, .3); }
.foot, .foot a { text-shadow: 1px 1px 0 rgba(255, 232, 196, .55), -.5px -.5px 0 rgba(0, 0, 0, .25); }
.foot a { color: #22120a; font-weight: 700; }
.foot a:hover { color: #000; text-decoration: none; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(16px, 3vw, 48px); }
/* логото — без бяло поле, в гравиран овал, врязан в дървото */
.foot-logo { display: block; padding: 10px 16px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 3px 4px 6px rgba(45, 22, 6, .55), inset -2px -2px 3px rgba(255, 236, 205, .55), 1px 1px 0 rgba(255, 236, 205, .6), -1px -1px 0 rgba(60, 30, 8, .35); }
.foot-logo img { height: 92px; width: auto; display: block; filter: drop-shadow(1px 2px 2px rgba(40, 20, 5, .4)); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; flex: 1; }
.foot-kont { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-weight: 600; }
.foot-dolu { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; padding: 10px clamp(16px, 3vw, 48px) 14px;
  border-top: 1px solid rgba(60, 35, 10, .35); box-shadow: inset 0 1px 0 rgba(255, 235, 200, .4); font-size: .86rem; font-weight: 700; color: #0d0603; }
@media (max-width: 760px) {
  .foot { font-size: .82rem; }
  .foot-in { flex-direction: column; gap: 10px; padding: 14px 16px 10px; text-align: center; }
  .foot-logo img { height: 70px; }
  .foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; width: 100%; max-width: 340px; }
  .foot-kont { flex-direction: row; gap: 14px; align-items: center; }
  .foot-dolu { flex-direction: column; align-items: center; text-align: center; font-size: .78rem; gap: 4px; padding: 10px 16px 14px; }
}
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: var(--brown); color: #fff;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; transition: transform .25s; z-index: 50; box-shadow: var(--shadow); }
.toast.on { transform: translateX(-50%) translateY(0); }

/* админ */
.adm .tbl { overflow-x: auto; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 28px; }
.adm table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.adm th, .adm td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.adm th { background: var(--cream); color: var(--brown); }
.adm tr.warn td { background: #fff4e5; }
.adm select { max-width: 220px; font: inherit; }
.inl { display: inline-flex; gap: 8px; align-items: center; margin: 6px 12px 6px 0; flex-wrap: wrap; }

/* средни екрани (квадратни монитори, таблети хоризонтално) — лентата да се събира */
@media (max-width: 1450px) {
  .nav > a, .dd-t { font-size: .95rem; }
  .nav { gap: 18px; }
  .search input { width: 130px; }
  .top-in { gap: 14px; }
}
@media (max-width: 1100px) {
  .search { display: none; }
  .cart-l { display: none; }
  .cart-btn { padding: 8px 12px; }
}
@media (max-width: 960px) {
  .search { display: none; }
  .burger { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 16px; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav.open { align-items: stretch; gap: 0; }
  .dd-m { position: static; display: block; box-shadow: none; padding: 0 0 0 14px; margin: 0; background: transparent; }
  .dd-m a { padding: 8px 0; font-weight: 400; }
  .top-in { gap: 10px; }
  .top-in .logo { margin-right: auto; }
  .cart-l { display: none; }
  .cart-btn { padding: 8px 12px; }
  .prod, .co { grid-template-columns: 1fr; gap: 20px; }
  .prod-img, .sum { position: static; }
}
@media (max-width: 600px) {
  .line { display: grid; grid-template-columns: 58px 1fr auto; grid-template-areas: "img ime x" "img broi suma"; gap: 6px 12px; align-items: center; }
  .line img { grid-area: img; align-self: start; }
  .line .ln { grid-area: ime; }
  .line .ln b { font-size: .95rem; line-height: 1.25; }
  .line .x { grid-area: x; justify-self: end; }
  .line .qty { grid-area: broi; justify-self: start; }
  .line .lsum { grid-area: suma; justify-self: end; }
  .hero-in { grid-template-columns: 1fr; padding: 28px 16px; }
  .hero-show { width: min(300px, 80%); margin: 8px auto 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-b { padding: 10px 12px 12px; }
  .card p { display: none; }
  .card-cat { display: none; }
  .card h3 { font-size: 1.02rem; margin: 0 0 6px; }
  .card-f .price { text-align: left; }
  .card-f { flex-direction: column; align-items: stretch; }
  .card-f .btn { width: 100%; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .logo img { height: 48px; }
}

/* телефон хоризонтално: ниско и широко — началото е като на компютър, само смалено, за да се събере на един екран */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in { height: 58px; }
  .logo img { height: 40px; }
  .logo { padding: 3px 8px; }
  .hero-k { grid-template-columns: 1fr minmax(240px, 1.2fr) 1fr; min-height: 0; padding: 0; }
  .hk-s { display: block; height: auto; aspect-ratio: 1.13 / 1; padding: 0 !important; }
  .hk-s span { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; }
  .hk-l, .hk-t, .hk-r { order: 0; }
  .hk-t { padding: 10px 6px; }
  .hk-t h1 { font-size: 1.35rem; margin-bottom: .4em; }
  .hk-t p { font-size: .82rem; margin-bottom: .9em; }
  .hk-t .btn { padding: 9px 18px; font-size: .88rem; }
  .hk-bg { width: 40%; height: 100%; top: 0; bottom: auto; object-position: center; }
  .hk-bg-l { left: 0; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 98%); mask-image: linear-gradient(to right, #000 35%, transparent 98%); }
  .hk-bg-r { right: 0; left: auto; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 98%); mask-image: linear-gradient(to left, #000 35%, transparent 98%); }
  .mmenu { top: 58px; }
}

/* началото заема точно целия първи екран: лентата + картината + дървената лента = височината на прозореца */
:root { --top-h: 85px; }
@media (min-width: 861px) {
  .hero-k { height: calc(100vh - var(--top-h) - 11px); height: calc(100svh - var(--top-h) - 11px); min-height: 420px; }
  .hk-l { justify-self: end; }
  .hk-r { justify-self: start; }
  .hk-s { width: 100%; }   /* купите не растат с височината — да се виждат и петте; празното горе/долу е снимката */
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  :root { --top-h: 59px; }
  .hero-k { height: calc(100vh - var(--top-h) - 11px); height: calc(100svh - var(--top-h) - 11px); min-height: 0; }
  .hk-l { justify-self: end; } .hk-r { justify-self: start; }
  .hk-s { width: 100%; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .hk-s span:nth-of-type(n+6) { display: block; }
}


/* по-квадратни екрани (по-тесни от 16:10): колоните са тесни и високи — купите са по-големи и в зигзаг по цялата височина */
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .hero-k { align-items: stretch; }
  .hk-s { aspect-ratio: auto; height: 100%; width: 100%; }
  .hk-s span { left: var(--x2); top: var(--y2); width: var(--w2); }
  .hk-t { align-self: center; }
}

/* широк екран: купите по цялата височина на картината — центрове в % от колоната, размер по височината
   (но не повече, отколкото позволява ширината, за да не стигат до надписа); горе и долу излизат леко */
@media (min-width: 861px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .hero-k { align-items: stretch; }
  .hk-t { align-self: center; }
  .hk-s { aspect-ratio: auto !important; height: 100% !important; width: 100% !important; container-type: size; display: block; padding: 0 !important; }
  .hk-s span { position: absolute; left: var(--cx); top: var(--cy); width: calc(var(--wh) * min(1cqh, 1cqw)); margin: 0;
    transform: translate(-50%, -50%); }
}
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .hk-s span { left: var(--x2); top: var(--y2); width: var(--w2); transform: none; }
}

/* по-малко бяло: снимките стигат до средата и избледняват с 60% по-малко; зад надписа — само лек ореол */
.hk-bg { width: 56% !important; }
.hk-bg-l { -webkit-mask-image: linear-gradient(to right, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to right, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
.hk-bg-r { -webkit-mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
.hk-t { position: relative; z-index: 2; }
.hk-t::before { content: ''; position: absolute; inset: -10% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 251, 243, .78), rgba(255, 251, 243, .45) 60%, rgba(255, 251, 243, 0)); }
@media (max-width: 860px) {
  .hk-bg { width: 100% !important; height: 55% !important; }
  .hk-bg-l { -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
  .hk-bg-r { -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .hk-bg { width: 56% !important; height: 100% !important; }
  .hk-bg-l { -webkit-mask-image: linear-gradient(to right, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to right, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
  .hk-bg-r { -webkit-mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; mask-image: linear-gradient(to left, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
}

/* вертикален телефон: още един ред купи над горния — шахматно, леко застъпен с реда под него */
.hk-red2 { display: none !important; }
@media (max-width: 860px) and (min-height: 521px) {
  .hk-red2 { display: flex !important; order: 0; justify-content: center; margin-top: -9%; padding: 0 !important; position: relative; z-index: 1; }
  .hk-red2 span { position: relative; flex: 0 0 29%; width: 29%; margin: 0 -4.5%; }   /* 6 купи — крайните излизат извън екрана */
  .hk-l { position: relative; z-index: 2; order: -1 !important; padding-top: 30px !important; }
  .hero-k { align-content: center; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .hk-red2 { display: none !important; }
}

/* по-дълбоко издълбаване около логото (горе и в подвала): тъмна вътрешна сянка, светъл долен ръб, потъмняло дъно и изпъкнал кант отвън */
.logo, .foot-logo {
  background: radial-gradient(ellipse at 42% 38%, rgba(0, 0, 0, 0) 45%, rgba(45, 20, 4, .22) 100%);
  box-shadow:
    inset 5px 7px 12px rgba(40, 18, 4, .72),
    inset -3px -4px 6px rgba(255, 240, 215, .65),
    inset 0 0 0 2px rgba(60, 30, 8, .4),
    0 0 0 3px rgba(255, 238, 208, .6),
    0 0 0 5px rgba(70, 36, 10, .35),
    3px 4px 7px rgba(60, 30, 8, .3) !important;
}
.logo img, .foot-logo img { filter: drop-shadow(2px 3px 3px rgba(35, 15, 3, .5)); }

/* квадратни екрани (по-тесни от 16:10, ≥861px): подредбата от вертикалния телефон —
   два реда ядки отгоре (5 + 6 шахматно), надписът в средата, ред панери отдолу */
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .hero-k { grid-template-columns: 1fr !important; align-items: center !important; align-content: center; justify-items: stretch; }
  .hk-s { aspect-ratio: auto !important; height: auto !important; width: 100% !important; container-type: normal !important;
    display: flex !important; justify-content: center; padding: 0 !important; overflow: visible; }
  .hk-s span { position: relative !important; left: auto !important; top: auto !important; transform: none !important;
    flex: 0 0 min(24%, 24svh); width: min(24%, 24svh) !important; margin: 0 -2%; }
  .hk-l span:nth-of-type(n+6), .hk-r span:nth-of-type(n+6) { display: none; }
  .hk-l { order: -1; position: relative; z-index: 2; padding-top: 14px !important; }
  .hk-red2 { display: flex !important; order: 0; margin-top: -6%; position: relative; z-index: 1; }
  .hk-red2 span { flex: 0 0 min(24%, 24svh); }
  .hk-t { order: 1; align-self: center; padding: 6px 16px !important; }
  .hk-r { order: 2; padding-bottom: 14px !important; }
  .hk-bg { width: 100% !important; height: 55% !important; object-position: center; }
  .hk-bg-l { top: 0 !important; left: 0; -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
  .hk-bg-r { top: auto !important; bottom: 0; right: 0; -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important;
    mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%) !important; }
}

/* B2B: два раздела — пакетирани и непакетирани */
.razd-gl { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.razd-tab { padding: 10px 22px; border-radius: 999px; font-weight: 800; color: var(--brown); background: var(--card); border: 1px solid var(--line);
  text-decoration: none !important; box-shadow: 0 3px 0 #e2d6bd; }
.razd-tab.on { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 3px 0 #1d4521; }
.razd-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.razd-h p { margin: 0; max-width: 680px; }

/* кошница: изчистване */
.lines { margin-bottom: 10px; }
.lines-krai { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.izchisti { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: inherit; font-size: .9rem; padding: 7px 14px; cursor: pointer; }
.izchisti svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.izchisti:hover { color: #a3342b; border-color: #a3342b; }

/* клиенти по договор */
.dg-glava { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 1.05rem; }
.dg-firma { color: var(--brown); }
.dg-pct { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: .9rem; }
.dg-vhod { max-width: 460px; }
.dg-vhod input#dgEik, .dg-vhod input#dgKluch { font-size: 1.15rem; letter-spacing: .04em; }
.dg-nam { margin: -4px 0 12px; }
.dg-nam.ok { font-size: 1.1rem; }
.dg-upr { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: 14px 0; }
.dg-upr .razd-gl { margin: 0; }
.dg-tarsi { flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: #fff; }
.dg-izbr { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.dg-izbr input { accent-color: var(--green); }
.dg-tbl { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; }
.dg-tbl table { width: 100%; border-collapse: collapse; }
.dg-tbl th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 10px; border-bottom: 2px solid var(--line); position: sticky; top: 0; background: #fff; }
.dg-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dg-tbl .r { text-align: right; white-space: nowrap; }
.dg-tbl .c { text-align: center; }
.dg-kat td { background: var(--cream); color: var(--brown); font-weight: 800; padding: 9px 12px; }
.dg-img { width: 48px; padding-right: 0 !important; }
.dg-img img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: block; }
.dg-ime { font-weight: 600; color: var(--ink); }
.dg-ed { color: var(--muted); white-space: nowrap; }
.dg-c s { font-size: .82rem; }
.dg-pct-s { color: var(--green); font-weight: 700; }
.dg-q { display: inline-flex; }
.dg-q button { width: 32px; height: 34px; }
.dg-q input { width: 46px; }
.dg-s { font-weight: 700; color: var(--brown); min-width: 80px; }
.dg-r.izbran { background: #f2f8ef; }
.dg-krai { margin-top: 18px; }
.dg-krai textarea { width: 100%; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; }
.dg-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px 18px; background: #fff; border-radius: var(--r); box-shadow: 0 -4px 18px rgba(60, 40, 20, .14); font-size: 1.05rem; }
.dg-ok { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 18px; background: #eef5ec; border-radius: var(--r); }
.dg-ok p { margin: 0; }
@media (max-width: 640px) {
  .dg-tbl thead { display: none; }
  .dg-tbl tr.dg-r { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "img ime ime" "img ed c" "q q s"; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .dg-tbl tr.dg-r[hidden], .dg-tbl tr.dg-kat[hidden] { display: none; }
  .dg-tbl tr.dg-r td { border: 0; padding: 0; }
  .dg-img { grid-area: img; } .dg-ime { grid-area: ime; } .dg-ed { grid-area: ed; } .dg-c { grid-area: c; }
  .dg-tbl tr.dg-r td.c { grid-area: q; text-align: left; margin-top: 6px; } .dg-s { grid-area: s; align-self: center; text-align: right; }
  .dg-tbl tr.dg-kat { display: block; } .dg-tbl tr.dg-kat td { display: block; }
}
.dg > .tbl { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; }
.dg > .tbl table { width: 100%; border-collapse: collapse; }
.dg > .tbl th, .dg > .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.dg > .tbl th { background: var(--cream); color: var(--brown); }
.dg > .tbl .r { text-align: right; }
.adm .box { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 18px; }
.adm .inl { display: inline-flex; gap: 8px; align-items: center; margin: 2px 6px 2px 0; }
.adm #admEik { padding: 8px 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; width: 180px; }
.dg-nov { border: 2px solid var(--green); }
.dg-kl { font: 800 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; color: var(--green); user-select: all; }
/* клиенти по договор: бежово вместо бяло */
.dg-tarsi, .dg-krai textarea, .dg-vhod input { background: var(--cream); border-color: var(--cream-d); }
.dg-tarsi:focus, .dg-krai textarea:focus { outline: 2px solid var(--green); border-color: transparent; }
.dg-tbl, .dg-tbl th, .dg-bar, .dg > .tbl { background: var(--cream); }
.dg-tbl th, .dg-tbl td, .dg > .tbl td { border-color: var(--cream-d); }
.dg-kat td, .dg > .tbl th { background: var(--cream-d); }
.dg-q { background: #fbf7ee; border-color: var(--cream-d); }
.dg-r.izbran { background: #e9efd9; }
.dg .razd-tab:not(.on) { background: var(--cream); border-color: var(--cream-d); }
/* „За нас“: двете години */
.about-god { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
.about-god::before { content: ''; position: absolute; left: 8%; right: 8%; top: 34px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--green)); border-radius: 3px; }
.ag { text-align: center; padding: 0 18px; position: relative; }
.ag-g { display: inline-block; position: relative; z-index: 1; font: 800 1.9rem/1 'Lora', Georgia, serif; color: #fff; background: var(--green);
  padding: 14px 24px; border-radius: 999px; box-shadow: 0 4px 0 #1d4521, 0 8px 16px rgba(40, 60, 30, .25); }
.ag:first-child .ag-g { background: var(--gold); box-shadow: 0 4px 0 #8f6f2c, 0 8px 16px rgba(80, 60, 20, .25); }
.ag p { max-width: 360px; margin: 16px auto 0; color: var(--brown); font-weight: 600; }
.about-btn { margin-top: 26px; justify-content: center; }
@media (max-width: 640px) { .about-god { grid-template-columns: 1fr; gap: 26px; } .about-god::before { display: none; } }
/* търсачката: бутонче с лупа */
.search { position: relative; align-items: center; }
@media (min-width: 1101px) { .search { display: flex; } }
.search input { padding-right: 38px; }
.search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 #1d4521; padding: 0; }
.search-btn:hover { background: var(--green-d); }
.search-btn svg { width: 16px; height: 16px; }

/* телефон и таблет: в лентата е само лупата; полето се отваря под лентата */
@media (max-width: 1100px) {
  .search { display: flex; position: static; margin-left: auto; }
  .search input { display: none; }
  .search-btn { position: static; transform: none; width: 38px; height: 38px; }
  .search-btn svg { width: 18px; height: 18px; }
  .search.open input { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); width: auto; z-index: 30;
    padding: 12px 18px; font-size: 1rem; background: var(--card); box-shadow: 0 8px 22px rgba(60, 40, 20, .25), inset 0 0 0 1px var(--cream-d); }
}
/* марката: орехче вместо „о“ */
img.oreh { display: inline-block; height: .8em; width: auto; vertical-align: -.06em; margin: 0 .03em; filter: grayscale(1) contrast(1.15); }
.about-btn + * { }
section .tri:has(> .tri-b:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { section .tri:has(> .tri-b:nth-child(3):last-child) { grid-template-columns: 1fr; } }
/* падащото меню „Продукти“ — като полето за търсене: дървото на лентата с бежов оттенък, издълбано */
.dd-m { background: linear-gradient(rgba(246, 240, 227, .28), rgba(246, 240, 227, .28)), #d8b88a url(img/darvo-svetlo2.webp) center / cover;
  box-shadow: inset 2px 2px 4px rgba(45, 22, 6, .5), inset -1px -1px 2px rgba(255, 236, 205, .55), 0 8px 18px rgba(60, 35, 10, .3); }
.dd-m a { color: #22120a; font-weight: 700; text-shadow: 1px 1px 0 rgba(255, 232, 196, .6); }
.dd-m a:hover { background: rgba(246, 240, 227, .5); }
/* логото — 60% по-голямо; лентата остава същата, а около логото дървото изпъква надолу с овал */
.top-in .logo { position: relative; z-index: 2; align-self: flex-start; margin-top: 5px; padding: 6px 7px;
  background: none !important; box-shadow: none !important; }
.top-in .logo img { height: 117px; position: relative; z-index: 1; }
/* издълбаният овал (както беше), сега върху изпъкналата плоча */
.top-in .logo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at 42% 38%, rgba(0, 0, 0, 0) 45%, rgba(45, 20, 4, .22) 100%);
  box-shadow: inset 5px 7px 12px rgba(40, 18, 4, .72), inset -3px -4px 6px rgba(255, 240, 215, .65), inset 0 0 0 2px rgba(60, 30, 8, .4),
    0 0 0 3px rgba(255, 238, 208, .6), 0 0 0 5px rgba(70, 36, 10, .35), 3px 4px 7px rgba(60, 30, 8, .3); }
/* плочата: същото дърво, видима само под лентата — овалът „виси“ от нея */
.top-in .logo::before { content: ''; position: absolute; inset: -19px -26px; border-radius: 50%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 240, 215, .14), rgba(0, 0, 0, .05)), #d8b88a url(img/darvo-svetlo2.webp) center / cover;
  border: 1px solid rgba(60, 35, 10, .45);
  clip-path: inset(var(--lenta-dolu, 96px) -24px -24px -24px);
  filter: drop-shadow(0 5px 7px rgba(60, 35, 10, .35)); }
@media (max-width: 860px) {
  .top-in .logo img { height: 85px; }
  .top-in .logo { margin-top: 4px; padding: 4px 9px; }
  .top-in .logo::before { inset: -13px -18px; --lenta-dolu: 92px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo img { height: 70px; }
  .top-in .logo { margin-top: 3px; padding: 3px 8px; }
  .top-in .logo::before { inset: -11px -15px; --lenta-dolu: 64px; }
}
/* овалът се присъединява към лентата с обратни (вдлъбнати) заобления, не с ъгъл */
.top-in .logo::before { clip-path: none; border: 0; filter: none; border-radius: 0; }
.top-in .logo { filter: drop-shadow(0 5px 6px rgba(60, 35, 10, .32)); }
.top-in .logo::before { top: 77.0px; left: -33.6px; width: 222.5px; height: 69.0px; right: auto; bottom: auto; inset: auto; top: 77.0px; left: -33.6px;
  -webkit-mask: radial-gradient(103.6px 82.5px at 111.2px -13.5px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 16px, #000 16.6px) 0 0 / 28.3px 16px no-repeat, radial-gradient(circle at 100% 100%, transparent 16px, #000 16.6px) 100% 0 / 28.3px 16px no-repeat;
  mask: radial-gradient(103.6px 82.5px at 111.2px -13.5px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 16px, #000 16.6px) 0 0 / 28.3px 16px no-repeat, radial-gradient(circle at 100% 100%, transparent 16px, #000 16.6px) 100% 0 / 28.3px 16px no-repeat; }
@media (max-width: 860px) {
  .top-in .logo::before { top: 78.0px; left: 1.7px; width: 116.7px; height: 26.0px; right: auto; bottom: auto; inset: auto; top: 78.0px; left: 1.7px;
  -webkit-mask: radial-gradient(78.0px 58.5px at 58.4px -32.5px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 11px, #000 11.6px) 0 0 / 31.7px 11px no-repeat, radial-gradient(circle at 100% 100%, transparent 11px, #000 11.6px) 100% 0 / 31.7px 11px no-repeat;
  mask: radial-gradient(78.0px 58.5px at 58.4px -32.5px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 11px, #000 11.6px) 0 0 / 31.7px 11px no-repeat, radial-gradient(circle at 100% 100%, transparent 11px, #000 11.6px) 100% 0 / 31.7px 11px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { top: 53.0px; left: -11.8px; width: 123.3px; height: 32.0px; right: auto; bottom: auto; inset: auto; top: 53.0px; left: -11.8px;
  -webkit-mask: radial-gradient(64.8px 48.0px at 61.7px -16.0px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 9px, #000 9.6px) 0 0 / 21.9px 9px no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.6px) 100% 0 / 21.9px 9px no-repeat;
  mask: radial-gradient(64.8px 48.0px at 61.7px -16.0px, #000 99.4%, transparent 100%), radial-gradient(circle at 0 100%, transparent 9px, #000 9.6px) 0 0 / 21.9px 9px no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.6px) 100% 0 / 21.9px 9px no-repeat; }
}
/* едно и също дърво: лентата и овалът ползват текстурата в един мащаб (100vw), а овалът взима своето парче от нея */
.top { background: linear-gradient(180deg, rgba(255, 240, 215, .14), rgba(0, 0, 0, .05)), #d8b88a url(img/darvo-svetlo2.webp) 0 calc((84px - 26vw) / 2) / 100vw auto no-repeat; }
.top-in .logo::before { background: linear-gradient(rgba(0, 0, 0, .045), rgba(0, 0, 0, .045)), #d8b88a url(img/darvo-svetlo2.webp) no-repeat;
  background-size: 100vw auto;
  background-position: calc(-1 * (clamp(16px, 3vw, 48px) + var(--pl))) calc((84px - 26vw) / 2 - var(--pt)); }
.top-in .logo::before { --pl: -33.6px; --pt: 82px; }
@media (max-width: 860px) { .top-in .logo::before { --pl: 1.7px; --pt: 82px; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top { background-position: 0 calc((58px - 26vw) / 2), 0 calc((58px - 26vw) / 2); }
  .top-in .logo::before { --pl: -11.8px; --pt: 56px; background-position: calc(-1 * (clamp(16px, 3vw, 48px) + var(--pl))) calc((58px - 26vw) / 2 - var(--pt)); }
}
/* обратните заобления — кръгът се допира и до лентата, и до овала */
.top-in .logo::before { inset: auto; top: 77.0px; left: -35.3px; width: 225.9px; height: 69.0px; --pl: -35.3px;
  -webkit-mask: radial-gradient(103.6px 82.5px at 113.0px -13.5px, #000 99.4%, transparent 100%), radial-gradient(circle 16px at 0 19.0px, transparent 16px, #000 16.7px) 0 0 / 13.4px 13.7px no-repeat, radial-gradient(circle 16px at 100% 19.0px, transparent 16px, #000 16.7px) 100% 0 / 13.4px 13.7px no-repeat;
  mask: radial-gradient(103.6px 82.5px at 113.0px -13.5px, #000 99.4%, transparent 100%), radial-gradient(circle 16px at 0 19.0px, transparent 16px, #000 16.7px) 0 0 / 13.4px 13.7px no-repeat, radial-gradient(circle 16px at 100% 19.0px, transparent 16px, #000 16.7px) 100% 0 / 13.4px 13.7px no-repeat; }
@media (max-width: 860px) {
  .top-in .logo::before { inset: auto; top: 78.0px; left: -6.7px; width: 133.4px; height: 26.0px; --pl: -6.7px;
  -webkit-mask: radial-gradient(78.0px 58.5px at 66.7px -32.5px, #000 99.4%, transparent 100%), radial-gradient(circle 12px at 0 15.0px, transparent 12px, #000 12.7px) 0 0 / 6.7px 6.9px no-repeat, radial-gradient(circle 12px at 100% 15.0px, transparent 12px, #000 12.7px) 100% 0 / 6.7px 6.9px no-repeat;
  mask: radial-gradient(78.0px 58.5px at 66.7px -32.5px, #000 99.4%, transparent 100%), radial-gradient(circle 12px at 0 15.0px, transparent 12px, #000 12.7px) 0 0 / 6.7px 6.9px no-repeat, radial-gradient(circle 12px at 100% 15.0px, transparent 12px, #000 12.7px) 100% 0 / 6.7px 6.9px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { inset: auto; top: 53.0px; left: -15.1px; width: 129.8px; height: 32.0px; --pl: -15.1px;
  -webkit-mask: radial-gradient(64.8px 48.0px at 64.9px -16.0px, #000 99.4%, transparent 100%), radial-gradient(circle 10px at 0 13.0px, transparent 10px, #000 10.7px) 0 0 / 7.4px 8.1px no-repeat, radial-gradient(circle 10px at 100% 13.0px, transparent 10px, #000 10.7px) 100% 0 / 7.4px 8.1px no-repeat;
  mask: radial-gradient(64.8px 48.0px at 64.9px -16.0px, #000 99.4%, transparent 100%), radial-gradient(circle 10px at 0 13.0px, transparent 10px, #000 10.7px) 0 0 / 7.4px 8.1px no-repeat, radial-gradient(circle 10px at 100% 13.0px, transparent 10px, #000 10.7px) 100% 0 / 7.4px 8.1px no-repeat; }
}
/* телефон: повече дърво в овала (12.10.2026) */
@media (max-width: 860px) {
  .top-in .logo::before { inset: auto; top: 78.0px; left: -20.7px; width: 163.4px; height: 36.0px; --pl: -20.7px;
  -webkit-mask: radial-gradient(88.0px 67.5px at 81.7px -31.5px, #000 99.4%, transparent 100%), radial-gradient(circle 13px at 0 16.0px, transparent 13px, #000 13.7px) 0 0 / 8.0px 8.2px no-repeat, radial-gradient(circle 13px at 100% 16.0px, transparent 13px, #000 13.7px) 100% 0 / 8.0px 8.2px no-repeat;
  mask: radial-gradient(88.0px 67.5px at 81.7px -31.5px, #000 99.4%, transparent 100%), radial-gradient(circle 13px at 0 16.0px, transparent 13px, #000 13.7px) 0 0 / 8.0px 8.2px no-repeat, radial-gradient(circle 13px at 100% 16.0px, transparent 13px, #000 13.7px) 100% 0 / 8.0px 8.2px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { inset: auto; top: 53.0px; left: -24.5px; width: 150.8px; height: 40.0px; --pl: -24.5px;
  -webkit-mask: radial-gradient(72.8px 55.0px at 75.4px -15.0px, #000 99.4%, transparent 100%), radial-gradient(circle 11px at 0 14.0px, transparent 11px, #000 11.7px) 0 0 / 8.6px 9.3px no-repeat, radial-gradient(circle 11px at 100% 14.0px, transparent 11px, #000 11.7px) 100% 0 / 8.6px 9.3px no-repeat;
  mask: radial-gradient(72.8px 55.0px at 75.4px -15.0px, #000 99.4%, transparent 100%), radial-gradient(circle 11px at 0 14.0px, transparent 11px, #000 11.7px) 0 0 / 8.6px 9.3px no-repeat, radial-gradient(circle 11px at 100% 14.0px, transparent 11px, #000 11.7px) 100% 0 / 8.6px 9.3px no-repeat; }
}
/* на телефон текстурата е твърде ниска (0,26 × ширината) и долът на овала оставаше гол цвят — поне 680px широка */
.top { background-size: auto, max(100vw, 680px) auto; background-position: 0 0, 0 calc((84px - max(26vw, 176.8px)) / 2); }
.top-in .logo::before { background-size: auto, max(100vw, 680px) auto;
  background-position: 0 0, calc(-1 * (clamp(16px, 3vw, 48px) + var(--pl))) calc((84px - max(26vw, 176.8px)) / 2 - var(--pt)); }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top { background-position: 0 0, 0 calc((58px - max(26vw, 176.8px)) / 2); }
  .top-in .logo::before { background-position: 0 0, calc(-1 * (clamp(16px, 3vw, 48px) + var(--pl))) calc((58px - max(26vw, 176.8px)) / 2 - var(--pt)); }
}
/* телефон: удебеляването на овала −10% */
@media (max-width: 860px) {
  .top-in .logo::before { inset: auto; top: 78.0px; left: -17.3px; width: 156.7px; height: 33.9px; --pl: -17.3px;
  -webkit-mask: radial-gradient(85.3px 65.4px at 78.4px -31.5px, #000 99.4%, transparent 100%), radial-gradient(circle 13px at 0 16.0px, transparent 13px, #000 13.7px) 0 0 / 7.9px 8.0px no-repeat, radial-gradient(circle 13px at 100% 16.0px, transparent 13px, #000 13.7px) 100% 0 / 7.9px 8.0px no-repeat;
  mask: radial-gradient(85.3px 65.4px at 78.4px -31.5px, #000 99.4%, transparent 100%), radial-gradient(circle 13px at 0 16.0px, transparent 13px, #000 13.7px) 0 0 / 7.9px 8.0px no-repeat, radial-gradient(circle 13px at 100% 16.0px, transparent 13px, #000 13.7px) 100% 0 / 7.9px 8.0px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { inset: auto; top: 53.0px; left: -22.1px; width: 145.9px; height: 38.3px; --pl: -22.1px;
  -webkit-mask: radial-gradient(70.7px 53.3px at 73.0px -15.0px, #000 99.4%, transparent 100%), radial-gradient(circle 11px at 0 14.0px, transparent 11px, #000 11.7px) 0 0 / 8.5px 9.1px no-repeat, radial-gradient(circle 11px at 100% 14.0px, transparent 11px, #000 11.7px) 100% 0 / 8.5px 9.1px no-repeat;
  mask: radial-gradient(70.7px 53.3px at 73.0px -15.0px, #000 99.4%, transparent 100%), radial-gradient(circle 11px at 0 14.0px, transparent 11px, #000 11.7px) 0 0 / 8.5px 9.1px no-repeat, radial-gradient(circle 11px at 100% 14.0px, transparent 11px, #000 11.7px) 100% 0 / 8.5px 9.1px no-repeat; }
}
/* втори ред панери отдолу (шахматно, като ядките горе) — само на квадратен екран */
.hk-red3 { display: none !important; }
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .hk-red3 { display: flex !important; order: 3; margin-top: -6%; position: relative; z-index: 1; }
  .hk-red3 span { flex: 0 0 min(24%, 24svh); }
  .hk-r { position: relative; z-index: 2; padding-bottom: 0 !important; }
}
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .hk-s span, .hk-red2 span, .hk-red3 span { flex-basis: min(22%, 19.5svh) !important; width: min(22%, 19.5svh) !important; }
}
/* вертикален телефон: и отдолу втори ред панери, шахматно (като ядките горе) */
@media (max-width: 860px) and (min-height: 521px) {
  .hk-red3 { display: flex !important; order: 99; justify-content: center; margin-top: -9%; padding: 0 !important; position: relative; z-index: 1; }
  .hk-red3 span { position: relative; flex: 0 0 29%; width: 29%; margin: 0 -4.5%; }
  .hk-r { position: relative; z-index: 2; }
}
@media (max-width: 860px) and (min-height: 521px) {
  .hk-r { padding-bottom: 10px !important; }      /* празното отдолу отива под новия ред — иначе панерите не се застъпват */
  .hk-red3 { padding-bottom: 0 !important; }
}
/* широк екран: подзаглавието по-близо до заглавието — да не опира в купите и панерите */
@media (min-width: 861px) and (min-aspect-ratio: 1601/1000) {
  .hk-t h1 { margin-bottom: 8px !important; }
}
/* обратните заобления на овала под логото (tools/oval_maska.py) */
.top-in .logo::before { inset: auto; top: 79.0px; left: -45.3px; width: 245.9px; height: 67.0px; --pl: -45.3px;
  -webkit-mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat;
  mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat; }
@media (max-width: 860px) {
  .top-in .logo::before { inset: auto; top: 80.0px; left: -28.0px; width: 178.0px; height: 31.9px; --pl: -28.0px;
  -webkit-mask: radial-gradient(85.3px 65.4px at 89.0px -33.5px, #000 99.4%, transparent 100%), radial-gradient(circle 40px at 0 41.0px, transparent 38.8px, #000 39.6px) 0 0 / 19.5px 14.4px no-repeat, radial-gradient(circle 40px at 100% 41.0px, transparent 38.8px, #000 39.6px) 100% 0 / 19.5px 14.4px no-repeat;
  mask: radial-gradient(85.3px 65.4px at 89.0px -33.5px, #000 99.4%, transparent 100%), radial-gradient(circle 40px at 0 41.0px, transparent 38.8px, #000 39.6px) 0 0 / 19.5px 14.4px no-repeat, radial-gradient(circle 40px at 100% 41.0px, transparent 38.8px, #000 39.6px) 100% 0 / 19.5px 14.4px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { inset: auto; top: 55.0px; left: -31.7px; width: 165.0px; height: 36.3px; --pl: -31.7px;
  -webkit-mask: radial-gradient(70.7px 53.3px at 82.5px -17.0px, #000 99.4%, transparent 100%), radial-gradient(circle 30px at 0 31.0px, transparent 28.8px, #000 29.6px) 0 0 / 19.0px 15.6px no-repeat, radial-gradient(circle 30px at 100% 31.0px, transparent 28.8px, #000 29.6px) 100% 0 / 19.0px 15.6px no-repeat;
  mask: radial-gradient(70.7px 53.3px at 82.5px -17.0px, #000 99.4%, transparent 100%), radial-gradient(circle 30px at 0 31.0px, transparent 28.8px, #000 29.6px) 0 0 / 19.0px 15.6px no-repeat, radial-gradient(circle 30px at 100% 31.0px, transparent 28.8px, #000 29.6px) 100% 0 / 19.0px 15.6px no-repeat; }
}

/* широк екран: логото с овала — в средата на лентата; търсенето — най-вляво; менютата, езикът и кошницата — вдясно */
@media (min-width: 1101px) and (min-aspect-ratio: 1601/1000) {
  .top-in { position: relative; }
  .top-in .logo { position: absolute; left: 50%; top: 5px; margin: 0; transform: translateX(-50%); }
  .top-in .search { order: -1; margin-right: auto; }
  .top-in .nav { flex: 0 1 auto; margin-left: auto; }
}
@media (min-width: 1101px) and (min-aspect-ratio: 1601/1000) {
  .top-in .nav { display: contents; }
  .top-in .search { order: 1; margin-right: 0; }
  .top-in .nav > .dd { order: 2; }
  .top-in .nav > a:nth-of-type(1) { order: 3; }   /* За нас */
  .top-in .nav > a:nth-of-type(2) { order: 4; }   /* На едро · B2B */
  .top-in .nav > a:nth-of-type(3) { order: 5; margin-left: auto; }   /* Контакти — от тук вдясно от логото */
  .top-in .nav > a:nth-of-type(4) { order: 6; }
  .top-in .nav > a:nth-of-type(5) { order: 7; }
  .top-in .lang { order: 8; }
  .top-in .cart-btn { order: 9; }
  .top-in .burger { order: 10; }
}
@media (min-width: 1101px) and (max-width: 1320px) and (min-aspect-ratio: 1601/1000) {
  .cart-l { display: none; }
  .cart-btn { padding: 8px 12px; }
}

/* въртенето накъсваше: сянката (drop-shadow) се смяташе наново на всеки кадър за всяка купа.
   Купите са кръгли — сянката е неподвижен кръг под тях, а въртенето отива на видеокартата. */
.hk-s span { filter: none !important; }
.hk-s span::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 10px 16px 18px rgba(60, 40, 20, .38); pointer-events: none; }
.hk-s img { position: relative; }
@keyframes vartene { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* обратните заобления на овала под логото (tools/oval_maska.py) */
.top-in .logo::before { inset: auto; top: 79.0px; left: -45.3px; width: 245.9px; height: 67.0px; --pl: -45.3px; --pt: 84.0px;
  -webkit-mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat;
  mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat; }
@media (max-width: 860px) {
  .top-in .logo::before { inset: auto; top: 80.0px; left: -28.0px; width: 178.0px; height: 31.9px; --pl: -28.0px; --pt: 84.0px;
  -webkit-mask: radial-gradient(85.3px 65.4px at 89.0px -33.5px, #000 99.4%, transparent 100%), radial-gradient(circle 40px at 0 41.0px, transparent 38.8px, #000 39.6px) 0 0 / 19.5px 14.4px no-repeat, radial-gradient(circle 40px at 100% 41.0px, transparent 38.8px, #000 39.6px) 100% 0 / 19.5px 14.4px no-repeat;
  mask: radial-gradient(85.3px 65.4px at 89.0px -33.5px, #000 99.4%, transparent 100%), radial-gradient(circle 40px at 0 41.0px, transparent 38.8px, #000 39.6px) 0 0 / 19.5px 14.4px no-repeat, radial-gradient(circle 40px at 100% 41.0px, transparent 38.8px, #000 39.6px) 100% 0 / 19.5px 14.4px no-repeat; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .logo::before { inset: auto; top: 55.0px; left: -31.7px; width: 165.0px; height: 36.3px; --pl: -31.7px; --pt: 58.0px;
  -webkit-mask: radial-gradient(70.7px 53.3px at 82.5px -17.0px, #000 99.4%, transparent 100%), radial-gradient(circle 30px at 0 31.0px, transparent 28.8px, #000 29.6px) 0 0 / 19.0px 15.6px no-repeat, radial-gradient(circle 30px at 100% 31.0px, transparent 28.8px, #000 29.6px) 100% 0 / 19.0px 15.6px no-repeat;
  mask: radial-gradient(70.7px 53.3px at 82.5px -17.0px, #000 99.4%, transparent 100%), radial-gradient(circle 30px at 0 31.0px, transparent 28.8px, #000 29.6px) 0 0 / 19.0px 15.6px no-repeat, radial-gradient(circle 30px at 100% 31.0px, transparent 28.8px, #000 29.6px) 100% 0 / 19.0px 15.6px no-repeat; }
}
/* широк екран: по-широк овал; дървото центрирано като лентата — да е продължение на нейния цвят */
@media (min-width: 1101px) and (min-aspect-ratio: 1601/1000) {
  .top { background-position: 0 0, 50% calc((84px - max(26vw, 176.8px)) / 2); }
  .top-in .logo::before { inset: auto; top: 79.0px; left: -62.3px; width: 279.8px; height: 67.0px; --pl: -62.3px; --pt: 84.0px;
  -webkit-mask: radial-gradient(119.6px 82.5px at 139.9px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 36px at 0 37.0px, transparent 34.8px, #000 35.6px) 0 0 / 25.7px 21.6px no-repeat, radial-gradient(circle 36px at 100% 37.0px, transparent 34.8px, #000 35.6px) 100% 0 / 25.7px 21.6px no-repeat;
  mask: radial-gradient(119.6px 82.5px at 139.9px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 36px at 0 37.0px, transparent 34.8px, #000 35.6px) 0 0 / 25.7px 21.6px no-repeat, radial-gradient(circle 36px at 100% 37.0px, transparent 34.8px, #000 35.6px) 100% 0 / 25.7px 21.6px no-repeat; }
  .top-in .logo::before { background-position: 0 0, 50% calc((84px - max(26vw, 176.8px)) / 2 - var(--pt)); }
}
/* широк екран: по-широк овал; дървото центрирано като лентата — да е продължение на нейния цвят */
@media (min-width: 1101px) and (min-aspect-ratio: 1601/1000) {
  .top { background-position: 0 0, 50% calc((84px - max(26vw, 176.8px)) / 2); }
  .top-in .logo::before { inset: auto; top: 79.0px; left: -45.3px; width: 245.9px; height: 67.0px; --pl: -45.3px; --pt: 84.0px;
  -webkit-mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat;
  mask: radial-gradient(103.6px 82.5px at 123.0px -15.5px, #000 99.4%, transparent 100%), radial-gradient(circle 32px at 0 33.0px, transparent 30.8px, #000 31.6px) 0 0 / 24.4px 21.6px no-repeat, radial-gradient(circle 32px at 100% 33.0px, transparent 30.8px, #000 31.6px) 100% 0 / 24.4px 21.6px no-repeat; }
  .top-in .logo::before { background-position: 0 0, 50% calc((84px - max(26vw, 176.8px)) / 2 - var(--pt)); }
}

/* бягащ надпис: сайтът в реконструкция (REKONSTRUKCIA=1) */
.rekonstr { background: #4f3b2a; color: #f6f0e3; font-size: .82rem; font-weight: 700; letter-spacing: .02em; overflow: hidden; white-space: nowrap; height: 26px; line-height: 26px; }
.rekonstr-in { display: inline-block; animation: rekonstr 60s linear infinite; padding-left: 100%; }
.rekonstr-in span { padding-right: 6em; }
.rekonstr-in span::before { content: '⚠'; margin-right: .6em; color: #e9c46a; }
@keyframes rekonstr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .rekonstr-in { animation: none; padding-left: 16px; } }

/* хоризонтален телефон: логото с овала в средата (като широкия екран); търсенето вляво, езикът, кошницата и менюто вдясно */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in { position: relative; }
  .top-in .logo { position: absolute; left: 50%; top: 3px; margin: 0; transform: translateX(-50%); }
  .top-in .search { order: -1; margin: 0 auto 0 0 !important; }
  .top-in .lang { margin-left: auto; }
  .top { background-position: 0 0, 50% calc((58px - max(26vw, 176.8px)) / 2); }
  .top-in .logo::before { background-position: 0 0, 50% calc((58px - max(26vw, 176.8px)) / 2 - var(--pt)); }
}

/* хоризонтален телефон: търсачката е цялата (поле + лупа), вляво от логото */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .top-in .search { position: relative; display: flex; }
  .top-in .search input, .top-in .search.open input { display: block; position: static; width: min(190px, calc(50vw - 110px)); box-shadow: inset 2px 2px 4px rgba(45, 22, 6, .5), inset -1px -1px 2px rgba(255, 236, 205, .55);
    background: rgba(246, 240, 227, .28); padding: 7px 38px 7px 14px; font-size: .9rem; }
  .top-in .search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
  .top-in .search-btn svg { width: 16px; height: 16px; }
}

/* продукт: няколко разновидности наведнъж + връщане назад */
.nazad { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 7px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--cream-d); color: var(--brown); font-weight: 700; font-size: .92rem; box-shadow: 0 2px 0 #e2d6bd; }
.nazad:hover { text-decoration: none; border-color: var(--green); color: var(--green); }
.pack { position: relative; }
.pack .pn { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff;
  font-size: .75rem; font-weight: 800; line-height: 20px; text-align: center; }
.izb-pod { margin: 10px 0 0; }
.izbrani { margin-top: 14px; background: var(--card); border: 1px solid var(--cream-d); border-radius: 12px; padding: 8px 12px; }
.izb-gl { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.izb-red { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--cream-d); }
.izb-red:first-child { border-top: 0; }
.izb-ime { font-weight: 600; color: var(--ink); font-size: .92rem; }
.izb-red .qty button { width: 32px; height: 34px; }
.izb-red .qty input { width: 34px; }
.izb-red .x { background: none; border: 0; color: var(--muted); font-size: 1.3rem; cursor: pointer; padding: 2px 6px; }
#addBtn[disabled] { opacity: .55; cursor: default; }
.sled { margin-top: 14px; padding: 14px 16px; background: #eef5ec; border-radius: 12px; }
.sled b { color: var(--green); }
.sled-btn { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 520px) {
  .izb-red { grid-template-columns: 1fr auto auto; }
  .izb-red .izb-ime { grid-column: 1 / -1; }
  .sled-btn .btn { flex: 1; text-align: center; }
}
.izb-pod { margin: 0 0 12px; }
.sled-btn .btn { padding: 10px 18px; font-size: .95rem; white-space: nowrap; }
/* на телефон бутонът „Добави“ стои залепен долу, щом има избрано */
@media (max-width: 860px) {
  .buy-row.lepi { position: sticky; bottom: 0; z-index: 15; margin: 14px -18px -18px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(245, 238, 223, .96); box-shadow: 0 -6px 16px rgba(60, 40, 20, .18); border-radius: 14px 14px 0 0; }
  .buy-row.lepi .btn { width: 100%; }
  .sled-btn .btn { flex: 1 1 140px; white-space: normal; }
}