/* White studio turntable; tint is clipped to the glass in each frame. */
.window-tint { background: #090a0c; border-top: 1px solid #292a2d; scroll-margin-top: 82px; }
.tint-heading { margin-bottom: 38px; }
.window-tint .tint-heading h2 { font-size: clamp(40px, 5.8vw, 80px); }
.tint-configurator { overflow: hidden; border: 1px solid #303135; border-radius: 18px; background: #151619; }
.tint-preview { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; background: #f5f6f7; isolation: isolate; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.tint-preview:focus-visible { outline: 3px solid #ff941e; outline-offset: -4px; }
.tint-preview.is-dragging { cursor: grabbing; }
.tint-scene { position: absolute; inset: 0; transform-origin: 50% 76%; }
.tint-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tint-glass-overlay { position: absolute; inset: 0; width: 100%; height: 100%; fill: #060a10; opacity: var(--glass-opacity, .3); pointer-events: none; transition: opacity 160ms ease; }
.tint-model-tag { position: absolute; left: 22px; top: 22px; color: #37393e; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.tint-360-tag { position: absolute; right: 22px; top: 17px; color: #555961; font-size: 18px; font-weight: 500; }
.tint-drag-hint { position: absolute; bottom: 14px; left: 0; width: 100%; margin: 0; text-align: center; color: #555961; font-size: 11px; pointer-events: none; }
.tint-drag-hint span { margin-right: 6px; font-size: 19px; vertical-align: -1px; }
.tint-preview[aria-busy="true"]::after { content: 'Laddar vinkel…'; position: absolute; right: 14px; bottom: 42px; padding: 8px 12px; border-radius: 999px; background: #101113d9; color: #fff; font-size: 11px; }
.tint-rotation { display: flex; align-items: center; gap: 22px; padding: 18px 36px; border-bottom: 1px solid #303135; }
.tint-turn { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1px solid #56585e; background: transparent; color: #fff; font: 22px/1 system-ui; cursor: pointer; }
.tint-turn:hover { background: #292b30; border-color: #ff941e; }
.tint-turn:focus-visible, .tint-angle-control input:focus-visible { outline: 2px solid #ff941e; outline-offset: 5px; }
.tint-angle-control { flex: 1; min-width: 0; }
.tint-angle-control > span { display: flex; justify-content: space-between; color: #b4b5b8; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.tint-angle-control output { color: #fff; font-variant-numeric: tabular-nums; }
.tint-angle-control input { display: block; width: 100%; height: 30px; padding: 0; margin: 4px 0 0; accent-color: #ff941e; cursor: pointer; }
.tint-controls { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 30px 36px; }
.tint-selection { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tint-caption { color: #a7a8ab; font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.tint-selection strong { color: #f6f6f3; font: 600 42px/1.2 Oswald, system-ui, sans-serif; }
.tint-selection-note { color: #b4b5b8; font-size: 12px; }
.tint-options { display: grid; grid-template-columns: repeat(3, minmax(0, 130px)); gap: 12px; padding: 0; margin: 0; border: 0; min-width: 0; }
.tint-options legend, .tint-option input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tint-option { position: relative; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tint-option-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 12px; border: 1px solid #47484d; border-radius: 12px; background: #1b1c20; transition: border-color 160ms ease, background 160ms ease; }
.tint-glass { display: block; width: 49px; height: 29px; border: 1px solid #92969f; border-radius: 8px 3px 3px 3px; transform: skewX(-10deg); }
.tint-glass-05 { background: linear-gradient(135deg, #363a40, #07090c 52%, #15171b); }
.tint-glass-15 { background: linear-gradient(135deg, #555b64, #20262e 52%, #343b43); }
.tint-glass-20 { background: linear-gradient(135deg, #747d88, #3c4652 52%, #535d69); }
.tint-option-value { color: #f6f6f3; font-size: 17px; font-weight: 700; }
.tint-option-note { color: #b4b5b8; font-size: 11px; }
.tint-option:hover .tint-option-card { border-color: #93959b; }
.tint-option input:checked + .tint-option-card { border-color: #ff941e; box-shadow: inset 0 0 0 1px #ff941e; background: #25211d; }
.tint-option input:focus-visible + .tint-option-card { outline: 2px solid #fff; outline-offset: 4px; }
.tint-price-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 24px 36px; border-top: 1px solid #303135; background: #1b1c20; }
.tint-price-info p { margin: 7px 0 0; color: #d7d8db; font-size: 13px; line-height: 1.5; }
.tint-price { color: #ff941e; font: 600 38px/1.2 Oswald, system-ui, sans-serif; white-space: nowrap; }
.tint-price span { font: 500 17px/1.2 Inter, system-ui, sans-serif; }
.tint-load-status { margin: 0; padding: 0 36px 22px; color: #f6d2a6; font-size: 13px; }
.tint-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; }
.tint-footer p { margin: 0; color: #a5a5a8; font-size: 11px; line-height: 1.7; }
.tint-footer .text-link { margin: 0; white-space: nowrap; font-size: 13px; }
.tint-noscript { color: #b4b5b8; font-size: 13px; }
@media (max-width: 900px) {
  .window-tint { scroll-margin-top: 70px; }
  .tint-controls { padding: 26px 24px; gap: 24px; }
  .tint-price-bar { padding: 22px 24px; }
  .tint-options { grid-template-columns: repeat(3, minmax(0, 110px)); }
}
@media (max-width: 650px) {
  .tint-heading { margin-bottom: 26px; }
  .tint-configurator { border-radius: 12px; }
  .tint-model-tag { left: 12px; top: 12px; font-size: 8px; letter-spacing: .5px; }
  .tint-360-tag { right: 12px; top: 9px; font-size: 14px; }
  .tint-drag-hint { bottom: 7px; font-size: 9px; }
  .tint-drag-hint span { font-size: 15px; }
  .tint-rotation { padding: 14px; gap: 16px; }
  .tint-controls { flex-direction: column; align-items: stretch; gap: 22px; padding: 24px 14px 18px; }
  .tint-selection { text-align: center; }
  .tint-selection strong { font-size: 36px; }
  .tint-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .tint-option-card { padding: 14px 6px; }
  .tint-price-bar { padding: 20px 14px; gap: 12px 20px; }
  .tint-price { font-size: 34px; }
  .tint-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tint-load-status { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tint-glass-overlay, .tint-option-card { transition: none; }
}