/* ============================================================
   VIDRO — розкладка картки товару
   Підключається тільки на PDP: на головній і в колекції ці правила
   не потрібні, а зайвий кілобайт у критичному шляху коштує LCP.
   ============================================================ */

.v-pdp { display: block; padding-bottom: var(--sp-6); }

/* Хлібні крихти теми — список; тут він читається одним рядком через «/» */
.v-pdp .v-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.v-pdp .v-breadcrumbs li { display: inline; min-width: 0; }
.v-pdp .v-breadcrumbs li + li::before { content: '/'; padding-inline: var(--sp-1); }
.v-pdp .v-breadcrumbs li:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Галерея на mobile виходить за поля контейнера на всю ширину екрана */
.v-pdp__media { margin-inline: calc(var(--gutter) * -1); }
.v-pdp__buy { padding-top: var(--sp-4); }

.v-pdp__rating { margin: var(--sp-2) 0 0; }
.v-pdp__price  { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-6); }
.v-pdp__price s { text-decoration-thickness: 1px; }

.v-pdp__form { margin: 0; }
.v-pdp__cta  { margin-top: var(--sp-6); }

.v-pdp__tagline { margin: var(--sp-6) 0 var(--sp-2); }
.v-pdp__description { margin: var(--sp-6) 0; }
.v-pdp__tagline + .v-pdp__description { margin-top: 0; }
.v-pdp__description p:first-child { margin-top: 0; }
.v-pdp .v-accordion { margin-top: var(--sp-6); }
.v-pdp .v-accordion h2 { font: inherit; }
.v-pdp .v-accordion .v-text table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.v-pdp .v-accordion .v-text th,
.v-pdp .v-accordion .v-text td { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-bottom: var(--border); text-align: left; vertical-align: top; }
.v-pdp .v-accordion .v-text h2,
.v-pdp .v-accordion .v-text h3 { font-size: var(--fs-body); font-weight: 400; color: var(--color-ink); margin: var(--sp-4) 0 var(--sp-2); }
.v-pdp__sku { margin: var(--sp-4) 0 0; }
.v-pdp .v-accordion__panel .v-text > p { margin: 0 0 var(--sp-2); }
.v-pdp .v-accordion__panel .v-text > p:last-child { margin-bottom: 0; }

.v-option + .v-option { margin-top: var(--sp-6); }
.v-pdp .v-trust__row { margin: 0; }

/* Значення, якого з поточним вибором не існує (оверсайз білий): не «закінчилось», а
   просто інша комбінація — приглушено, без перекреслення; тап перемикає решту опцій.
   Розміри, яких не існує для обраної рами/крою, приховані. */
.v-pdp [data-option] [data-value][hidden] { display: none; }
.v-pdp .v-size[data-missing='true'],
.v-pdp .v-swatch[data-missing='true'] { opacity: 0.4; }
.v-pdp .v-trust { margin-top: var(--sp-6); }

/* «Купити» без розміру: група пігулок коротко здригається поруч із плашкою вгорі */
@media (prefers-reduced-motion: no-preference) {
  .v-shake { animation: v-shake 320ms var(--ease); }
  @keyframes v-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
  }
}

/* ---------- Галерея: стрілки лише там, де є курсор ---------- */

.v-gallery__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .v-gallery__arrow {
    position: absolute;
    top: calc(50% - 22px - var(--sp-6));
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: var(--border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .v-gallery__arrow--prev { left: var(--sp-3); }
  .v-gallery__arrow--next { right: var(--sp-3); }
  .v-gallery:hover .v-gallery__arrow:not([disabled]),
  .v-gallery__arrow:focus-visible { opacity: 1; }
  .v-gallery__arrow:hover { background: var(--color-ink); color: var(--color-bg); }
  .v-gallery[data-count='0'] .v-gallery__arrow,
  .v-gallery[data-count='1'] .v-gallery__arrow { display: none; }
}

/* ---------- md: один кадр за раз ---------- */

@media (min-width: 600px) and (max-width: 1023px) {
  .v-pdp__media { margin-inline: 0; }
  /* Два кадри в ряд тут були помилкою: на широкому телефоні це рве
     гортання — палець тягне, а «сторінка» переїжджає на півкадру. */
  .v-gallery__track { scroll-snap-type: x mandatory; }
  .v-pdp__media .v-gallery { max-width: 560px; margin-inline: auto; }
}

/* ---------- lg: дві колонки 40/60, права прилипає ---------- */

@media (min-width: 1024px) {
  .v-pdp { padding-bottom: var(--sp-8); }

  .v-pdp__layout {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: var(--sp-12);
    align-items: start;
    margin-top: var(--sp-2);
  }
  .v-pdp__media { margin-inline: 0; position: sticky; top: calc(64px + var(--sp-4)); }

  .v-pdp__buy {
    position: sticky;
    top: calc(64px + var(--sp-4));
    padding-top: 0;
    /* Рядок опису на 880px не читається, а пігулки, розкидані по всій
       ширині, перестають бути одним рядом. */
    max-width: 760px;
  }

  /* Кнопка на desktop не розтягується на весь стовпець */
  .v-pdp__cta .v-btn { width: 420px; max-width: 100%; }
  .v-pdp__description,
  .v-pdp__tagline { max-width: 60ch; }
}

/* ---------- Бічна панель (таблиця розмірів, ТЗ §5.3 ⚑: «кнопка → панель збоку») ---------- */

.v-panel--side {
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 520px);
  height: 100dvh;
  transform: translateX(100%);
  border-left: var(--border);
}
.v-panel--side[data-open='true'] { transform: translateX(0); }
.v-panel--side .v-panel__body { padding-bottom: var(--safe-bottom); }

/* ---------- Вкладки таблиці розмірів ---------- */

.v-tabs { display: block; }
.v-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--gutter) 0;
}
.v-tabs__list .v-chip[aria-selected='true'] {
  background: var(--color-btn);
  border-color: var(--color-btn);
  color: var(--color-on-btn);
}
.v-tabs__panel { padding: var(--sp-4) var(--gutter); }
.v-tabs__panel[hidden] { display: none; }

/* ---------- Таблиця замірів ---------- */

.v-size-chart[hidden] { display: none; }
.v-size-chart__name { margin: 0 0 var(--sp-2); }
.v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.v-table th,
.v-table td {
  padding: var(--sp-3) var(--sp-2);
  text-align: left;
  border-bottom: var(--border);
  white-space: nowrap;
}
.v-table thead th { color: var(--color-muted); font-weight: 400; }
.v-size-chart__scheme { margin: var(--sp-6) auto; }

/* ---------- Калькулятор розміру ---------- */

.v-fit { display: block; }
.v-fit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.v-fit__row:has([data-fit-cut]) { grid-template-columns: 1fr; gap: 6px; }
.v-fit .v-input { font-size: 16px; } /* менше 16px — iOS зумить сторінку */

.v-fit__result {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-price-pdp);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.v-fit__result:empty { display: none; }
.v-fit__apply { margin: 0 0 var(--sp-4); }
.v-fit__apply[hidden] { display: none; }

/* Перемикач одиниць у таблиці розмірів (тільки англійська версія) */
.v-units {
  display: flex;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-3);
}
.v-units .v-chip[aria-pressed='true'] {
  background: var(--color-btn);
  border-color: var(--color-btn);
  color: var(--color-on-btn);
}

/* ---------- «Повідомити про наявність» ---------- */

[data-vidro-notify][hidden],
.v-notify__done[hidden] { display: none; }
.v-notify__done { color: var(--color-success); }
[data-notify-variant-label]:empty { display: none; }
#vidro-notify-sheet .v-input { font-size: 16px; }

/* ---------- «Ви дивились» ---------- */

.v-saved[hidden] { display: none; }