/* =========================================================================
   TD-VISUAL — визуальная доработка techno-dom.by
   Подключается ПОСЛЕ td-fixes.css. Содержит: 4 карточки на главной,
   выпадающее меню каталога, мини-корзину, страницы оформления/благодарности,
   стиль полей с маской телефона.
   ========================================================================= */

/* ---------- 0. ПОЛЯ ВВОДА: единый фокус ------------------------------- */
.ui-input:focus, .ui-textarea:focus, .qo-input:focus{
    outline:0; border-color:var(--accent) !important; box-shadow:0 0 0 4px rgba(255,86,48,.14);
}
input[type="tel"].ui-input{ letter-spacing:.01em; }
input.is-invalid, .is-error input{ border-color:#D64545 !important; }

/* ---------- 1. ГЛАВНАЯ: карточки товара по 4 в ряд -------------------- */
/* На главной (есть .hero) — 4 колонки; каталог остаётся по 3, как раньше.  */
@media (min-width:1200px){
  .main:has(.hero) .products__list,
  .main:has(.hero) .products .products__list{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important; }
  .main:has(.hero) .swiper-products .swiper-slide{ width:calc((100% - 60px)/4) !important; }
}
@media (min-width:768px) and (max-width:1199px){
  .main:has(.hero) .products__list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (min-width:1200px){
  /* карточки в 4 колонки уже — чуть компактнее внутри */
  .main:has(.hero) .products__item-title,
  .main:has(.hero) .products__item-name{ font-size:.92rem; line-height:1.3; }
}

/* ---------- 2. ВЫПАДАЮЩЕЕ МЕНЮ КАТАЛОГА ------------------------------- */
@media (min-width:1200px){
  /* панель привязана к строке шапки, а не к кнопке «Каталог» — не вылезает за экран */
  .header__row--02{ position:relative; }
  .header__catalog--fullwidth{ position:static !important; }
  /* «мостик», чтобы меню не закрывалось, пока курсор едет от кнопки к панели */
  .header__catalog--fullwidth:hover::after,
  .header__catalog--fullwidth.is-open::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:20px; z-index:61; }

  html body .header__catalog--fullwidth .header__catalog-offcanvas{
    left:0; right:auto; top:calc(100% + 10px);
    width:min(1160px, calc(100vw - 80px)); min-width:0;
    height:min(580px, calc(100vh - 150px)); max-height:none;
    border:0; border-radius:26px; background:#fff; overflow:hidden;
    box-shadow:0 28px 70px rgba(26,26,26,.2), 0 0 0 1px rgba(26,26,26,.06);
    animation:tdMenuIn .18s ease-out;
  }
  @keyframes tdMenuIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none; } }

  /* левая колонка — разделы */
  html body .header__catalog-aside{
    flex:0 0 280px !important; max-height:none !important; overflow-y:auto !important;
    background:#fff; border-right:1px solid var(--border); padding:14px 12px;
  }
  html body .header__catalog-aside .header__catalog-menu > li{ margin:0 0 2px; }
  html body .header__catalog-aside .header__catalog-link{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
    font-size:.96rem; font-weight:600; line-height:1.25; color:var(--text);
    background:transparent; box-shadow:none;
  }
  html body .header__catalog-aside .header__catalog-link-arrow{ margin-left:auto; opacity:.35; transition:transform .15s, opacity .15s; }
  html body .header__catalog-aside .header__catalog-link-arrow svg{ width:14px; height:14px; }
  html body .header__catalog-aside .header__catalog-menu > li:hover > .header__catalog-link,
  html body .header__catalog-aside .header__catalog-link.is-active{
    background:var(--accent-tint); color:var(--accent); box-shadow:none;
  }
  html body .header__catalog-aside .header__catalog-link.is-active .header__catalog-link-arrow{ opacity:1; transform:translateX(2px); }

  /* правая панель */
  html body .header__catalog-main{
    flex:1 1 auto; max-height:none !important; overflow-y:auto; padding:0;
    background:#F6F3EC !important; scrollbar-width:thin;
  }
  html body .header__catalog-main:not(:has(.header__catalog-dropdown.is-active))::before{ content:none; }

  /* правая панель: шапка закреплена, прокручивается только сетка */
  html body .header__catalog-main{ overflow:hidden !important; min-height:0; }
  html body .header__catalog-main .header__catalog-dropdown.tdm-ready.is-active{
    display:flex !important; flex-direction:column; height:100%; min-height:0;
  }
  .tdm-head{
    flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin:0 28px; padding:22px 4px 16px; border-bottom:1px solid var(--border);
  }
  .tdm-head__title{ font-size:1.35rem; font-weight:800; color:var(--ink); line-height:1.2; }
  .tdm-head__all{
    display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px;
    background:var(--ink); color:#fff !important; font-weight:700; font-size:.85rem; white-space:nowrap;
    transition:background .15s;
  }
  .tdm-head__all:hover{ background:var(--accent); }

  /* сетка карточек-групп: ровные ряды, у каждой группы рамка и линии между пунктами */
  .tdm-grid{
    flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(26,26,26,.18) transparent;
    display:block; padding:20px 28px 12px;
  }
  /* карточки текут колонками и не растягиваются до высоты соседа — без больших пустых мест */
  .tdm-cols{ column-width:215px; column-gap:16px; }
  .tdm-group{ break-inside:avoid; margin:0 0 16px; background:rgba(255,255,255,.42); border:1px solid rgba(26,26,26,.09); border-radius:16px; padding:4px 18px 6px; }
  .tdm-group__title{ margin:0; padding:12px 0 10px; border-bottom:1px solid rgba(26,26,26,.09); }
  html body .header__catalog-main .tdm-group__title a{
    display:inline !important; padding:0 !important; border:0 !important; background:none !important; border-radius:0 !important; box-shadow:none !important;
    font-size:.98rem; font-weight:800; color:var(--ink); line-height:1.3; transform:none !important;
  }
  html body .header__catalog-main .tdm-group__title a:hover{ color:var(--accent); }
  .tdm-group ul{ display:block !important; margin:0; padding:0; list-style:none; }
  .tdm-group li{ margin:0; }
  .tdm-group > ul > li + li{ border-top:1px solid rgba(26,26,26,.06); }
  .tdm-group li a{
    display:block !important; padding:8px 0 !important; border:0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important; transform:none !important;
    font-size:.88rem !important; font-weight:500 !important; color:#5E584F !important; line-height:1.3;
  }
  .tdm-group li a:hover{ color:var(--accent) !important; }
  .tdm-group li.tdm-more a{ color:var(--accent) !important; font-weight:700 !important; }
  .tdm-sub{ margin:-2px 0 6px; padding:0 0 0 12px; }
  html body .header__catalog-main .tdm-sub a{ padding:3px 0 !important; font-size:.82rem !important; color:#8A8479 !important; }
  .tdm-sub a::before{ content:"– "; }
  /* бренды без вложенных пунктов — «таблетки» во всю ширину */
  .tdm-group--chips{ background:none; border:0; padding:0; margin:6px 0 16px; }
  .tdm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  html body .header__catalog-main .tdm-chips a{
    display:inline-flex !important; align-items:center; padding:9px 18px !important; border:1px solid rgba(26,26,26,.1) !important;
    border-radius:999px !important; background:rgba(255,255,255,.5) !important; font-size:.88rem; font-weight:600; color:var(--text) !important; transform:none !important; box-shadow:none !important;
  }
  html body .header__catalog-main .tdm-chips a:hover{ border-color:var(--accent) !important; color:var(--accent) !important; }

  /* исходная вёрстка колонок (до перестройки скриптом) тоже аккуратная */
  .header__catalog-dropdown--fullwidth.tdm-ready > :not(.tdm-grid):not(.tdm-head){ display:none !important; }
}

/* ---------- 3. МИНИ-КОРЗИНА (выезжающая панель) ----------------------- */
.header__cart-load{ width:min(440px,100vw); }
.header__cart-head{ padding:22px 64px 16px 24px; }
.header__cart-title{ font-size:1.4rem; }
.header__cart-clear{ font-size:.85rem; padding:6px 10px; border-radius:999px; }
.header__cart-clear:hover{ background:var(--surface-2); }
.header__cart-body{ padding:4px 24px 24px; }

.header__cart-list > li{ padding:16px 0; }
.header__cart-item{
  grid-template-columns:84px minmax(0,1fr) !important;
  grid-template-areas:"image desc" "image number" !important;
  gap:10px 14px; padding-right:0 !important; align-items:center;
}
.header__cart-item-image{ width:84px; height:84px; border-radius:18px; background:#F4F1EA; }
.header__cart-item-image img{ padding:8px; }
.header__cart-item-desc{ padding-right:34px; gap:3px; align-self:start; }
.header__cart-item-id{ font-size:.74rem; color:var(--text-soft); }
.header__cart-item-title{
  font-size:.92rem !important; line-height:1.3 !important; font-weight:700; color:var(--ink);
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3 !important;
  overflow:hidden; white-space:normal !important; text-overflow:clip !important; overflow-wrap:anywhere;
}
/* количество: нормальные − 1 + вместо стрелок и нативных спиннеров */
.header__cart-item-number{ align-self:end; }
.header__cart-item-number .ui-number{ height:38px; border-width:1px; background:#fff; }
.header__cart-item-number .ui-number__input{
  width:36px; font-weight:700; font-size:.95rem; -moz-appearance:textfield; appearance:textfield; padding:0;
}
.header__cart-item-number .ui-number__input::-webkit-outer-spin-button,
.header__cart-item-number .ui-number__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.header__cart-item-number .ui-number{ order:0; }
.header__cart-item-number .ui-number__decrease{ order:-1; }
.header__cart-item-number .ui-number__decrease,
.header__cart-item-number .ui-number__increase{ width:34px; font-size:1.2rem; font-weight:600; color:var(--ink); position:relative; }
.header__cart-item-number .ui-number__decrease svg,
.header__cart-item-number .ui-number__increase svg{ display:none !important; }
.header__cart-item-number .ui-number__decrease::before{ content:"−"; }
.header__cart-item-number .ui-number__increase::before{ content:"+"; }
.header__cart-item-price{ justify-self:end; align-self:end; gap:0; text-align:right; }
.header__cart-item-price-current{ font-size:1.05rem; font-weight:800; color:var(--ink); }
.header__cart-item-price-piece{ font-size:.72rem; }
.header__cart-item-price-piece:empty{ display:none; }
/* кнопка удаления вместо «⋮» */
.header__cart-item-action{ display:none !important; }
.header__cart-item-remove{
  position:absolute; top:0; right:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-soft); background:transparent;
  transition:background .15s, color .15s;
}
.header__cart-item-remove:hover{ background:#FDECEA; color:#D64545; }
.header__cart-item-remove svg{ width:12px; height:12px; }

.header__cart-data{ margin-top:6px; }
.header__cart-data-title{ display:none; }
.header__cart-data-table td{ font-size:.92rem; color:var(--text-soft); padding:8px 0; border-bottom:0; }
.header__cart-data-table tfoot td{ color:var(--ink); font-size:1.25rem; border-top:1px solid var(--border); padding-top:14px; }
.header__cart-data-table .text-right{ color:var(--ink); font-weight:700; }
.header__cart-data-action .ui-btn{ box-shadow:0 10px 24px rgba(26,26,26,.18); }
.header__cart-data-quick-text{ margin-top:12px; line-height:1.4; }
.header__cart-sticky{ display:none !important; }

/* ---------- 4. ОФОРМЛЕНИЕ ЗАКАЗА (qo-*) ------------------------------ */
.qo{ max-width:1120px; margin:28px auto 56px; }
.qo-steps{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:0; list-style:none; font-size:.85rem; color:var(--text-soft); flex-wrap:wrap; }
.qo-steps li{ display:flex; align-items:center; gap:10px; }
.qo-steps li + li::before{ content:""; width:18px; height:1px; background:var(--border); }
.qo-steps__n{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--surface-2); font-weight:800; font-size:.75rem; color:var(--text-soft); }
.qo-steps .is-done .qo-steps__n{ background:var(--ink); color:#fff; }
.qo-steps .is-current{ color:var(--ink); font-weight:700; }
.qo-steps .is-current .qo-steps__n{ background:var(--accent); color:#fff; }
.qo__title{ font-size:2rem; font-weight:800; margin:0 0 22px; letter-spacing:-.01em; }
.qo__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr); gap:24px; align-items:start; }
.qo-card{ background:#fff; border:1px solid var(--border); border-radius:26px; padding:30px; }
.qo-card__title{ font-size:1.15rem; font-weight:800; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.qo-card__title::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }

.qo-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; margin-bottom:22px; }
.qo-field--wide{ grid-column:1 / -1; }
.qo-field label{ display:block; font-weight:700; font-size:.85rem; margin:0 0 7px; color:var(--ink); }
.qo-field label i{ color:var(--accent); font-style:normal; }
.qo-input{
  display:block; width:100%; box-sizing:border-box; height:54px; padding:0 20px;
  border:1.5px solid var(--border); border-radius:999px; background:#fff; font:inherit; font-size:1rem; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
textarea.qo-input{ height:auto; min-height:104px; padding:15px 20px; border-radius:22px; resize:vertical; line-height:1.4; }
.qo-input::placeholder{ color:#B5AFA4; }
.qo-field .quickorder__field-error{ display:block; min-height:0; margin-top:6px; padding-left:6px; font-size:.8rem; color:#D64545; }
.qo-field .quickorder__field-error:empty{ display:none; }
.qo .qo__submit{ width:100%; max-width:none; height:60px; font-size:1.05rem; }
.qo__note{ margin:14px 0 0; font-size:.82rem; line-height:1.45; color:var(--text-soft); text-align:center; }
.qo__perks{ display:flex; gap:18px; margin:18px 0 0; padding:18px 0 0; border-top:1px dashed var(--border); flex-wrap:wrap; justify-content:center; font-size:.82rem; color:#6B655B; }
.qo__perks span::before{ content:"✓"; color:var(--accent); font-weight:800; margin-right:6px; }

.qo-summary{ position:sticky; top:104px; background:#fff; }
.qo-items{ list-style:none; margin:0 0 6px; padding:0; max-height:360px; overflow-y:auto; }
.qo-item{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.qo-item:last-child{ border-bottom:0; }
.qo-item__img{ grid-row:1 / span 2; width:64px; height:64px; border-radius:16px; background:#F4F1EA; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.qo-item__img img{ width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.qo-item__name{ font-weight:700; font-size:.9rem; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qo-item__name:hover{ color:var(--accent); }
.qo-item__meta{ font-size:.78rem; color:var(--text-soft); grid-column:2; }
.qo-item__total{ grid-row:1 / span 2; grid-column:3; font-weight:800; font-size:.95rem; white-space:nowrap; }
.qo-totals{ margin-top:8px; padding-top:10px; border-top:1px solid var(--border); }
.qo-totals__row{ display:flex; justify-content:space-between; padding:6px 0; font-size:.92rem; color:var(--text-soft); }
.qo-totals__row--grand{ margin-top:6px; padding-top:14px; border-top:1px dashed var(--border); font-size:1.4rem; font-weight:800; color:var(--ink); }
.qo-summary__edit{ display:inline-block; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; }
.qo-summary__edit:hover{ color:var(--accent); }
.qo__empty{ text-align:center; padding:56px 20px; }
.qo__empty p{ margin:0 0 20px; color:var(--text-soft); font-size:1.05rem; }
#quickorder-alert:empty{ display:none; }
#quickorder-alert{ margin-bottom:16px; }

@media (max-width:991px){
  .qo__grid{ grid-template-columns:1fr; }
  .qo-summary{ position:static; order:-1; }
}
@media (max-width:575px){
  .qo{ margin:16px auto 40px; }
  .qo__title{ font-size:1.5rem; }
  .qo-card{ padding:20px; border-radius:22px; }
  .qo-fields{ grid-template-columns:1fr; }
}

/* ---------- 5. СТРАНИЦА «СПАСИБО ЗА ЗАКАЗ» -------------------------- */
.qo-success{ max-width:720px; margin:40px auto 64px; padding:48px 40px 40px; text-align:center; }
.qo-success__icon{
  width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background:#E8F6EC; color:#2E9E5B;
  display:flex; align-items:center; justify-content:center; animation:tdPop .5s cubic-bezier(.2,1.4,.4,1);
}
.qo-success__icon svg{ width:42px; height:42px; }
.qo-success__icon path{ stroke-dasharray:40; stroke-dashoffset:40; animation:tdDraw .5s .25s ease-out forwards; }
@keyframes tdPop{ from{ transform:scale(.5); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes tdDraw{ to{ stroke-dashoffset:0; } }
.qo-success h1{ font-size:2.2rem; font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
.qo-success__num{ display:inline-block; margin:0 0 14px; padding:7px 18px; border-radius:999px; background:var(--surface-2); font-size:.95rem; color:var(--text); }
.qo-success__num b{ font-weight:800; color:var(--ink); }
.qo-success__lead{ max-width:520px; margin:0 auto 28px; color:#6B655B; line-height:1.5; font-size:1.02rem; }
.qo-success__steps{ list-style:none; margin:0 0 30px; padding:22px 0; border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }
.qo-success__steps li{ display:flex; gap:12px; align-items:flex-start; font-size:.88rem; line-height:1.35; color:#6B655B; }
.qo-success__steps b{ display:block; color:var(--ink); font-size:.92rem; margin-bottom:2px; }
.qo-success__steps span{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent-tint); color:var(--accent); font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.qo-success__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.qo-success__actions .ui-btn{ min-width:200px; }
.qo-success .ui-btn--primary{ color:#fff !important; }
.qo-success__phone{ margin:22px 0 0; font-size:.88rem; color:var(--text-soft); }
.qo-success__phone a{ color:var(--ink); font-weight:700; white-space:nowrap; }
@media (max-width:640px){
  .qo-success{ padding:32px 20px 28px; margin:16px auto 40px; }
  .qo-success h1{ font-size:1.7rem; }
  .qo-success__steps{ grid-template-columns:1fr; }
  .qo-success__actions .ui-btn{ width:100%; }
}

/* ---------- 6. СЧЁТЧИК КОЛИЧЕСТВА: везде «− 1 +» вместо стрелок ---------- */
.ui-number__input{ -moz-appearance:textfield; appearance:textfield; }
.ui-number__input::-webkit-outer-spin-button,
.ui-number__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ui-number__decrease{ order:-1; }
.ui-number__input{ order:0; }
.ui-number__increase{ order:1; }
.ui-number__decrease svg, .ui-number__increase svg{ display:none !important; }
.ui-number__decrease::before, .ui-number__increase::before{ font-size:1.25rem; font-weight:600; line-height:1; color:var(--ink); }
.ui-number__decrease::before{ content:"\2212"; }
.ui-number__increase::before{ content:"+"; }
.ui-number__decrease:disabled, .ui-number__increase:disabled{ opacity:.4; }

/* ---------- 7. СТРАНИЦА «КОРЗИНА» (checkout/cart) --------------------- */
.cart__title{ font-size:1.5rem; font-weight:800; margin-bottom:18px; display:block; }
.cart__content{ border-radius:26px; padding:6px 28px; background:#fff; }
.cart__list > li{ padding:22px 0; }
.cart__item{
  grid-template-columns:104px minmax(0,1fr) auto 36px !important;
  grid-template-areas:"image desc price remove" "image number number number" !important;
  gap:8px 20px; align-items:start;
}
.cart__item-image{ width:104px; height:104px; border-radius:20px; background:#F4F1EA; }
.cart__item-desc{ gap:5px; }
.cart__item-title{ font-size:1.02rem; line-height:1.35; color:var(--ink); }
.cart__item-price{ font-size:1.2rem; color:var(--ink); }
.cart__item-action{ position:static !important; grid-area:remove; justify-self:end; }
.cart__item-number{ align-self:end; margin:0; }
.cart__item-number .ui-number{ height:44px; border-width:1px; }
.cart__item-number .ui-number__input{ width:44px; font-weight:700; padding:0; }
.cart__item-number .ui-number__decrease, .cart__item-number .ui-number__increase{ width:40px; }
.cart__item-remove{ width:36px !important; height:36px !important; background:transparent !important; color:var(--text-soft) !important; }
.cart__item-remove:hover{ background:#FDECEA !important; color:#D64545 !important; }
.cart__data{ border-radius:26px; background:#fff; padding:28px; }
.cart__data-title{ font-size:1.2rem; margin-bottom:16px; }
.cart__data-table td, .cart__data-table th{ padding:10px 0; font-size:.95rem; color:var(--text-soft); border-bottom:0; font-weight:500; }
.cart__data-table td.text-right{ color:var(--ink); font-weight:700; }
.cart__data-table tfoot th{ padding-top:16px; border-top:1px dashed var(--border); font-size:1.5rem; font-weight:800; color:var(--ink); text-align:left; }
.cart__data-table tfoot th.text-right{ text-align:right; }
.cart__data-table mark{ background:var(--surface-2); color:var(--ink); border-radius:999px; padding:2px 9px; font-size:.8rem; font-weight:700; margin-left:4px; }
.cart__checkout-btn{ height:62px; font-size:1.05rem; box-shadow:0 12px 28px rgba(26,26,26,.18); }
@media (max-width:767px){
  .cart__content{ padding:4px 16px; }
  .cart__item{
    grid-template-columns:76px minmax(0,1fr) 34px !important;
    grid-template-areas:"image desc remove" "image price price" "image number number" !important; gap:6px 12px;
  }
  .cart__item-image{ width:76px !important; height:76px !important; }
  .cart__item-price{ text-align:left !important; }
}