/**
 * vtux-modern-trust.css — v5.12.2
 * Шапка + поиск на ноутбуке/ПК/ТВ, карточки на главной, подвал.
 * Грузится последним в $extra — перекрывает core/shared/header-compact.
 *
 * v5.12.2: жёсткий порядок карточки фото → название → цена → кнопка.
 *          display:contents на ссылке товара, чтобы order/grid работали
 *          по реальным детям, а не ломались из‑за вложенности.
 * v5.12.1: порог для поиска и 4-колоночной сетки снижен с 1024px до
 * 980px — «Показ сайта как на компьютере» в мобильном Chrome отдаёт
 * viewport 980px, и он не попадал в старый порог 1024px.
 */

:root{
  --vt-trust-radius: 16px;
  --vt-trust-radius-sm: 12px;
  --vt-trust-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --vt-trust-shadow-hover: 0 14px 32px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.06);
  --vt-trust-border: 1px solid rgba(15,23,42,.08);
  --vt-header-h: 72px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1) ШАПКА
 * ═══════════════════════════════════════════════════════════════════════ */

#masthead,
header.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
}

body.admin-bar #masthead,
body.admin-bar header.site-header{
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar #masthead,
  body.admin-bar header.site-header{ top: 46px; }
}

#masthead .custom-logo-link img,
#masthead .custom-logo,
.site-header .custom-logo{
  max-height: 40px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
}

.site-header .main-navigation ul.menu > li > a,
.storefront-primary-navigation ul.menu > li > a{
  position: relative;
  font-weight: 600;
  color: #1f2430;
  border-radius: 10px;
  transition: color .18s ease, background .18s ease;
}
.site-header .main-navigation ul.menu > li > a:hover,
.storefront-primary-navigation ul.menu > li > a:hover{
  color: var(--tw-orange, #ff6b00) !important;
  background: color-mix(in srgb, var(--tw-orange, #ff6b00) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2) ПОИСК — ноутбук / ПК / ТВ  (≥980px)
 *    Порог снижен с 1024 до 980 — под него попадает «Показ сайта как на
 *    компьютере» в мобильном Chrome (viewport 980px по умолчанию).
 *    Перебиваем display:none из HTML, core.css 5.9.12 и teardown().
 * ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 960px){
  html body #vt-search-desktop,
  html body #masthead #vt-search-desktop,
  html body .site-header #vt-search-desktop{
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 1 1 420px !important;
    min-width: 280px !important;
    max-width: 720px !important;
    margin: 0 !important;
    align-items: center !important;
    gap: 0 !important;
    background: #f4f6f8 !important;
    border: 1.5px solid rgba(15,23,42,.12) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    z-index: 20 !important;
  }

  html body #vt-search-cat-wrap{
    display: flex !important;
    visibility: visible !important;
    height: 48px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    padding: 0 4px 0 14px !important;
    border-right: 1px solid rgba(15,23,42,.08);
  }

  html body #vt-search-cat-dropdown{
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    overflow: auto !important;
  }

  html body #vt-search-desktop input[type="search"],
  html body #vt-search-desktop-input{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 46px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    padding: 0 12px !important;
    color: #1a1f2b !important;
  }

  html body #vt-search-desktop .vt-search-submit,
  html body #vt-search-desktop-submit{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 4px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tw-orange, #ff6b00) !important;
    color: #fff !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
  }

  /* На десктопе прячем штатный поиск Storefront — он дублирует наш */
  html body #masthead .site-search,
  html body .site-header .widget_product_search{
    display: none !important;
  }

  html body #masthead .col-full,
  html body .site-header .col-full{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px 16px !important;
    min-height: var(--vt-header-h);
  }

  html body #vtux-lang-switcher{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
  }
}

@media (min-width: 1440px){
  html body #vt-search-desktop{
    max-width: 840px !important;
  }
}

@media (min-width: 1920px){
  html body #vt-search-desktop{
    max-width: 960px !important;
  }
}

/* Телефон: десктоп-поиск не открываем */
@media (max-width: 959.98px){
  html body #vt-search-desktop,
  html body #vt-search-cat-dropdown{
    display: none !important;
  }
}

/* Плашка бесплатной доставки — реальный класс .vtux-ts-pill */
#vtux-trust-strip .vtux-ts-pill,
.vtux-ts-pill,
.vtux-freeship-badge{
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--vt-green, #16a34a) 32%, transparent) !important;
  background: color-mix(in srgb, var(--vt-green, #16a34a) 9%, #fff) !important;
  box-shadow: var(--vt-trust-shadow);
  font-weight: 600 !important;
  color: #14532d !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3) КАРТОЧКИ НА ГЛАВНОЙ / В КАТАЛОГЕ
 *    v5.12.2: ссылка товара display:contents — название/цена/кнопка
 *    становятся прямыми ячейками сетки карточки. Иначе flex-order на
 *    .title не действует (title вложен в <a>, кнопка — сосед).
 * ═══════════════════════════════════════════════════════════════════════ */

.home ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.columns-2,
ul.products.vtinfs-grid{
  display: grid !important;
  gap: 12px !important;
  align-items: stretch !important;
}

@media (max-width: 599.98px){
  .home ul.products,
  .woocommerce ul.products,
  ul.products.vtinfs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 600px) and (max-width: 959.98px){
  .home ul.products,
  .woocommerce ul.products,
  ul.products.vtinfs-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 960px){
  .home ul.products,
  .woocommerce ul.products,
  ul.products.vtinfs-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (min-width: 1366px){
  .home ul.products,
  .woocommerce ul.products{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1600px){
  .home ul.products,
  .woocommerce ul.products{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  grid-template-areas:
    "media"
    "title"
    "price"
    "extra"
    "button" !important;
  background: #fff !important;
  border: var(--vt-trust-border) !important;
  border-radius: var(--vt-trust-radius) !important;
  box-shadow: var(--vt-trust-shadow) !important;
  overflow: hidden;
  padding: 10px 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  position: relative;
  min-width: 0 !important;
  height: auto !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover{
  box-shadow: var(--vt-trust-shadow-hover) !important;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tw-orange, #ff6b00) 28%, transparent) !important;
}

/* Разворачиваем ссылку товара — дети участвуют в сетке карточки */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link,
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-loop-product__link{
  display: contents !important;
  flex: none !important;
  order: unset !important;
  min-height: 0 !important;
}

.woocommerce ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image{
  grid-area: media !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  background: #f8fafc;
  border-radius: 12px;
  margin: 0 0 4px !important;
  transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover a img{
  transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title{
  grid-area: title !important;
  order: unset !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1a1f2b !important;
  margin: 0 !important;
  padding: 4px 2px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price{
  grid-area: price !important;
  order: unset !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #1a1f2b !important;
  margin: 4px 2px 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 8px !important;
}
.woocommerce ul.products li.product .price del{
  opacity: .5;
  font-weight: 400 !important;
  font-size: .82em;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins{
  text-decoration: none;
  color: var(--tw-orange, #ff6b00) !important;
}

/* Кнопка Купити / Перейти в кошик — всегда последняя ячейка */
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button,
/* v5.15.28: a.added_to_cart ПРИБРАНО зі списку — цей селектор (специфічніший
   за hide-правило в core/shared) примусово показував службове посилання WC
   «Переглянути кошик», і воно темним блоком налазило на картку після
   додавання товару. Стан «у кошику» показує сама кнопка (✓ Додано). */
.woocommerce ul.products li.product .vt-btn.vt-btn--primary,
ul.products li.product > a.add_to_cart_button{
  grid-area: button !important;
  order: unset !important;
  margin-top: 8px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  min-height: 40px !important;
  border-radius: var(--vt-trust-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tw-orange, #ff6b00) 32%, transparent) !important;
  align-self: end;
}

.vt-card-actions,
.vtux-wl-fab,
li.product .vt-wl-btn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 3;
  order: 0 !important;
}

.woocommerce ul.products li.product .vt-card-rating,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .vt-badge:not(.onsale):not(.vt-badge-sale-corner),
ul.products li.product .vtux-urgency,
ul.products li.product .vtux-social-proof{
  grid-area: extra !important;
}

/* Сума економії — тепер в одному рядку з ціною (усередині .price),
   а не окремим блоком знизу. JS (05-footer-static-html.php) вставляє
   span всередину .price, тож grid-area тут більше не потрібна. */
.woocommerce ul.products li.product .vt-price-savings,
.woocommerce-page ul.products li.product .vt-price-savings,
ul.products li.product .vt-price-savings{
  margin: 0 !important;
}
.vt-wl-btn,
.vtux-wl-fab{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(15,23,42,.12) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 999px !important;
}

.vt-badge-sale-corner,
span.onsale{
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 3px 10px rgba(220,38,38,.32) !important;
  border: none !important;
  color: #fff !important;
  z-index: 3;
}

/* Плейсхолдер «фото відсутнє» — без огромной дыры */
li.product img[src*="placeholder"],
li.product .woocommerce-product-gallery__image--placeholder img{
  object-fit: contain;
  opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4) ПОДВАЛ
 * ═══════════════════════════════════════════════════════════════════════ */

.site-footer,
footer.site-footer,
#colophon{
  position: relative;
  background: linear-gradient(180deg, #171a20 0%, #0f1115 100%) !important;
  color: rgba(255,255,255,.78) !important;
  padding-top: 28px !important;
  margin-top: 24px !important;
}
.site-footer::before,
#colophon::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tw-orange-grad, linear-gradient(90deg, #ff6b00, #ffb84d));
}

/* Прячем пустой виджет со счётчиком и кредит WooCommerce */
#colophon .footer-widgets,
#colophon .widget_block{
  display: none !important;
}
#colophon .site-info a[href*="woocommerce.com"],
#colophon .site-info [title*="WooCommerce"]{
  display: none !important;
}

.vtux-footer-cats-wrap{
  padding: 8px 0 20px !important;
  text-align: center;
}
.vtux-footer-cats-title{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  margin-bottom: 12px !important;
}
.vtux-footer-cats{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
.vtux-footer-cats a,
.site-footer nav a,
#colophon nav a,
#colophon .menu a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vtux-footer-cats a:hover,
.site-footer nav a:hover,
#colophon nav a:hover{
  background: color-mix(in srgb, var(--tw-orange, #ff6b00) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--tw-orange, #ff6b00) 50%, transparent) !important;
  color: #fff !important;
}

.site-info{
  background: transparent !important;
  color: rgba(255,255,255,.42) !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 16px 12px 28px !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* На телефоне не оставляем дыру под нижнее меню внутри copyright */
@media (min-width: 768px){
  .site-info{ padding-bottom: 28px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5) МЕЛОЧИ
 * ═══════════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--tw-orange, #ff6b00) 40%, transparent);
  outline-offset: 2px;
}