/* Flow checkout — scoped styles (.opc-*).
   Змінні — на корені .opc-page / .opc-toasts, значення = пресет «Нейтральний» (Opc\ThemeSpec::OPC). «Вигляд»
   (Flow → Чекаут) перекриває їх інлайн-стилем <style id="opc-theme">. Імена --opc-* стабільні: на них спирається
   «Свій CSS» магазинів. Кольори в правилах нижче — лише var(--opc-*) (сторож FlowThemeCssGuardTest). */

.opc-page, .opc-toasts {
  /* токени «Вигляду» (Opc\ThemeSpec::OPC: text → dark, surface → soft, border → line, success → green, danger → red) */
  --opc-primary: var(--fl-primary, #4F43E3);
  --opc-dark: var(--fl-text, #1C1C28);
  --opc-muted: var(--fl-muted, #6c757d);
  --opc-bg: var(--fl-bg, #F8F9FA);
  --opc-soft: var(--fl-surface, #F2F4F8);
  --opc-line: var(--fl-border, #D9DEE8);
  --opc-green: var(--fl-success, #06C270);
  --opc-warning: var(--fl-warning, #B45309);
  --opc-red: var(--fl-danger, #dc3545);
  --opc-radius: var(--fl-radius, 8px);
  --opc-gap: var(--fl-gap, 16px);
  /* похідні й залежні: після зміни токена їх перераховує Opc\Theme */
  --opc-primary-soft: rgba(79, 67, 227, .08);
  --opc-line-strong: #B9C2D0;
  --opc-green-soft: rgba(6, 194, 112, .1);
  --opc-warning-soft: #fff8e6;
  --opc-red-soft: rgba(220, 53, 69, .08);
  --opc-placeholder: #98A1B0;
  --opc-red-text: #b02a37;
  --opc-price-special: #E53535;
  --opc-green-text: #05865a;
  --opc-green-strong: #0EA96A;
  --opc-warning-text: #7a5b00;
  --opc-primary-line: #d9d6f5;
  --opc-red-faint: rgba(220, 53, 69, .04);
  --opc-red-tint: rgba(220, 53, 69, .1);
  --opc-red-line: rgba(220, 53, 69, .2);
  --opc-red-ring: rgba(220, 53, 69, .5);
  --opc-green-tint: rgba(6, 194, 112, .12);
  --opc-green-line: rgba(6, 194, 112, .3);
  --opc-warning-line: #ffe6a1;
  --opc-warning-tint: rgba(255, 193, 7, .12);
  --opc-warning-ring: rgba(255, 193, 7, .3);
  /* розділювачі в картці (заголовок блоку, рядки кошика, лічильник): за замовчуванням світлі, як «Фон блоків»; ідуть за «Рамками» —
     пресети дають «Фон блоків» білим, і розділювач на білій картці зникав би */
  --opc-divider: #F2F4F8;
  /* тонка рамка підкладок без власної рамки, коли «Вигляд» задає їхній фон (spec with): панелі на --opc-bg (вхід, згода,
     отримувач, юрособа) і плашки на --opc-soft (префікс телефону, доплата, посилка, смуга прогресу) — при білому фоні
     теми (Chameleon, CyberStore) вони інакше зливаються з білою карткою. При нейтралі 0 — вигляд як був */
  --opc-panel-edge: 0px;
  --opc-fill-edge: 0px;
  /* шкала заокруглень від одного --opc-radius (THEMES-SPEC §2.8): при нейтралі (8px) рівно колишні 4/6/8/10/12px —
     кнопки, блоки, бейджі й плашки ×.5; дрібні кути ×.75; поля, перемикачі, панелі ×1; тости й «доплата» ×1.25; рамка
     перемикачів ×1.5. Пресет або власник міняє лише --opc-radius — вкладені кути йдуть разом. Колишні класи теми
     br-4/br-8/br-12 у шаблонах прибрано: кути дає opc.css (розділ «Заокруглення» в кінці файлу) */
  --opc-radius-xs: calc(var(--opc-radius) * .5);
  --opc-radius-sm: calc(var(--opc-radius) * .75);
  --opc-radius-lg: calc(var(--opc-radius) * 1.25);
  --opc-radius-xl: calc(var(--opc-radius) * 1.5);
  /* шкала відступів від --opc-gap (при нейтралі 16px): поля картки ×1.25 (20), між блоками ×1, поля панелей, між полями й
     рядками ×.75 (12), між плитками способів ×.5 (8). Відступи всередині кнопок, полів і перемикачів — сталі */
  --opc-gap-xs: calc(var(--opc-gap) * .5);
  --opc-gap-sm: calc(var(--opc-gap) * .75);
  --opc-gap-lg: calc(var(--opc-gap) * 1.25);
  /* незмінні (лише через «Свій CSS») */
  --opc-surface: #fff;
  --opc-primary-contrast: #fff;
  --opc-disabled-bg: #f5f5f5;
  --opc-spinner: rgba(255, 255, 255, .5);
  --opc-shimmer: rgba(0, 0, 0, .06);
  --opc-overlay: rgba(28, 28, 40, .55);
  --opc-shadow-sm: 0 1px 2px rgba(28, 28, 40, .04);
  --opc-shadow-md: 0 2px 8px rgba(28, 28, 40, .12);
  --opc-shadow-lg: 0 12px 32px rgba(28, 28, 40, .16);
}
.opc-page { padding-bottom: 24px; }
/* hidden ховає завжди. Flow ховає й показує свої елементи атрибутом hidden (prop('hidden')), але на темі з Bootstrap 3
   (Parashut) його перебивали правила з display — свої (.opc-badge, .opc-tg-mismatch, .opc-reco-nav) і теми
   (.sc-btn { display: inline-block }). На parobaza.com 2026-11-08: «Підтвердити через Telegram — без коду» в кабінеті було
   видно, хоча це підтвердження вимкнено; у реєстрації біля «Телефон» стояло «підтверджено» до підтвердження; у чекауті
   кнопки «номер у Telegram інший» не ховались. Bootstrap 4/5 робить так само: [hidden] { display: none !important }.
   Лише елементи Flow (клас opc-… або кнопка .sc-btn на сторінці Flow): розмітку чужих модулів (способи оплати) не чіпаємо. */
.opc-page [class*="opc-"][hidden], .opc-page .sc-btn[hidden] { display: none !important; }
.opc-page .grey-text { color: var(--opc-muted); }
.opc-breadcrumb { background: transparent; padding: 12px 0 0; margin: 0; font-size: 12px; }
.opc-breadcrumb .breadcrumb-item a { color: var(--opc-muted); text-decoration: none; }
.opc-heading { margin: 8px 0 var(--opc-gap); }

/* Blocks */
.opc-block { margin-bottom: var(--opc-gap); padding: calc(var(--opc-gap-lg) - 2px) var(--opc-gap-lg) var(--opc-gap-lg); background: var(--opc-surface); border: 1px solid var(--opc-line); box-shadow: var(--opc-shadow-sm); }
.opc-block-title { margin: -2px 0 14px; padding-bottom: 10px; line-height: 1.3; border-bottom: 1px solid var(--opc-divider); }
.opc-block-title.has-aside { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.opc-block-title > .opc-shipping-header, .opc-block-title > .opc-shipping-header-aside { position: static; margin: 0; font-weight: 400; font-size: 13px; }
.opc-row .opc-block { height: auto; }
.opc-zone-top .opc-block, .opc-zone-bottom .opc-block { margin-bottom: var(--opc-gap); }
/* порожній кошик: компактна картка по центру, кнопка звичайної ширини на десктопі (власник 2026-10-12) */
.opc-empty { text-align: center; padding: 44px 24px 40px; max-width: 560px; margin-left: auto; margin-right: auto; }
.opc-empty .opc-empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--opc-muted); }
.opc-empty .opc-empty-icon svg { width: 100%; height: 100%; display: block; }
.opc-empty .opc-empty-text { font-size: 18px; font-weight: 600; color: var(--opc-dark); margin: 0 0 6px; }
.opc-empty .opc-empty-hint { font-size: 14px; color: var(--opc-muted); margin: 0 0 22px; }
.opc-empty .sc-btn { display: inline-flex; width: auto; min-width: 240px; padding-left: 28px; padding-right: 28px; }
@media (max-width: 575.98px) { .opc-empty { padding: 32px 16px; } .opc-empty .sc-btn { width: 100%; } }

/* Sticky side */
.opc-sticky { position: sticky; top: var(--opc-sticky-top, 88px); }
@media (max-width: 991.98px) {
  .opc-sticky { position: static; }
  .opc-side { order: 2; }
  .opc-main { order: 1; }
}
.opc-side-left .opc-layout { flex-direction: row-reverse; }
@media (max-width: 991.98px) { .opc-side-left .opc-layout { flex-direction: row; } }

/* Fields */
.opc-fields { --bs-gutter-x: var(--opc-gap-sm); }
.opc-field { margin-bottom: var(--opc-gap-sm); position: relative; }
.opc-label { margin-bottom: 5px; display: block; color: var(--opc-dark); font-weight: 600; }
.opc-req { color: var(--opc-red); }
.opc-input, .opc-page .form-control.opc-input, .opc-page .form-select.opc-input { background: var(--opc-surface); border: 1px solid var(--opc-line); color: var(--opc-dark); font-size: 14px; height: 40px; padding: 8px 12px; box-shadow: none; transition: border-color .15s, background .15s; }
.opc-input::placeholder { color: var(--opc-placeholder); }
.opc-input:hover, .opc-page .form-control.opc-input:hover, .opc-page .form-select.opc-input:hover { border-color: var(--opc-line-strong); }
.opc-page textarea.opc-input { height: auto; min-height: 76px; resize: vertical; }
.opc-page .form-select.opc-input { background-color: var(--opc-surface); background-position: right 10px center; padding-right: 32px; }
.opc-input:focus, .opc-page .form-control.opc-input:focus, .opc-page .form-select.opc-input:focus { background: var(--opc-surface); border-color: var(--opc-primary); outline: 0; box-shadow: 0 0 0 3px var(--opc-primary-soft); }
.opc-input.is-invalid, .opc-page .form-control.is-invalid { border-color: var(--opc-red); background-image: none; }
.opc-page .form-select.opc-input.is-invalid, .opc-page .form-select.opc-input.is-invalid:not([multiple]):not([size]) { border-color: var(--opc-red); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-position: right 10px center; background-size: 16px 12px; background-repeat: no-repeat; padding-right: 32px; }
.opc-feedback { display: none; font-size: 12px; color: var(--opc-red); margin-top: 4px; }
.is-invalid ~ .opc-feedback, .opc-field.is-invalid .opc-feedback, .opc-methods.is-invalid .opc-feedback, .opc-contact.is-invalid > .opc-feedback, .opc-agree.is-invalid .opc-feedback, .opc-special-row.is-invalid .opc-feedback, .opc-otp.is-invalid > .opc-feedback, .opc-code-row.is-invalid .opc-feedback, .opc-telegram.is-invalid .opc-feedback { display: block; }
.opc-check { padding-left: 1.75em; margin-bottom: 8px; }
.opc-check .form-check-input { width: 18px; height: 18px; margin-left: -1.75em; margin-top: .1em; border: 1.5px solid var(--opc-line-strong); background-color: var(--opc-surface); cursor: pointer; }
.opc-check .form-check-input:checked { background-color: var(--opc-primary); border-color: var(--opc-primary); }
.opc-check .form-check-input:focus { box-shadow: 0 0 0 3px var(--opc-primary-soft); border-color: var(--opc-primary); }
.opc-check .form-check-label { cursor: pointer; }
.opc-input-group { display: flex; align-items: stretch; }
.opc-input-prefix { display: flex; align-items: center; padding: 0 12px; background: var(--opc-soft); border: var(--opc-fill-edge) solid var(--opc-line); border-right: 0; color: var(--opc-dark); border-radius: var(--opc-radius) 0 0 var(--opc-radius); }
.opc-input-group .opc-input { flex: 1; }
.opc-link { color: var(--opc-primary); text-decoration: none; }
.opc-link:hover { text-decoration: underline; }
.opc-link-btn { background: none; border: 0; padding: 0; }
.opc-link-btn:disabled { color: var(--opc-muted); text-decoration: none; cursor: default; }

/* Alerts & badges */
.opc-alert { padding: 10px 12px; }
.opc-alert-danger { background: var(--opc-red-soft); color: var(--opc-red-text); border: 1px solid var(--opc-red-line); }
.opc-alert-warning { background: var(--opc-warning-tint); color: var(--opc-warning-text); border: 1px solid var(--opc-warning-ring); }
.opc-alert-success { background: var(--opc-green-soft); color: var(--opc-green-text); border: 1px solid var(--opc-green-line); }
.opc-badge { display: inline-block; padding: 2px 6px; color: var(--opc-primary-contrast); text-transform: lowercase; margin-right: 6px; }
.opc-badge-green { background: var(--opc-green); }
/* сірий бейдж («не підтверджено»): свій фон і приглушений текст — інакше успадковував білий текст кнопки на світлому тлі */
.opc-badge.opc-badge-grey { background: var(--opc-soft); color: var(--opc-muted); }

/* Login */
.opc-login { background: var(--opc-bg); border: var(--opc-panel-edge) solid var(--opc-line); padding: var(--opc-gap-sm); margin-bottom: var(--opc-gap-sm); }
.opc-recipient { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--opc-line); }
.opc-recipient .opc-check { margin-bottom: 8px; }
.opc-recipient-panel { background: var(--opc-bg); border: var(--opc-panel-edge) solid var(--opc-line); padding: var(--opc-gap-sm); margin-bottom: var(--opc-gap-xs); }
.opc-recipient-panel .opc-field { margin-bottom: 0; }

.opc-legal { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--opc-line); }
.opc-legal.opc-legal-top { margin: 0 0 8px; padding-top: 0; border-top: 0; }
.opc-legal-switch { margin-bottom: 10px; }
.opc-legal-switch .opc-check { margin: 0; }
.opc-block-title > .opc-legal-switch { margin: 0; font-weight: 500; font-size: 13px; }
/* перемикач юрособи — поруч із «Покупець», по одній лінії; на телефоні — праворуч, вирівняно по центру рядка */
.opc-block-title.has-legal { justify-content: flex-start; align-items: center; gap: 18px; }
.opc-block-title.has-legal > .opc-legal-switch .opc-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.opc-block-title.has-legal > .opc-legal-switch .form-check-input { margin: 0; flex: 0 0 18px; }
.opc-block-title.has-legal > .opc-legal-switch .form-check-label { line-height: 1.3; }
@media (max-width: 575.98px) { .opc-block-title.has-legal { justify-content: space-between; gap: 10px; } }
.opc-block-title > .opc-legal-switch .form-check-label { font-size: 13px; }
.opc-legal .opc-check { margin-bottom: 8px; }
.opc-legal-panel { background: var(--opc-bg); border: var(--opc-panel-edge) solid var(--opc-line); padding: var(--opc-gap-sm); margin-bottom: var(--opc-gap-xs); }
.opc-legal-panel .opc-field { margin-bottom: 8px; }
.opc-legal-panel .opc-label { white-space: nowrap; }
.opc-legal-hint { margin-bottom: 8px; }
.opc-legal-pay .opc-check { margin-bottom: 2px; }
.opc-legal-pay .form-label { margin-bottom: 6px; }
.opc-recipient-hint { margin-bottom: 8px; }

/* Cart */
.opc-cart-item { display: flex; gap: var(--opc-gap-sm); align-items: center; padding: var(--opc-gap-sm) 0; border-bottom: 1px solid var(--opc-divider); }
.opc-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.opc-cart-item:first-child { padding-top: 0; }
.opc-cart-thumb img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--opc-radius); background: var(--opc-bg); }
.opc-cart-info { flex: 1; min-width: 0; }
.opc-cart-name { display: block; text-decoration: none; line-height: 1.3; }
.opc-cart-name:hover { color: var(--opc-primary); }
.opc-cart-meta { margin-top: 2px; }
.opc-cart-controls { display: flex; align-items: center; gap: 12px; }
.opc-cart-total { min-width: 90px; text-align: right; }
.opc-cart-remove { background: none; border: 0; color: var(--opc-muted); padding: 6px; border-radius: var(--opc-radius-sm); line-height: 0; }
.opc-cart-remove:hover { color: var(--opc-red); background: var(--opc-red-soft); }
.opc-cart-item-nostock { background: var(--opc-red-faint); }
.opc-qty { display: inline-flex; align-items: center; border: 1px solid var(--opc-divider); background: var(--opc-bg); height: 36px; overflow: hidden; }
.opc-qty-btn { width: 32px; height: 100%; border: 0; background: transparent; color: var(--opc-dark); font-size: 16px; }
.opc-qty-btn:hover { background: var(--opc-soft); }
.opc-qty-input { width: 40px; height: 100%; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 600; -moz-appearance: textfield; }
.opc-qty-input::-webkit-outer-spin-button, .opc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 575.98px) {
  .opc-cart-item { flex-wrap: wrap; }
  /* рядок керування — уся ширина; на 320–344 px лічильник 40 px + сума + «Видалити» 40 px мають влізти в один рядок */
  .opc-cart-controls { width: 100%; justify-content: space-between; gap: 8px; }
  .opc-cart-total { min-width: 0; }
}

/* Recommended */
/* Рекомендовані товари — горизонтальна стрічка карток зі стрілками */
.opc-reco { position: relative; }
.opc-reco-track { display: flex; gap: var(--opc-gap-sm); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--opc-line-strong) var(--opc-soft); }
.opc-reco-track::-webkit-scrollbar { height: 6px; }
.opc-reco-track::-webkit-scrollbar-track { background: var(--opc-soft); border-radius: var(--opc-radius-sm); }
.opc-reco-track::-webkit-scrollbar-thumb { background: var(--opc-line-strong); border-radius: var(--opc-radius-sm); }
.opc-reco-item { flex: 0 0 300px; max-width: 85vw; display: flex; gap: 12px; padding: var(--opc-gap-sm); border: 1px solid var(--opc-line); background: var(--opc-surface); scroll-snap-align: start; }
.opc-reco-thumb { flex: 0 0 auto; display: block; }
.opc-reco-thumb img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.opc-reco-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opc-reco-name { display: block; text-decoration: none; line-height: 1.3; }
.opc-reco-name:hover { color: var(--opc-primary); }
.opc-reco-model { margin-top: 2px; }
.opc-reco-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.opc-price-old { text-decoration: line-through; }
.opc-price-special { color: var(--opc-price-special); }
.opc-reco-add { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.opc-reco-nav { position: absolute; top: 50%; transform: translateY(-60%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--opc-line); background: var(--opc-surface); color: var(--opc-dark); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--opc-shadow-md); cursor: pointer; }
.opc-reco-nav:hover { border-color: var(--opc-primary); color: var(--opc-primary); }
.opc-reco-nav[disabled] { opacity: .35; cursor: default; }
.opc-reco-prev { left: -10px; }
.opc-reco-next { right: -10px; }
@media (max-width: 575.98px) { .opc-reco-item { flex-basis: 260px; } .opc-reco-nav { display: none; } }
.opc-price-old { text-decoration: line-through; margin-right: 6px; }

/* Methods (shipping / payment) */
.opc-method-group + .opc-method-group { margin-top: var(--opc-gap-sm); }
.opc-method-group-title { margin-bottom: 6px; }
.opc-method { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--opc-line); background: var(--opc-surface); cursor: pointer; margin-bottom: var(--opc-gap-xs); transition: border-color .15s, background .15s; }
.opc-method:hover { border-color: var(--opc-primary); }
.opc-method.is-selected { border-color: var(--opc-primary); background: var(--opc-primary-soft); }
.opc-method.is-disabled { cursor: not-allowed; opacity: .55; background: var(--opc-disabled-bg); border-style: dashed; }
.opc-method.is-disabled .opc-method-title { text-decoration: line-through; }
.opc-method.is-disabled .opc-method-note { display: block; margin-top: 2px; color: var(--opc-warning); opacity: 1; }
.opc-method-note { color: var(--opc-warning); }
.opc-method input { position: absolute; opacity: 0; width: 0; height: 0; }
.opc-method-radio { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--opc-line-strong); position: relative; transition: border-color .15s; }
.opc-method.is-selected .opc-method-radio { border-color: var(--opc-primary); }
.opc-method.is-selected .opc-method-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--opc-primary); }
.opc-method-icon { flex: 0 0 auto; object-fit: contain; }
.opc-method-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.opc-method-desc { margin-top: 2px; }
/* доплата/знижка за спосіб оплати: бейдж біля назви */
.opc-method-fee { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--opc-radius-lg); background: var(--opc-soft); border: var(--opc-fill-edge) solid var(--opc-line); color: var(--opc-dark); white-space: nowrap; }
.opc-method-fee-minus { color: var(--opc-green); }
.opc-shipping-price { margin: 0 0 10px; }
.opc-methods.is-invalid .opc-method { border-color: var(--opc-red-ring); }

/* Pills (contact, OTP channels) */
.opc-contact-label { margin-bottom: 8px; }
.opc-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--opc-soft); border: 1px solid var(--opc-line); }
.opc-pill { display: inline-flex; align-items: center; padding: 7px 12px; cursor: pointer; color: var(--opc-dark); background: transparent; transition: background .15s, color .15s; margin: 0; user-select: none; }
.opc-pill:hover { background: var(--opc-surface); }
.opc-pill.is-active { background: var(--opc-primary); color: var(--opc-primary-contrast); }
.opc-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.opc-contact.is-invalid .opc-pills { box-shadow: 0 0 0 2px var(--opc-red-ring); }

/* Special checkboxes */
/* Особливі чекбокси — рядки всередині панелі згоди, той самий стиль, що й «Я ознайомлений…» */
.opc-agree .opc-special:empty { display: none; }
.opc-agree .opc-special .opc-special-row { margin: 0 0 8px; }
.opc-special-row.is-invalid .form-check-label { color: var(--opc-red); }

/* Summary */
.opc-summary-weight { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.opc-summary-packing { margin: -4px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.5; }
.opc-summary-parcel { display: inline-block; padding: 2px 8px; line-height: inherit; background: var(--opc-soft); border: var(--opc-fill-edge) solid var(--opc-line); border-radius: var(--opc-radius-sm); color: var(--opc-dark); }
.opc-codes { margin-bottom: 12px; }
.opc-code-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.opc-code-row .opc-input { flex: 1; min-width: 0; }
.opc-code-row .sc-btn { flex: 0 0 auto; white-space: nowrap; }
.opc-code-row .opc-feedback { flex: 0 0 100%; }
.opc-totals { border-top: 1px solid var(--opc-line); padding-top: 10px; }
.opc-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.opc-total-note { display: block; font-weight: 400; opacity: .85; line-height: 1.3; }
.opc-total-grand { border-top: 1px solid var(--opc-line); margin-top: 6px; padding-top: 10px; }
/* Розширення підсумків (CHECKOUT-TOTALS-SPEC.md): рядок модуля в «Разом» — підпис зліва, поле й «Макс.» справа (макет A-1);
   поле — .opc-input, кнопка — .sc-btn-secondary чекаута; кольори, кути й відступи — лише з токенів «Вигляду» */
.opc-ext-row { padding: 4px 0; }
.opc-ext-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--opc-gap-xs); }
.opc-ext-label { display: flex; align-items: center; gap: calc(var(--opc-gap-xs) * .75); min-width: 0; margin: 0; }
.opc-ext-name { font-weight: 600; }
.opc-ext-icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--opc-primary); }
.opc-ext-ctl { display: flex; align-items: center; gap: var(--opc-gap-xs); flex: 0 0 auto; margin-left: auto; }
.opc-page .opc-ext-ctl .opc-ext-input { width: 96px; height: 34px; padding: 4px 8px; text-align: right; font-weight: 600; }
/* тема на ≤575px ставить .sc-btn { width: 100% } — у рядку підсумків кнопка лишається компактною */
.opc-page .opc-ext-ctl .sc-btn { flex: 0 0 auto; width: auto !important; height: 34px; min-height: 0; padding: 0 12px; line-height: 32px; white-space: nowrap; }
.opc-ext-row .opc-feedback { text-align: right; }
.opc-ext-row.is-invalid .opc-feedback { display: block; }
.opc-page .opc-total-value.opc-ext-discount { color: var(--opc-green-text) !important; }
.opc-ext-guest { display: flex; align-items: flex-start; gap: calc(var(--opc-gap-xs) * .75); padding: 6px 0; line-height: 1.4; }
.opc-ext-guest .opc-ext-icon { margin-top: 1px; }
.opc-ext-strong { color: var(--opc-primary); font-weight: 600; }
.opc-ext-note { text-align: right; margin-top: 2px; }
.opc-free-shipping { margin-top: 12px; }
.opc-free-shipping-text { margin-bottom: 6px; color: var(--opc-dark); }
.opc-free-shipping-text b { font-weight: 700; color: var(--opc-primary); }
.opc-progress { height: 8px; background: var(--opc-soft); border: var(--opc-fill-edge) solid var(--opc-line); }
.opc-progress-bar { background: var(--opc-primary); transition: width .3s; }
.opc-free-shipping.is-reached .opc-progress-bar { background: var(--opc-green); }
.opc-free-shipping.is-reached .opc-free-shipping-text { color: var(--opc-green-strong); font-weight: 700; }

/* OTP */
.opc-otp { background: var(--opc-bg); border: 1px dashed var(--opc-primary-line); padding: var(--opc-gap-sm); margin-bottom: var(--opc-gap-sm); }
.opc-otp-title { margin-bottom: 2px; }
.opc-otp-channels { margin: 10px 0; }
.opc-otp-step { margin-top: 10px; }
.opc-otp-row { display: flex; gap: 8px; align-items: stretch; }
.opc-otp-code { flex: 1 1 120px; min-width: 0; width: auto; letter-spacing: .3em; font-weight: 700; text-align: center; font-size: 16px; }
/* тема на ≤575px ставить .sc-btn { width: 100% } — кнопка «Підтвердити» видавлювала поле коду до квадратика */
.opc-otp-row .sc-btn { flex: 0 0 auto; width: auto !important; white-space: nowrap; }
/* Кабінет, вхід, реєстрація: блок підтвердження стоїть у колонці свого поля — коли поряд із «Підтвердити» полю коду
   лишається менше 140 px (тема з двома бічними колонками, планшет, телефон 320 px), кнопка переходить під поле, а не
   стискає його до кількох цифр (код із 6 цифр — ~110 px) */
.opc-register-page .opc-otp-row { flex-wrap: wrap; }
.opc-register-page .opc-otp-row .opc-otp-code { min-width: 140px; }
.opc-otp-status.is-ok { color: var(--opc-green-text); }
.opc-otp-status.is-error { color: var(--opc-red); }
.opc-otp.is-invalid { border-color: var(--opc-red); }
/* Крок «надіслати код» у формах кабінету («Обліковий запис», реєстрація): на комп'ютері кнопки — за шириною тексту й поруч
   (на всю ширину форми синя «Підтвердити через Telegram» ставала смугою через увесь екран, власник 2026-11-08); на телефоні —
   на всю ширину, одна під одною (дотик). Чекаут, вхід і відновлення пароля — у вузькій колонці, як були (w-100). */
.opc-otp-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* height: auto — у вузькій колонці (дві бічні колонки, планшет) напис Telegram іде в 2–3 рядки, а тема з фіксованою висотою
   кнопки (.sc-btn { height: 46px }) його обрізала б; нижче 42 px кнопка не стає */
.opc-otp-compact > .sc-btn { flex: 0 1 auto; width: auto !important; max-width: 100%; margin: 0; height: auto; min-height: 42px; }
.opc-otp-compact > :not(.sc-btn) { flex: 1 0 100%; }
@media (max-width: 575.98px) { .opc-otp-compact > .sc-btn { flex: 1 1 100%; } }

/* E-mail verification (registration) */
.opc-email-verify { background: var(--opc-bg); border: 1px dashed var(--opc-primary-line); padding: 10px 12px; margin: 6px 0 10px; }
.opc-email-verify .opc-otp-step { margin-top: 8px; }
.opc-field.is-required-dynamic .opc-label .opc-req { display: inline; }

/* Agree & submit */
.opc-agree { margin-bottom: var(--opc-gap-sm); padding: var(--opc-gap-sm); background: var(--opc-bg); border: var(--opc-panel-edge) solid var(--opc-line); border-radius: var(--opc-radius); }
.opc-agree-links a { font-weight: 600; }
.opc-agree .opc-check { margin-bottom: 0; }
.opc-agree.is-invalid .form-check-label { color: var(--opc-red); }
.opc-submit-btn { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.opc-submit-btn.is-busy { opacity: .7; pointer-events: none; }
.opc-submit-btn.is-busy::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--opc-spinner); border-top-color: var(--opc-primary-contrast); border-radius: 50%; animation: opc-spin .7s linear infinite; }
@keyframes opc-spin { to { transform: rotate(360deg); } }
/* крутилка-SVG (Flow\Icon::inline('spinner', 'opc-spin')) — у вікні оплати «Переходимо до оплати…» замість fa-spin шрифту */
.opc-spin { margin: 0 .125em; animation: opc-spin 2s linear infinite; transform-origin: 50% 50%; } /* margin — як рамка 1.25em гліфа шрифту */
@media (prefers-reduced-motion: reduce) { .opc-spin { animation: none; } }
.opc-block-submit { padding-top: 12px; }

/* Payment modal */
.opc-payment-modal { position: fixed; inset: 0; z-index: 1060; background: var(--opc-overlay); display: flex; align-items: center; justify-content: center; padding: 16px; }
.opc-payment-modal[hidden] { display: none; }
.opc-payment-modal-inner { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: var(--opc-gap-lg); background: var(--opc-surface); }

/* Busy overlay */
.opc-page.is-busy .opc-zone { opacity: .6; pointer-events: none; transition: opacity .15s; }

/* Тихе оновлення кошика: форму не блокуємо, лише приглушуємо те, що перераховується */
.opc-page.is-cart-sync [data-block="summary"] .opc-block-body { opacity: .6; transition: opacity .15s; }
/* Замок від паралельних запитів, що пишуть сесію (OpenCart її не блокує): усе, крім кошика, не реагує на вказівник, «Оформити» виглядає зайнятою.
   Без затемнення форми — кошик лишається живим, у цьому сенс тихого оновлення. */
.opc-page.is-cart-sync .opc-block[data-block]:not([data-block="cart"]) { pointer-events: none; }
.opc-page.is-cart-sync [data-block="cart"] { pointer-events: auto; } /* тема могла вкласти кошик в інший блок */
.opc-page.is-cart-sync .opc-submit-btn { opacity: .7; pointer-events: none; }
.opc-cart-item.is-updating .opc-cart-total { opacity: .5; transition: opacity .15s; }
.opc-cart-item.is-removing { opacity: .35; pointer-events: none; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .opc-page.is-cart-sync [data-block="summary"] .opc-block-body, .opc-cart-item.is-updating .opc-cart-total, .opc-cart-item.is-removing { transition: none; }
}

/* Toast */
/* Тости — правий верхній кут, картка з акцентною смугою та лінією-таймером */
.opc-toasts { position: fixed; top: 16px; right: 16px; z-index: 12500; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 32px); pointer-events: none; }
.opc-toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 40px 16px 16px; background: var(--opc-surface); color: var(--opc-dark); border-radius: var(--opc-radius-lg); border-left: 4px solid var(--opc-red); box-shadow: var(--opc-shadow-lg); overflow: hidden; pointer-events: auto; cursor: pointer; font-family: inherit; animation: opc-toast-in .32s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .24s, transform .24s; }
.opc-toast.is-hiding { opacity: 0; transform: translateY(-8px); }
.opc-toast.is-success { border-left-color: var(--opc-green); }
.opc-toast.is-info { border-left-color: var(--opc-primary); }
.opc-toast-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--opc-red-tint); color: var(--opc-red); }
.opc-toast-ic svg { width: 20px; height: 20px; }
.opc-toast.is-success .opc-toast-ic { background: var(--opc-green-tint); color: var(--opc-green); }
.opc-toast.is-info .opc-toast-ic { background: var(--opc-primary-soft); color: var(--opc-primary); }
.opc-toast-body { min-width: 0; padding-top: 1px; }
.opc-toast-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.opc-toast-text { font-size: 13px; line-height: 1.4; margin-top: 3px; color: var(--opc-muted); }
.opc-toast-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; background: transparent; color: inherit; opacity: .5; font-size: 20px; line-height: 1; border-radius: var(--opc-radius-sm); cursor: pointer; }
.opc-toast-close:hover { opacity: 1; background: var(--opc-soft); }
.opc-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--opc-red); opacity: .6; transform-origin: left; animation: opc-toast-shrink 4.5s linear forwards; }
.opc-toast.is-success .opc-toast-bar { background: var(--opc-green); }
.opc-toast.is-info .opc-toast-bar { background: var(--opc-primary); }
.opc-toast.is-paused .opc-toast-bar { animation-play-state: paused; }
@keyframes opc-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes opc-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) { .opc-toasts { top: 8px; right: 8px; left: 8px; width: auto; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .opc-toast, .opc-toast-bar { animation: none; } }
.opc-qty-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.opc-qty-btn[disabled] { opacity: .35; cursor: default; }
.opc-qty-min { white-space: nowrap; }

/* Графік роботи: ненав'язливе повідомлення в неробочий час (під заголовком, поза робочою зоною форми) */
.opc-schedule-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 var(--opc-gap);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--opc-warning-text);
  background: var(--opc-warning-soft);
  border: 1px solid var(--opc-warning-line);
  border-radius: var(--opc-radius-sm);
}
.opc-schedule-notice-ico { flex: 0 0 auto; font-size: 15px; line-height: 1.35; }
.opc-schedule-notice-text { flex: 1 1 auto; }

/* Тости на телефоні: один, у всю ширину, без «стопки» */
@media (max-width: 575.98px) {
  .opc-toasts { left: 12px; right: 12px; width: auto; max-width: none; gap: 8px; }
  .opc-toast { padding: 12px 36px 14px 12px; border-radius: var(--opc-radius); animation-name: opc-toast-in-mobile; }
  .opc-toast-ic { flex-basis: 30px; width: 30px; height: 30px; }
  .opc-toast-ic svg { width: 17px; height: 17px; }
  .opc-toast-title { font-size: 14px; }
  .opc-toast-text { font-size: 12px; }
}
@keyframes opc-toast-in-mobile { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* Спосіб зв'язку заблоковано («Оформити без підтвердження» → лише «Чекаю на дзвінок») */
.opc-pill.is-disabled { opacity: .4; pointer-events: none; }

/* Помилки в полях блоку перевізника (FlowShippings .sm-row): рамка + текст, як у стандартних полів */
.opc-page .sm-row.is-invalid .sm-input { border-color: var(--opc-red) !important; }
.opc-page .sm-row.is-invalid > .opc-feedback, .opc-page .sm-row-2.is-invalid > .opc-feedback { display: block; color: var(--opc-red); font-size: 12px; margin-top: 4px; }

/* Telegram-бот: підключення в блоці «Зв'язок» / підтвердження номера */
.opc-tg-done { color: var(--opc-green-text); }
.opc-tg-status { color: var(--opc-muted); }
.opc-tg-mismatch { display: flex; flex-wrap: wrap; gap: 8px; }
.opc-tg-mismatch .sc-btn { width: auto !important; flex: 1 1 auto; }
.opc-tg [data-tg-connect] svg, .opc-otp-tg [data-tg-connect] svg { margin-right: 6px; }
.opc-otp-tg { margin-bottom: 4px; }
.opc-otp-or { text-align: center; }

/* юрособа: пошук назви за ЄДРПОУ */
#opc-legal-company.is-loading { background-image: linear-gradient(90deg, transparent 0 40%, var(--opc-shimmer) 50%, transparent 60% 100%); background-size: 200% 100%; animation: opc-legal-shimmer 1s linear infinite; }
@keyframes opc-legal-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* збережені отримувачі в блоці «Інший отримувач»: підпис і компактний select в один рядок */
.opc-recipient-saved, .opc-legal-saved { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.opc-recipient-saved select, .opc-recipient-saved select.opc-input, .opc-recipient-saved select.form-control, .opc-legal-saved select, .opc-legal-saved select.opc-input, .opc-legal-saved select.form-control { width: auto; max-width: 100%; min-width: 220px; height: 34px; padding: 4px 34px 4px 10px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: var(--opc-surface) !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important; cursor: pointer; }
.opc-recipient-saved select:focus, .opc-legal-saved select:focus { border-color: var(--opc-primary); outline: 0; }
@media (max-width: 575.98px) { .opc-recipient-saved, .opc-legal-saved { flex-direction: column; align-items: stretch; gap: 4px; } .opc-recipient-saved select, .opc-legal-saved select { width: 100%; } }
/* вхід у чекауті (пароль або код): кнопки одної висоти з полями (не «розпухають»); min-height теми (Parashut: 42 px) — геть */
.opc-login .sc-btn { height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 40px; }


/* Telegram у блоці «Зв'язок»: три способи (за номером / бот / username) */
.opc-tg-modes .opc-check { margin: 6px 0; }
.opc-tg-modes .form-check-label { cursor: pointer; }
.opc-tg-bot-panel { padding-left: 26px; }

/* iOS: кнопки Telegram підміняються на <a href="https://t.me/…"> (FlowUtil.tgPrefetch) — вигляд як у кнопки */
a.sc-btn[data-tg-connect], a.sc-btn[data-tg-verify], a.sc-btn[data-tg-account-connect] { text-decoration: none; cursor: pointer; }
a.sc-btn[data-tg-connect]:hover, a.sc-btn[data-tg-verify]:hover, a.sc-btn[data-tg-account-connect]:hover { text-decoration: none; }

/* Заокруглення: раніше кути давали класи теми OCT у шаблонах (br-4 — кнопки, блоки, бейджі, повідомлення; br-8 — поля,
   перемикачі, панелі; br-12 — рамка перемикачів), на інших темах їх не було. Тепер — шкала від --opc-radius (корінь), при
   нейтралі ті самі 4/8/12px, під пресетом — за темою. Префікс .opc-page — щоб перебити правила кнопок і полів теми */
.opc-page .opc-block, .opc-page .opc-empty, .opc-page .opc-payment-modal-inner, .opc-page .sc-btn, .opc-page .opc-badge, .opc-page .opc-alert { border-radius: var(--opc-radius-xs); }
.opc-page .opc-input, .opc-page .form-control.opc-input, .opc-page .form-select.opc-input, .opc-page .opc-pill, .opc-page .opc-input-group, .opc-page .opc-method, .opc-page .opc-otp, .opc-page .opc-email-verify, .opc-page .opc-login, .opc-page .opc-recipient-panel, .opc-page .opc-legal-panel, .opc-page .opc-qty, .opc-page .opc-progress, .opc-page .opc-reco-item, .opc-page .opc-tg-account, .opc-page .opc-order-delivery, .opc-page .opc-recipient-row, .opc-page .opc-recipient-form { border-radius: var(--opc-radius); }
.opc-page .opc-pills { border-radius: var(--opc-radius-xl); }
/* поле з префіксом «@»: ліві кути — у префікса */
.opc-page .opc-input-group .opc-input, .opc-page .opc-input-group .form-control.opc-input { border-radius: 0 var(--opc-radius) var(--opc-radius) 0; }

/* «Постійним покупцям доступні додаткові способи…» + «Підтвердити телефон»: своя кнопка, не .btn-link.btn-sm теми
   (на parobaza.com вона була 17 px заввишки з кеглем 10,2 px) */
.opc-profile-hint { margin-top: 8px; }
.opc-profile-verify { display: inline-flex; align-items: center; min-height: 32px; margin: 4px 4px 0 0; padding: 4px 12px; border: 1px solid var(--opc-primary); border-radius: var(--opc-radius-sm); background: transparent; color: var(--opc-primary); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; vertical-align: middle; }
.opc-profile-verify:hover { background: var(--opc-primary-soft); }
.opc-profile-verify:focus-visible { outline: 2px solid var(--opc-primary); outline-offset: 2px; }

/* Телефон і сенсорні екрани (замір parobaza.com 2026-11-07): iPhone Safari збільшує сторінку, коли фокус отримує поле
   з кеглем менше 16 px, — на кожному полі чекаут «стрибав»; цілі під палець — не менше 40 px, поля — 44 px.
   Комп'ютер не змінюється. Ті самі правила для полів віджета доставки — у flowshippings/checkout.css */
@media (max-width: 767.98px), (pointer: coarse) {
  .opc-page .opc-input, .opc-page .form-control.opc-input, .opc-page .form-select.opc-input, .opc-qty-input { font-size: 16px; }
  .opc-page .opc-input, .opc-page .form-control.opc-input, .opc-page .form-select.opc-input { height: 44px; }
  .opc-login .sc-btn { height: 44px; line-height: 44px; }
  /* рядок модуля в «Разом» (бонуси): компактний, але не дрібніший за 40 px */
  .opc-page .opc-ext-ctl .opc-ext-input { height: 40px; }
  .opc-page .opc-ext-ctl .sc-btn { height: 40px; line-height: 38px; }
  .opc-qty { height: 42px; }
  .opc-qty-btn { width: 40px; }
  .opc-cart-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .opc-pill { min-height: 40px; }
  .opc-profile-verify { min-height: 40px; }
}
/* найвужчі телефони (320 px: iPhone SE 1, збільшений масштаб екрана): кнопки лічильника трохи вужчі, щоб рядок
   «лічильник · сума · Видалити» не переносився й не вилазив за рамку блоку */
@media (max-width: 359.98px) {
  .opc-qty-btn { width: 36px; }
}