/* KOMPIK — етап 8. Без впливу на Bootstrap-розмітку інших сайтів. */
:root { --kompik-tap-target: 44px; }

/* Довгі назви/коди не розтягують сторінку за межі екрана. */
main, main > .row, .row > [class*="col-"] { min-width: 0; }
main img, main video, main svg { max-width: 100%; }
main .card, main .border, main .alert { overflow-wrap: anywhere; }
.table-responsive { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.site-search-form { min-width: 0; }
.site-search-form .form-control, .site-mobile-search .form-control { min-width: 0; }
.site-mobile-search { width: 100%; max-width: 100%; }
.navbar .navbar-toggler:focus-visible, a:focus-visible,
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #fdba74;
  outline-offset: 2px;
}
/* Чіткий розмір картинок у сітках, менші зсуви макета під час завантаження. */
.product-card img, .product-media img, .pimg-wrap img { object-fit: contain; }

@media (min-width: 992px) {
  /* На проміжних ширинах меню не повинно вилазити за край екрана. */
  #navMain .navbar-nav { flex-wrap: wrap; }
  #navMain .site-search-form { flex: 1 1 210px; }
}
@media (min-width: 1200px) {
  #navAdmin .navbar-nav { flex-wrap: wrap; }
}

@media (max-width: 1199.98px) {
  /* Довге меню адміністратора не стискає кнопки й не створює горизонтальний скрол. */
  .navbar-collapse .navbar-nav { min-width: 0; }
  #navAdmin .navbar-nav { max-height: 65vh; overflow-y: auto; }
}

@media (max-width: 991.98px) {
  #navMain .site-search-form { width: 100%; }
  #navMain .site-search-form .form-control { flex: 1 1 auto; }
  #categoryFilters { margin-bottom: 1rem; }
}

@media (max-width: 767.98px) {
  main.container { margin-top: 1rem !important; margin-bottom: 1.5rem !important; }
  .navbar-brand { max-width: calc(100vw - 115px); overflow-wrap: anywhere; }
  .navbar-collapse .nav-link { padding-top: .65rem; padding-bottom: .65rem; }
  .btn:not(.btn-sm), .form-control, .form-select { min-height: var(--kompik-tap-target); }
  .form-control[type="checkbox"], .form-check-input { min-height: auto; }
  .pimg-wrap, .product-media { height: 175px !important; }
  .filter-card .form-check { min-height: 40px; padding-top: .2rem; padding-bottom: .2rem; }
  .filter-card .form-check-input { flex: 0 0 auto; }

  /* Замість таблиць із горизонтальним скролом — картки з підписами полів. */
  .table-responsive:has(> table.mobile-cards-table),
  .table-responsive:has(> table.cart-cards-table) { overflow-x: visible; }
  .mobile-cards-table, .cart-cards-table, .mobile-cards-table tbody,
  .cart-cards-table tbody { display: block; width: 100%; }
  .mobile-cards-table thead, .cart-cards-table thead { display: none; }
  .mobile-cards-table tbody tr:not(:has(td[colspan])),
  .cart-cards-table tbody tr:not(:has(td[colspan])) {
    display: block;
    border-bottom: 1px solid #dee2e6;
    padding: .6rem .75rem;
    background: #fff;
  }
  .mobile-cards-table tbody tr:last-child,
  .cart-cards-table tbody tr:last-child { border-bottom: 0; }
  .mobile-cards-table tbody tr:not(:has(td[colspan])) td,
  .cart-cards-table tbody tr:not(:has(td[colspan])) td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
    border: 0;
    text-align: right !important;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mobile-cards-table tbody td[data-label]::before,
  .cart-cards-table tbody td[data-label]::before {
    content: attr(data-label);
    color: #566373;
    font-size: .85rem;
    font-weight: 600;
    text-align: left;
    flex: 0 0 28%;
    align-self: center;
  }
  .mobile-cards-table tbody td[data-label="Дії"] { align-items: flex-start; }
  .mobile-cards-table tbody td[data-label="Дії"] .btn { margin: 2px 1px; }
  .cart-cards-table .cart-qty { max-width: 96px; margin-left: auto; }
  .cart-actions .btn { width: 100%; }

  /* Сума замовлення зверху на телефоні, щоб її було видно до введення даних. */
  .checkout-layout .checkout-summary-column { order: -1; }
  .checkout-summary-column .fw-semibold, .checkout-summary-column .small { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .product-card, .cat-tile { transition: none !important; }
}