/* Примірка кольору на реальному фото стрічки.
   Один блок на трьох сторінках: /colors/ (пікер — таблиця палітри, блок липкий)
   і продуктові сторінки (пікер — власний ряд зразків, блок звичайний).
   Кольорові змінні беруться зі сторінки — вони однакові на всіх трьох. */

.tryon{display:grid;grid-template-columns:1.25fr .95fr;gap:28px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:26px}
.tryon-view{position:relative;border-radius:10px;overflow:hidden;background:#f4f3f0}
.tryon-view canvas{display:block;width:100%;height:auto;transition:opacity .2s}
.tryon.is-loading .tryon-view canvas{opacity:.45}
.tryon-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(1,19,50,.82);
  color:#fff;font-size:12px;letter-spacing:.04em;padding:7px 14px;border-radius:20px;white-space:nowrap;
  transition:opacity .35s}
.tryon-hint.off{opacity:0;pointer-events:none}
.tryon-side h3{font-size:22px;margin-bottom:10px}
.tryon-side p{color:var(--ink-60);font-size:14px}
.tryon-cur{display:flex;align-items:center;gap:12px;margin-top:16px}
.tryon-cur .tryon-sw{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);flex:0 0 auto}
.tryon-cur .meta{display:flex;flex-direction:column;line-height:1.25}
.tryon-cur b{font-size:15px}
.tryon-cur small{color:var(--ink-40);font-size:12px}
.tryon-note{margin-top:16px;font-size:12.5px;color:var(--ink-40);border-left:2px solid var(--bronze);padding-left:10px}
.tryon-cta{margin-top:18px;display:inline-block;padding:11px 20px;font-size:13px}

/* Ракурси. Живуть у правій колонці, а не під полотном: на /colors/ блок липкий і його
   висота обмежена — усе, що додається під фото, з'їдає таблицю кольорів. */
.tryon-angles{display:flex;gap:8px;margin-top:16px}
.tryon-angle{width:58px;height:39px;padding:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:#f4f3f0;cursor:pointer;flex:0 0 auto;transition:border-color .18s,box-shadow .18s}
.tryon-angle img{display:block;width:100%;height:100%;object-fit:cover}
.tryon-angle:hover{border-color:var(--bronze)}
.tryon-angle.on{border-color:var(--bronze);box-shadow:0 0 0 2px rgba(164,132,97,.28)}
.tryon-angle:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* Компактний пікер для продуктових сторінок: ходові кольори під рукою, повна палітра — за
   посиланням. Кольори тягнемо з того самого data/palette-colors.php, що й таблиця на /colors/. */
.tryon-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:16px}
.tryon-swatch{height:32px;padding:0;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  transition:transform .14s,box-shadow .18s}
.tryon-swatch:hover{transform:translateY(-2px)}
.tryon-swatch.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--bronze)}
.tryon-swatch:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.tryon-all{display:inline-block;margin-top:14px;font-size:13px;color:var(--bronze);
  border-bottom:1px solid rgba(164,132,97,.4);text-decoration:none}
.tryon-all:hover{border-bottom-color:var(--bronze)}

@media(min-width:900px){
  /* тільки на /colors/: блок їде за таблицею з 48 рядків */
  .tryon--sticky{position:sticky;top:76px;z-index:20;box-shadow:0 10px 30px rgba(1,19,50,.07)}
  /* на невисоких екранах липкий блок не повинен з'їдати таблицю */
  .tryon--sticky .tryon-view canvas{max-height:40vh;width:auto;max-width:100%;margin:0 auto}
}
@media(max-width:899px){
  .tryon{grid-template-columns:1fr;gap:16px;padding:14px}
  .tryon-side h3{font-size:19px}
}