/* ============================================================
   Balabon UA · Specimen Tray
   ui.css — компоненти. Мобайл-фьорст, десктоп через @media.
   Кожен блок підписаний: до якого шаблону WooCommerce мапиться.
   ============================================================ */

/* --- База --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.5;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

.container { max-width:var(--container); margin:0 auto; padding:0 var(--sp-4); }

/* --- Айбрау: мono-підпис секції --- */
.eyebrow {
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--sp-2);
}

/* --- Мікробар (header.php, над шапкою) --- */
.topbar {
  background:var(--ink); color:#E8DFC9;
  font-family:var(--font-mono); font-size:var(--fs-micro);
  text-align:center; padding:6px var(--sp-3); letter-spacing:.03em;
}

/* --- Шапка (header.php) --- */
.site-header {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.logo {
  font-family:var(--font-display); font-weight:600;
  font-size:1.0625rem; letter-spacing:.06em;
}
.header-actions { display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; color:var(--steel); }
.header-actions .icon-btn { position:relative; font-size:1.125rem; line-height:1; }
.badge-count {
  position:absolute; top:-7px; right:-9px;
  background:var(--brass); color:var(--card);
  font-family:var(--font-mono); font-size:var(--fs-micro);
  border-radius:var(--r-pill); padding:0 5px; line-height:1.4;
}
.site-nav { display:none; }

/* --- Пошук --- */
.search {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 14px; color:var(--muted); font-size:var(--fs-small);
  width:100%;
}
.search input { border:none; background:none; font:inherit; color:var(--ink); width:100%; outline:none; }
.search input::placeholder { color:var(--muted); }

/* --- Кнопки --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  border-radius:var(--r-pill); font-weight:600; font-size:var(--fs-small);
  padding:11px 20px; transition:opacity .15s ease;
}
.btn:hover { opacity:.88; }
.btn--primary { background:var(--ink); color:var(--card); }          /* головна дія */
.btn--brass   { background:var(--brass); color:var(--card); }        /* маркетингова CTA */
.btn--ghost   { border:1px solid var(--brass); color:var(--brass); background:transparent; }
.btn--block   { display:flex; width:100%; }
.btn--icon    { width:44px; padding:0; flex-shrink:0; }
.btn--sm      { padding:6px 14px; }

/* --- Чипи (фільтри, категорії, розміри) --- */
.chip {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px 13px; font-size:var(--fs-small); color:var(--steel);
  background:transparent; transition:border-color .15s ease;
}
.chip:hover { border-color:var(--ink); }
.chip--active { border:2px solid var(--ink); color:var(--ink); font-weight:600; padding:4px 12px; }
.chip--dark { background:var(--ink); color:var(--card); border-color:var(--ink); }
.chip-row { display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chip-row::-webkit-scrollbar { display:none; }

/* --- Картка-поверхня --- */
.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-3);
}

/* --- Фотозона: ЗАВЖДИ квадрат 1:1 ---
   Заміна плейсхолдера на фото: <img class="ph__img" src="..." alt="..."> */
.ph {
  background:var(--well); border-radius:var(--r-sm);
  aspect-ratio:1/1; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.ph__img { width:100%; height:100%; object-fit:cover; }
.ph__sku {
  position:absolute; top:8px; left:8px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:2px 9px;
  font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--steel);
}

/* --- Комірка лотка (головна, хаб категорій) --- */
.tray { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.tray .ph { border:1px solid var(--line-soft); flex-direction:column; gap:4px; }
.cell-num { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--steel); }

/* --- Картка товару (content-product.php) --- */
.grid-products { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
.p-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2); }
.p-card__sku { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); margin-top:6px; }
.p-card__name { font-size:var(--fs-small); line-height:1.3; margin:2px 0 6px; color:var(--ink-soft); }
.p-card__row { display:flex; justify-content:space-between; align-items:center; }
.p-card__price { font-weight:700; font-size:0.9375rem; }
.p-card__add {
  background:var(--ink); color:var(--card); border-radius:var(--r-pill);
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
}
.stock { font-size:var(--fs-micro); }
.stock--in { color:var(--success); }
.stock--low { color:var(--danger); }

/* --- Картка категорії (хаб) --- */
.grid-cats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
.cat-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2); }
.cat-card__name { font-weight:600; font-size:var(--fs-small); margin-top:6px; }
.cat-card__count { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }

/* --- Степер кількості --- */
.stepper {
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 12px; background:var(--paper);
}
.stepper button { font-size:1rem; line-height:1; color:var(--steel); padding:2px; }
.stepper output { font-weight:700; font-size:var(--fs-body); min-width:2ch; text-align:center; }
.stepper input[type="number"] {
  font-family:inherit; font-weight:700; font-size:var(--fs-body); color:var(--ink);
  width:3ch; text-align:center; border:none; background:none; padding:0;
  -moz-appearance:textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* --- Опт-тири (single-product) --- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; }
.tier {
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:7px 4px; font-size:var(--fs-small); color:var(--steel);
}
.tier strong { display:block; color:var(--ink); font-size:0.9375rem; }
.tier--active { border:2px solid var(--brass); padding:6px 3px; }

/* --- Свотчі покриття --- */
.swatches { display:flex; gap:8px; }
.swatch {
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); flex-shrink:0;
}
.swatch--active { border:2px solid var(--ink); }

/* --- Поля форм (checkout) --- */
.field {
  width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:11px 14px; font:inherit;
  font-size:var(--fs-small); color:var(--ink);
}
.field::placeholder { color:var(--muted); }
.field--hero { border:2px solid var(--ink); font-weight:600; font-size:var(--fs-body); }
select.field { appearance:none; }

/* --- Опція-картка (доставка, оплата) --- */
.opt {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 12px; font-size:var(--fs-small); color:var(--steel);
  cursor:pointer; width:100%; text-align:left;
}
.opt input { position:absolute; opacity:0; }
.opt__dot {
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--line); flex-shrink:0;
}
.opt__label { flex:1; }
.opt__meta { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }
.opt--active { border:2px solid var(--brass); padding:10px 11px; color:var(--ink); }
.opt--active .opt__label { font-weight:600; }
.opt--active .opt__dot { background:var(--brass); border-color:var(--brass); }

/* --- Чекбокс --- */
.check { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-small); color:var(--ink-soft); cursor:pointer; }
.check input { position:absolute; opacity:0; }
.check__box {
  width:15px; height:15px; border-radius:4px; flex-shrink:0;
  border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  color:transparent; font-size:11px;
}
.check input:checked + .check__box { background:var(--brass); border-color:var(--brass); color:var(--card); }

/* --- Прогрес до безкоштовної доставки --- */
.progress { height:6px; background:var(--well); border-radius:var(--r-pill); overflow:hidden; }
.progress__fill { height:100%; background:var(--brass); border-radius:var(--r-pill); }

/* --- Рядки характеристик і підсумків --- */
.kv { display:flex; justify-content:space-between; gap:var(--sp-3); padding:4px 0; font-size:var(--fs-small); }
.kv + .kv { border-top:1px solid var(--line-soft); }
.kv dt { color:var(--steel); }
.kv dd { color:var(--ink); text-align:right; }
.kv--total { border-top:1px solid var(--line); padding-top:var(--sp-2); margin-top:var(--sp-1); }
.kv--total dt, .kv--total dd { font-weight:700; font-size:var(--fs-body); }

/* --- Позиція кошика (cart.php) --- */
.cart-line { display:flex; gap:var(--sp-2); }
.cart-line .ph { width:56px; flex-shrink:0; }
.cart-line__body { flex:1; min-width:0; }
.cart-line__name { font-size:var(--fs-small); line-height:1.3; }
.cart-line__meta { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); margin:1px 0 6px; }
.cart-line__row { display:flex; align-items:center; justify-content:space-between; }
.cart-line__sum { font-weight:700; }
.cart-line__remove { color:var(--muted); font-size:1rem; }

/* --- Стікі-панель покупки (single-product) --- */
.sticky-buy {
  position:sticky; bottom:0; z-index:40;
  display:flex; gap:var(--sp-2); align-items:stretch;
  background:var(--card); border-top:1px solid var(--line);
  padding:var(--sp-2) var(--sp-4);
}

/* --- Нижня навігація (mobile) --- */
.bottom-nav {
  position:sticky; bottom:0; z-index:40;
  display:flex; justify-content:space-around;
  background:var(--card); border-top:1px solid var(--line);
  padding:9px 0; color:var(--steel); font-size:1.125rem;
}
.bottom-nav a { line-height:1; }
.bottom-nav .is-active { color:var(--ink); }

/* --- Шторка фільтрів + модалка 1 клік --- */
.overlay {
  position:fixed; inset:0; background:rgba(34,30,24,.45); z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
}
.overlay[hidden] { display:none; }
.sheet {
  background:var(--paper); border-radius:16px 16px 0 0;
  width:100%; max-width:560px; max-height:82vh; overflow-y:auto;
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
}
.sheet__handle { width:36px; height:4px; background:var(--line); border-radius:var(--r-pill); margin:0 auto var(--sp-3); }
.modal-card {
  background:var(--paper); border-radius:var(--r-md);
  width:calc(100% - 32px); max-width:400px;
  padding:var(--sp-4); margin:auto;
}

/* --- Хіро головної --- */
.hero h1 { font-family:var(--font-display); font-weight:600; font-size:var(--fs-h1); line-height:1.2; }
.hero__sub { font-family:var(--font-mono); font-size:var(--fs-small); color:var(--steel); margin:6px 0 14px; }

/* --- Трастовий рядок --- */
.trust {
  display:flex; justify-content:center; gap:var(--sp-2); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--steel);
}

/* --- Футер --- */
.site-footer { border-top:1px solid var(--line); padding:var(--sp-5) 0; margin-top:var(--sp-6); font-size:var(--fs-small); color:var(--steel); }

/* ============================================================
   Десктоп ≥ 768px
   ============================================================ */
@media (min-width:768px) {
  .site-header { padding:var(--sp-3) var(--sp-5); gap:var(--sp-5); }
  .logo { font-size:1.25rem; }
  .site-nav { display:flex; gap:var(--sp-4); font-size:var(--fs-small); color:var(--steel); }
  .site-nav a:hover { color:var(--ink); }
  .burger, .bottom-nav { display:none; }
  .hero h1 { font-size:2rem; }
  .grid-products { grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
  .grid-cats { grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
  .tray { grid-template-columns:repeat(8,1fr); }
  .overlay { align-items:center; }
  .sheet { border-radius:var(--r-md); }
  .layout-2col { display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-5); align-items:start; }
  .layout-2col > .col-aside { position:sticky; top:80px; }
  .pdp-2col { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-5); align-items:start; }
  .sticky-buy { position:static; border:none; background:none; padding:var(--sp-3) 0 0; }
}

/* ============================================================
   Ітерація 2: мегаменю, статуси замовлення, OTP, пошук, кабінет
   ============================================================ */

/* --- Мегаменю (десктоп, header.php) --- */
.has-mega { position:relative; }
.megamenu {
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:var(--sp-5) 0; z-index:60;
}
.site-header { position:sticky; } /* контейнер для .megamenu */
.megamenu__inner {
  max-width:var(--container); margin:0 auto; padding:0 var(--sp-5);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
}
.megamenu h4 { font-size:var(--fs-small); font-weight:700; margin-bottom:var(--sp-2); }
.megamenu ul { list-style:none; }
.megamenu li { margin-bottom:6px; }
.megamenu li a { font-size:var(--fs-small); color:var(--steel); }
.megamenu li a:hover { color:var(--ink); }
.megamenu .count { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }
@media (min-width:768px) { .has-mega.is-open .megamenu { display:block; } }

/* --- Статуси замовлення (thankyou.php, my-account/view-order) --- */
.steps { list-style:none; }
.step { display:flex; gap:var(--sp-3); position:relative; padding-bottom:var(--sp-4); }
.step:last-child { padding-bottom:0; }
.step::before {
  content:""; position:absolute; left:7px; top:20px; bottom:0;
  width:2px; background:var(--line);
}
.step:last-child::before { display:none; }
.step__dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:2px;
  border:2px solid var(--line); background:var(--paper); z-index:1;
}
.step--done .step__dot { background:var(--success); border-color:var(--success); }
.step--current .step__dot { background:var(--brass); border-color:var(--brass); }
.step--done::before { background:var(--success); }
.step__title { font-size:var(--fs-small); font-weight:600; }
.step--current .step__title { color:var(--brass); }
.step__meta { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }

/* --- Пігулка статусу --- */
.pill {
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-micro);
  border-radius:var(--r-pill); padding:2px 10px; background:var(--well); color:var(--steel);
}
.pill--success { background:#E4EBDD; color:var(--success); }
.pill--brass { background:#EFE4CB; color:var(--brass); }

/* --- OTP-код (вхід за телефоном) --- */
.otp { display:flex; gap:var(--sp-2); justify-content:center; }
.otp input {
  width:52px; aspect-ratio:1/1; text-align:center;
  font-family:var(--font-mono); font-size:1.25rem; font-weight:500;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink);
}
.otp input:focus { border:2px solid var(--brass); outline:none; }

/* --- Рядок замовлення в кабінеті (my-account/orders.php) --- */
.order-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.order-row__num { font-family:var(--font-mono); font-size:var(--fs-small); font-weight:500; }
.order-row__date { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }
.order-row__sum { font-weight:700; margin-left:auto; }
.order-row__thumbs { display:flex; gap:4px; width:100%; margin-top:6px; }
.order-row__thumbs .ph { width:36px; }

/* --- Навігація кабінету --- */
.acc-nav { display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; }
.acc-nav::-webkit-scrollbar { display:none; }

/* --- Пошук: підказки --- */
.suggest { padding:0; overflow:hidden; }
.suggest__row {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:10px var(--sp-3); font-size:var(--fs-small);
}
.suggest__row + .suggest__row { border-top:1px solid var(--line-soft); }
.suggest__row:hover { background:var(--well); }
.suggest__sku { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--brass); min-width:76px; }
.suggest__price { margin-left:auto; font-weight:600; }
.suggest__label { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); padding:8px var(--sp-3) 0; }
mark { background:#EFE4CB; color:inherit; border-radius:2px; padding:0 1px; }

/* ============================================================
   Ітерація 3: відгуки, вибране/порівняння, помилки, друк
   ============================================================ */

/* --- Кнопка "у вибране" на фотозоні (content-product.php) --- */
.ph__fav {
  position:absolute; top:8px; right:8px; z-index:1;
  width:26px; height:26px; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--steel);
}
.ph__fav--active { color:var(--brass); border-color:var(--brass); }

/* --- Відгуки (single-product, woocommerce_after_single_product_summary) --- */
.rating-summary { display:flex; align-items:center; gap:var(--sp-4); }
.rating-summary__score { font-family:var(--font-display); font-weight:600; font-size:2rem; line-height:1; }
.rating-summary__stars { color:var(--brass); font-size:var(--fs-small); margin-top:4px; }
.rating-summary__count { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); margin-top:2px; }
.rating-bars { flex:1; display:flex; flex-direction:column; gap:4px; }
.rating-bar { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); }
.rating-bar__track { flex:1; height:5px; background:var(--well); border-radius:var(--r-pill); overflow:hidden; }
.rating-bar__fill { height:100%; background:var(--brass); }

.review { padding:var(--sp-3) 0; }
.review + .review { border-top:1px solid var(--line-soft); }
.review__head { display:flex; align-items:center; gap:var(--sp-2); }
.review__avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--well); color:var(--steel);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--fs-small);
}
.review__name { font-size:var(--fs-small); font-weight:600; }
.review__stars { color:var(--brass); font-size:var(--fs-micro); }
.review__date { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); margin-left:auto; }
.review__text { font-size:var(--fs-small); color:var(--ink-soft); margin:6px 0 0; }
.review__photos { display:flex; gap:6px; margin-top:8px; }
.review__photos .ph { width:52px; border-radius:var(--r-sm); }
.review__vendor { display:flex; gap:6px; align-items:flex-start; margin-top:8px; padding:8px 10px; background:var(--well); border-radius:var(--r-sm); font-size:var(--fs-micro); color:var(--ink-soft); }
.review__vendor strong { color:var(--ink); }

/* --- Порівняння товарів (окремий шаблон "Порівняння") --- */
.compare-scroll { overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; }
.compare-table th, .compare-table td {
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-small); text-align:left; vertical-align:top;
}
.compare-table td:first-child, .compare-table th:first-child {
  position:sticky; left:0; background:var(--card); color:var(--steel);
  font-family:var(--font-mono); font-size:var(--fs-micro); white-space:normal; width:110px;
}
.compare-table thead th { background:var(--well); font-weight:600; white-space:normal; min-width:150px; }
.compare__remove { color:var(--muted); font-size:1rem; margin-left:6px; }

/* --- Порожній стан (пуста корзина, вибране, результати пошуку) --- */
.empty { text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--steel); }
.empty i { font-size:2rem; color:var(--muted); margin-bottom:var(--sp-2); display:block; }

/* --- Статус-іконка (404, помилка оплати, thankyou) --- */
.status-icon {
  display:inline-flex; width:56px; height:56px; border-radius:50%;
  align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:12px;
}
.status-icon--danger { background:var(--danger); color:var(--card); }
.status-icon--muted { background:var(--well); color:var(--steel); }

/* --- Друкована версія замовлення (checkout/order-received.php, @media print) --- */
.invoice-table { width:100%; border-collapse:collapse; }
.invoice-table th, .invoice-table td { padding:8px 6px; border-bottom:1px solid var(--line-soft); font-size:var(--fs-small); text-align:left; }
.invoice-table th { font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:500; }
.invoice-table td:last-child, .invoice-table th:last-child { text-align:right; }
@media print {
  .no-print { display:none !important; }
  body { background:#fff; }
  .card, .invoice-table { border-color:#999; }
}