/* =====================================================================
   modern-shop.css — сучасний шар оформлення магазину Alien Labs.
   Вантажиться ОСТАННІМ (після style.css і wp.css), тому перекриває legacy.
   Правити тут, а НЕ у style.css (той величезний і мініфікований).

   Структура:
     1) Дизайн-токени
     2) Базові виправлення розкладки (шапка/адмінбар)
     3) Картка товару
     4) Кошик і міні-кошик
     5) Каталог і фільтри
     6) Оформлення замовлення
   ===================================================================== */

/* ---------- 1) ДИЗАЙН-ТОКЕНИ ---------- */
:root{
  --ms-accent:#005aff;        /* фірмовий синій (з .btn-blue) */
  --ms-accent-dark:#0047cc;
  --ms-accent-soft:#eef4ff;
  --ms-ink:#0f172a;           /* основний текст */
  --ms-ink-2:#334155;         /* вторинний текст */
  --ms-mut:#64748b;           /* приглушений */
  --ms-line:#e6e9ef;          /* межі */
  --ms-bg:#f4f6fa;            /* фон блоків */
  --ms-card:#ffffff;
  --ms-ok:#16a34a;
  --ms-ok-soft:#dcfce7;
  --ms-bad:#dc2626;
  --ms-bad-soft:#fee2e2;
  --ms-warn:#d97706;
  --ms-r:16px;                /* радіус карток */
  --ms-r-sm:12px;
  --ms-shadow:0 10px 30px -14px rgba(15,23,42,.18);
  --ms-shadow-sm:0 8px 24px -16px rgba(15,23,42,.25);
  --ms-wrap:1101px;           /* ширина контенту (як .wrapper) */
}

/* ---------- Спільні дрібниці ---------- */
.ms-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   2) БАЗОВІ ВИПРАВЛЕННЯ РОЗКЛАДКИ
   Шапка .header-black — position:fixed, рівно 81px на всіх брейкпоінтах.
   Контент отримував відступ через .content{padding-top:81px} (style.css:1414),
   але на сторінці товару .catalog-open__main{padding-top:0} (style.css:2074)
   його скасовує — стара розмітка компенсувала це через
   .catalog-open__inside{margin-top:80px}, якого в новій .apx-* розмітці немає.
   Тому заголовок «залазив» під шапку.
   --wp-admin--admin-bar--height існує ЛИШЕ коли показано адмінбар WP
   (тема не викликає body_class(), тож класу .admin-bar немає — це єдиний
   надійний перемикач «залогінений/ні»).
   ===================================================================== */
:root{ --ms-header-h:81px; }

/* Відступ контенту під фіксовану шапку на внутрішніх сторінках.
   .main-black .content = (0,2,0) — б'є .catalog-open__main (0,1,0) незалежно від порядку. */
.main-black .content{
  padding-top: calc(var(--ms-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

/* Сама шапка опускається нижче адмінбару (у адміна), інакше він її перекриває. */
.main-black .header-content.header-black{
  top: var(--wp-admin--admin-bar--height, 0px);
}
/* На <=600px адмінбар WP стає position:absolute і скролиться геть — зсув не потрібен. */
@media screen and (max-width:600px){
  .main-black .header-content.header-black{ top:0; }
}

/* Липка колонка галереї має зупинятись ПІД шапкою, а не під нею ховатись. */
.apx-gallery{
  top: calc(var(--ms-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

/* =====================================================================
   4) МІНІ-КОШИК (панель під іконкою кошика)
   Проблема: панель успадкувала типографіку сторінки /cart (21px CAPS назва,
   24px ціна, 30px «Итого») і не мала left/right, тому «стискалась» у місці
   статичного положення. Тут — власний масштаб і нормальне позиціювання.
   ===================================================================== */
.header-basket{ position:relative; }

.modal-basket{
  position:absolute;
  top:100%; right:0; left:auto;
  margin-top:12px;
  width:min(404px, calc(100vw - 24px));
  background:var(--ms-card);
  border:1px solid var(--ms-line);
  border-radius:var(--ms-r);
  box-shadow:0 18px 44px -18px rgba(15,23,42,.32);
  padding:14px 16px 16px;
  z-index:60;
}
.modal-basket .modal-angle{ left:auto; right:20px; }

/* прокрутка списку замість «вилізання» за екран */
.modal-basket .modal-custom-box{
  height:auto !important;
  max-height:min(58vh, 420px);
  overflow-y:auto;
  padding-right:4px;
}

/* --- типографіка позиції --- */
.modal-basket .ordering-right__box{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid var(--ms-line);
  position:relative;
}
.modal-basket .ordering-right__box:last-child{ border-bottom:0; }
.modal-basket .ordering-right__img{ width:56px;height:56px;margin:0; }
.modal-basket .ordering-right__img img{
  width:100%;height:100%;object-fit:cover;border-radius:10px;background:#fff;
}
.modal-basket .right-description__name{
  display:block;
  font-size:14px !important;
  line-height:1.35 !important;
  text-transform:none !important;
  font-weight:600 !important;
  color:var(--ms-ink) !important;
  letter-spacing:0 !important;
  margin:0 22px 4px 0;
  text-decoration:none;
}
.modal-basket .right-description__name:hover{ color:var(--ms-accent) !important; }
.modal-basket .right-description__code{ font-size:12px;color:var(--ms-mut);margin-bottom:8px; }

.modal-basket .right-description__box{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal-basket .right-description__group,
.modal-basket .modal-description__group{ display:flex;align-items:center;gap:6px; }
.modal-basket .modal-basket__price{
  font-size:12px !important; color:var(--ms-mut) !important;
  text-transform:none !important; font-weight:400 !important; margin:0 !important;
}
.modal-basket .right-description__price{
  font-size:15px !important; font-weight:700 !important;
  text-transform:none !important; color:var(--ms-ink) !important; margin:0 !important;
}
.modal-basket .right-description__price span{ font-size:12px;font-weight:600;color:var(--ms-mut); }
.modal-basket input.basket-number{
  width:58px;height:32px;padding:0 6px;text-align:center;
  border:1px solid var(--ms-line);border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ms-ink);background:#fff;
}
/* хрестик видалення */
.modal-basket .ordering-right__close{
  position:absolute; top:10px; right:0;
  width:22px;height:22px;line-height:22px;text-align:center;
  font-size:10px;color:var(--ms-mut);border-radius:50%;
  background:var(--ms-bg);
}
.modal-basket .ordering-right__close:hover{ background:var(--ms-bad-soft);color:var(--ms-bad); }

/* --- підвал панелі --- */
.modal-basket .modal-confirm{
  border-top:1px solid var(--ms-line); margin-top:6px; padding-top:12px;
  display:flex; flex-direction:column; gap:10px;
}
.modal-basket .ordering-right__quantity{
  font-size:14px !important; color:var(--ms-mut) !important;
  text-transform:none !important; display:flex; justify-content:space-between; align-items:baseline;
}
.modal-basket .ordering-right__quantity span{
  font-size:22px !important; font-weight:800 !important; color:var(--ms-ink) !important;
}
.modal-basket .ordering-right__quantity b{ font-size:14px;font-weight:600;color:var(--ms-mut); }
.modal-basket .ordering-confirm__link{
  width:100% !important; max-width:none !important;
  height:48px; display:flex;align-items:center;justify-content:center;
  border-radius:12px; background:var(--ms-accent); color:#fff;
  font-size:15px; font-weight:700; text-transform:none; letter-spacing:0;
  text-decoration:none; transition:background .15s;
}
.modal-basket .ordering-confirm__link:hover{ background:var(--ms-accent-dark);color:#fff; }
.modal-basket .modal-basket__link{
  order:2; align-self:center;
  font-size:12.5px; color:var(--ms-mut); text-decoration:none; border-bottom:1px dashed currentColor;
}
.modal-basket .modal-basket__link:hover{ color:var(--ms-bad); }

/* порожній кошик */
.ms-cart-empty{ padding:26px 10px; text-align:center; color:var(--ms-mut); font-size:14px; }

/* legacy робив «ГРН» капсом і лишав смужку mCustomScrollbar / спінер formstyler */
.modal-basket .right-description__price span,
.modal-basket .ordering-right__quantity span,
.modal-basket .ordering-right__quantity span b,
.modal-basket .ordering-right__quantity b{ text-transform:none !important; }
.modal-basket .mCSB_scrollTools,
.modal-basket .jq-number__spin{ display:none !important; }
.modal-basket .mCSB_container,
.modal-basket .mCustomScrollBox{ overflow:visible !important; height:auto !important; margin:0 !important; }
.modal-basket .right-description__box{ flex-wrap:wrap; }
.modal-basket .ms-qty{ margin-top:0; }

@media (max-width:520px){
  .modal-basket{ width:calc(100vw - 20px); right:-8px; }
  .modal-basket .ordering-right__quantity span{ font-size:20px !important; }
}

/* --- тост «додано в кошик» --- */
.ms-toast{
  position:fixed; z-index:100000;
  left:50%; bottom:28px; transform:translateX(-50%) translateY(14px);
  display:flex; align-items:center; gap:10px;
  background:var(--ms-ink); color:#fff;
  padding:13px 20px; border-radius:999px;
  font-size:14.5px; font-weight:600;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.ms-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
.ms-toast__tick{
  width:22px;height:22px;border-radius:50%;background:var(--ms-ok);
  display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto;font-weight:800;
}
.ms-toast.is-warn .ms-toast__tick{ background:var(--ms-warn); }
/* пульс на іконці кошика */
@keyframes msPulse{ 0%{transform:scale(1)} 35%{transform:scale(1.28)} 100%{transform:scale(1)} }
.ms-bump{ animation:msPulse .45s ease; }

/* Крихти на сторінці товару: ховаємо ОСТАННЮ (назву товару — вона вже в H1),
   але лишаємо «Каталог» посиланням. Сепаратор перед нею теж прибираємо. */
.apx-scope #breadcrumbs .breadcrumb_last{ display:none; }
/* і сепаратор БЕЗПОСЕРЕДНЬО перед прихованою назвою (інакше «висяча» стрілка).
   Структура Yoast: …<span>Каталог</span> <span.bread-crumbs__item>СТРІЛКА</span> <span.breadcrumb_last>Назва</span> */
.apx-scope #breadcrumbs .bread-crumbs__item:has(+ .breadcrumb_last){ display:none; }
.apx-scope #breadcrumbs .bread-crumbs__item:nth-last-child(2){ display:none; }

/* Назви карток каталогу: обрізання CSS-ом замість jquery.ellipsis (той псував текст) */
.proposition-box__link-js{
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal !important; word-break:break-word;
}
.proposition-box__link-js .ellip{ display:inline; }

/* =====================================================================
   5) ФІЛЬТРИ КАТАЛОГУ — пошук + порційне довантаження
   ===================================================================== */
.filter-search{ margin:2px 0 10px; }
.filter-search__input{
  width:100%; height:38px; padding:0 12px 0 32px;
  border:1px solid var(--ms-line); border-radius:10px;
  font-size:14px; color:var(--ms-ink); background:#fff no-repeat 10px 50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.filter-search__input::placeholder{ color:#9aa5b4; }
.filter-search__input:focus{
  border-color:var(--ms-accent);
  box-shadow:0 0 0 3px rgba(0,90,255,.12);
}
.filter-noresult{ font-size:13px; color:var(--ms-mut); padding:6px 2px 2px; }
button.full-all-filter{
  display:block; width:100%; margin-top:8px;
  height:38px; line-height:1; padding:0 12px;
  border:1px solid var(--ms-accent); border-radius:10px;
  background:#fff; color:var(--ms-accent);
  font-size:13px; font-weight:700; text-transform:none; letter-spacing:0;
  cursor:pointer; transition:background .15s;
}
button.full-all-filter:hover{ background:var(--ms-accent-soft); }

/* =====================================================================
   6) ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (/cart)
   Усе скоупимо під .ordering, щоб не зачепити міні-кошик у шапці
   (він ділить класи .ordering-right / .ordering-right__box).
   Нічого не чіпаємо з display у .ordering-form / .ordering-form2 —
   ними керує wp.js (перемикання кроків).
   ===================================================================== */
.ordering{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:28px;
  align-items:start;
  padding:24px 0 60px;
}
.ordering .ordering-left,
.ordering .ordering-right{ float:none; width:auto; margin:0; }

.ordering .ordering-left{
  background:var(--ms-card); border:1px solid var(--ms-line);
  border-radius:var(--ms-r); padding:24px 26px; box-shadow:var(--ms-shadow-sm);
}
.ordering .ordering-box__title{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px;
  border-bottom:1px solid var(--ms-line); padding-bottom:16px;
}
.ordering .ordering-left__title{
  font-size:26px; font-weight:800; color:var(--ms-ink);
  margin:0; letter-spacing:-.3px; text-transform:none;
}
.ordering .ordering-box__title-link{
  font-size:14px; color:var(--ms-accent); text-decoration:none; font-weight:600;
}
.ordering .ordering-box__title-link:hover{ text-decoration:underline; }

/* --- кроки --- */
.ordering .ordering-step{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 12px;
}
.ordering .ordering-step__num{
  width:30px; height:30px; flex:0 0 auto;
  border-radius:50%; background:var(--ms-bg); color:var(--ms-mut);
  border:1px solid var(--ms-line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.ordering .ordering-step__num.border-grey,
.ordering .ordering-step-2 .ordering-step__num{ background:var(--ms-accent); color:#fff; border-color:var(--ms-accent); }
.ordering .ordering-step__text{
  font-size:16px; font-weight:700; color:var(--ms-ink);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.ordering .ordering-step__link{
  font-size:13px; font-weight:500; color:var(--ms-accent); text-decoration:none;
}

/* --- поля --- */
.ordering .ordering-form__box{ margin-bottom:14px; }
.ordering .ordering-form__label{
  display:block; font-size:13px; font-weight:600; color:var(--ms-ink-2);
  margin-bottom:6px; text-transform:none;
}
.ordering .ordering-form__label span{ color:var(--ms-bad); }
.ordering .ordering-form__input,
.ordering .hover-textarea textarea{
  width:100%; height:46px; padding:0 14px;
  border:1px solid var(--ms-line); border-radius:10px;
  background:#fff; color:var(--ms-ink); font-size:15px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.ordering .hover-textarea textarea{ height:auto; min-height:92px; padding:12px 14px; resize:vertical; }
.ordering .ordering-form__input:focus,
.ordering .hover-textarea textarea:focus{
  border-color:var(--ms-accent); box-shadow:0 0 0 3px rgba(0,90,255,.12);
}
.ordering .ordering-form__input.error_field_value{
  border-color:var(--ms-bad); box-shadow:0 0 0 3px rgba(220,38,38,.10);
}
.ordering .error_filed_msg,
.ordering .ordering-form__validation{
  display:block; color:var(--ms-bad); font-size:12.5px; margin-top:5px;
}

/* --- радіо як картки --- */
.ordering .ordering-form__radio-label{
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid var(--ms-line); border-radius:12px;
  padding:13px 15px; margin-bottom:10px; cursor:pointer;
  font-size:14.5px; color:var(--ms-ink); background:#fff;
  transition:border-color .15s, background .15s;
}
.ordering .ordering-form__radio-label:hover{ border-color:#c3d3ee; background:#fbfcfe; }
.ordering .ordering-form__radio-label:has(input:checked){
  border-color:var(--ms-accent); background:var(--ms-accent-soft);
}

/* --- кнопка «далі» --- */
.ordering .btn-blue.ordering-form__btn{
  height:50px; border-radius:12px; background:var(--ms-accent); color:#fff;
  border:0; font-size:15px; font-weight:700; text-transform:none; letter-spacing:0;
  padding:0 26px; margin-top:8px; cursor:pointer; width:auto; min-width:220px;
}
.ordering .btn-blue.ordering-form__btn:hover{ background:var(--ms-accent-dark); }

/* --- зведення замовлення (права колонка) --- */
.ordering .ordering-right{
  position:sticky;
  top:calc(var(--ms-header-h) + var(--wp-admin--admin-bar--height,0px) + 16px);
  background:var(--ms-card); border:1px solid var(--ms-line);
  border-radius:var(--ms-r); padding:18px 20px; box-shadow:var(--ms-shadow-sm);
}
.ordering .ordering-right__box{
  display:grid; grid-template-columns:56px 1fr; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--ms-line); position:relative;
}
.ordering .ordering-right__img{ width:56px;height:56px;margin:0; }
.ordering .ordering-right__img img{ width:100%;height:100%;object-fit:cover;border-radius:10px;background:#fff; }
.ordering .right-description__name{
  display:block; font-size:14px !important; line-height:1.35 !important;
  text-transform:none !important; font-weight:600 !important;
  color:var(--ms-ink) !important; margin:0 22px 4px 0; text-decoration:none;
}
.ordering .right-description__code{ font-size:12px; color:var(--ms-mut); margin-bottom:6px; }
.ordering .right-description__box{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ordering .modal-basket__price{ font-size:12px !important; color:var(--ms-mut) !important; text-transform:none !important; font-weight:400 !important; }
.ordering .right-description__price{
  font-size:15px !important; font-weight:700 !important;
  text-transform:none !important; color:var(--ms-ink) !important;
}
.ordering .ordering-right__close{
  position:absolute; top:10px; right:0; width:22px;height:22px;line-height:22px;
  text-align:center; font-size:10px; color:var(--ms-mut);
  border-radius:50%; background:var(--ms-bg);
}
.ordering .ordering-right__close:hover{ background:var(--ms-bad-soft); color:var(--ms-bad); }
.ordering .ordering-right__quantity{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:14px !important; color:var(--ms-mut) !important; text-transform:none !important;
  padding-top:14px;
}
.ordering .ordering-right__quantity span{ font-size:24px !important; font-weight:800 !important; color:var(--ms-ink) !important; }
.ordering .ordering-confirm__link{
  width:100% !important; max-width:none !important; height:50px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--ms-accent); color:#fff;
  font-size:15px; font-weight:700; text-transform:none; letter-spacing:0;
  text-decoration:none; margin-top:12px;
}
.ordering .ordering-confirm__link:hover{ background:var(--ms-accent-dark); color:#fff; }
.ordering input.basket-number{
  width:58px;height:32px;text-align:center;border:1px solid var(--ms-line);
  border-radius:8px;font-size:14px;font-weight:600;
}

/* --- РАДІО як картки, БЕЗ накладання кружечка на текст ---
   Розмітка теми: <input type=radio> стоїть ПЕРЕД <label> як сусід, а formstyler
   обгортає інпут у .jq-radio (абсолютно спозиційований кружечок), який лягав
   поверх першої літери. Ховаємо .jq-radio і нативний інпут, малюємо свій індикатор
   усередині лейбла; стан — через сусідній .jq-radio.checked або input:checked. */
.ordering .btn-radio__group-js,
.ordering .btn-radio__group2{ position:relative; margin-bottom:10px; }
.ordering .btn-radio__group-js > .jq-radio,
.ordering .btn-radio__group2 > .jq-radio,
.ordering .btn-radio__group-js > input.radio,
.ordering .btn-radio__group2 > input.radio{
  position:absolute !important; width:1px !important; height:1px !important;
  opacity:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important;
  pointer-events:none !important; margin:0 !important;
}
.ordering .ordering-form__radio-label{
  position:relative; padding-left:46px; margin-bottom:0; min-height:48px;
  display:flex; align-items:center;
}
.ordering .ordering-form__radio-label::before{
  content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  border:2px solid #c7d2e0; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.ordering .jq-radio.checked + .ordering-form__radio-label,
.ordering input.radio:checked + .ordering-form__radio-label{
  border-color:var(--ms-accent); background:var(--ms-accent-soft);
}
.ordering .jq-radio.checked + .ordering-form__radio-label::before,
.ordering input.radio:checked + .ordering-form__radio-label::before{
  border-color:var(--ms-accent); border-width:6px;
}
/* Тема малює ще й синю крапку через .radio+label::after (top:0;left:6px) — саме
   вона «вилазила» на обраному варіанті. Ховаємо: стан уже показує наш ::before. */
.ordering .radio + .ordering-form__radio-label::after,
.ordering .ordering-form__radio-label::after{ display:none !important; content:none !important; }
.ordering .radio + .ordering-form__radio-label{ white-space:normal; bottom:auto; }

/* Емодзі-іконки: явний стек emoji-шрифтів, щоб рендерились однаково скрізь */
.ordering .ordering-form__label::before,
.ordering .ordering-form2__link::before,
.ms-remove, .ms-toast__tick{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
}
.ms-remove span{ font-family:inherit; }

/* Селекти показуємо ЛИШЕ для обраного способу доставки (раніше — усі одразу).
   formstyler ставить інлайн style="display:inline-block" на обгортку .jq-selectbox,
   тому без !important не перекрити. */
.ordering .btn-radio__group-js > .ordering-form2__select,
.ordering .btn-radio__group-js > .jq-selectbox{ display:none !important; margin-top:10px; }
.ordering .btn-radio__group-js.is-active > .jq-selectbox{ display:block !important; width:100%; }
.ordering .btn-radio__group-js.is-active > select.ordering-form2__select:not(.jq-selectbox){ display:none !important; } /* оригінальний select схований усередині обгортки */

/* Підсумок справа: legacy .ordering-right__confirm мав margin -50px/-35px,
   що виштовхувало текст за межі картки (обрізалось з обох боків). */
.ordering .ordering-right__confirm{ margin:0 !important; padding:0 !important; text-align:left; }
.ordering .ordering-right__quantity span,
.ordering .ordering-right__quantity span b{ text-transform:none !important; margin-left:0 !important; }

/* Іконки біля підписів полів — зрозуміліше, що за що відповідає */
.ordering .ordering-form__label::before{ margin-right:6px; }
.ordering .email-form:has(input[name=firstname]) .ordering-form__label::before{ content:"👤"; }
.ordering .email-form:has(input[name=lastname])  .ordering-form__label::before{ content:"👤"; }
.ordering .email-form:has(input[name=phone])     .ordering-form__label::before{ content:"📞"; }
.ordering .email-form:has(input[name=email])     .ordering-form__label::before{ content:"✉️"; }
.ordering .ordering-form2__wrapper:has([name=delivery]) > .ordering-form__label::before{ content:"🚚"; }
.ordering .ordering-form2__wrapper:has([name=paytype])  > .ordering-form__label::before{ content:"💳"; }
.ordering .ordering-form2__link::before{ content:"💬 "; }
.ordering .ordering-form2__link{ font-size:14px; color:var(--ms-accent); text-decoration:none; display:inline-block; margin:6px 0 10px; }

/* honeypot — невидиме для людей */
.ms-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* --- Видалити (замість безпідписного хрестика) --- */
.ms-remove{
  position:absolute; top:10px; right:0;
  display:inline-flex; align-items:center; gap:4px;
  height:26px; padding:0 9px; border:1px solid var(--ms-line); border-radius:8px;
  background:#fff; color:var(--ms-mut); font-size:12px; font-weight:600; cursor:pointer;
  line-height:1; transition:background .15s, color .15s, border-color .15s;
}
.ms-remove:hover{ background:var(--ms-bad-soft); color:var(--ms-bad); border-color:#fecaca; }
.ordering .right-description__name,
.modal-basket .right-description__name{ margin-right:96px !important; }

/* --- Кількість: степер −/+ --- */
.ms-qty{ display:inline-flex; align-items:center; gap:0; margin-top:6px; }
.ms-qty__btn{
  width:32px; height:32px; border:1px solid var(--ms-line); background:#fff;
  color:var(--ms-ink); font-size:18px; line-height:1; cursor:pointer; padding:0;
}
.ms-qty__minus{ border-radius:8px 0 0 8px; }
.ms-qty__plus{ border-radius:0 8px 8px 0; }
.ms-qty__btn:hover{ background:var(--ms-accent-soft); color:var(--ms-accent); }
.ordering input.ms-qty__input,
.modal-basket input.ms-qty__input{
  width:46px !important; height:32px !important; border-radius:0 !important;
  border-left:0 !important; border-right:0 !important; text-align:center; -moz-appearance:textfield;
}
.ms-qty__input::-webkit-outer-spin-button,.ms-qty__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ms-qty__unit{ font-size:12px; color:var(--ms-mut); margin-left:8px; }
/* formstyler міг обгорнути число — ховаємо його обгортку */
.ms-qty .jq-number{ display:contents; }
.ms-qty .jq-number__spin{ display:none !important; }

/* --- зведення: не вилазить за межі --- */
.ordering{ grid-template-columns:minmax(0,1fr) minmax(300px,380px); }
.ordering .ordering-right{ min-width:0; max-width:100%; overflow:hidden; }
.ordering .ordering-right__box{ grid-template-columns:56px minmax(0,1fr); }
.ordering .ordering-right__description{ min-width:0; }
.ordering .ordering-right__quantity{ gap:10px; }
.ordering .ordering-right__quantity span{ white-space:nowrap; }
.ordering .ordering-right__quantity.fade{ display:none; } /* рядок «оплата при отриманні» — лише коли обрано */

/* інфо про онлайн-оплату на сторінці подяки */
.ms-payinfo{
  margin:16px auto 0; max-width:560px; text-align:left;
  background:var(--ms-accent-soft); border:1px solid #bfd3ff; color:#1e3a8a;
  border-radius:12px; padding:12px 16px; font-size:14.5px; line-height:1.55;
}

/* серверні помилки форми */
.ordering .response_error{ }
.ordering .response_error:not(:empty){
  display:block; background:var(--ms-bad-soft); border:1px solid #fecaca;
  color:#991b1b; border-radius:10px; padding:11px 14px; margin:12px 0 0; font-size:14px;
}

@media (max-width:900px){
  .ordering{ grid-template-columns:1fr; gap:18px; }
  .ordering .ordering-right{ position:static; }
  .ordering .ordering-left{ padding:18px 16px; }
  .ordering .ordering-left__title{ font-size:22px; }
  .ordering .ordering-form2__link{ display:block; text-align:left; margin-left:0; }
  .ordering .ordering-form2__link + .hover-textarea{ margin-left:0; }

  /* Рекомендації («Можливо вас зацікавлять»): legacy-хак .size у custom.js дає slick
     треку меншу ширину, ніж сума слайдів, і float-слайди загортаються у 3 ряди.
     На мобільному робимо нативну горизонтальну стрічку без клонів slick. */
  .open-price__slider.slick-initialized .slick-list{
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    padding:0 12px 10px !important; height:auto !important;
  }
  .open-price__slider.slick-initialized .slick-track{
    display:flex !important; flex-wrap:nowrap !important; gap:12px;
    width:auto !important; left:0 !important; transform:none !important; height:auto !important;
  }
  .open-price__slider.slick-initialized .slick-slide{
    float:none !important; flex:0 0 78vw !important; max-width:300px; width:auto !important;
    height:auto !important; scroll-snap-align:start;
  }
  .open-price__slider.slick-initialized .slick-cloned{ display:none !important; }
  .open-price__slider .slick-arrow{ display:none !important; }
}

/* =====================================================================
   7) ШВИДКІСТЬ СПРИЙНЯТТЯ
   wow.js ховав кожен блок (visibility:hidden) до появи у viewport — контент
   «випадав шматками». Показуємо все одразу, без анімацій появи.
   ===================================================================== */
.wow{ visibility:visible !important; opacity:1 !important; animation-name:none !important; -webkit-animation-name:none !important; }

/* =====================================================================
   8) КОШИК — єдина типографічна шкала (мініпанель і /cart)
   назва 14/600 · код 12 · ціна 15/700 · підсумок 22/800 · кнопка 15/700
   ===================================================================== */
.modal-basket .right-description__name,
.ordering .right-description__name{ font-size:14px !important; font-weight:600 !important; line-height:1.35 !important; }
.modal-basket .right-description__code,
.ordering .right-description__code{ font-size:12px !important; font-weight:400 !important; }
.modal-basket .right-description__price,
.ordering .right-description__price{ font-size:15px !important; font-weight:700 !important; }
.modal-basket .right-description__price span,
.ordering .right-description__price span{ font-size:12px !important; font-weight:600 !important; }
.modal-basket .ordering-right__quantity,
.ordering .ordering-right__quantity{ font-size:14px !important; font-weight:500 !important; }
.modal-basket .ordering-right__quantity span,
.ordering .ordering-right__quantity span{ font-size:22px !important; font-weight:800 !important; letter-spacing:-.3px; }
.modal-basket .ordering-right__quantity span b,
.ordering .ordering-right__quantity span b{ font-size:13px !important; font-weight:600 !important; }
.ms-qty__unit{ font-size:12px; font-weight:500; }

/* примітка про доставку/комісію під «До оплати» */
.ms-paynote{ font-size:12.5px; line-height:1.5; color:var(--ms-mut); margin-top:-6px; padding:0 0 6px; }
.ms-paynote.is-on{ color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:9px 12px; margin-top:2px; }
.ms-paynote b{ color:var(--ms-warn); }