/* ============================================================
   VIDRO — base
   Підключати після vidro-tokens.css, перед vidro-components.css.
   Тіней немає ніде. Фон сторінки завжди білий.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Горизонтальне переповнення ріжеться і на html, і на body.

   Було `overflow-x: hidden` лише на body. На desktop це приховувало
   проблему, але iOS Safari таке правило на body ігнорує — і сторінку
   можна було відтягнути вбік пальцем. Причина переповнення — біжуча
   стрічка: document.scrollWidth 3508 px при вікні 1440.

   `clip` замість `hidden`: `hidden` робить елемент контейнером
   прокрутки й ламає `position: sticky` всередині (у нас липкий бар
   «Купити» на картці товару), `clip` просто обрізає. */
html,
body {
  overflow-x: clip;
}

/* Два атрибути замість одного — знову заради ваги проти "div:empty"
   з base.css Dawn.

   Live-область порожня за визначенням: текст у неї кладуть лише в мить
   оголошення. Поки Dawn її ховав, вона не потрапляла в дерево доступності,
   і зміну кольору чи розміру скрінрідер не озвучував зовсім. */
[data-vidro-live][aria-live] {
  display: block;
}

/* Кастомні елементи за замовчуванням inline. Поки цього не сказати,
   контейнер на них не тримає ні ширину, ні відступи: галерея вилазить
   за поля, а сітка рахується не від того боксу. */
vidro-product,
vidro-collection,
vidro-gallery,
vidro-search,
vidro-accordion,
vidro-tabs,
vidro-fit { display: block; }

img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- Контейнер і секції ---------- */

.v-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.v-section { margin-block: var(--section-gap); }
.v-section--tight { margin-block: var(--sp-8); }

/* Стрічка на всю ширину екрана всередині контейнера (свайп-каруселі) */
.v-bleed {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

/* ---------- Display-типографіка ---------- */

.v-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: 0;
}

.v-display--hero    { font-size: var(--fs-hero); }
.v-display--section { font-size: var(--fs-section); }
.v-display--cat     { font-size: var(--fs-h1-cat); }
.v-display--product { font-size: var(--fs-h1-product); }

/* Фірмовий прийом: другий склад / друге слово — світло-сірим.
   Не застосовувати в H1 товару (Промт 1, розділ 2.2). */
.v-ghost { color: var(--color-ghost); }

/* ---------- Body-типографіка ---------- */

.v-text     { font-size: var(--fs-body);  line-height: var(--lh-body); }
.v-meta     { font-size: var(--fs-meta);  line-height: var(--lh-meta);  color: var(--color-muted); }
.v-small    { font-size: var(--fs-small); line-height: var(--lh-meta);  color: var(--color-muted); }
.v-price    { font-size: var(--fs-price-pdp); line-height: var(--lh-tight); color: var(--color-ink); }

/* ---------- Хлібні крихти ---------- */

.v-breadcrumbs {
  font-size: var(--fs-small);
  line-height: var(--lh-meta);
  color: var(--color-muted);
  padding-block: var(--sp-3);
}
.v-breadcrumbs a { text-decoration: none; }
.v-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v-breadcrumbs span[aria-hidden] { padding-inline: var(--sp-1); }

/* ---------- Лінії ---------- */

.v-rule { border: 0; border-top: var(--border); margin: 0; }

/* ---------- Утиліти ---------- */

.v-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.v-skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 100;
  background: var(--color-bg);
  padding: var(--sp-3) var(--sp-4);
  border: var(--border);
}
.v-skip-link:focus { top: var(--sp-2); }

/* Горизонтальна стрічка зі свайпом — базова механіка,
   без JS-бібліотек (Промт 2, розділ 6.2). */
.v-rail {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Без цього абсолютні елементи всередині карток (v-visually-hidden)
     рахуються від <body>, а не від стрічки, і не обрізаються нею:
     документ на телефоні ставав 2000+ px завширшки, а шторки розтягувались. */
  position: relative;
}
.v-rail::-webkit-scrollbar { display: none; }
.v-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* На mobile видно 1,5 картки — жест зрозумілий без підказки */
.v-rail--peek > * { width: calc(66% - var(--grid-gap)); }
@media (min-width: 600px)  { .v-rail--peek > * { width: calc(40% - var(--grid-gap)); } }
@media (min-width: 1024px) { .v-rail--peek > * { width: calc(25% - var(--grid-gap)); } }

/* Плейсхолдер зображення 4:5 */
.v-media {
  position: relative;
  aspect-ratio: var(--ratio-product);
  background: var(--color-surface);
  overflow: hidden;
}
.v-media > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Що лишилось від base.css ---------- */

/* Посилання «перейти до вмісту». Ховається візуально, але з'являється
   при фокусі з клавіатури — інакше людині, яка ходить табом, доводиться
   щоразу проходити все меню наново. */
.v-skip:focus {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font-size: var(--fs-meta);
  text-decoration: none;
}

/* Сторінка перевірки на бота приходить від Shopify зі своєю розміткою.
   Трапляється рідко, але без цих кількох рядків вона з'їжджає в кут. */
.shopify-challenge__container {
  max-width: 480px;
  margin: var(--sp-16) auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.shopify-challenge__button { margin-top: var(--sp-4); }