/* Virtual try-on */
.page-hero-plain { padding-bottom: 0; }
.section-tryon { padding-top: clamp(32px, 5vw, 56px); }
.tryon-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.to-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.to-thumb { border: 2px solid rgba(19,21,26,0.12); border-radius: 14px; background: #fff; padding: 10px 8px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color 0.2s, transform 0.2s; }
.to-thumb:hover { transform: translateY(-2px); }
.to-thumb.is-on { border-color: #2c5cf6; box-shadow: 0 0 0 3px rgba(44,92,246,0.15); }
.to-thumb img { width: 100%; height: 44px; object-fit: contain; }
.to-thumb span { font-size: 0.78rem; font-weight: 700; }
.to-sliders { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; padding: 16px; background: #fff; border: 1px solid rgba(19,21,26,0.1); border-radius: 14px; }
.to-sliders label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; color: #4c5160; }
.to-sliders input[type="range"] { width: 100%; accent-color: #2c5cf6; min-height: 32px; }
.to-privacy { font-size: 0.85rem; color: #1f8a58; font-weight: 600; }
.tryon-stage-wrap { display: flex; flex-direction: column; gap: 14px; }
.to-tabs { display: flex; gap: 8px; }
.to-tab { border: 1.5px solid rgba(19,21,26,0.2); background: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.to-tab.is-on { background: #13151a; border-color: #13151a; color: #fff; }
.to-stage { position: relative; aspect-ratio: 4 / 3; background: #13151a; border-radius: 22px; overflow: hidden; touch-action: none; }
.to-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.to-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.to-stage.mode-photo video { display: none; }
.to-msg { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.92); color: #13151a; font-size: 0.85rem; font-weight: 700; max-width: 90%; text-align: center; }
.to-msg:empty { display: none; }
.to-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .tryon-grid { grid-template-columns: 1fr; }
  .to-picker { grid-template-columns: repeat(4, 1fr); }
  .tryon-side { order: 2; }
  .tryon-stage-wrap { order: 1; }
}
@media (max-width: 560px) {
  .to-picker { grid-template-columns: 1fr 1fr; }
  .to-actions .btn { flex: 1 1 100%; }
  .to-stage { aspect-ratio: 3 / 4; }
}
/* the hidden attribute must always win over button styles */
[hidden] { display: none !important; }