/* ============ Beekeeper of Ukraine — дизайн-система ============ */
:root{
  --bg:#141110; --bg2:#1a1611; --bg3:#241d15;
  /* --dim був #8a7a5c: 4.3:1 на картках, тобто нижче порогу читабельності для
     дрібного тексту (потрібно 4.5). Пояснення й підказки саме ним і набрані. */
  --text:#f6ecd9; --muted:#cbb98f; --dim:#9a8a6b;
  --gold:#f0b429; --gold2:#f4d35e;
  --line:#3a2e1c; --line2:#4a3a22;
  --danger:#c83c32; --danger2:#e0685e; --ok:#7fb069;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  /* Сайт темний завжди — кажемо це браузеру, щоб він не малював світлими
     своє: смуги прокрутки, календарі, списки, підказки автозаповнення. */
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Клавіатурний фокус на весь сайт. Раніше він був описаний лише для полів
   вводу, а кнопки й посилання лишалися з системним кільцем — синім на
   темно-коричневому. Через :focus-visible, а не :focus: миша не має лишати
   обведення після кліку, клавіатура — має. */
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:2px}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.55}
::selection{background:var(--gold);color:var(--bg)}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
img{max-width:100%;display:block}
button{font-family:inherit}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}

/* ---------- типографіка ---------- */
h1,h2,.h-serif{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--text)}
h1{font-size:56px;letter-spacing:.01em}
h2{font-size:38px}
.kicker{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.lead{color:var(--muted);font-size:16.5px;max-width:640px}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.dim{color:var(--dim);font-size:13px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:2px;
  font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:14px 28px;
  transition:all .18s ease;border:1px solid transparent;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--bg)!important;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold2);border-color:var(--gold2);color:var(--bg)!important}
.btn-line{background:transparent;color:var(--text)!important;border-color:var(--line2)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)!important}
.btn-sm{padding:9px 18px;font-size:12px}
.btn-xs{padding:7px 12px;font-size:11px}
.btn-danger{background:transparent;color:var(--danger2)!important;border-color:#5a2a24}
.btn-danger:hover{border-color:var(--danger);}
/* нема чого класти в кошик: кнопка лишається на місці, але не вдає, що працює */
.btn:disabled,.btn[disabled]{background:transparent;color:var(--dim)!important;border-color:var(--line2);
  cursor:not-allowed;pointer-events:none}
.chip{display:inline-block;background:transparent;border:1px solid var(--line2);color:var(--muted);
  padding:9px 18px;border-radius:2px;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.active{background:var(--gold);border-color:var(--gold);color:var(--bg)}
button.chip{font-family:inherit;display:inline-flex;align-items:center;gap:8px}
/* значення, яке не поєднується з поточним вибором */
.chip.off{opacity:.4;text-decoration:line-through}
.chip.off:hover{border-color:var(--line2);color:var(--muted)}

/* ---------- шапка ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(20,17,16,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)!important}
.brand img{height:34px;width:34px;object-fit:cover;border-radius:50%;border:1px solid var(--line2);flex-shrink:0}
.brand-text{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.08em}
.nav-links{display:flex;gap:14px;font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap;flex-wrap:wrap}
.nav-links a{color:var(--text)}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
/* ---------- «Магазин» зі списком розділів ---------- */
/* Назва лишається посиланням у каталог, стрілка поруч відкриває розділи —
   тому це два окремі елементи в одній обгортці, а не один клікабельний пункт */
.nav-drop{position:relative;display:inline-flex;align-items:center;gap:4px}
.nav-drop-btn{background:none;border:0;padding:4px;margin:0;line-height:0;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;transition:color .15s}
.nav-drop-btn:hover{color:var(--gold)}
.nav-drop-btn svg{transition:transform .18s}
.nav-drop.is-open>.nav-drop-btn,.m-drop.is-open>.nav-drop-btn{color:var(--gold)}
.nav-drop.is-open>.nav-drop-btn svg,.m-drop.is-open>.nav-drop-btn svg{transform:rotate(180deg)}
/* Список висить під шапкою, тому і фон у нього щільний: напівпрозорий давав би
   крізь себе картки товарів, і читати пункти довелось би крізь мед */
.nav-drop-menu{position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;min-width:230px;
  max-height:min(70vh,520px);overflow-y:auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:4px;padding:8px 0;box-shadow:0 14px 34px rgba(0,0,0,.45);
  display:flex;flex-direction:column;text-transform:none;letter-spacing:0}
.nav-drop-menu[hidden]{display:none}
.nav-drop-menu a{display:block;padding:9px 18px;font-size:13.5px;font-weight:600;color:var(--text)}
.nav-drop-menu a:hover{background:var(--bg3);color:var(--gold)}
/* Підрозділ — крок усередину розділу, а не сусід йому */
.nav-drop-menu .nav-drop-sub{padding-left:34px;font-weight:500;font-size:13px;color:var(--muted)}
.nav-drop-menu .nav-drop-sub::before{content:'└';margin-right:8px;opacity:.5}
.nav-drop-all{border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:12px!important;color:var(--gold)!important}

.nav-side{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Площа натискання, а не розмір напису. «Кошик» і «Увійти» — дві найчастіші
   кнопки магазину, і на телефоні вони мали зону 40×20 px при рекомендованих
   44×44. Добираємо відступами: візуально рядок лишається тим самим, пальцю
   стає в що влучати. Відʼємний margin компенсує новий padding, щоб шапка не
   поповнішала. */
.nav-side a{color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.nav-side a:hover{color:var(--gold)}
.cart-link{position:relative;display:flex;align-items:center;gap:8px;color:var(--text)!important}
.cart-badge{background:var(--gold);color:var(--bg);border-radius:20px;font-size:11px;font-weight:800;padding:1px 7px}
/* ---------- пошук у шапці ---------- */
.nav-search{display:flex;align-items:center;border:1px solid var(--line2);border-radius:2px;
  background:var(--bg2);flex:0 1 220px;min-width:0;transition:border-color .18s}
.nav-search:focus-within{border-color:var(--gold)}
.nav-search input{flex:1;min-width:0;background:none;border:none;color:var(--text);
  font-family:inherit;font-size:13px;padding:10px 12px;outline:none}
.nav-search input::placeholder{color:var(--dim)}
/* хрестик, який Chrome малює в type=search, на темному тлі майже не видно
   й до того ж зсуває поле — прибираємо, очистити можна виділенням */
.nav-search input::-webkit-search-cancel-button{display:none}
.nav-search button{background:none;border:none;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0}
.nav-search button:hover{color:var(--gold)}
/* Підпис для зчитувача екрана: поле з самим placeholder лишається без назви,
   і «пошук» доводиться вгадувати за іконкою */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobile-menu-btn{display:none;background:none;border:1px solid var(--line2);color:var(--text);padding:8px 12px;border-radius:2px;cursor:pointer;font-size:16px}
.mobile-menu{display:none;background:var(--bg2);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 20px 16px}
.mobile-menu a{color:var(--text);font-weight:600;font-size:15px;padding:12px 0;border-bottom:1px solid var(--bg3)}
.mobile-menu.open{display:flex}
/* «Магазин» у мобільному меню: посилання лишається на всю ширину рядка, стрілка
   стоїть праворуч у ньому ж — щоб пальцем можна було влучити в обидва окремо */
.m-drop{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bg3)}
.m-drop>a{flex:1;border-bottom:0}
.m-drop>.nav-drop-btn{padding:12px 8px;min-width:44px;justify-content:center}
.m-drop-menu{display:flex;flex-direction:column;padding:4px 0 8px 14px;border-bottom:1px solid var(--bg3)}
.m-drop-menu[hidden]{display:none}
.m-drop-menu a{font-size:14px;padding:10px 0;border-bottom:0}
.m-drop-menu .nav-drop-sub{padding-left:16px;font-weight:500;color:var(--muted)}
.m-drop-menu .nav-drop-sub::before{content:'└';margin-right:8px;opacity:.5}
.m-drop-menu .nav-drop-all{color:var(--gold)}

/* ---------- банер акції ---------- */
.sale-banner{background:var(--gold);color:var(--bg);text-align:center;font-weight:700;font-size:13px;padding:9px 16px;letter-spacing:.03em}

/* ---------- секції ---------- */
.section{padding:88px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:96px 24px;max-width:1280px;margin:0 auto}
.hero-badge{color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.hero p{margin:22px 0 30px}
.hero-points{display:flex;flex-direction:column;gap:9px;margin-top:34px;color:var(--muted);font-size:14px}
.hero-points span::before{content:'✓  ';color:var(--gold);font-weight:800}
.hero-img{position:relative}
.hero-img img{border-radius:4px;border:1px solid var(--line2);width:100%;height:560px;object-fit:cover;object-position:top}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- лічильники ---------- */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.counter{text-align:center}
.counter b{display:block;font-family:var(--serif);font-size:44px;font-weight:700;color:var(--gold);animation:countUp .8s ease}
.counter span{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- картки товарів ---------- */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s, transform .2s}
.card:hover{border-color:var(--line2);transform:translateY(-3px)}
.card-img{aspect-ratio:1/1;background:var(--bg3);overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .card-img img{transform:scale(1.04)}
.card-img .ph{display:flex;align-items:center;justify-content:center;height:100%;font-size:44px;opacity:.35}
.badge{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:2px;text-transform:uppercase}
.badge.red{background:var(--danger);color:#fff}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
/* сторінка бренду: лого й пояснення, хто це */
.brand-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:0 0 22px;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.brand-head .brand-logo{max-width:120px;max-height:70px;object-fit:contain}
.brand-head > div{flex:1;min-width:220px}
/* лого поруч із назвою в характеристиках */
.brand-link{display:inline-flex;align-items:center;gap:7px}
.brand-link img{height:18px;width:auto;max-width:52px;object-fit:contain;vertical-align:middle}
/* чий товар — над назвою, дрібним: орієнтир, а не заголовок */
.card-brand{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-brand a{color:inherit}
.card-brand a:hover{color:var(--gold)}
.card-title{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25}
.card-title a{color:var(--text)}
.card-title a:hover{color:var(--gold)}
.card-desc{color:var(--muted);font-size:12.5px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.price{font-weight:800;font-size:15px;color:var(--gold)}
.price s{color:var(--dim);font-weight:600;font-size:13px;margin-right:8px}

/* ---------- сторінка товару ---------- */
.product-page{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.product-gallery img{border-radius:4px;border:1px solid var(--line);width:100%;object-fit:cover;aspect-ratio:1/1;background:var(--bg3)}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs .thumb{padding:0;background:none;border:1px solid var(--line);border-radius:3px;cursor:pointer;line-height:0;transition:border-color .15s}
.thumbs .thumb img{width:76px;height:76px;border-radius:2px;border:none;object-fit:cover;aspect-ratio:auto}
.thumbs .thumb:hover{border-color:var(--line2)}
.thumbs .thumb.active{border-color:var(--gold)}
.specs{width:100%;border-collapse:collapse;margin-top:8px}
.specs td{padding:9px 0;border-bottom:1px solid var(--bg3);font-size:14px}
.specs td:first-child{color:var(--dim);width:45%}
.availability{display:flex;flex-direction:column;gap:6px;margin-top:6px;font-size:13.5px}
.availability .yes{color:var(--ok)} .availability .no{color:var(--dim)}
/* «Виготовимо під замовлення» — відповідь, а не примітка: стоїть над переліком
   точок і набрана так, щоб її прочитали раніше за рядки «немає». */
.mto-lead{color:var(--gold);font-size:15px;font-weight:600;margin:0 0 10px}
/* Ціна за 100 г — під сумою, дрібним: орієнтир для порівняння, а не друга ціна.
   Окремим рядком, бо поруч із «600 грн» вона читалася б як частина суми. */
.price-unit{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--dim);letter-spacing:.02em;margin-top:4px}
.variants{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.qty-box{display:inline-flex;border:1px solid var(--line2);border-radius:2px}
.qty-box button{background:none;border:none;color:var(--text);width:38px;height:42px;font-size:17px;cursor:pointer}
.qty-box input{width:52px;background:none;border:none;border-left:1px solid var(--line2);border-right:1px solid var(--line2);color:var(--text);text-align:center;font-size:15px}

/* ---------- форми ---------- */
/* Типи перелічені навмисно (а не `input`), щоб не зачепити галки, радіо й
   кнопки. Але кожен забутий тут тип випадає зі стилю зовсім: поле лишається
   системним, вужчим за колонку, і довге значення в ньому не видно —
   саме так свого часу зникли посилання на соцмережі (type=url). */
input[type=text],input[type=url],input[type=search],input[type=number],input[type=email],
input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--text);border-radius:2px;
  padding:12px 14px;font-size:14.5px;font-family:inherit;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
/* Автозаповнення браузера. Chrome підставляє власний блідо-блакитний фон і темний
   текст — на чорній сторінці це світлі плями, які ріжуть очі, а фон ще й не
   перебивається через background-color (він службовий, з вищим пріоритетом).
   Тому заливаємо padding-box внутрішньою тінню, а текст фарбуємо -text-fill-color:
   ці дві властивості автозаповнення не чіпає. Рамка лишається своя — тінь inset
   під неї не лізе. */
input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus,input:-webkit-autofill:active,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:inset 0 0 0 100px var(--bg2);
  box-shadow:inset 0 0 0 100px var(--bg2);
  caret-color:var(--text)}
input:autofill,textarea:autofill,select:autofill{
  -webkit-text-fill-color:var(--text);color:var(--text);
  box-shadow:inset 0 0 0 100px var(--bg2)}
label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin:0 0 6px;text-transform:uppercase}
/* Підказка під полем. min-height тримає місце заздалегідь: без нього поява
   повідомлення смикала б усю форму вниз саме тоді, коли людина туди дивиться. */
.field-hint{font-size:12.5px;color:var(--dim);margin:6px 0 0;min-height:17px;line-height:1.35}
.field-hint.is-ok{color:var(--ok)}
.field-hint.is-bad{color:var(--danger2)}
input.is-bad,input.is-bad:focus{border-color:var(--danger)}
.field{margin-bottom:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
/* Одна колонка — там, де в полях довгі значення (ключі, токени, адреси).
   Зі стелею: найдовше, що сюди кладуть, — Google Client ID на 72 символи,
   і поле в півтори тисячі пікселів під нього не потрібне. На вузькому екрані
   minmax дає колонці стиснутись, а не вилізти за край. */
.form-grid-1{grid-template-columns:minmax(0,720px)}
/* Приховане значення з кнопкою «показати»: крапки захищають від погляду
   через плече, кнопка дає звірити ключ, не перезаписуючи його наосліп. */
.field-secret{position:relative}
.field-secret input{padding-right:44px}
.field-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;background:none;border:0;border-radius:4px;
  color:var(--dim);font-size:15px;line-height:1;cursor:pointer;padding:0}
.field-eye:hover{color:var(--gold);background:var(--bg3)}
.field-eye.is-on{color:var(--gold)}
.checkbox{display:flex;align-items:center;gap:9px;color:var(--text);font-size:14px;cursor:pointer;text-transform:none;letter-spacing:0}
.checkbox input{width:auto}
/* Галки й радіо малюємо самі. accent-color лише перефарбовував системний
   квадрат — а його форму й досі малювала ОС, тож посеред темної теми стояли
   чужі різкі прямокутники. appearance:none лишає це тим самим полем форми:
   розмітка, сабміт і доступність не змінюються, змінюється тільки вигляд. */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;margin:0;padding:0;vertical-align:-3px;
  background-color:var(--bg2);background-repeat:no-repeat;background-position:center;
  border:1px solid var(--line2);border-radius:3px;cursor:pointer;
  transition:background-color .15s,border-color .15s}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover:not(:disabled),input[type=radio]:hover:not(:disabled){border-color:var(--gold)}
input[type=checkbox]:checked{background-color:var(--gold);border-color:var(--gold);background-size:12px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.4 3.4L12.8 4.8' fill='none' stroke='%23141110' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* крапка радіо — заливка з кільцем фону всередині, без окремої картинки */
input[type=radio]:checked{background-color:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--bg2)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}
/* Список точок у картці користувача: галками, бо в <select multiple> звичайний
   клік скидає попередній вибір. Довгий перелік скролиться всередині себе,
   щоб картка не розʼїжджалась на мережі з десятком магазинів. */
.store-picker{display:flex;flex-direction:column;gap:5px;max-height:104px;overflow-y:auto;
  padding:8px 10px;background:var(--bg2);border:1px solid var(--line2);border-radius:2px}
.store-picker .checkbox{font-size:13.5px}

/* Підказки Нової Пошти. Свій список, а не <datalist>: браузер відкриває його
   на власний розсуд і щойно завантажені варіанти показує лише після наступного
   натискання — зовні це виглядає як «підказок немає». */
.np-wrap{position:relative}
.np-drop{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;display:none;
  background:var(--bg3);border:1px solid var(--line2);border-radius:2px;
  max-height:290px;overflow-y:auto;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.np-drop.is-open{display:block}
.np-drop div{padding:9px 12px;font-size:14px;line-height:1.35;cursor:pointer;border-bottom:1px solid var(--line)}
.np-drop div:last-child{border-bottom:0}
.np-drop div:hover,.np-drop div.is-active{background:var(--bg2);color:var(--gold2)}
.np-drop .np-note,.np-drop .np-note:hover{color:var(--dim);cursor:default;background:none}

/* ---------- оформлення замовлення ---------- */
/* Дві колонки: кроки ліворуч, картка замовлення праворуч і завжди на очах.
   На вузькому екрані все стає в один стовпчик, а кнопка переїжджає в нижню
   панель — інакше до неї треба гортати через усю форму. */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:28px;align-items:start;margin-top:28px}
.co-step{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:26px 26px 8px;margin-bottom:18px}
.co-step-h{display:flex;align-items:center;gap:13px;font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 18px}
.co-num{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:13px;font-weight:800}
.co-note{font-size:13px;color:var(--dim);line-height:1.45;margin:-10px 0 16px}
.co-sum{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:24px;position:sticky;top:88px}
.co-sum-h{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 18px}
/* На столі картка розгорнута завжди, тому заголовок не має поводитись як кнопка */
#coFold > summary{list-style:none;cursor:default}
#coFold > summary::-webkit-details-marker{display:none}
.co-fold-total{display:none}
.co-items{display:flex;flex-direction:column;gap:14px;max-height:290px;overflow-y:auto;margin-bottom:18px}
.co-item{display:flex;gap:12px;align-items:center}
.co-item img{width:52px;height:52px;flex:none;border-radius:3px;object-fit:cover;border:1px solid var(--line)}
.co-item-name{font-size:14px;font-weight:600;line-height:1.3}
.co-item .dim{font-size:12.5px}
.co-item-sum{margin-left:auto;font-size:14px;white-space:nowrap;font-weight:700}
.co-sum .totals{margin:0;max-width:none}
.co-old{color:var(--dim);font-weight:400;margin-right:7px;text-decoration:line-through}
.co-promo{display:flex;gap:8px}
.co-promo input{text-transform:uppercase}
.co-promo .btn{flex:none;padding:11px 16px}
/* Порожнє поле промокоду на видноті працює проти нас: воно натякає, що десь є
   знижка, якої в людини немає, і вона йде шукати код замість купувати. Тому
   поле сховане за посиланням і розгорнуте лише тоді, коли код уже діє. */
.co-promo-link{background:none;border:0;padding:0;color:var(--gold);font-size:13.5px;cursor:pointer;
  font-family:inherit;border-bottom:1px dashed var(--line2)}
.co-promo-link:hover{color:var(--gold2)}
/* Крок, який уже заповнено. Закритий «гештальт» помітно легше лишити позаду. */
.co-num.is-done{background:var(--gold);border-color:var(--gold);color:var(--bg)}
/* Обіцянки біля кнопки — найсильніший аргумент на сторінці, тож не найблідішим
   текстом, як було. */
.co-trust{list-style:none;margin:16px 0 18px;display:flex;flex-direction:column;gap:7px}
.co-trust li{font-size:13px;color:var(--muted);padding-left:20px;position:relative;line-height:1.35}
.co-trust li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}
/* Рядок про оферту — тихий і дрібний: він обовʼязковий, але не має
   сперечатися за увагу з кнопкою підтвердження прямо над ним */
.co-terms{margin:12px 0 0;font-size:12px;line-height:1.5;text-align:center}
.co-bar{display:none}
@media (max-width:1000px){
  .co-grid{grid-template-columns:1fr}
  /* Спершу — що саме купуємо, і лише потім робота із заповненням. Знизу картка
     опинялась на 1400-му пікселі: людина заповнювала всю форму, так і не
     побачивши свого замовлення. */
  .co-sum{position:static;order:-1}
  .co-submit{display:none}
  /* палець — не курсор: 44 px мінімум */
  .chip{min-height:44px;display:inline-flex;align-items:center}
  /* стрілка підрозділів — та сама вимога: у неї цілять пальцем найчастіше */
  .chip-more{min-height:44px;min-width:44px}
  /* Згорнута картка: зверху видно головне — що купуємо і скільки коштує, —
     а деталі за одним дотиком. Розгорнутою вона відсувала форму на 900 px. */
  #coFold > summary{cursor:pointer;display:flex;align-items:center;gap:8px;margin:0}
  #coFold[open] > summary{margin-bottom:18px}
  #coFold > summary::after{content:'▾';color:var(--gold);font-size:14px;transition:transform .15s}
  #coFold[open] > summary::after{transform:rotate(180deg)}
  .co-fold-total{display:block;margin-left:auto;color:var(--gold);font-family:var(--sans);font-size:17px;order:9}
  .co-wrap{padding-bottom:92px}
  .co-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:16px;align-items:center;
    padding:12px 16px;background:rgba(26,22,17,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line2);box-shadow:0 -8px 26px rgba(0,0,0,.5)}
  .co-bar .btn{flex:1;white-space:nowrap}
  .co-bar-total{line-height:1.15}
  .co-bar-total span{display:block;font-size:11.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
  .co-bar-total b{font-size:19px;color:var(--gold)}
  .to-top{bottom:100px}
}
/* Два поля поруч мають сенс на столі, а на телефоні перетворюються на дві
   вузькі колонки, куди не влазить ані номер, ані назва відділення. */
@media (max-width:760px){ .form-grid{grid-template-columns:1fr} }

/* ---------- список користувачів: вкладки, пошук, сторінки ---------- */
.users-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px}
.users-tabs{display:flex;gap:8px;flex-wrap:wrap}
.users-search{display:flex;gap:8px;align-items:center}
.users-search input{width:280px;padding:9px 12px;font-size:13.5px}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:20px;flex-wrap:wrap}
@media (max-width:640px){
  .users-bar{flex-direction:column;align-items:stretch}
  .users-search input{width:100%}
}

/* ---------- картка користувача ---------- */
/* align-items:start, а не end: у колонок різна висота, і при вирівнюванні по низу
   будь-яка зміна в одній (зʼявилась підказка, додався канал) зсувала решту. */
.user-card{padding:18px 20px}
.user-grid{display:grid;grid-template-columns:1.2fr .9fr 1.1fr 1.3fr auto;gap:16px;align-items:start}
.user-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-top:22px}
.chan-note{font-size:12px;display:block;margin-top:6px;line-height:1.35}
.chan-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.chan{display:grid;grid-template-columns:64px 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.chan-name{color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:10.5px}
.chan input{padding:6px 8px;font-size:12.5px}
.chan-state{color:var(--line2);font-size:11px}
.chan-state.is-on{color:var(--ok)}
.msg-box{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.msg-box summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.msg-box summary:hover{color:var(--gold)}
.msg-form{display:flex;gap:10px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}
.msg-form textarea{flex:1;min-width:220px;padding:8px 10px;font-size:13px}
.msg-form select{width:auto}
@media (max-width:1100px){
  .user-grid{grid-template-columns:1fr 1fr}
  .user-actions{padding-top:0;flex-direction:row;align-items:center}
}
@media (max-width:640px){ .user-grid{grid-template-columns:1fr} }

/* ---------- перемикач вигляду каталогу ---------- */
.view-switch{display:flex;gap:6px;align-items:center}
.view-switch button{background:transparent;border:1px solid var(--line2);color:var(--dim);border-radius:2px;padding:8px 10px;cursor:pointer;display:flex;align-items:center;transition:all .15s}
.view-switch button:hover{border-color:var(--gold);color:var(--gold)}
.view-switch button.active{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.pgrid{display:grid;gap:16px}
.pgrid.v3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid.v4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgrid.vlist{grid-template-columns:1fr;gap:12px}
.pgrid.vlist .card{flex-direction:row;align-items:stretch}
.pgrid.vlist .card-img{aspect-ratio:auto;width:170px;min-width:170px}
.pgrid.vlist .card-body{padding:16px 20px}
.pgrid.vlist .card-desc{display:block;-webkit-line-clamp:unset}
.pgrid.vlist .card-title{font-size:19px}
@media (max-width:900px){
  .pgrid.v3,.pgrid.v4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pgrid.vlist .card-img{width:110px;min-width:110px}
  .pgrid.vlist .card-body{padding:12px 14px}
  .pgrid.vlist .card-title{font-size:15.5px}
  .card-foot{flex-wrap:wrap;gap:8px}
}
@media (max-width:400px){
  .pgrid.v3,.pgrid.v4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-body{padding:10px 12px 12px}
  .card-title{font-size:14.5px}
  .btn-sm{padding:8px 12px;font-size:11px}
}

/* ---------- фільтри ---------- */
.filters{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:20px;margin-bottom:28px}
.filters-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:14px;align-items:end}
.attr-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.attr-filter label:first-child{display:block;margin-bottom:8px}
.attr-values{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow-y:auto;padding-right:6px}
.attr-values .checkbox{font-size:13.5px;color:var(--muted)}
.attr-values .checkbox:hover{color:var(--text)}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}

/* ---------- панель розділів із підрозділами ---------- */
.cat-nav{margin-bottom:26px}
.cat-nav .cat-chips{margin-bottom:0}
/* Розділ і його стрілка — одна деталь із двома діями: перейти в розділ і
   подивитись, що в ньому лежить. Тому вони склеєні в одну рамку. */
.chip-group{display:inline-flex}
.chip-group>.chip{border-top-right-radius:0;border-bottom-right-radius:0}
.chip-more{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:0 9px;
  background:transparent;border:1px solid var(--line2);border-left:0;border-radius:0 2px 2px 0;
  color:var(--muted);cursor:pointer;transition:all .15s}
.chip-more:hover{border-color:var(--gold);color:var(--gold)}
.chip-more svg{transition:transform .18s}
.chip-group.is-open .chip-more{border-color:var(--gold);color:var(--gold)}
.chip-group.is-open .chip-more svg{transform:rotate(180deg)}
/* обраний розділ підсвічує й свою стрілку — інакше рамка виглядає розірваною */
.chip-group>.chip.active+.chip-more{border-color:var(--gold);color:var(--gold)}
/* розділ, усередині якого стоїть обраний підрозділ: не «тут ви є», а «ви звідси» */
.chip.in-branch{border-color:var(--gold);color:var(--gold)}
.cat-subs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding:14px 16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:4px}
.cat-subs[hidden]{display:none}
/* підрозділ — крок усередину, а не ще один розділ: без версалок і дрібніший */
.chip-sub{text-transform:none;letter-spacing:0;font-size:12.5px;padding:7px 14px}

/* ---------- кошик ---------- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{color:var(--dim);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;text-align:left;padding:0 12px 12px;border-bottom:1px solid var(--line)}
.cart-table td{padding:16px 12px;border-bottom:1px solid var(--bg3);vertical-align:middle}
.cart-thumb{width:64px;height:64px;border-radius:3px;object-fit:cover;border:1px solid var(--line)}
/* Опт у рядку кошика: те, що вже дали, і те, що дадуть за крок звідси.
   Другий підпис навмисно тьмяний — це запрошення, а не подія. */
.cart-tier{font-size:12px;line-height:1.4;margin-top:4px;color:var(--dim)}
.cart-tier.is-on{color:var(--gold);font-weight:700}

/* ---------- оптова шкала в картці товару ---------- */
.qty-tiers-box{border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin:0 0 22px;background:var(--bg2)}
.qty-tiers-box h3{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin:0 0 10px}
.qty-tiers-list{width:100%;border-collapse:collapse;font-size:14.5px}
.qty-tiers-list td{padding:5px 0;vertical-align:baseline}
.qty-tiers-pct{color:var(--gold);font-weight:700;white-space:nowrap;padding-left:14px}
/* Ціна за штуку — те, заради чого таблиця й існує: її читають першою */
.qty-tiers-each{text-align:right;font-weight:800;white-space:nowrap}
.qty-tiers-box .dim{margin:10px 0 0;font-size:12.5px}

/* ---------- «разом дешевше» на сторінці товару ---------- */
.bundle-box{border:1px solid var(--gold);border-radius:4px;padding:16px 18px;margin:0 0 22px;background:var(--bg2)}
.bundle-box h3{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);margin:0 0 12px}
.bundle-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bundle-items li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;font-size:14px}
.bundle-items img{width:40px;height:40px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
.bundle-items em{font-style:normal;color:var(--dim);white-space:nowrap}
/* Товар, з чиєї сторінки дивляться, — щоб набір не читався як «купіть ще три речі» */
.bundle-items li.is-this{color:var(--fg)}
.bundle-this{font-style:normal;font-size:11.5px;color:var(--gold);border:1px solid var(--gold);
  border-radius:2px;padding:1px 5px;margin-left:6px;white-space:nowrap}
.bundle-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.bundle-price s{color:var(--dim);margin-right:8px}
.bundle-price b{font-size:20px;color:var(--gold)}
.bundle-price span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}

/* ---------- «ще трохи — і дешевше» в кошику ---------- */
.bundle-hint-list{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.bundle-hint{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--gold);border-radius:4px;padding:14px 18px;background:var(--bg2)}
.bundle-hint-text{flex:1;min-width:240px;font-size:14px;line-height:1.55}
.bundle-hint-need{color:var(--fg);font-weight:600}
.bundle-hint-cut{color:var(--gold)}
@media (max-width:560px){ .bundle-hint form{width:100%} .bundle-hint form .btn{width:100%} }
/* ---------- торг: «запропонуйте свою ціну» ---------- */
/* Рамка тонша й тьмяніша за набір: набір — пропозиція магазину й має
   привертати увагу, а торг — двері, які людина відчиняє лише тоді, коли ціна
   її не влаштувала. Кричати про них означало б натякати, що ціна на сайті
   несправжня. */
/* ---------- торг ---------- */
/*
 * Згорнутий торг — рядок, а не блок.
 *
 * Розгорнута форма з полями «скільки штук» і «ваша ціна» стояла під кожним
 * товаром, і під банкою за 150 грн теж. Півекрана, віддані запрошенню
 * поторгуватись, кажуть про товар більше, ніж опис: що ціна умовна й що тут
 * прийнято торгуватись. Для магазину, який продає свій мед за свою ціну, це не
 * та розмова — тож рамка й підкладка зʼявляються лише коли блок розкрили.
 */
.offer-box{margin:0 0 22px;border:1px solid transparent;border-radius:4px}
.offer-box[open]{border-color:var(--line);background:var(--bg2);padding:16px 18px}
.offer-toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13.5px;padding:6px 0;transition:color .15s;
  border-bottom:1px dashed var(--line2);width:auto}
.offer-toggle::-webkit-details-marker{display:none}
.offer-toggle::marker{content:''}
.offer-toggle::after{content:'▾';color:var(--gold);font-size:11px;transition:transform .15s}
.offer-box[open] .offer-toggle{color:var(--text);font-size:13px;text-transform:uppercase;
  letter-spacing:.07em;border-bottom:0;margin-bottom:12px;padding:0}
.offer-box[open] .offer-toggle::after{transform:rotate(180deg)}
.offer-toggle:hover{color:var(--gold)}
.offer-fields{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.offer-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px}
.offer-field span{font-size:12.5px;color:var(--dim)}
.offer-field input{width:100%}
.offer-mode{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);
  flex:0 0 auto;padding-bottom:9px;cursor:pointer}
.offer-mode input{width:auto;margin:0}
.offer-state-line{margin:0 0 12px;font-size:15px}
.offer-state-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){
  .offer-fields{flex-direction:column;align-items:stretch}
  .offer-state-actions .btn{width:100%}
}

/* Розмова, на яку привело посилання зі сповіщення.
   Людина приходить із телефона й одразу має бачити, котра з карток та сама, —
   інакше глибоке посилання нічим не краще за посилання на список. Підсвітка
   гасне сама: підказка потрібна в першу секунду, далі вона просто заважає. */
.offer-card:target{border-color:var(--gold);animation:offer-found 2.4s ease-out}
@keyframes offer-found{
  0%,60%{box-shadow:0 0 0 2px var(--gold)}
  100%{box-shadow:0 0 0 2px transparent}
}
@media (prefers-reduced-motion:reduce){ .offer-card:target{animation:none} }

/* Торг в адмінці: чотири числа, які важать лише разом */
.offer-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.offer-facts>div{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--bg)}
.offer-facts span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.offer-facts b{display:block;font-size:18px;margin-top:3px}
.offer-facts i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:2px}
.offer-facts .warn{color:var(--danger2)}
.offer-counter{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:16px}
.offer-counter label{display:flex;flex-direction:column;gap:5px;flex:0 0 130px}
.offer-counter label.grow{flex:1 1 260px}
.offer-counter span{font-size:12.5px;color:var(--dim)}
.offer-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.totals{margin-top:26px;margin-left:auto;max-width:360px;display:flex;flex-direction:column;gap:9px;font-size:15px}
.totals .row{display:flex;justify-content:space-between}
.totals .grand{border-top:1px solid var(--line);padding-top:12px;font-size:19px;font-weight:800;color:var(--gold)}

/* ---------- сповіщення ---------- */
.flash{max-width:1280px;margin:14px auto 0;padding:0 24px}
.flash>div{border-radius:3px;padding:13px 18px;font-size:14px;font-weight:600;margin-bottom:8px}
.flash-success{background:rgba(240,180,41,.12);border:1px solid var(--gold);color:var(--gold)}
.flash-error{background:rgba(200,60,50,.12);border:1px solid var(--danger);color:var(--danger2)}

.cart-toast{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;align-items:flex-start;gap:12px;background:var(--bg2);border:1px solid var(--gold);border-radius:4px;padding:16px 18px;max-width:340px;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.cart-toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.cart-toast-icon{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.cart-toast-body{flex:1}
.cart-toast-text{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}
.cart-toast-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Хрестик мав зону 9×18 px — влучити в нього пальцем неможливо. Сам знак
   лишається того ж розміру, зона доростає до 44×44. */
.cart-toast-close{background:none;border:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;
  padding:0;width:44px;height:44px;margin:-13px -13px auto auto;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-toast-close:hover{color:var(--text)}
@media (max-width:480px){.cart-toast{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- why / faq ---------- */
.why-item{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)}
.why-num{font-family:var(--serif);font-size:30px;color:var(--gold);font-weight:700;min-width:52px}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;font-family:var(--serif);font-size:20px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:'+';color:var(--gold);font-size:24px;font-family:var(--sans)}
.faq-item[open] summary::after{content:'–'}
.faq-item p{color:var(--muted);padding:0 0 18px;max-width:720px}

/* ---------- галерея ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-item{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--bg3)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item span{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;font-weight:700;font-size:14px;
  background:linear-gradient(transparent,rgba(20,17,16,.92))}

/* ---------- дипломна перевірка ---------- */
.diploma-box{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:36px;max-width:560px}
.center-block{margin-left:auto;margin-right:auto}
.section-center{text-align:center}
.section-center .lead{margin-left:auto;margin-right:auto}
.diploma-result{border-radius:3px;padding:18px 20px;margin-top:18px;border:1px solid}
.diploma-result.ok{background:rgba(240,180,41,.1);border-color:var(--gold);color:var(--gold)}
.diploma-result.fail{background:rgba(200,60,50,.1);border-color:var(--danger);color:var(--danger2)}
.diploma-result p{color:var(--muted);font-size:13.5px;margin-top:6px}

/* ---------- футер ---------- */
/* Один стовпчик по центру, а не логотип ліворуч і соцмережі праворуч. На широкому
   екрані розкидані по краях блоки читаються як два різні кінці сторінки, між
   якими порожньо; зібрані докупи вони стають одним підписом під сайтом.
   Побічно це прибирає й окремий випадок для телефона: там колонка вже була, і
   тепер вигляд однаковий на будь-якій ширині. */
/*
 * Підвал.
 *
 * Колонки тут пробувались і не вижили: під центрування вони не лягають —
 * заголовки різної довжини, списки різної висоти, а майже порожні «Контакти»
 * поруч із повними «Покупцеві» дають рвані краї й дірку посеред екрана.
 *
 * Замість них — вертикальна церемонія: знак, підпис, спосіб зв'язку, розділи,
 * і аж потім правовий шепіт. Ієрархія тримається не рамками, а трьома речами:
 * повітрям між блоками, розміром і трекінгом. Телефон набраний антиквою в
 * розмір заголовка — у підвал ідуть саме по нього, і він має читатись як
 * запрошення подзвонити, а не як рядок довідки.
 */
footer{border-top:1px solid var(--line);padding:88px 0 40px;margin-top:64px}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  color:var(--dim);font-size:13.5px}
/* Коротка золота риска над знаком — єдина прикраса на весь підвал.
   Одна, тому й працює: друга перетворила б стриманість на оздоблення. */
.footer-inner::before{content:'';width:34px;height:1px;background:var(--gold);opacity:.7;margin-bottom:34px}
.footer-brand{justify-content:center}
.footer-brand .brand-text{font-size:19px;letter-spacing:.16em}
.footer-tagline{margin:16px 0 0;max-width:44ch;font-family:var(--serif);font-size:17px;
  line-height:1.6;color:var(--muted)}
/* Спосіб зв'язку — найбільший елемент підвалу після знака */
.footer-contacts{display:flex;flex-direction:column;align-items:center;gap:6px;margin:40px 0 0}
.footer-contacts .footer-phone{font-family:var(--serif);font-size:27px;letter-spacing:.02em;color:var(--text)}
.footer-contacts .footer-phone:hover{color:var(--gold)}
.footer-contacts a{color:var(--muted)}
.footer-contacts a:hover{color:var(--gold)}
.footer-contacts .footer-hours{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* Розділи: мікротипографіка з широким трекінгом — перелік має читатись як
   покажчик, а не як абзац посилань */
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;max-width:860px;margin:44px 0 0}
.footer-nav a{color:var(--muted);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;padding:3px 0}
.footer-nav a:hover{color:var(--gold)}
.footer-social{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;margin:38px 0 0}
.footer-social a{color:var(--muted);display:flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.footer-social a:hover{color:var(--gold)}
/* Правовий рядок — шепіт: його читають раз, і він не має перебивати нічого */
.footer-copy{margin:56px 0 0;padding-top:22px;border-top:1px solid var(--line);
  width:100%;max-width:860px;font-size:11.5px;letter-spacing:.04em;color:var(--dim);line-height:2}
.footer-copy a{color:var(--dim)}
.footer-copy a:hover{color:var(--muted)}
/* Посилання разом зі своєю крапкою — нерозривним шматком: інакше при
   перенесенні рядка крапка лишається висіти на початку нового */
.footer-legal-item{white-space:nowrap;margin-left:10px}
@media (max-width:640px){
  footer{padding:64px 0 36px}
  .footer-tagline{font-size:15.5px}
  .footer-contacts .footer-phone{font-size:23px}
  .footer-nav{gap:12px 22px;margin-top:36px}
  .footer-social{gap:20px;margin-top:30px}
  .footer-copy{margin-top:42px}
}
/* ---------- правові сторінки ---------- */
/* Документ, а не вітрина: вузька колонка, збережені переноси рядків і
   помітний інтервал — такий текст читають підряд, а не проглядають. */
.legal-text{margin-top:22px;white-space:pre-line;color:var(--muted);font-size:15.5px;line-height:1.75}
.legal-entity{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.legal-entity-name{color:var(--text);font-weight:700;margin:0}

/* ---------- модалка авторизації ---------- */
.modal-back{position:fixed;inset:0;background:rgba(10,8,7,.8);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-back.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:5px;max-width:420px;width:100%;padding:34px}
.modal h3{font-family:var(--serif);font-size:26px;margin-bottom:8px}
.modal .stack{display:flex;flex-direction:column;gap:10px;margin-top:20px}

/* ---------- відповідь вікна входу ---------- */
/*
 * Те, що сайт відповів на дію: код надіслано, код невірний, на цей номер ще
 * немає акаунта.
 *
 * Було звичайним .dim-абзацом — тобто виглядало точнісінько як три пояснювальні
 * абзаци, що вже стоять у цьому ж вікні. Людина натискала «Отримати код», сайт
 * відповідав абзацом того ж кольору й розміру, що й текст навколо, і відповідь
 * просто не читалась як відповідь: її сприймали за черговий опис.
 *
 * Тому рамка, підкладка й знак ліворуч. Знак несе те саме, що й колір, — інакше
 * повідомлення розрізняються лише червоним проти золотого, а це найгірший спосіб
 * розрізняти важливе.
 */
.auth-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  padding:12px 14px;border-radius:4px;font-size:13.5px;line-height:1.5;
  border:1px solid var(--line2);background:var(--bg3);color:var(--muted)}
.auth-note::before{content:attr(data-sign);flex:0 0 20px;width:20px;height:20px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;line-height:1;margin-top:1px}
/* Вказівка, що робити далі. Не помилка: людина нічого не зробила не так —
   акаунта на цей номер справді ще немає, і нижче написано, як його завести. */
.auth-note.is-info{border-color:var(--line2);background:var(--bg3);color:var(--text)}
.auth-note.is-info::before{background:var(--gold);color:var(--bg)}
/* Дія вдалась і чекає продовження — код пішов, лишилось його ввести */
.auth-note.is-ok{border-color:var(--gold);background:rgba(240,180,41,.1);color:var(--text)}
.auth-note.is-ok::before{background:var(--gold);color:var(--bg)}
/* Помилка: сталося не те, чого людина хотіла */
.auth-note.is-error{border-color:var(--danger);background:rgba(200,60,50,.12);color:var(--danger2)}
.auth-note.is-error::before{background:var(--danger);color:var(--text)}
/* Нове повідомлення на місці старого інакше лишилось би непоміченим: текст
   змінився, а на екрані ніщо не ворухнулось */
@keyframes authNote{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.auth-note.is-new{animation:authNote .22s ease-out}
@media (prefers-reduced-motion:reduce){.auth-note.is-new{animation:none}}

/* ---------- top button ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--gold);color:var(--bg);border:none;border-radius:50%;
  width:46px;height:46px;font-size:19px;cursor:pointer;display:none;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.to-top.show{display:block}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Одна колонка — і фото їде під текст, у самий низ: спершу заголовок,
     підзаголовок, дві кнопки й три пункти списку, і лише потім обличчя.
     Для персонального бренду це найгірший можливий порядок — людину впізнають
     раніше, ніж дочитують.

     Фото піднімаємо одразу під заголовок. display:contents розчиняє
     текстову обгортку, і її діти стають клітинками тієї самої сітки — тоді
     order розставляє їх упереміш із фото без жодної зміни розмітки. Обгортка
     семантики не несе (звичайний div), тож нічого не втрачається.

     Порядок: назва → обличчя → пояснення → кнопки → пункти. Кнопки лишаються
     на першому-другому екрані, бо фото навмисно нижче. */
  .hero{grid-template-columns:1fr;padding:56px 24px;gap:0}
  .hero > div:first-child{display:contents}
  .hero-badge{order:1}
  .hero h1{order:2}
  .hero-img{order:3;margin:20px 0 2px}
  .hero .lead{order:4}
  /* margin-top тут не потрібен: у .lead уже є свої 30px знизу, а в сітці
     відступи сусідів не схлопуються — разом виходило 56px порожнечі рівно
     там, де кнопки й так ледве вміщались у перший екран */
  .hero-actions{order:5;margin-top:0}
  .hero-points{order:6}
  /* Нижче за десктопні 560: фото має показати обличчя, а не зайняти екран
     цілком — під ним одразу мають початися пояснення й кнопки */
  .hero-img img{height:380px;object-position:center top}
  .product-page{grid-template-columns:1fr;gap:32px}
  .filters-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  h1{font-size:38px} h2{font-size:30px}
  /* На телефоні фото ще нижче: разом із заголовком воно має лишити місце
     кнопкам. «Обрати курс» на першому екрані важливіша за зайві сто пікселів
     портрета — обличчя однаково впізнається й тут. */
  .hero-img img{height:280px}
  .section{padding:56px 0}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .counters{grid-template-columns:repeat(3,1fr);gap:10px}
  .counter b{font-size:30px}
  .nav-links{display:none}
  .brand-text{display:none}
  .mobile-menu-btn{display:flex}
  /* Пошук у вузькій шапці не вміщається поруч із кошиком і бургером —
     переїжджає всередину мобільного меню, першим рядком */
  .nav-search{display:none}
  .mobile-menu .nav-search{display:flex;flex:1 1 auto;margin-bottom:6px}
  .form-grid{grid-template-columns:1fr}
  .cart-table th:nth-child(2),.cart-table td:nth-child(2){display:none}
}
@media (max-width:480px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
}

/* ============ Адмінка ============ */
.admin-wrap{display:flex;min-height:100vh}
.admin-side{width:230px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);padding:22px 0;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .brand{padding:0 20px 18px}
/* Пункти всередині блоку тиснуться щільно: крок між рядками має бути помітно
   меншим за відстань до наступного заголовка, інакше все читається як один
   рівний стовпчик. На дотику відступ повертаємо (див. медіазапит нижче) —
   35px пальцем не влучиш. */
.admin-side a{color:var(--muted);font-weight:600;font-size:13.5px;padding:7px 22px;border-left:3px solid transparent}
.admin-side a:hover{color:var(--text);background:var(--bg3)}
.admin-side a.active{color:var(--gold);border-left-color:var(--gold);background:var(--bg3)}
.admin-side .sep{border-top:1px solid var(--line);margin:10px 0}
/* Заголовок блоку меню. Самого лише дрібного шрифту мало: коли всі рядки йдуть
   рівним стовпчиком через однакові проміжки, око бачить один потік, а не групи.
   Тому блок відбиває лінія на всю ширину, а пункти під заголовком тиснуться
   ближче один до одного, ніж відстань до наступної лінії, — саме цей контраст
   проміжків і збирає їх у купку. */
.admin-side .nav-group{color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 22px 8px;margin-top:12px;
  border-top:1px solid var(--line2);user-select:none}
.admin-main{flex:1;padding:30px 34px;min-width:0}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.admin-head h1{font-size:30px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:20px}
.stat b{display:block;font-family:var(--serif);font-size:32px;color:var(--gold)}
.stat span{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
/* overflow:hidden тут був заради заокруглених кутів, але він же й скасовує
   липкий заголовок: елемент у контейнері з прихованим переповненням нікуди
   не «липне». Кути тепер задаємо крайнім коміркам. */
.tbl{width:100%;border-collapse:collapse;background:var(--bg2);border:1px solid var(--line);border-radius:4px}
.tbl th{background:var(--bg3);color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:10px 12px}
/* Заголовок лишається на очах: у списку на сорок рядків без нього вже за
   пів екрана невідомо, що це за колонка. */
.tbl tr:first-child th{position:sticky;top:0;z-index:3}
.tbl tr:first-child th:first-child{border-top-left-radius:4px}
.tbl tr:first-child th:last-child{border-top-right-radius:4px}
/* Щільність. Рядок у 80px виглядав просторо, але дюжина категорій уже не
   вміщалась в екран, і порівнювати значення доводилось прокруткою. */
.tbl td{padding:7px 12px;border-top:1px solid var(--bg3);font-size:14px;vertical-align:middle}
.tbl tr:hover td{background:rgba(240,180,41,.03)}
/* Таблиця має читатись як дані, а не як стіна полів: шість колонок на тридцять
   рядків давали під дві сотні однакових прямокутників, і оку не було за що
   зачепитись. Рамка зʼявляється там, куди навели чи де редагують. */
.tbl input[type=text],.tbl input[type=number],.tbl select{
  padding:7px 9px;font-size:13.5px;background:transparent;border-color:transparent}
.tbl tr:hover input[type=text]:not(:disabled),.tbl tr:hover input[type=number]:not(:disabled),
.tbl tr:hover select:not(:disabled){background:var(--bg3);border-color:var(--line2)}
.tbl input:not([type=checkbox]):not([type=radio]):focus,.tbl select:focus{background:var(--bg3);border-color:var(--gold)}
/* Чуже поле (продавець бачить ціни інших точок) лишається полем, але не
   пропонує себе: ледь помітна заливка без рамки замість порожнього місця. */
.tbl input:not([type=checkbox]):not([type=radio]):disabled,.tbl select:disabled{color:var(--dim);border-color:transparent;
  background:rgba(246,236,217,.03);cursor:not-allowed}
.tbl .w-price{width:110px}.tbl .w-stock{width:80px}.tbl .w-sort{width:80px}
/* Числа порівнюють поглядом згори вниз — для цього вони мають стояти праворуч
   і мати цифри однакової ширини. */
.tbl .num,.tbl .num input{text-align:right;font-variant-numeric:tabular-nums}
.tbl .col-mid{text-align:center}

/* Фільтр масового редагування: пʼять полів і кнопка мають стати в один ряд.
   Без стелі на випадайках «Категорія» та «Бренд» розтягувались під найдовшу
   назву, і кнопка «Знайти» падала на другий рядок сама. */
.bulk-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.bulk-filter select{max-width:150px}
.bulk-filter .btn{margin-bottom:1px;flex:0 0 auto}

/* ---------- масове редагування: щоб зрозуміти з погляду ----------
   Було чотири однакові стовпці поспіль — «ціна, залишок, ціна, залишок», — і
   щоб дізнатись, чиє це число, доводилось вести очима вгору до заголовка.
   Групуємо: назва магазину накриває свою пару, група відбита рамкою ліворуч,
   а гроші й кількість розрізняються кольором — далі їх не плутають узагалі. */
.tbl-bulk .grp-store{text-align:center;color:var(--gold);font-weight:700;letter-spacing:.09em}
.tbl-bulk .grp-sub th{font-size:10.5px;letter-spacing:.08em;text-transform:lowercase}
/* другий поверх шапки теж липкий — інакше при прокрутці лишалися б самі назви
   магазинів, без підпису, де ціна, а де залишок */
/* Другий поверх приліплений рівно під перший, тож його висота задана явно й
   тим самим числом: 8+8 паддінга + 18 рядка. Тримаємо їх однією змінною —
   інакше дворядковий заголовок чи інший шрифт розсунули б поверхи, і при
   прокрутці «ціна/залишок» наїхали б на назви магазинів. */
.tbl-bulk{--hdr1:34px}
.tbl-bulk .grp-head th{position:sticky;top:0;z-index:3;padding:8px 12px;line-height:18px;height:var(--hdr1)}
.tbl-bulk .grp-sub th{position:sticky;top:var(--hdr1);z-index:3;padding:4px 12px;line-height:14px}
/* межа групи: одна лінія на весь стовпчик магазину */
.tbl-bulk .grp-store,.tbl-bulk .cell-price{border-left:2px solid var(--line2)}
/* гроші — золоті, як усюди на сайті; кількість — звичайним текстом на ледь
   помітній підкладці, тож пари «ціна/залишок» видно навіть боковим зором */
.tbl-bulk .cell-money input,.tbl-bulk .cell-price input{color:var(--gold)}
.tbl-bulk .cell-stock{background:rgba(246,236,217,.028)}
.tbl-bulk .cell-stock input{color:var(--text);font-weight:600}
/* нуль не має читатись як число: його шукають, щоб поповнити */
.tbl-bulk .cell-stock.is-zero input{color:var(--dim);font-weight:400}
.tbl-bulk .cell-stock input::placeholder{color:var(--dim)}
/* сума по варіантах — не поле, і не має вдавати його */
.tbl-bulk .stock-sum{color:var(--muted);font-size:12.5px;background:var(--bg3);
  border-radius:10px;padding:2px 8px;white-space:nowrap}
/* Незворотна дія не має виглядати як звичайна галка: у спокої вона малюється
   хрестиком, тож колонку «Видалити» видно, ще не навівши на неї. Полем форми
   вона лишається навмисно — видалення відбувається не тут, а при збереженні,
   і галку можна заблокувати, поки в категорії є товари. Позначений рядок
   одразу показує, що саме зникне. */
.tbl .col-del input[type=checkbox]{width:22px;height:22px;background-color:transparent;border-color:transparent;
  background-size:12px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%239a8a6b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.tbl .col-del input[type=checkbox]:hover:not(:disabled){background-color:rgba(200,60,50,.1);border-color:#5a2a24;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%23e0685e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.tbl .col-del input[type=checkbox]:checked{background-color:var(--danger);border-color:var(--danger);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%23f6ecd9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.tbl .col-del input[type=checkbox]:focus-visible{outline:2px solid var(--danger2);outline-offset:2px}
.tbl tr:has(.js-del:checked) td{background:rgba(200,60,50,.09)}
.tbl tr:has(.js-del:checked) input[type=text]{text-decoration:line-through;color:var(--danger2)}
/* Панель збереження. Кнопка під довгим списком означала, що правку в третьому
   рядку йдеш підтверджувати кудись за екран — і легко піти зі сторінки, так і
   не зберігши. Тепер вона завжди внизу вікна й сама каже, що є незбережене. */
.admin-save{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:2px;padding:14px 0;background:var(--bg);border-top:1px solid var(--line)}
.admin-save-note{font-size:13px;color:var(--dim)}
.admin-save.is-dirty{box-shadow:0 -12px 26px rgba(20,17,16,.92)}
.admin-save.is-dirty .admin-save-note{color:var(--gold)}
.status-pill{display:inline-block;border-radius:20px;font-size:11.5px;font-weight:700;padding:4px 12px;white-space:nowrap}
.st-new{background:rgba(240,180,41,.15);color:var(--gold)}
.st-processing{background:rgba(127,176,105,.15);color:var(--ok)}
.st-shipped{background:rgba(100,150,220,.15);color:#7aa7e0}
.st-done{background:rgba(127,176,105,.2);color:var(--ok)}
.st-canceled{background:rgba(200,60,50,.15);color:var(--danger2)}
.admin-card{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:24px;margin-bottom:22px}
.admin-card h2{font-size:21px;margin-bottom:16px}
/* Що робить блок — одним рядком під заголовком. Сусідні картки часто виглядають
   як кілька способів зробити те саме, хоча наслідки в них різні: підпис має
   стояти до полів, а не в довідці, яку відкриють уже після помилки. */
.card-lead{color:var(--muted);font-size:13.5px;line-height:1.55;margin:-10px 0 18px;max-width:78ch}
.card-lead b{color:var(--text);font-weight:600}
/* Те, що адмін мусить прочитати до заповнення поля, а не після скарги покупця */
.card-warn{background:var(--bg3);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:3px;padding:11px 13px;margin:0 0 18px;font-size:13px;line-height:1.55;
  color:var(--muted);max-width:78ch}
.card-warn b{color:var(--gold);font-weight:600}
/* Режим підказок: «?» угорі сторінки, далі клік по полю пояснює, що воно робить.
   Саме на вимогу, а не підписом під кожним рядком: форма з поясненням біля
   кожного поля перестає читатися як форма, і її однаково перестають читати. */
/* Кнопка навмисно тиха: це довідка, а не дія. Вона має знайтися, коли її
   шукають, і не тягнути на себе увагу решту часу. */
.help-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;padding:0;border-radius:50%;background:transparent;color:var(--dim);
  border:1px solid var(--line);font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;transition:.15s;font-family:inherit;opacity:.65}
.help-btn:hover{opacity:1;color:var(--muted);border-color:var(--line2)}
/* Увімкнений режим — навпаки, помітно, і кнопка від'їжджає з шапки на екран:
   поля пояснюють, гортаючи сторінку донизу, а вихід із режиму мусить лишатися
   під рукою, а не десь угорі. Пульсація тут не прикраса — вона єдине, що
   нагадує про ввімкнений режим, коли шапки вже не видно.
   z-index: вище за липкі шапки таблиць і мобільну панель, але нижче за бічне
   меню (80), щоб не накривати відкрите меню. */
.help-btn.is-on{position:fixed;top:20px;right:20px;z-index:75;width:32px;height:32px;font-size:15px;
  opacity:1;background:var(--gold);border-color:var(--gold);color:var(--bg);
  animation:help-pulse 2.2s ease-out infinite}
.help-btn.is-on:hover{background:var(--gold2);border-color:var(--gold2);color:var(--bg)}
@keyframes help-pulse{
  0%{box-shadow:0 0 0 0 rgba(240,180,41,.55)}
  70%{box-shadow:0 0 0 12px rgba(240,180,41,0)}
  100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}
}
/* Рух буває нестерпним: лишаємо статичне кільце, помітність не втрачається */
@media (prefers-reduced-motion:reduce){
  .help-btn.is-on{animation:none;box-shadow:0 0 0 3px rgba(240,180,41,.3)}
}
/* Нижче 900px угорі висить липка мобільна панель — зсуваємо кнопку під неї.
   Низ екрана не годиться: там на семи сторінках стоїть липка панель
   збереження (.admin-save), і кнопка накривала б саме «Зберегти». */
@media (max-width:900px){
  .help-btn.is-on{top:58px;right:14px}
}
.help-btn[hidden]{display:none}
/* Смужка-нагадування, поки режим увімкнено — теж стримана */
.help-bar{display:none;background:var(--bg2);border:1px solid var(--line);border-radius:4px;
  padding:9px 13px;margin:0 0 18px;font-size:12.5px;line-height:1.5;color:var(--dim)}
body.help-on .help-bar{display:block}
/* Підсвічуємо ЛИШЕ те поле, під яким зараз курсор. Обводити все одразу означає
   перетворити сторінку на рябу сітку рамок: людина шукає відповідь про одне
   поле, а отримує шум від усіх. */
body.help-on [data-help]{cursor:help}
body.help-on [data-help]:hover{outline:1px solid var(--line2);outline-offset:3px;
  border-radius:3px;background:rgba(240,180,41,.04)}
/* Клік має дістатися носію підказки, а не інпуту всередині нього */
body.help-on [data-help] *{pointer-events:none}
/* Детальна підказка буває довгою: даємо ширину під абзаци, а висоту обмежуємо
   екраном — краще прокрутка всередині, ніж текст, що вилазить за сторінку.
   pre-line зберігає порожні рядки з data-help, тож підказку можна писати
   абзацами, не вставляючи розмітку (текст лишається звичайним текстом). */
.help-pop{position:absolute;z-index:60;width:420px;max-height:68vh;overflow-y:auto;
  background:var(--bg3);border:1px solid var(--line2);border-left:3px solid var(--gold);
  border-radius:4px;padding:14px 16px;
  font-size:13px;line-height:1.6;color:var(--text);white-space:pre-line;
  box-shadow:0 14px 34px rgba(0,0,0,.55)}
.help-pop-title{display:block;color:var(--gold);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.toggle{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}
.toggle input{position:absolute;opacity:0}
.toggle .tr{width:44px;height:24px;background:var(--bg3);border:1px solid var(--line2);border-radius:20px;position:relative;transition:.2s;flex-shrink:0}
.toggle .tr::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:.2s}
.toggle input:checked + .tr{background:rgba(240,180,41,.25);border-color:var(--gold)}
.toggle input:checked + .tr::after{left:22px;background:var(--gold)}
/* Підлеглі перемикачі: відступ і лінія показують, що вони під головним,
   а не поруч із ним. Вимкнений головний гасить усю групу — вони справді
   ні на що не впливають, поки він вимкнений. */
.toggle-group{display:flex;flex-direction:column;gap:14px;margin:14px 0 0 14px;
  padding:14px 0 0 20px;border-left:1px solid var(--line2);transition:opacity .15s}
.toggle-group.is-off{opacity:.45}
.toggle-group.is-off .toggle{cursor:not-allowed}
.toggle input:disabled + .tr{cursor:not-allowed}

/* Перевірка інтеграцій */
.check-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 14px}
.check-bar .dim{font-size:12.5px;flex:1;min-width:220px}
.check-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.check-row{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px;
  background:var(--bg3);border:1px solid var(--line);border-left-width:3px;border-radius:3px;padding:10px 12px}
.check-row.is-ok{border-left-color:var(--ok)}
.check-row.is-warn{border-left-color:var(--gold)}
.check-row.is-bad{border-left-color:var(--danger)}
.check-row.is-off{border-left-color:var(--line2);color:var(--muted)}
.check-icon{line-height:1.5}
.check-note{color:var(--dim);font-size:12.5px;margin-top:4px;line-height:1.4}
.img-thumb{width:56px;height:56px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
.img-grid{display:flex;gap:14px;flex-wrap:wrap}
.img-cell{position:relative;text-align:center}
.img-cell img{width:120px;height:120px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.img-cell .dim{display:block;margin-top:5px}
.img-cell.is-main img{border-color:var(--gold)}
/* Кутовий значок у комірці. Базовий .badge притиснутий до лівого краю (left:12px),
   тож без скидання left він розтягувався б від лівого краю до правого смугою. */
.img-cell .cell-badge,.img-cell .cell-action{position:absolute;top:4px;right:4px;left:auto;margin:0}
.img-cell .cell-badge{padding:3px 7px;letter-spacing:0}

/* Медіа-бібліотека: підписи «де використовується» довгі, тож комірки фіксуємо
   сіткою — інакше flex розтягує їх по найдовшому рядку й сітка розповзається. */
/* ───────────────────────────────────────────── завантаження файлів ───

   Системне поле <input type="file"> застилізувати неможливо — браузер малює
   його сам, і на темному тлі з золотом воно лишається сірим прямокутником із
   чужого інтерфейсу. Тому скрізь однаково: саме поле ховаємо (воно лишається
   механізмом), а показуємо своє.

   Два різні випадки, і плутати їх не можна:

   .dropzone  — там, де завантаження є САМОЮ дією сторінки (медіа-бібліотека,
                вікно вибору фото). Файл кладуть перетягуванням, і він іде
                на сервер одразу.
   .file-field — там, де файл лише одне з полів більшої форми (лого бренду,
                партнер, звірка товарів). Тут нічого не відправляється саме
                по собі: людина обирає файл і зберігає форму цілком. */

.dropzone{position:relative;display:block;width:100%;padding:26px 20px;text-align:center;
  border:1.5px dashed var(--line2);border-radius:8px;background:var(--bg2);
  color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.dropzone:hover{border-color:var(--gold);color:var(--text)}
/* Перетягування — стан, який має бути видно однозначно: людина в цю мить не
   дивиться на курсор, вона дивиться, чи «візьме» */
.dropzone.is-over{border-style:solid;border-color:var(--gold);background:var(--bg3);color:var(--text)}
.dropzone.is-busy{cursor:progress;border-color:var(--gold);border-style:solid}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone-title{display:block;font-weight:600;color:var(--text);letter-spacing:.01em}
.dropzone-hint{display:block;margin-top:5px;font-size:12.5px;color:var(--dim)}
.dropzone-note{display:block;margin-top:9px;font-size:12.5px;min-height:1.2em}
.dropzone-note.is-bad{color:#ff9b9b}
.dropzone-note.is-ok{color:var(--gold)}
/* Компактний вигляд — у вікні вибору фото, де над зоною ще й сітка */
.dropzone.is-slim{padding:16px 18px}

/* Комірка, яка ще вантажиться: показуємо її одразу, щоб було видно, що
   почалось, — але приглушеною, щоб не сплутати з готовою */
.img-cell.is-uploading{opacity:.45}
.img-cell.is-uploading img{filter:grayscale(1)}

.file-field{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.file-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-field .file-name{color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;max-width:260px;white-space:nowrap}
.file-field .file-name.has-file{color:var(--text)}

.media-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;align-items:start}
.media-lib .img-cell{width:auto;text-align:left}
.media-lib .img-cell img{width:100%;height:150px}
.media-lib .cell-uses{margin-top:4px;font-size:12px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
@media (max-width:600px){
  .media-lib{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .media-lib .img-cell img{height:120px}
}
.img-badge{position:absolute;top:6px;left:6px;background:var(--gold);color:#1a1508;font-size:10.5px;
  font-weight:600;border-radius:3px;padding:2px 7px;letter-spacing:.02em}
.img-del{position:absolute;top:4px;right:4px}
.img-actions{display:flex;gap:6px;justify-content:center;margin-top:6px}
.img-actions form{display:flex;gap:4px}
.img-actions button[disabled]{opacity:.3;cursor:default}
.admin-mobilebar{display:none}
/* --- характеристики та варіанти --- */
.row-list{display:flex;flex-direction:column;gap:10px}
.grid-row{display:grid;gap:10px;align-items:start;background:var(--bg3);border:1px solid var(--line);border-radius:3px;padding:10px 12px}
.grid-row input,.grid-row select{width:100%;padding:8px 10px;font-size:13.5px}
.grid-row .checkbox{align-self:center;white-space:nowrap}
.grid-row .row-del{align-self:center}
.attr-row{grid-template-columns:minmax(170px,1fr) minmax(170px,1.15fr) auto}
.variant-row{grid-template-columns:minmax(170px,1fr) 110px 130px 150px 110px 100px auto auto}
/* Склад набору: товар — фасовка — скільки штук */
.bundle-row{grid-template-columns:minmax(220px,1fr) minmax(160px,240px) 110px auto}
/* Шапка набору: назва, тип знижки, значення — в один ряд, щоб склад під ними
   починався одразу, а не через екран полів */
.bundle-head{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-bottom:22px}
/* Підзаголовок усередині картки: розділяє «поля / склад / передпоказ», не
   розриваючи їх на окремі картки — це одна річ, яку зараз редагують */
.bundle-sub{margin:24px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dim);border-top:1px solid var(--line);padding-top:16px}
.bundle-preview{max-width:520px}
.bundle-preview-sum td{border-top:1px solid var(--line)}
/* Видалення живе внизу картки набору, а не окремою карткою: власна картка
   робила з нього дію такої ж ваги, як «Зберегти» */
.bundle-danger{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.bundle-danger form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bundle-danger .dim{font-size:13px}
/* Рядок набору, який зараз відкрито нижче — щоб очі не шукали його заново */
.tbl tr.row-current{background:var(--bg3)}
.tbl tr.row-current td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.grid-row.deleted{opacity:.45}
.grid-row.deleted .gr-main{text-decoration:line-through}
.variant-tags{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;background:rgba(240,180,41,.1);border:1px solid var(--line2);
  color:var(--muted);font-size:12px;border-radius:3px;padding:3px 9px;white-space:nowrap}
.tag b{color:var(--text);font-weight:700}
.tag-off{background:rgba(200,60,50,.12);color:var(--danger2)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin-top:6px}
.gen-box{background:var(--bg3);border:1px dashed var(--line2);border-radius:3px;padding:16px}
.gen-axis{margin-bottom:14px}
.matrix th{white-space:nowrap}
.matrix tr.sub th{font-size:10.5px;padding:6px 13px;color:var(--dim)}
.matrix input{min-width:78px}
/* Товар і його фасовки — два поверхи одного, і це має бути видно з відстані,
   а не з вичитування назв. Рядок товару відкриває групу суцільною лінією,
   фасовки заходять уступом; між ними лінія пунктирна — межа всередині групи,
   а не між групами. Правила спільні для обох екранів, де під товаром стоять
   фасовки (ціни й коди): там однакова розмітка й однакове питання «це ще той
   самий товар чи вже наступний». */
.tbl tr.row-product td{border-top:1px solid var(--line2)}
.tbl tr.variant-sub td{background:rgba(240,180,41,.035);border-top:1px dashed var(--bg3);font-size:13px}
.tbl tr.variant-sub td:first-child{white-space:nowrap}
/* вкладеність варіанта — рискою, а не символом: ↳ у шрифті інтерфейсу немає */
.tbl tr.variant-sub td.var-name{padding-left:32px;position:relative}
.tbl tr.variant-sub td.var-name::before{content:'';position:absolute;left:14px;top:50%;
  width:10px;height:1px;background:var(--line2)}
/* прихована кнопка сабміту: задає дію за замовчуванням для Enter у полях */
.submit-default{position:absolute;width:0;height:0;padding:0;border:0;overflow:hidden;opacity:0}
/* ---------- словник характеристик ---------- */
/* Форма створення згорнута в рядок-кнопку: вона потрібна зрідка, а розгорнутою
   забирала перший екран — той самий, де мали б бути наявні характеристики */
.attr-new{padding:0}
.attr-new>summary{cursor:pointer;padding:14px 24px;color:var(--gold);font-weight:600}
.attr-new>summary:hover{background:var(--bg3)}
.attr-new[open]>summary{border-bottom:1px solid var(--line)}
.attr-new>form{padding:0 24px 22px}

/* Згорнутий рядок читають, а не переглядають: три поверхи з різною вагою —
   назва, самі значення, і вже потім службові числа. Раніше тут стояв ланцюжок
   фактів через крапку однаковим сірим, тож рангу не мав жоден. */
.attr-item{padding:0}
.attr-item>summary{cursor:pointer;padding:16px 22px;line-height:1.45}
.attr-item>summary:hover{background:var(--bg3)}
.attr-item[open]>summary{border-bottom:1px solid var(--line)}
.attr-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.attr-name{font-size:16px;font-weight:600;color:var(--text)}
.attr-item>summary:hover .attr-name{color:var(--gold)}
/* Значення — те, заради чого сюди й заходять: подивитись, що вже заведено */
.attr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.attr-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);
  border:1px solid var(--line);border-radius:3px;padding:3px 9px;font-size:13px;color:var(--muted)}
.attr-chip-rest{background:none;border-style:dashed;color:var(--dim)}
/* Порожній словник — не дрібниця: обирати в картці товару буде ні з чого */
.attr-none{margin-top:9px;font-size:13px;color:var(--dim);font-style:italic}
.attr-meta{margin-top:9px;font-size:12.5px;color:var(--dim)}
.attr-edit{padding:20px 22px 22px}
.attr-flags{display:flex;gap:26px;flex-wrap:wrap}
.attr-acts{display:flex;gap:12px;flex-wrap:wrap}

/* Значення списком, а не таблицею: колонок було чотири, і на телефоні вони
   їхали за екран. «Використань» — це підпис до самого значення, тож він стоїть
   під ним, а не окремим стовпчиком. */
.val-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.val-row{display:flex;align-items:flex-start;gap:10px}
.val-main{flex:1;min-width:0}
.val-main input{width:100%}
.val-color{width:44px;height:38px;padding:2px;flex-shrink:0}
.val-use{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.val-use.is-none{color:var(--dim)}
.val-del{flex-shrink:0;margin-top:2px}
/* Телефон: картка й так вузька, тож поля віддаємо змісту, а не полям сторінки */
@media (max-width:900px){
  .attr-item>summary,.attr-new>summary{padding:14px 15px}
  .attr-new>form{padding:0 15px 18px}
  .attr-edit{padding:18px 15px}
  /* 26px між галками читались як два різні блоки, коли вони стають одна під одною */
  .attr-flags{flex-direction:column;gap:12px}
  .attr-name{font-size:15.5px}
  /* Значення однією колонкою: поле, під ним підпис, ✕ праворуч на тій же лінії */
  .val-row{gap:8px}
  .val-color{width:38px}
}
@media (max-width:900px){
  .admin-side{position:fixed;left:-240px;z-index:80;transition:left .2s;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .admin-side.open{left:0}
  /* на телефоні в меню тикають пальцем, тож рядок має бути заввишки з палець */
  .admin-side a{padding:12px 22px}
  .admin-main{padding:18px 14px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .admin-mobilebar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
  /* Матриці картками не розкладаються (див. admin.js) — їм лишається
     прокрутка вбік, як було в усіх таблиць до цього */
  .tbl:not([data-cards]){display:block;overflow-x:auto;white-space:nowrap}
  .attr-row,.variant-row{grid-template-columns:1fr}
}

/* ---------- список рядками замість таблиці ---------- */
/*
 * Нижче 900px кожен рядок стає карткою. Розмітку для цього готує admin.js
 * (data-cards на таблиці, data-label і data-role на клітинках) — тут лише
 * показ, тож на ширшому екрані все це не діє й таблиця лишається таблицею.
 *
 * Порядок у картці не той, що в рядку: спершу те, за чим рядок упізнають
 * (номер, назва), потім стан, далі подробиці, і кнопка внизу на всю ширину.
 * У таблиці кнопка стоїть останньою колонкою праворуч і має ширину напису —
 * на телефоні це ціль завширшки з ніготь у найправішому краю екрана.
 */
@media (max-width:900px){
  .tbl[data-cards],.tbl[data-cards] tbody{display:block;width:100%}
  .tbl[data-cards] tr[data-head]{display:none}
  .tbl[data-cards] tr{display:flex;flex-direction:column;gap:7px;
    background:var(--bg2);border:1px solid var(--line);border-radius:8px;
    padding:13px 14px;margin-bottom:10px}
  /* Підсвітка «до видалення» малювалась по td — у картці фон дає сам рядок */
  .tbl[data-cards] tr:has(.js-del:checked){background:rgba(200,60,50,.09)}
  .tbl[data-cards] tr:has(.js-del:checked) td{background:none}
  .tbl[data-cards] td{display:block;padding:0;border:0;white-space:normal;max-width:none;order:1}
  /* Порожня клітинка в картці — просто порожній рядок, тож її зовсім немає */
  .tbl[data-cards] td:empty{display:none}
  /* Підпис ліворуч від значення, але НЕ флексом: у клітинці часто лежить
     кілька рядків — сума й знижка під нею, номер накладної та її стан, —
     і флекс поставив би їх поруч, а не одне під одним. Абсолютний підпис
     лишає вміст клітинки звичайним потоком. */
  .tbl[data-cards] td[data-label]{position:relative;padding-left:94px;min-height:20px}
  .tbl[data-cards] td[data-label]::before{content:attr(data-label);position:absolute;
    left:0;top:3px;width:84px;color:var(--dim);font-size:10.5px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;line-height:1.35}

  .tbl[data-cards] td[data-role=media]{order:-2;align-self:flex-start}
  .tbl[data-cards] td[data-role=media] img{width:56px;height:56px;border-radius:6px}
  .tbl[data-cards] td[data-role=title]{order:-1;display:block;font-size:15.5px;line-height:1.35}
  .tbl[data-cards] td[data-role=status]{order:0;display:block}
  /* Роздільник під шапкою картки — але лише коли під ним справді щось є */
  .tbl[data-cards] td[data-role=status]:not(:last-child){padding-bottom:9px;
    border-bottom:1px solid var(--line)}
  .tbl[data-cards] td[data-role=action]{order:2;display:block;margin-top:3px}
  .tbl[data-cards] td[data-role=action] .btn{width:100%;padding:13px 18px;font-size:12px}
  /* Число праворуч має сенс у стовпчику чисел; у картці стовпчика немає */
  .tbl[data-cards] td.num{text-align:left}
  /* Поля в редагованих списках на всю ширину картки, а не в 78px колонки */
  .tbl[data-cards] td input[type=text],.tbl[data-cards] td input[type=number],
  .tbl[data-cards] td select{width:100%;min-width:0}
}

/* ---------- нижня панель стафу ---------- */
/*
 * Головна навігація на телефоні. Шухляда за ☰ висить у верхньому лівому куті,
 * куди великий палець не дістає, і коштує два дотики; продавець же цілий день
 * ходить між чотирма розділами. Тому вони внизу, під пальцем.
 *
 * На ширшому екрані панелі немає взагалі: там бічне меню видно завжди, і
 * дублювати його знизу означало б забирати висоту ні за що.
 */
.adm-nav{display:none}
@media (max-width:900px){
  :root{--adm-nav-h:58px}
  .adm-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;
    /* Панель жести «назад» і смужку iPhone не перекриває: висота росте на
       safe-area, а не притискається до самого краю скла */
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(26,22,17,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line2);box-shadow:0 -8px 26px rgba(0,0,0,.5)}
  .adm-nav-a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;height:var(--adm-nav-h);padding:0 2px;
    background:none;border:0;cursor:pointer;color:var(--muted);font-family:inherit;
    text-decoration:none;transition:color .15s}
  .adm-nav-a:hover{color:var(--text)}
  .adm-nav-ico{position:relative;display:flex;line-height:0}
  .adm-nav-ico svg{width:22px;height:22px}
  /* Підпис обовʼязковий: піктограма «коробка» однаково читається як товари,
     склад і замовлення, і без слова панель перетворюється на ребус */
  .adm-nav-t{font-size:10.5px;font-weight:700;letter-spacing:.03em;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .adm-nav-a.is-on{color:var(--gold)}
  /* Скільки розмов торгу чекають відповіді — видно з будь-якого екрана */
  .adm-nav-badge{position:absolute;top:-5px;left:12px;min-width:16px;height:16px;
    padding:0 4px;border-radius:9px;background:var(--gold);color:var(--bg);
    font-size:10px;font-weight:800;line-height:16px;text-align:center}
  /* Незакритий продаж: не число, а те, що він узагалі є */
  .adm-nav-dot{position:absolute;top:-2px;left:15px;width:8px;height:8px;
    border-radius:50%;background:var(--gold);animation:cePulse 2s ease-in-out infinite}

  /* ── місце під панеллю ──
     Усе, що приліплене до низу екрана, зсувається на її висоту, інакше вона
     накриє саме те, заради чого туди дивляться: кнопку «Зберегти» й суму
     набраного чека. */
  .admin-main{padding-bottom:calc(var(--adm-nav-h) + env(safe-area-inset-bottom) + 20px)}
  .admin-save{bottom:calc(var(--adm-nav-h) + env(safe-area-inset-bottom))}
  body.is-admin .pos-bar{bottom:calc(var(--adm-nav-h) + env(safe-area-inset-bottom))}
  body.is-admin.pos-on .admin-main{padding-bottom:calc(var(--adm-nav-h) + 96px)}
  /* Кнопка підказок стояла над «Зберегти» — тепер над панеллю */
  body.is-admin .help-btn.is-on{top:auto;bottom:calc(var(--adm-nav-h) + env(safe-area-inset-bottom) + 14px)}
  /* На касі панелі немає (там низ зайнятий чеком), тож і зсувати нічого */
  body.pos-screen .admin-main{padding-bottom:18px}
}

/* ---------- палець замість курсора в адмінці ---------- */
/*
 * 44px — той самий поріг, що вже діє на вітрині (див. .chip у чекауті). У
 * стафному інтерфейсі його не було, і найдрібнішими виявились кнопки з
 * найдорожчою помилкою: пробити чек у ДПС, створити накладну, скасувати
 * замовлення. Промах там відкочується не Ctrl+Z, а поверненням.
 *
 * Ширину не чіпаємо — лише висоту: кнопки в рядках таблиць стоять поруч, і
 * розтягнута на всю ширину «Відкрити» зламала б розкладку.
 */
@media (max-width:900px){
  .admin-main .btn,.admin-main .chip{min-height:44px}
  .admin-main .btn-sm,.admin-main .btn-xs{padding-top:0;padding-bottom:0}
  /* Дрібні поля в рядках теж під палець: у них цілять так само часто */
  .admin-main input[type=text],.admin-main input[type=number],.admin-main input[type=tel],
  .admin-main input[type=email],.admin-main input[type=date],.admin-main select,
  .admin-main textarea{min-height:44px;font-size:16px}
  /* 16px вище — не про читабельність: усе, що дрібніше, Safari на iPhone
     зустрічає масштабуванням сторінки при кожному дотику в поле */
  .admin-main textarea{min-height:88px}
  .admin-main input[type=checkbox],.admin-main input[type=radio]{width:20px;height:20px}
  /* Смужка збереження над панеллю: кнопка на всю ширину, бо вона там одна
     головна, і в неї цілять не дивлячись */
  .admin-save .btn-gold{flex:1;min-width:160px}
}

/* ---------- перемикач режиму перегляду ---------- */
/* У чужій ролі блок навмисно помітний: легко забути, що права звужені,
   і почати шукати причину, чому «зникли» кнопки. */
.role-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.role-switch form{display:flex;align-items:center;gap:6px;margin:0}
/* перемикач згорнутий у кнопку: розгорнуте меню спливає поверх, а не розсуває шапку */
.role-switch-more{position:relative}
.role-switch-more summary{list-style:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line2);border-radius:8px;padding:4px 10px;color:var(--muted);font-size:12px}
.role-switch-more summary::-webkit-details-marker{display:none}
.role-switch-more summary::marker{content:''}
.role-switch-more summary:hover,.role-switch-more[open] summary{color:var(--gold);border-color:var(--gold)}
/* у боковому меню розгортаємо на місці (там є куди рости), у шапці — спливаючим
   блоком, інакше він розсунув би навігацію */
.role-switch-more[open] form{flex-direction:column;align-items:stretch;gap:8px;
  margin-top:8px;padding:12px;background:var(--bg3);border:1px solid var(--line2);border-radius:10px}
.role-switch-more[open] form select{width:100%}
.role-switch-more[open] form label{margin-bottom:-4px}
.topbar .role-switch-more[open] form{position:absolute;right:0;top:calc(100% + 6px);z-index:80;
  min-width:220px;margin-top:0;background:var(--bg2);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.role-switch select{background:var(--bg3);color:var(--text);border:1px solid var(--line2);
  border-radius:6px;padding:4px 8px;font-family:inherit;font-size:13px}
.role-switch label{font-size:12px;white-space:nowrap}
.role-switch.is-acting{background:var(--bg3);border:1px solid var(--gold);
  border-radius:8px;padding:8px 10px}
.role-switch-now{color:var(--gold2);white-space:nowrap}
.role-tag{background:var(--gold);color:var(--bg);border-radius:6px;
  padding:2px 8px;font-size:12px;font-weight:700}
@media (max-width:900px){
  .role-switch{width:100%}
  .role-switch form{width:100%;flex-wrap:wrap}
}

/* ---------- робоча точка й чужі рядки в списку замовлень ---------- */
.work-store{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.work-store label{font-size:12px;white-space:nowrap}
.work-store select{background:var(--bg3);color:var(--text);border:1px solid var(--line2);
  border-radius:6px;padding:4px 8px;font-family:inherit;font-size:13px;max-width:100%}
/* чужа точка — приглушено, щоб з першого погляду було видно, де можна діяти */
.tbl tr.row-foreign td{opacity:.62}
.tbl tr.row-foreign td:first-child{border-left:2px solid var(--line2)}

/* ---------- особисті сповіщення в профілі ---------- */
.notify-row{padding:12px 0;border-bottom:1px solid var(--bg3)}
.notify-row:last-of-type{border-bottom:0}
.notify-row .checkbox{align-items:flex-start;margin:0;font-size:13.5px}
/* канал не налаштований — галку лишаємо робочою, але видно, що зараз не дійде */
.notify-row .checkbox.is-off{opacity:.65}

/* ---------- мініатюра товару біля заголовка ---------- */
.prod-title{display:flex;align-items:center;gap:14px;min-width:0}
.prod-title h1{min-width:0;overflow-wrap:anywhere}
.prod-thumb{position:relative;flex-shrink:0;width:56px;height:56px;border-radius:8px;
  border:1px solid var(--line2);overflow:hidden;display:block}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-thumb:hover{border-color:var(--gold)}
.prod-thumb.is-empty{display:flex;align-items:center;justify-content:center;
  background:var(--bg3);font-size:24px;text-decoration:none}
/* скільки всього фото — щоб не гортати вниз лише щоб це дізнатись */
.prod-thumb-n{position:absolute;right:0;bottom:0;background:var(--gold);color:var(--bg);
  font-size:10px;font-weight:800;line-height:1;padding:2px 4px;border-radius:4px 0 0 0}
@media (max-width:600px){.prod-thumb{width:44px;height:44px}}

/* ---------- каса (продаж за покупця) ---------- */
/* Стрічка кроків. Під кожним підписом — те, що на цьому кроці вже вирішено:
   продавцю не треба вертатись, щоб пригадати, кого записав і на яку суму. */
.pos-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.pos-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:11px 14px;
  color:var(--muted);font-family:inherit;font-size:14px;transition:.15s}
.pos-step:hover{border-color:var(--line2);color:var(--text)}
.pos-step-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--bg3);color:var(--muted);font-size:13px;font-weight:700}
.pos-step-t{font-weight:600}
/* Підсумок кроку меншим і на власному рядку: він пояснює, а не сперечається
   з назвою за увагу */
.pos-step-s{flex-basis:100%;color:var(--dim);font-size:12.5px;padding-left:34px;margin-top:-2px}
.pos-step.is-active{border-color:var(--gold);color:var(--text);background:var(--bg3)}
.pos-step.is-active .pos-step-n{background:var(--gold);color:var(--bg)}
/* Пройдений крок позначаємо галкою через ::after, а не підміною тексту: номер
   лишається на місці, і стрічка не «стрибає» при переходах */
.pos-step.is-done{color:var(--text)}
.pos-step.is-done .pos-step-n{background:var(--ok);color:var(--bg)}
.pos-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px}
.pos-nav .btn-gold{min-width:190px}
.pos-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
/* Обгортка поля з підказками. Віджет кріпить випадний список до батька поля,
   тож батько має бути саме полем, а не блоком доставки цілком. */
.pos-field{position:relative}
@media (max-width:640px){
  /* На телефоні стрічка кроків має бути смужкою, а не трьома картками:
     розкладена в стовпчик, вона займала третину екрана, і до товарів на
     другому кроці доводилось прокручувати. Тому три кнопки в ряд, номер над
     підписом (так «Отримання» вміщується без обрізання), а підсумки кроків
     ховаємо: суму видно в смужці чека внизу, а покупця — на своєму кроці. */
  .pos-steps{gap:6px;margin-bottom:12px}
  .pos-step{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:3px;
    padding:7px 4px;text-align:center;font-size:12px}
  .pos-step-n{width:20px;height:20px;font-size:12px}
  .pos-step-t{font-size:12px;line-height:1.2}
  .pos-step-s{display:none}
  .pos-nav .btn,.pos-nav .btn-gold{flex:1;min-width:0}
}
/* Два стовпці: ліворуч те, з чого набирають чек, праворуч сам чек. Чек
   «липкий» — він потрібен перед очима на всій висоті плитки. */
.pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:18px;align-items:start}
.pos-top{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.pos-check{position:sticky;top:12px}
/* Смужка чека — тільки для телефона: на великому екрані чек стоїть праворуч
   цілком, і згортати там нема чого */
.pos-cart-bar{display:none}
.pos-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pos-tile{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px;
  color:var(--text);font-family:inherit;font-size:13.5px;line-height:1.3;transition:.15s}
.pos-tile:hover{border-color:var(--gold);background:var(--bg3)}
.pos-tile:active{transform:scale(.97)}
.pos-tile-photo{display:block;height:64px;border-radius:4px;background:var(--bg3) center/cover no-repeat}
.pos-tile-name{font-weight:600}
.pos-tile-var{color:var(--muted);font-size:12.5px}
.pos-tile-foot{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:auto;padding-top:4px}
/* Нуль на складі не забороняє продаж, але має бути видно без читання числа */
.pos-tile.is-empty{opacity:.65}
.pos-tile-zero{color:var(--danger2);font-size:12px}
.pos-lines td{padding:7px 8px;vertical-align:middle}
.pos-qty-btn{width:26px;height:26px;border-radius:4px;background:var(--bg3);border:1px solid var(--line2);
  color:var(--text);font-size:15px;line-height:1;cursor:pointer;margin:0 6px}
.pos-qty-btn:hover{border-color:var(--gold);color:var(--gold)}
.pos-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line);font-size:16px}
.pos-total b{font-size:22px;color:var(--gold)}
/* Непридатний номер видно на самому полі: рядок під ним пояснює, а рамка каже,
   де саме виправляти */
.pos-check input.is-bad{border-color:var(--danger2)}
/* Хто покупець цього чека. Стани мають читатись, не вчитуючись: знайдений,
   новий (акаунт зʼявиться), анонім і «номер зайнятий непідтвердженим акаунтом» —
   це різні наслідки, а не відтінки одного. */
.pos-who{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:9px 11px;
  border-radius:4px;font-size:13px;line-height:1.4;background:var(--bg3);
  border-left:3px solid var(--line2);color:var(--muted)}
.pos-who-icon{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--line2);color:var(--bg)}
.pos-who.is-found{border-left-color:var(--ok);color:var(--text)}
.pos-who.is-found .pos-who-icon{background:var(--ok)}
.pos-who.is-new{border-left-color:var(--gold);color:var(--text)}
.pos-who.is-new .pos-who-icon{background:var(--gold)}
.pos-who.is-bad{border-left-color:var(--danger2);color:var(--danger2)}
.pos-who.is-bad .pos-who-icon{background:var(--danger2)}
/* Не помилка (продаж відбудеться), але й не «все гаразд»: замовлення лишиться
   без кабінету, і продавець має це побачити, а не прочитати згодом у скарзі */
.pos-who.is-taken{border-left-color:var(--gold);color:var(--text)}
.pos-who.is-taken .pos-who-icon{background:var(--gold)}
/* Поле штрихкоду з кнопкою камери й самим кодом малюнком: сторінку кодів
   друкують і ріжуть на етикетки, тож код має бути видно поруч із полем */
/* Поля тут — головне, з чим працюють, тож вони мають виглядати полями: у
   таблицях адмінки рамка ледь помітна, і порожній рядок читався як «сюди
   нічого не ввести».
   [type=text] у селекторі обовʼязково: спільне правило .tbl input[type=text]
   вагоміше за .tbl-codes input і робило поля прозорими — на екрані, де
   заповнюють саме їх, лишалися самі кнопки посеред порожнечі. */
.tbl-codes input[type=text]{border:1px solid var(--line2);background:var(--bg);border-radius:4px}
.tbl-codes td{vertical-align:top}
/* Рядок росте від малюнка коду й буває вищим за назву втричі, тож риска-звʼязка
   ловить перший рядок назви, а не середину комірки: інакше вона висіла б у
   порожнечі під фасовкою, до якої веде. */
.tbl-codes tr.variant-sub td.var-name::before{top:17px}
.code-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.code-input{width:180px;font-family:monospace;letter-spacing:.5px}
.code-cell input.is-fresh{border-color:var(--gold)}
.code-acts{display:inline-flex;gap:4px}
/* Свій код має впізнаватись із першого погляду: саме його треба надрукувати */
.code-tag{font-size:11px;color:var(--gold2);border:1px solid var(--line2);
  border-radius:20px;padding:2px 9px;white-space:nowrap}
/* Пояснення до збитого коду — поруч із самим полем, а не десь угорі сторінки */
.code-bad{flex-basis:100%;color:var(--danger2);font-size:12px;line-height:1.35}
.code-pic{flex-basis:100%;line-height:0;margin-top:4px}
.code-pic svg{max-width:100%;height:auto}
/* Вузький екран. Решта таблиць адмінки їде вбік прокруткою — тут це не
   працює: коди проставляють, тримаючи товар у другій руці, і возити таблицю
   вбік, щоб дістатись поля, однією рукою не вийде. Тому рядок розгортається
   карткою — назва зверху, поля під нею, — і сторінка гортається тільки вниз.
   Підписи колонок переїжджають у самі комірки (data-lbl у codes.php): шапка
   на картках лишилась би десь угорі, за екран від поля, яке пояснює. */
@media (max-width:900px){
  .tbl-codes{display:block;overflow:visible;white-space:normal;background:none;border:0}
  .tbl-codes tbody,.tbl-codes tr,.tbl-codes td{display:block}
  .tbl-codes tr:first-child{display:none}
  .tbl-codes tr{background:var(--bg2);border:1px solid var(--line);border-radius:6px;
    padding:12px 14px;margin-bottom:10px}
  /* Обидва рядки перелічені навмисно: спільні правила ієрархії помічають
     комірки через tr.row-product / tr.variant-sub, і коротшого селектора вони
     переважили б — лінія-роздільник лишилась би посеред картки */
  .tbl-codes td,.tbl-codes tr.row-product td,.tbl-codes tr.variant-sub td{
    background:none;border:0;padding:8px 0 0;font-size:14px}
  .tbl-codes td:first-child{padding-top:0;font-size:15px}
  /* Підпис колонки — над полем, як у звичайній формі */
  .tbl-codes td[data-lbl]::before{content:attr(data-lbl);display:block;margin-bottom:5px;
    font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  /* Уступ рискою тут не читається: картки й так стоять окремими блоками, тож
     вкладеність показуємо зсувом самої картки й смужкою по її краю */
  .tbl-codes tr.variant-sub{margin-left:16px;border-left:2px solid var(--line2)}
  .tbl-codes tr.variant-sub td.var-name{padding-left:0;color:var(--text);white-space:normal}
  .tbl-codes tr.variant-sub td.var-name::before{display:none}
  /* Поле на всю ширину: 180px посеред картки читалися як «сюди влізе менше,
     ніж треба», хоча код рівно 13 цифр */
  .tbl-codes input[type=text]{width:100%}
  .code-acts .btn{padding:9px 14px}
}
/* ---------- карта точок продажу ---------- */
/* Висота задана до завантаження: Google будує карту в тому, що вже має розмір,
   а в нульовому блоці вона намалювалась би нічим. Поки скрипт іде — підпис
   замість порожнього прямокутника, бо сірий прямокутник читається як поломка. */
.store-map{position:relative;height:340px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg2);overflow:hidden}
.store-map::before{content:'Карта завантажується…';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:var(--dim);font-size:13px}
.store-map.is-live::before{content:none}
/* Вікно вибору точки: карті потрібна ширина, інакше в неї не влазить квартал,
   і людина шукає свій вхід у щілину */
.modal-wide{max-width:760px}
@media (max-width:600px){ .modal-wide{padding:20px 16px} .modal-wide .store-map{height:300px} }
/* Хмарка мітки малюється на білому тлі Google, тож кольори тут не наші */
.map-pop{color:#1c1c1c;font-size:13px;line-height:1.5;max-width:230px}
.map-pop b{display:block;margin-bottom:3px;font-size:14px}
.map-pop a{color:#0b57d0}
/* Точка списком: те саме, що на карті, але словами — і працює без будь-яких
   ключів, скриптів і мережі до чужого домену */
.store-card{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.store-card h3{font-size:17px;margin-bottom:6px}
.store-card p{margin:0 0 4px;color:var(--muted);font-size:14px}
.store-card .dim{font-size:13px}
/* Графік роботи — золотим: на цій сторінці це найчастіше питання, і воно має
   вирізнятись із адреси й телефону, набраних однаково */
.store-card .store-hours{color:var(--gold);font-size:13.5px;font-weight:600;margin-top:6px}
.store-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:20px}
@media (max-width:600px){
  .store-map{height:260px}
  .store-cards{grid-template-columns:1fr}
}

/* ---------- наші партнери ---------- */
/* Рівний ряд — те, заради чого сторінка існує: партнерів дивляться, а не
   читають. Тому місце під лого однакове в усіх карток незалежно від того, яке
   лого туди лягло й чи лягло взагалі. */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.partner{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:26px 20px;
  color:inherit;transition:border-color .15s,transform .15s}
.partner.is-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.partner-logo{height:74px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.partner-logo img{max-height:74px;max-width:170px;object-fit:contain}
/* Без лого картка не має провалюватись діркою в ряду — тримаємо ту саму висоту */
.partner-initial{font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold);opacity:.75}
.partner-name{font-size:17px;font-weight:600;color:var(--text)}
.partner-desc{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.partner-go{margin-top:14px;font-size:13px;color:var(--gold)}
@media (max-width:600px){
  .partner-grid{grid-template-columns:1fr 1fr;gap:12px}
  .partner{padding:18px 12px}
  .partner-logo{height:56px;margin-bottom:10px}
  .partner-logo img{max-height:56px}
  .partner-name{font-size:15px}
  /* На двох колонках опис перетворює ряд лого на стіну тексту — ховаємо його,
     а повний опис лишається тому, хто відкриє сайт партнера */
  .partner-desc{display:none}
}

/* Наліпки друкуються з окремого вікна (див. codes.js), а не звідси: тут їх
   довелося б різати разом із таблицею */

/* Вікно камери. На весь екран навмисно: етикетку треба тримати в кадрі, а не
   цілитись у віконце розміром із марку. */
.pos-cam{position:fixed;inset:0;z-index:200;background:rgba(10,8,7,.94);
  display:flex;align-items:center;justify-content:center;padding:16px}
/* display у класі перебиває атрибут hidden — без цього рядка вікно висить
   чорним поверх екрана завжди й не ховається кнопкою «Готово» */
.pos-cam[hidden]{display:none}
.pos-cam-inner{position:relative;width:min(720px,100%);display:flex;flex-direction:column;align-items:center;gap:12px}
/* contain, а не cover: інакше видно обрізаний кадр, а читається повний —
   і людина цілиться в одне, а декодер дивиться в інше */
.pos-cam video{width:100%;height:60vh;max-height:70vh;border-radius:6px;background:#000;object-fit:contain}
/* Рамка прицілу = те, що насправді читається. Вужча за кадр навмисно: вона
   показує, наскільки великим має бути штрихкод, щоб на смужку стало пікселів. */
.pos-cam-aim{position:absolute;left:10%;right:10%;top:50%;height:40%;transform:translateY(-50%);
  border:2px solid var(--gold);border-radius:4px;box-shadow:0 0 0 100vmax rgba(0,0,0,.25);pointer-events:none}
.pos-cam-msg{color:var(--gold2);font-size:15px;text-align:center;margin:0;min-height:22px;max-width:640px}
/* Числа для розбору: що бачить камера й де саме читання зупинилось */
.pos-cam-diag{color:var(--dim);font-size:12px;text-align:center;margin:0;font-family:monospace}
.pos-cam-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pos-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pos-actions .btn-gold{flex:1;min-width:200px}
@media (max-width:900px){
  .pos-wrap{grid-template-columns:1fr}
  /* На телефоні першим іде те, з чим працюють руками: сканер і плитка. Чек
     стояв тут зверху, і через нього до товарів доводилось прокручувати
     півекрана на кожному продажі — тепер він унизу смужкою (нижче). */
  .pos-goods{order:1}
  .pos-check{order:2;position:static}
  .pos-tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  /* Категорії в один рядок із горизонтальною прокруткою: десяток категорій
     переносом займав три рядки й знову відсував товари вниз */
  .pos-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .pos-cats::-webkit-scrollbar{display:none}
  .pos-cats .chip{flex:0 0 auto}

  /* ── чек як смужка внизу ──
     Приліплений до низу екрана: завжди видно, скільки набрано й на яку суму,
     і завжди під рукою «Далі». Список позицій розкривається дотиком по
     смужці — його дивляться зрідка, а плитку весь час. */
  /* top:auto обовʼязково — базовий .pos-check «липкий» із top:12px, і разом із
     bottom:0 смужка розтягнулась би на весь екран */
  .pos-cart{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:120;
    background:var(--bg2);border-top:2px solid var(--gold);
    box-shadow:0 -10px 30px rgba(0,0,0,.45);padding:8px 12px}
  .pos-cart-bar{display:flex;align-items:center;gap:10px}
  .pos-cart-peek{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
    background:none;border:0;padding:6px 0;color:var(--text);font-family:inherit;
    font-size:14px;cursor:pointer;text-align:left}
  .pos-cart-peek b{white-space:nowrap}
  .pos-cart-sum{margin-left:auto;color:var(--gold);font-size:16px}
  .pos-cart-caret{color:var(--gold);font-size:11px;transition:transform .15s}
  .pos-cart.is-open .pos-cart-caret{transform:rotate(180deg)}
  /* Розкритий список не має накрити екран цілком: до плитки над ним ще
     повертаються, не згортаючи чек */
  .pos-cart-body{display:none;max-height:60vh;overflow-y:auto;padding-top:8px}
  .pos-cart.is-open .pos-cart-body{display:block}
  /* Місце під смужку, щоб останній ряд плитки не ховався за нею */
  .pos-pane[data-pane="2"]{padding-bottom:64px}
}

/* Смужка продажу на вітрині — та сама ідея, що й у режимі редагування:
   з режиму має бути видно, що ти в ньому, інакше в ньому лишаються назавжди */
.pos-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:10px 18px;background:var(--bg3);border-top:2px solid var(--gold);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);font-size:13.5px}
.pos-bar-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0;
  animation:cePulse 2s ease-in-out infinite}
.pos-bar-title{color:var(--gold2);white-space:nowrap}
.pos-bar-who{background:var(--bg);border:1px solid var(--line2);border-radius:20px;padding:3px 12px;white-space:nowrap}
.pos-bar-sum{white-space:nowrap}
.pos-bar-sum b{color:var(--gold)}
.pos-bar-hint{color:var(--dim);font-size:13px}
.pos-bar-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.pos-on{padding-bottom:64px}
@media (max-width:600px){.pos-bar-hint{display:none}}

/* ---------- режим редагування сайту ---------- */
/* Смужка внизу: у режимі, з якого не видно, що ти в ньому, лишаються назавжди */
.ce-bar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:10px 18px;background:var(--bg3);border-top:2px solid var(--gold);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);font-size:13.5px}
.ce-bar-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0;
  animation:cePulse 2s ease-in-out infinite}
@keyframes cePulse{0%,100%{opacity:1}50%{opacity:.3}}
.ce-bar-title{color:var(--gold2);white-space:nowrap}
/* Поточна сторінка: назва для людини, шлях — щоб не було сумнівів, яка саме */
.ce-bar-page{display:inline-flex;align-items:baseline;gap:7px;flex-shrink:0;
  background:var(--bg);border:1px solid var(--line2);border-radius:20px;padding:3px 12px}
.ce-bar-page-name{font-weight:700;color:var(--text)}
.ce-bar-path{color:var(--dim);font-size:11.5px}
.ce-bar-hint{color:var(--dim);font-size:13px}
.ce-bar-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ce-bar-tools form{margin:0}
.ce-bar-check{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ce-bar-list{position:relative}
.ce-bar-menu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:280px;max-height:52vh;overflow:auto;
  background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.5)}
.ce-bar-menu-item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);
  padding:8px 10px;border-radius:4px;cursor:pointer;font-size:13.5px;line-height:1.35}
.ce-bar-menu-item:hover{background:var(--bg3);color:var(--gold2)}
.ce-bar-menu-empty{padding:10px;color:var(--dim);font-size:13px}
body.ce-on{padding-bottom:64px}

/* Обведення зон. Саме outline, а не border: він не займає місця, тож сайт
   у режимі редагування виглядає точно так, як його побачить покупець. */
body.ce-on [data-ce]{cursor:pointer}
body.ce-on.ce-show [data-ce]{outline:1px dashed rgba(240,180,41,.55);outline-offset:3px}
body.ce-on [data-ce]:hover{outline:2px solid var(--gold);outline-offset:3px}
body.ce-on [data-ce].ce-active{outline:2px solid var(--gold2);outline-offset:3px;
  background:rgba(240,180,41,.08)}
body.ce-on [data-ce]:not(img){position:relative}
/* назва блоку зʼявляється при наведенні — щоб не гадати, що саме зараз правиш */
body.ce-on [data-ce]:not(img):hover::after{content:attr(data-ce-label);position:absolute;
  left:0;top:-11px;transform:translateY(-100%);z-index:9;
  background:var(--gold);color:var(--bg);font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.03em;text-transform:none;white-space:nowrap;padding:3px 8px;border-radius:3px;
  pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.4)}
/* Значки редагованих зон.
   Живуть окремим шаром над сторінкою, а не псевдоелементом усередині зони:
   на <img> псевдоелемент не намалюєш узагалі, а обведення саме по собі
   легко прийняти за оформлення сайту. Шар кліки не ловить — клац по значку
   потрапляє в саму зону й відкриває її, як і будь-де в ній. */
.ce-pins{position:fixed;inset:0;z-index:100;pointer-events:none;display:none}
body.ce-on.ce-show .ce-pins{display:block}
.ce-pin{position:fixed;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:var(--bg);font-size:12px;line-height:22px;text-align:center;
  font-family:var(--sans);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.45);
  pointer-events:auto;cursor:pointer}
.ce-pin:hover{background:var(--gold2);transform:scale(1.15)}
.ce-pin.is-off{display:none}
/* той самий значок у підказці смужки — щоб його впізнавали на сторінці */
.ce-pin-inline,.ce-pin-inline:hover{position:static;display:inline-block;width:17px;height:17px;
  line-height:17px;font-size:10px;vertical-align:-3px;box-shadow:none;background:var(--gold);
  transform:none;pointer-events:none;cursor:inherit}
.ce-hint-off{display:none}
body.ce-on:not(.ce-show) .ce-hint-on{display:none}
body.ce-on:not(.ce-show) .ce-hint-off{display:inline}
@keyframes ceSaved{0%{outline-color:var(--ok);background:rgba(127,176,105,.22)}
  100%{outline-color:transparent;background:transparent}}
body.ce-on [data-ce].ce-just-saved{outline:2px solid var(--ok);outline-offset:3px;
  animation:ceSaved 2.2s ease-out forwards}

/* Панель редагування */
.ce-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;z-index:115;
  background:var(--bg2);border-left:1px solid var(--line2);box-shadow:-14px 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column}
.ce-panel[hidden]{display:none}
.ce-panel-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ce-panel-label{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.ce-panel-where{margin-top:4px}
.ce-panel-close{background:none;border:0;color:var(--dim);font-size:28px;line-height:1;cursor:pointer;
  margin-left:auto;padding:0 4px}
.ce-panel-close:hover{color:var(--gold)}
.ce-panel-body{flex:1;overflow:auto;padding:18px 20px}
.ce-panel-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--bg3)}
.ce-panel-note{flex:1;min-width:0}
.ce-panel-note.is-error{color:var(--danger2)}
.ce-field{margin-bottom:20px}
.ce-field > label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.ce-field input[type=text],.ce-field input[type=url],.ce-field textarea{width:100%;background:var(--bg);
  color:var(--text);border:1px solid var(--line2);border-radius:4px;padding:10px 12px;
  font-family:inherit;font-size:14.5px;line-height:1.5}
.ce-field input:focus,.ce-field textarea:focus{outline:none;border-color:var(--gold)}
.ce-field textarea{resize:vertical}
.ce-hint{color:var(--dim);font-size:12.5px;line-height:1.5;margin-top:7px}
.ce-image img{width:100%;max-height:200px;object-fit:cover;border:1px solid var(--line2);
  border-radius:4px;margin-bottom:10px;background:var(--bg3)}
.ce-list-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
  padding:10px;border:1px solid var(--line);border-radius:4px;margin-bottom:10px;background:var(--bg)}
.ce-list-row .ce-list-a{grid-column:1}
.ce-list-row .ce-list-b{grid-column:1;margin-top:8px}
.ce-list-del{grid-row:1;grid-column:2;background:none;border:1px solid var(--line2);border-radius:4px;
  color:var(--danger2);width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;flex-shrink:0}
.ce-list-del:hover{border-color:var(--danger)}
.ce-gallery-row img{grid-row:1;grid-column:1;width:100%;height:110px;object-fit:cover;border-radius:3px;
  margin-bottom:8px}
.ce-gallery-row .ce-list-a{grid-row:2;grid-column:1}

@media (max-width:820px){
  .ce-bar{font-size:12.5px;padding:8px 12px;gap:8px}
  .ce-bar-hint{display:none}
  .ce-bar-tools{width:100%;margin-left:0;justify-content:space-between}
  body.ce-on{padding-bottom:96px}
  .ce-panel{top:auto;left:0;width:100%;height:86vh;border-left:0;border-top:1px solid var(--line2);
    border-radius:10px 10px 0 0}
}

/* ---------- список блоків контенту в адмінці ---------- */
/* Поле з посиланням займає цілий рядок сітки: адреса на 60+ символів у пів
   колонки обрізається, і переконатись, що збережено саме те, неможливо. */
.content-block .field:has(input[type=url]){grid-column:1/-1;max-width:720px}
.content-block{padding:14px 0;border-top:1px solid var(--bg3)}
.content-block:first-of-type{border-top:0;padding-top:0}
.content-block-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.content-block-head b{font-size:14.5px}

/* ---------- чек, який пробивається просто зараз ---------- */
/* Смужка над блоком чека в маршруті «каса на цьому пристрої»: поки браузер
   несе завдання в Device Manager, продавець має бачити, що зараз відбувається,
   — інакше пауза в півтори секунди читається як «нічого не сталось». */
.fiscal-runner{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;
  border:1px solid var(--bg3);border-radius:8px;font-size:13.5px}
.fiscal-runner::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid var(--gold,#f0b429);border-top-color:transparent;animation:fiscal-spin .8s linear infinite}
.fiscal-runner.is-ok::before{animation:none;border:0;background:none;content:"✓";
  color:#5fbf6b;font-weight:700;width:auto;height:auto}
.fiscal-runner.is-bad::before{animation:none;border:0;content:"✗";color:#e06666;
  font-weight:700;width:auto;height:auto}
.fiscal-runner.is-ok{border-color:#3c6b43}
.fiscal-runner.is-bad{border-color:#7a3a3a}
@keyframes fiscal-spin{to{transform:rotate(360deg)}}

/* ---------- лайтбокс: фото на весь екран ---------- */
/* Тло майже непрозоре, а не напівпрозоре: фото має лишитись єдиним, на що
   дивишся, і строкатий каталог крізь нього цьому заважає. */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,8,7,.96);padding:56px 16px}
.lb.is-open{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.lb-fig img{max-width:min(1100px,92vw);max-height:80vh;width:auto;height:auto;object-fit:contain;
  border-radius:3px;border:1px solid var(--line2)}
.lb-fig figcaption{color:var(--muted);font-size:14px;text-align:center;max-width:60ch}
/* Кнопки великі навмисно: у перегляді фото в них цілять пальцем на ходу */
.lb-x,.lb-nav{position:absolute;background:none;border:none;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;transition:color .15s}
.lb-x:hover,.lb-nav:hover{color:var(--gold)}
.lb-x{top:8px;right:12px;width:48px;height:48px;font-size:32px}
.lb-nav{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:40px}
.lb-prev{left:4px} .lb-next{right:4px}
.lb-num{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:var(--dim);
  font-size:12.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
/* Курсор-лупа там, де фото справді збільшується */
.is-zoomable{cursor:zoom-in}
@media (max-width:640px){
  .lb{padding:52px 8px}
  .lb-nav{width:44px;height:44px;font-size:30px}
  .lb-fig img{max-height:70vh}
}

/* Password visibility toggle styling */
.password-toggle-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.password-toggle-wrapper input[type="password"],
.password-toggle-wrapper input[type="text"] {
  padding-right: 40px !important;
}
.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s;
  z-index: 2;
}
.password-toggle-btn:hover {
  color: var(--gold);
}


/* ---------- курси ---------- */
/*
 * Картка курсу горизонтальна, і це не про смак.
 *
 * Товарна картка вертикальна з великим фото зверху: банку меду впізнають саме
 * по банці, і рішення ухвалюють за секунду. З курсом навпаки — дивляться не на
 * картинку, а на те, що написано, і фото на пів екрана лише відсуває текст,
 * заради якого сюди прийшли. Ті самі дані, інша вага.
 */
.course-list{display:flex;flex-direction:column;gap:18px;margin-top:36px}
.course-card{display:grid;grid-template-columns:280px 1fr;background:var(--bg2);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:border-color .2s}
.course-card:hover{border-color:var(--line2)}
/* Пропорція 4:3, а не квадрат: у кадр курсу лягає пасіка й люди, а не банка */
.course-card-img{position:relative;aspect-ratio:4/3;background:var(--bg3);display:block;overflow:hidden}
.course-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.course-card:hover .course-card-img img{transform:scale(1.03)}
.course-card-img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.35}
/* «Ваш курс» — перше, що має впасти в око тому, хто вже заплатив */
.course-badge{position:absolute;left:12px;top:12px;background:var(--gold);color:var(--bg);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:3px}
.course-card-body{padding:24px 26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.course-card-title{font-family:var(--serif);font-size:24px;line-height:1.15;margin:0}
.course-card-title a{color:var(--text)}
.course-card-title a:hover{color:var(--gold)}
.course-card-desc{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
/* Факти в рядок: тривалість, формат, група — те, що вирішує «чи мені підходить» */
.course-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:2px 0 0;padding:0}
.course-facts li{display:flex;flex-direction:column;gap:2px}
.course-facts span{color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.course-facts b{color:var(--text);font-size:14px;font-weight:600}
.course-card-foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.course-card-foot .price{font-family:var(--sans);font-size:22px;font-weight:700;color:var(--gold)}
.course-card-foot .price s{color:var(--dim);font-size:15px;font-weight:400;margin-right:8px}
.course-expired{color:var(--dim);font-size:13px}

@media (max-width:760px){
  /* На телефоні фото зверху — колонка в 280px там лишила б тексту третину
     ширини, а курс читають, а не роздивляються */
  .course-card{grid-template-columns:1fr}
  .course-card-img{aspect-ratio:16/9}
  .course-card-body{padding:20px 18px}
  .course-card-title{font-size:20px}
  .course-card-foot .btn{width:100%}
}

/* ---------- сторінка курсу ---------- */
.course-hero-img{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--bg3)}
.course-hero-img img{width:100%;height:100%;object-fit:cover}
/* Факти під заголовком — крупніше, ніж у картці: тут вони частина обкладинки */
.course-facts-lg{gap:14px 40px;margin-top:24px}
.course-facts-lg b{font-size:16px}
.course-buy{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--line)}
.course-buy .price{font-family:var(--sans);font-weight:700;color:var(--gold)}
.course-buy .price s{color:var(--dim);font-size:19px;font-weight:400;margin-right:10px}
.course-buy form{margin:0}
/* Куплений курс: повідомлення на всю ширину — це головне, що людина має тут
   побачити, а не рядок збоку від кнопки */
.course-owned-note{flex-basis:100%;display:flex;flex-direction:column;gap:4px;
  background:rgba(240,180,41,.1);border:1px solid var(--gold);border-radius:6px;padding:14px 16px}
.course-owned-note b{color:var(--gold)}
.course-owned-note span{color:var(--muted);font-size:13.5px;line-height:1.5}

/* Результати навчання — галками, а не крапками: список крапок читається як
   зміст, а тут кожен рядок — обіцянка, яку курс виконує */
.course-learn{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.course-learn li{position:relative;padding-left:32px;color:var(--text);font-size:15.5px;line-height:1.55}
.course-learn li::before{content:'✓';position:absolute;left:0;top:-1px;width:20px;height:20px;
  border-radius:50%;background:var(--gold);color:var(--bg);font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center}

.course-text{color:var(--muted);font-size:15.5px;line-height:1.75;margin-top:14px}

.course-program{list-style:none;counter-reset:none;margin:18px 0 0;padding:0;display:grid;gap:2px}
.course-program li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line)}
.course-program li:last-child{border-bottom:0}
.course-program li span{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);
  color:var(--gold);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.course-program li div{color:var(--text);font-size:15.5px;line-height:1.5;padding-top:4px}

.course-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.course-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}

/* Диплом із перевіркою — те, чим цей курс відрізняється від «курсу з
   інстаграма». Досі про перевірку знав лише той, хто сам знайшов /diploma. */
.course-diploma{margin-top:48px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:6px;padding:24px 26px}

@media (max-width:760px){
  .course-facts-lg{gap:12px 24px}
  .course-buy{gap:14px}
  .course-buy .btn{width:100%}
  .course-gallery{grid-template-columns:repeat(2,1fr)}
  .course-diploma{padding:20px 18px}
  .course-diploma .btn{width:100%}
}

/* ---------- наявність по точках ---------- */
/*
 * Згорнута з тієї ж причини, що й торг: головну відповідь («є / немає / буде
 * під замовлення») людина вже отримала кнопкою й рядком про виготовлення.
 * Список точок відповідає на друге питання — «а де саме забрати», — і його
 * ставлять лише ті, хто збирається їхати.
 */
.avail-box{margin:0 0 4px}
.avail-toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line2)}
.avail-toggle::-webkit-details-marker{display:none}
.avail-toggle::marker{content:''}
.avail-toggle::after{content:'▾';color:var(--gold);font-size:11px;transition:transform .15s}
.avail-box[open] .avail-toggle{border-bottom:0;margin-bottom:6px}
.avail-box[open] .avail-toggle::after{transform:rotate(180deg)}
.avail-toggle:hover{color:var(--gold)}