/**
 * Попап варіацій (inc/woocommerce/variation-popup.php).
 *
 * Кольори й шрифти — лише токени з tokens.css; розміри тексту — з макета Figma.
 */

/* НАЛАШТУВАННЯ ПІД ПРОЄКТ — роль кожного токена в попапі */
.variation-popup{
  --vp-bg:     var(--theme-bg);           /* фон лівої панелі й дужок */
  --vp-line:   var(--theme-accent);       /* рамки рядків/степпера, кнопка */
  --vp-hover:  var(--theme-accent-soft);  /* фон рядка: наведення й обраний */
  --vp-ink:    var(--theme-text);         /* текст */
  --vp-muted:  var(--theme-text-muted);   /* другорядний текст */
  --vp-accent: var(--theme-highlight);    /* хрестик, плашка «немає в наявності» */
  --vp-font:   var(--theme-font);
  --vp-radius: var(--theme-radius-lg);    /* радіус попапу */
  --vp-row-radius: var(--theme-radius);   /* радіус рядків */
  --vp-arc: .21;                          /* ← ПРОЄКТ пухлість дужок */
  --vp-t: 100px;                          /* ← ПРОЄКТ розмір дужки */
  --vp-body-min: 450px;                   /* ← ПРОЄКТ мін. ширина лівої панелі на десктопі: назва + степер не тісняться */
}

/* ---------- каркас ---------- */
.variation-popup{
  width: min(1040px, 92vw);
  max-width: none;
  height: min(900px, 92vh);
  max-height: none;
  border: 0;
  padding: 0;
  border-radius: var(--vp-radius);
  background: var(--vp-bg);
  color: var(--vp-ink);
  font-family: var(--vp-font), sans-serif;
  overflow: hidden;
}
.variation-popup::backdrop{
  background: var(--theme-overlay, rgba(0, 0, 0, .5));
  backdrop-filter: blur(var(--theme-overlay-blur, 0px));
}

.variation-popup__inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--vp-body-min), 1fr) 1fr; /* на вужчих екранах стискається фото, а не список */
  grid-template-rows: minmax(0, 1fr);   /* без цього колонка росте під контент і не скролиться */
  height: 100%;
  margin: 0;
}

/* Elementor стилізує всі <button> — скид зі специфічністю 0,2,1;
   кожна кнопка нижче описана селектором не нижчої специфічності */
.variation-popup .variation-popup__inner button{
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.variation-popup .variation-popup__inner button:focus-visible{ outline: 2px solid var(--vp-ink); outline-offset: 2px; }

/* ---------- хрестик: дві риски замість символу «×» — завжди по центру ---------- */
.variation-popup button.variation-popup__close{
  position: absolute;
  top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--vp-accent);
}
.variation-popup button.variation-popup__close::before,
.variation-popup button.variation-popup__close::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: var(--vp-ink);
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.variation-popup button.variation-popup__close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.variation-popup button.variation-popup__close{ transition: background-color .15s; }
.variation-popup button.variation-popup__close:hover,
.variation-popup button.variation-popup__close:focus-visible{ background: var(--vp-line); }

/* ---------- ліва частина ---------- */
.variation-popup__body{
  min-height: 0;
  padding: 40px 38px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;               /* смугу ховаємо — прокрутка колесом/пальцем лишається */
  display: flex; flex-direction: column;
}
.variation-popup__body::-webkit-scrollbar{ display: none; }
.variation-popup__body > *{ flex-shrink: 0; }

/* Figma: 14 / 600 / 100% / 4% / uppercase */
.variation-popup__eyebrow{
  margin: 0 0 16px;
  font-size: 14px; font-weight: 600; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--vp-muted);
}
/* Figma: 40 / 600 / 100% / -3% */
.variation-popup__title{
  margin: 0 0 16px;
  color: inherit;
  font-family: inherit;
  font-size: 40px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
}
/* Figma: 20 / 400 / 140% / -3% / #79543FB2 */
.variation-popup__excerpt{
  margin: 0 0 24px;
  font-size: 20px; font-weight: 400; line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--vp-muted);
}
.variation-popup__excerpt:empty{ display: none; }
.variation-popup__label{ margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.2; }

/* ---------- рядки варіацій. Figma: 1px #E6B8B9, r16, padding 12/14, фото 68 r16 ---------- */
.variation-popup__list{ list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.variation-popup__row{
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 11px 13px;          /* + 1px рамка = 12/14 з Figma, висота рядка 92 */
  border: 1px solid var(--vp-line);
  border-radius: var(--vp-row-radius);
  background: transparent;
  transition: background-color .15s;
}
.variation-popup__row:hover,
.variation-popup__row.is-active{ background: var(--vp-hover); }

/* Немає в наявності: блідне вміст, а не рядок — щоб плашка лишалась яскравою.
   Плашка — ::after самого рядка; рядок — grid, тож вона стає клітинкою над назвою:
   [фото] [плашка]
   [фото] [назва + ціна]
   Степер прибираємо — назва займає всю ширину й нічим не перекривається. */
.variation-popup__row[data-soldout]{
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 6px;
  border-color: color-mix(in srgb, var(--vp-line) 45%, transparent);
}
.variation-popup__row[data-soldout]:hover{ background: transparent; }
.variation-popup__row[data-soldout] > *{ opacity: .45; }        /* ::after сюди не входить */
.variation-popup__row[data-soldout] .variation-popup__thumb{ grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.variation-popup__row[data-soldout] .variation-popup__name{ grid-column: 2; grid-row: 2; align-self: start; }
.variation-popup__row[data-soldout] .variation-popup__stepper{ display: none; }

/* плашка над назвою; текст — з PHP (VARIATION_POPUP_SOLDOUT) */
.variation-popup__row[data-soldout]::after{
  content: attr(data-soldout);
  grid-column: 2; grid-row: 1;
  justify-self: start; align-self: end;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--vp-accent);
  color: var(--vp-ink);
  font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  font-variant-numeric: lining-nums;   /* «5» рівною цифрою, а не старостильною */
  white-space: nowrap;
  pointer-events: none;
}

.variation-popup__thumb{ width: 68px; height: 68px; border-radius: 16px !important; object-fit: cover; display: block; }

.variation-popup__name{ overflow-wrap: anywhere; hyphens: auto; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.variation-popup__name small{
  display: block; margin-top: 4px;
  font-size: 15px; font-weight: 400; line-height: 1.2;
  color: var(--vp-muted);
  font-variant-numeric: lining-nums;
}
.variation-popup__name small b{ font-weight: 600; color: var(--vp-ink); }

/* ---------- степпер: обведена «пігулка» ---------- */
.variation-popup__stepper{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid var(--vp-line);
  border-radius: 999px;
}
/* − і + малюються рисками: гліфи шрифту сидять на «математичній осі», нижче центру кнопки */
.variation-popup .variation-popup__stepper button{
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 0;                /* символ у розмітці ховаємо — озвучує aria-label */
  transition: background-color .15s;
}
.variation-popup .variation-popup__stepper button::before,
.variation-popup .variation-popup__stepper button[data-step="1"]::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.variation-popup .variation-popup__stepper button[data-step="1"]::after{ transform: translate(-50%, -50%) rotate(90deg); }
.variation-popup .variation-popup__stepper button:hover{ background: var(--vp-line); }
.variation-popup .variation-popup__stepper button:disabled{ opacity: .3; cursor: default; background: none; }

/* рівні цифри однакової ширини — у Ysabeau за замовчуванням старостильні (0 як літера «о») */
.variation-popup__stepper output{
  min-width: 24px; text-align: center;
  font-size: 18px; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- підсумок і кнопка ---------- */
/* підсумок + кнопка прилипають до низу: список прокручується під ними */
.variation-popup__footer{
  position: sticky;
  bottom: -40px;                        /* = нижній padding .variation-popup__body */
  z-index: 2;
  margin: auto -38px -40px;             /* на всю ширину панелі, впритул до низу */
  padding: 20px 38px 40px;
  background: var(--vp-bg);
  box-shadow: 0 -16px 16px -16px color-mix(in srgb, var(--vp-ink) 35%, transparent);
}
.variation-popup__summary{
  margin: 0; padding-top: 0;
  display: flex; align-items: baseline;
  font-size: 18px;
  font-variant-numeric: lining-nums tabular-nums;
}
.variation-popup__summary b{ font-weight: 600; }
.variation-popup__summary b:first-of-type{ margin: 0 auto 0 12px; }
.variation-popup__summary b:last-of-type{ font-size: 22px; }

/* кнопка — як «У кошик» у картці товару: рожева, коричневий текст, при наведенні навпаки */
.variation-popup button.variation-popup__submit{
  display: block; width: 100%;
  margin-top: 16px; padding: 18px;
  border-radius: 999px;
  background: var(--vp-line); color: var(--vp-ink);
  text-align: center;
  font-family: var(--theme-button-font), sans-serif;
  font-size: var(--theme-button-size);
  font-weight: var(--theme-button-weight);
  letter-spacing: var(--theme-button-spacing);
  line-height: 1;
  font-variant-numeric: lining-nums;
  transition: background-color .15s, color .15s;
}
.variation-popup button.variation-popup__submit:not(:disabled):hover{ background: var(--vp-ink); color: var(--vp-bg); }
.variation-popup button.variation-popup__submit:disabled{ opacity: .5; cursor: default; }

/* ---------- фото + хвилястий край (живе на фото, тому не створює скролу) ---------- */
.variation-popup__photo{
  position: relative; overflow: hidden; min-height: 0;
  --k1: calc((var(--vp-arc) * var(--vp-arc) + .25) / (2 * var(--vp-arc)));
  --k2: calc(var(--k1) / var(--vp-arc));
}
.variation-popup__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.variation-popup__photo::before{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 0; bottom: 0; left: 0;
  width: calc(var(--vp-t) * var(--vp-arc));
  background: var(--vp-bg);
  -webkit-mask: radial-gradient(ellipse calc(var(--k2) * 100%) calc(var(--k1) * 100%) at calc(100% - var(--k2) * 100%) 50%, #000 calc(100% - 1px), #0000) 0 0 / 100% var(--vp-t) no-repeat round;
          mask: radial-gradient(ellipse calc(var(--k2) * 100%) calc(var(--k1) * 100%) at calc(100% - var(--k2) * 100%) 50%, #000 calc(100% - 1px), #0000) 0 0 / 100% var(--vp-t) no-repeat round;
}

/* ---------- мобілка ---------- */
@media (max-width: 767px){
  .variation-popup{ --vp-t: 64px; width: 94vw; height: 92vh; height: 92dvh; }
  .variation-popup__inner{ grid-template-columns: 1fr; grid-template-rows: 200px minmax(0, 1fr); }
  .variation-popup__photo{ order: -1; }
  .variation-popup__body{ padding: 24px 16px; }
  .variation-popup__footer{ bottom: -24px; margin: auto -16px -24px; padding: 16px 16px 24px; }
  .variation-popup__eyebrow{ font-size: 12px; margin-bottom: 12px; }
  .variation-popup__title{ font-size: 32px; margin-bottom: 12px; }
  .variation-popup__excerpt{ font-size: 16px; margin-bottom: 20px; }
  .variation-popup__row{ grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 12px; }
  .variation-popup__row[data-soldout]{ grid-template-columns: 56px minmax(0, 1fr); }
  .variation-popup__thumb{ width: 56px; height: 56px; border-radius: 14px; }
  .variation-popup__name{ font-size: 16px; }
  .variation-popup__name small{ font-size: 14px; }
  .variation-popup .variation-popup__stepper button{ width: 26px; height: 26px; }
  .variation-popup__stepper output{ min-width: 20px; font-size: 16px; }
  .variation-popup__photo::before{
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: calc(var(--vp-t) * var(--vp-arc));
    -webkit-mask: radial-gradient(ellipse calc(var(--k1) * 100%) calc(var(--k2) * 100%) at 50% calc(var(--k2) * 100%), #000 calc(100% - 1px), #0000) 0 0 / var(--vp-t) 100% round no-repeat;
            mask: radial-gradient(ellipse calc(var(--k1) * 100%) calc(var(--k2) * 100%) at 50% calc(var(--k2) * 100%), #000 calc(100% - 1px), #0000) 0 0 / var(--vp-t) 100% round no-repeat;
  }
}