/* SCU styles (cards, grids, forms) */
.scu-front .scu-hero{background: linear-gradient(90deg, #0049fb 0%, #0d2a93 100%);color:#fff;padding:32px 0;/* max-height: 150px; */}
.scu-front .scu-hero .inner{max-width:980px;margin:0 auto;text-align:center}
.scu-front .scu-hero h1{margin:8px 0 6px;font-size:40px;font-weight:900;color: #f6f66a;text-transform: uppercase;}
.scu-front .scu-hero .sub{opacity:.95;padding-bottom: 10px;}
.scu-front .scu-hero .desc{opacity:.9}
.scu-front .stats{display:flex;gap:12px;justify-content:center;margin-top:10px}
.scu-front .stats .stat{background:#ffffff20;border:1px solid #ffffff30;border-radius:10px;padding:6px 10px;display:flex;gap:8px;align-items:center}
.scu-front .stats .stat b{font-weight:900}

.home-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.section{margin:28px 0}
.toprow{display:flex;align-items:center;justify-content:space-between}
.cars4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cars2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:980px){.cars4{grid-template-columns:repeat(2,1fr)} .cars2{grid-template-columns:1fr}}
.cols3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:980px){.cols3{grid-template-columns:1fr}}
.box{background:#fff;border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.list{display:flex;flex-direction:column;gap:12px}
.scu-li{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.scu-li img{width:96px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--bd)}
.scu-li .t{font-weight:700}.scu-li .sub{color:#475569;font-size:13px}

.scu-card{background:#fff;border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.scu-card__ph{aspect-ratio:16/10;background:#000}
.scu-card__ph img{width:100%;height:100%;object-fit:cover;display:block}
.scu-card__body{padding:12px}
.scu-card__title{font-weight:800;margin:4px 0 8px}
.scu-card__badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.scu-badge{display:inline-block;font-size:12px;background:#e5e7eb;border-radius:8px;padding:2px 8px; font-weight: 700;}
.scu-badge.is-turbo{background:#f93d22; color:#f8f9f4;  font-weight: 700; text-transform: uppercase;}
.scu-badge.is-fuel{background:#dbeafe}
.scu-badge.is-gearbox{background:#f1f5f9}
.scu-badge.is-drive{background:#dcfce7}
.scu-card__rows{margin-top:6px;font-size:14px;color:#334155; font-weight: 500;}
.scu-card__rows .row{display:flex;justify-content:space-between;margin:2px 0}
.scu-card__price{text-align:center;font-weight:900;margin-top:8px}

.scu-archive{max-width:1240px;margin:0 auto;padding:0 16px}
.scu-archive .page-title{font-size:28px;margin:16px 0}
.pagi{text-align:center;margin:16px 0}

.scu-form{max-width:720px;margin:0 auto;padding:16px}
.scu-form h1{font-size:28px}
.scu-form form{display:grid;gap:10px}
.scu-form label{display:flex;flex-direction:column;gap:6px}
.scu-form input,.scu-form select,.scu-form textarea{padding:8px 10px;border:1px solid var(--bd);border-radius:10px}
.scu-form .chk{flex-direction:row;align-items:center;gap:8px}
.scu-form .ok{background:#ecfdf5;border:1px solid #bbf7d0;padding:10px;border-radius:10px;margin:8px 0}
.scu-form .err{background:#fef2f2;border:1px solid #fecaca;padding:10px;border-radius:10px;margin:8px 0}

.scu-filters{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hero-img img{width:100%;height:auto;border-radius:12px;border:1px solid var(--bd)}
.scu-single{max-width:980px;margin:0 auto;padding:0 16px}
.scu-single.sto{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.scu-single.sto .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.scu-single.sto .thumbs img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--bd)}
.scu-single.sto .col-r .line{margin:6px 0}


/* === SCU Patch-09: Lightbox styles === */
html.scu-noscroll, html.scu-noscroll body { overflow: hidden; }

.scu-lb{ position: fixed; inset: 0; z-index: 9999; display: none; }
.scu-lb.is-open{ display: block; }
.scu-lb__backdrop{ position:absolute; inset:0; background:rgba(10,10,10,.92); }
.scu-lb__stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; outline: none; }
.scu-lb__img{ max-width: 92vw; max-height: 88vh; opacity: 0; transition: opacity .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.scu-lb__img.is-loaded{ opacity: 1; }

.scu-lb__btn{ position:absolute; top: 16px; line-height:1; border:0; background:rgba(255,255,255,.08); color:#fff; font-size:28px; width:44px; height:44px; border-radius:10px; cursor:pointer; }
.scu-lb__btn:hover{ background:rgba(255,255,255,.18); }
.scu-lb__btn--close{ right: 16px; }
.scu-lb__btn--prev{ left: 12px; top: 50%; transform: translateY(-50%); font-size:40px; width:52px; height:52px; }
.scu-lb__btn--next{ right: 12px; top: 50%; transform: translateY(-50%); font-size:40px; width:52px; height:52px; }

.scu-lb__bar{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:16px; padding:10px 16px; color:#ddd; font-size:14px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.scu-lb__counter{ font-variant-numeric: tabular-nums; color:#fff; }
.scu-lb__cap{ color:#ddd; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* basic thumbs */
.scu-gallery{ display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:12px; }
.scu-gallery__item img{ display:block; width:100%; height:auto; border-radius:10px; }
.scu-cover img, .scu-cover{ display:block; border-radius:12px; }

/* === SCU Patch-11: Single layout & specs grid === */
.scu-single.container{ max-width: 1180px; margin: 0 auto; padding: 20px 16px; }
.scu-single__cols{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items:start; }
@media (max-width: 1024px){ .scu-single__cols{ grid-template-columns: 1fr; } }

.scu-title{ margin: 14px 0 6px; font-weight: 700; }
.scu-nickname{ margin-bottom: 12px; opacity:.8; }

.scu-single__left .scu-content{ margin-top:16px; line-height:1.6; }
.scu-logs{ margin-top:20px; }
.scu-logs__title{ font-size:18px; margin:10px 0; }
.scu-logs__list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.scu-logs__list li{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed #dee2e6; padding:6px 0; }
.scu-logs__list .date{ opacity:.66; }

/* Owner card (Section B) */
.owner-card{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.owner-avatar img{ border-radius:50%; }
.owner-meta .owner-name{ font-weight:600; }
.owner-meta .owner-city{ opacity:.8; font-size:.95em; }

.owner-actions{ margin-top:10px; display:grid; gap:8px; }
.owner-actions .row{ display:flex; gap:8px; flex-wrap:wrap; }
.owner-actions .button{ display:inline-block; padding:6px 10px; border-radius:8px; text-decoration:none; }

/* Specs (Section C) */
.scu-secC{ margin-top:16px; }
.scu-specs.two-cols{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 16px; }
.scu-specs .row{ display:flex; justify-content:space-between; gap:10px; padding:6px 8px; background:#f8f9fa; border-radius:8px; }
.scu-specs .row span:first-child{ opacity:.75; }

/* Sale block */
.scu-sale{ margin-top:10px; display:grid; gap:8px; }
.scu-sale .row{ display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:#fff3cd; border:1px solid #ffeeba; border-radius:10px; }

/* Meta line under title (old) */
.scu-meta-line{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; margin-top:6px; opacity:.9; }
.scu-meta-line .meta-item{ background:#f1f3f5; padding:4px 8px; border-radius:8px; }
/* === SCU Patch-11c: Archive card thumbnails fix === */
.scu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.scu-card{
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
}

.scu-card__thumb,
.scu-card .thumb,
.scu-card .wp-post-image-wrap{
  position: relative;
  aspect-ratio: 16 / 10;   /* тримаємо пропорцію прев’ю */
  overflow: hidden;
}

.scu-card__thumb img,
.scu-card .thumb img,
.scu-grid .scu-card .wp-post-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* fallback для старих браузерів без aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .scu-card__thumb,
  .scu-card .thumb,
  .scu-grid .scu-card .wp-post-image-wrap { height: 180px; }
  .scu-card__thumb img,
  .scu-card .thumb img,
  .scu-grid .scu-card .wp-post-image { height: 100%; }
}
/* КОЛЬОРИ БЕЙДЖІВ */
.scu-card__body{ padding: 12px; }
.scu-badge.is-fuel.fuel-petrol{ background:#eb6d00; color:#f8f9f4; font-weight: 700;text-transform: uppercase;}
.scu-badge.is-fuel.fuel-diesel{ background:#303030; color:#f8f9f4; font-weight: 700;text-transform: uppercase;}
.scu-badge.is-fuel.fuel-electro{ background:#078653; color:#f8f9f4; font-weight: 700;text-transform: uppercase;}
.scu-badge.is-fuel.fuel-hybrid{ background:#1e7ea6; color:#f8f9f4; font-weight: 700;text-transform: uppercase;}
.scu-badge.is-fuel.fuel-petrol_lpg{ background:#fdca31; color:#303030; font-weight: 700;text-transform: uppercase;}
/* Єдина пропорція для прев’ю в картках */
.scu-card__ph,
.scu-card__thumb,
.scu-card .thumb,
.scu-card .wp-post-image-wrap{
  position: relative;
  aspect-ratio: 16 / 10;   /* змінюй на 4/3 або 3/2, якщо треба інша “рамка” */
  overflow: hidden;
}

.scu-card__ph img,
.scu-card__thumb img,
.scu-card .thumb img,
.scu-card .wp-post-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Фолбек, якщо браузер без aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .scu-card__ph,
  .scu-card__thumb,
  .scu-card .thumb,
  .scu-card .wp-post-image-wrap { height: 200px; } /* підкрути число під свій макет */
}
/* === SCU: Primary Nav look & feel === */

/* Базові кнопки меню */
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link {
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:8px;               /* пігулка */
  border:1px solid transparent;
  line-height:1;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Активний пункт (current) */
.ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link,
.ast-primary-header-bar .main-header-menu > .current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .current-menu-item > .menu-link,
.ast-builder-menu-1 .current-menu-ancestor > .menu-link {
  background:#002dd1;
  color:#fff;
  border-color:#002dd1;
}

/* Hover для активного — трохи темніше */
.ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link:hover,
.ast-primary-header-bar .main-header-menu > .current-menu-ancestor > .menu-link:hover,
.ast-builder-menu-1 .current-menu-item > .menu-link:hover,
.ast-builder-menu-1 .current-menu-ancestor > .menu-link:hover {
  background:#0024b4; /* ~10–12% темніше */
  border-color:#0024b4;
  color:#fff;
}

/* Hover для НЕактивних */
.ast-primary-header-bar .main-header-menu > .menu-item:not(.current-menu-item):not(.current-menu-ancestor) > .menu-link:hover,
.ast-builder-menu-1 .menu-item:not(.current-menu-item):not(.current-menu-ancestor) > .menu-link:hover {
  background:#d4d9e3;
  color:#0f172a; /* темний текст */
  border-color:#d4d9e3;
}

/* Кнопки Вхід/Профіль/Реєстрація — outline */
.menu-item-scu-login   > a,
.menu-item-scu-profile > a,
.menu-item-scu-register> a {
  background:transparent !important;
  color:#0f172a !important;
  border-color:#cbd5e1 !important;      /* сіра рамка */
}

/* Hover для outline-кнопок — підкреслюємо рамку */
.menu-item-scu-login   > a:hover,
.menu-item-scu-profile > a:hover,
.menu-item-scu-register> a:hover {
  border-color:#94a3b8 !important;
  box-shadow:0 0 0 2px rgba(148,163,184,.15); /* м’який фокус */
}

/* Фокус-навігація (accessibility) */
.ast-primary-header-bar .main-header-menu .menu-link:focus-visible,
.ast-builder-menu-1 .menu-link:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(0,45,209,.25);
  border-radius:999px;
}

/* Щоб підменю (dropdown) лишалось штатним — нічого не міняємо,
   але перестрахуємо контраст посилань усередині */
.main-header-menu .sub-menu a:hover {
  background:#eef2ff;
  color:#111827;
}
/* SCU: відстань між кнопками у хедері */
@media (min-width: 921px) { /* десктоп Astra */
  .ast-primary-header-bar .main-header-menu,
  .ast-builder-menu-1 .main-header-menu {
    display: flex;        /* про всяк */
    gap: 5px;            /* ← змінюй 8–14px під смак */
  }

  /* Фолбек, якщо gap раптом не спрацює у вашій збірці */
  .ast-primary-header-bar .main-header-menu > .menu-item,
  .ast-builder-menu-1 .main-header-menu > .menu-item {
    margin-right: 10px;
  }
  .ast-primary-header-bar .main-header-menu > .menu-item:last-child,
  .ast-builder-menu-1 .main-header-menu > .menu-item:last-child {
    margin-right: 0;
  }
}
/* Outline-стиль для auth-пунктів (і з .menu-link, і без) */
.menu-item-scu-login   > .menu-link,
.menu-item-scu-profile > .menu-link,
.menu-item-scu-register> .menu-link,
.menu-item-scu-login   > a,
.menu-item-scu-profile > a,
.menu-item-scu-register> a {
  background: transparent !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.menu-item-scu-login   > .menu-link:hover,
.menu-item-scu-profile > .menu-link:hover,
.menu-item-scu-register> .menu-link:hover,
.menu-item-scu-login   > a:hover,
.menu-item-scu-profile > a:hover,
.menu-item-scu-register> a:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 2px rgba(148,163,184,.15);
}