/* Däckladan – startsidan */

/* Sidhuvud */
.site-header{position:sticky;top:0;z-index:50;background:rgba(22,17,13,.96);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:24px;max-width:none;padding:12px var(--gutter);min-height:72px}
.brand{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none}
.brand__dl{height:34px;width:auto}
.brand__dt{height:22px;width:auto;border-radius:2px}
.brand__sep{width:1px;height:28px;background:var(--line-2)}
.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.site-nav ul{display:flex;gap:26px}
.site-nav a{text-decoration:none;font-weight:600;font-size:.9688rem;color:var(--fg-2);padding:6px 0;transition:color .2s var(--ease)}
.site-nav ul a:hover{color:var(--fg)}
.site-nav__phone{font-family:var(--data);font-size:1.125rem!important;letter-spacing:.02em;color:var(--fg)!important}
.site-nav__phone:hover{color:var(--amber-hi)!important}
.menu-btn{display:none}
.site-header__book{flex:none}

@media (max-width:1060px){
  .site-header__inner{gap:12px}
  .menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;cursor:pointer}
  .menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{display:block;width:18px;height:2px;background:var(--fg);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
  .menu-btn__bars{position:relative}
  .menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0}
  .menu-btn__bars::before{top:-6px}.menu-btn__bars::after{top:6px}
  .menu-btn[aria-expanded="true"] .menu-btn__bars{background:transparent}
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before{transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-btn__bars::after{transform:translateY(-6px) rotate(-45deg)}
  .site-header__book{margin-left:auto}
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gutter) 24px;background:var(--bg);border-bottom:1px solid var(--line)}
  .site-nav.is-open{display:flex}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav ul a,.site-nav__phone{display:block;padding:14px 0;font-size:1.125rem;border-bottom:1px solid var(--line);color:var(--fg)}
  .site-nav__phone{font-size:1.375rem!important}
}
@media (max-width:520px){
  .brand{gap:10px}
  .brand__dl{height:24px}
  .brand__dt{height:15px}
  .brand__sep{height:20px}
  .site-header__inner{min-height:64px;padding-top:10px;padding-bottom:10px}
  .site-header__book{padding:0 12px}
}
@media (max-width:370px){.brand__sep,.brand__dt{display:none}}

/* Tack-banner (no-JS-fallback för kontaktformuläret) */
.tack{position:fixed;z-index:60;left:50%;bottom:20px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:flex;gap:16px;align-items:flex-start;padding:16px 18px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:.9688rem}
.tack[hidden]{display:none}
.tack__close{flex:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;color:var(--fg-2)}

/* Hero */
.hero{--photo-w:min(42vw,640px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--photo-w);grid-template-rows:auto auto 1fr;min-height:min(calc(100svh - 72px),880px);border-bottom:1px solid var(--line)}
.hero__photo{grid-column:2;grid-row:1/-1;position:relative;overflow:hidden;background:var(--bg-2)}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,17,13,.55),rgba(22,17,13,0) 28%)}
.hero__copy{grid-column:1;grid-row:1;padding:clamp(48px,9vh,120px) var(--gutter) 0;max-width:900px}
.hero__title{font-size:clamp(3rem,1.1rem + 5.2vw,5.75rem);line-height:.96;letter-spacing:-.04em;max-width:12ch}
.hero__lead{margin-top:24px;font-size:clamp(1.125rem,1rem + .45vw,1.375rem);color:var(--fg-2);max-width:34ch;line-height:1.5}
.hero__tag{grid-column:1/3;grid-row:2;position:relative;z-index:3;margin:clamp(36px,6vh,64px) 0 clamp(40px,7vh,80px) var(--gutter);width:calc(100% - var(--photo-w) - var(--gutter) + 120px);max-width:820px;justify-self:start}
.hero__tag .finder{transform:rotate(-.8deg)}
.hero__alt{margin-top:22px;padding-left:64px;color:var(--fg-2);font-size:.9688rem}
.hero__alt a{color:var(--fg);font-weight:600}
.hero__alt a:hover{color:var(--amber-hi)}

/* Regnummer-sökaren */
.finder .tag__body{padding:26px 28px 26px 70px}
.finder__label{display:block;font-family:var(--data);font-size:1.0625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.finder__row{display:flex;gap:12px;align-items:stretch}
.plate{flex:1;min-width:0;display:flex;align-items:stretch;height:76px;background:var(--plate);border:3px solid #111;border-radius:8px;box-shadow:inset 0 0 0 2px var(--plate),inset 0 0 0 3px rgba(0,0,0,.25);overflow:hidden;transition:box-shadow .2s var(--ease)}
.plate:focus-within{box-shadow:inset 0 0 0 2px var(--plate),inset 0 0 0 3px rgba(0,0,0,.25),0 0 0 4px rgba(33,23,12,.55)}
.plate__band{flex:none;width:44px;background:var(--plate-blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.plate__band b{font-family:var(--data);font-size:1.125rem;line-height:1}
.plate__input{flex:1;min-width:0;width:100%;border:0;background:transparent;padding:0 16px;font-family:var(--data);font-weight:600;font-size:clamp(2rem,1.4rem + 1.8vw,2.875rem);letter-spacing:.14em;text-transform:uppercase;color:#111;text-align:center;outline:none}
.plate__input::placeholder{color:#716c65;letter-spacing:.14em}
.plate__input[aria-invalid="true"]{color:var(--err-ink)}
.finder__submit{min-height:76px;padding:0 28px;font-size:1.0625rem}
.finder__help{margin-top:12px;color:var(--ink-2);font-size:.9375rem}
.finder__error{margin-top:10px;color:var(--err-ink);font-weight:700;font-size:.9688rem}
.finder.is-loading .finder__submit{cursor:progress}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .hero__copy{grid-row:1;padding-top:44px}
  .hero__tag{grid-column:1;grid-row:2;width:auto;max-width:none;margin:32px var(--gutter) 36px}
  .hero__tag .finder{transform:none}
  .hero__photo{grid-column:1;grid-row:3;height:min(72vw,560px)}
  .hero__photo::after{background:linear-gradient(180deg,rgba(22,17,13,.5),rgba(22,17,13,0) 30%)}
  .hero__photo img{object-position:50% 35%}
}
@media (max-width:560px){
  .hero__copy{padding-top:36px}
  .hero__title{font-size:clamp(2.75rem,12vw,3.5rem)}
  .hero__lead{margin-top:16px}
  .hero__tag{margin-inline:12px}
  .finder .tag__body{padding:20px 18px 20px 50px}
  .tag__eyelet{left:14px;width:16px;height:16px;margin-top:-8px;box-shadow:0 0 0 3px #b77b1c,inset 0 2px 3px rgba(0,0,0,.6)}
  .tag__body{clip-path:polygon(20px 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px),0 20px)}
  .tag__body::after{left:32px}
  .finder__row{flex-direction:column}
  .plate{height:68px;flex:none}
  .finder__submit{min-height:54px;width:100%}
  .hero__alt{padding-left:12px;padding-right:12px}
}

/* Fakta-rad */
.facts{border-bottom:1px solid var(--line);padding-top:22px;padding-bottom:22px}
.facts__list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;color:var(--fg-2);font-size:1rem}
.facts__list b{font-family:var(--data);font-weight:600;font-size:1.3125rem;letter-spacing:.02em;color:var(--fg);margin-inline:.1em}
.facts__list a{text-decoration:none}
.facts__list a:hover b{color:var(--amber-hi)}
@media (max-width:760px){.facts__list{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}}
@media (max-width:420px){.facts__list{grid-template-columns:1fr}}

/* Sektioner */
.showroom,.gallery,.services,.jour,.about,.insta,.contact{padding-top:var(--section);padding-bottom:var(--section)}
.services,.about,.contact{padding-left:var(--gutter);padding-right:var(--gutter)}
.services>.wrap,.about>.wrap,.contact>.wrap{padding-left:0;padding-right:0;max-width:calc(var(--maxw) - 2 * var(--gutter))}
.gallery{padding-top:0;padding-bottom:clamp(72px,8vw,120px)}

/* Showroom */
.showroom__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.showroom__text{grid-column:1/5;padding-top:clamp(0px,4vw,64px)}
.showroom__text .lede{margin-top:20px}
.ruled{margin-top:32px;border-top:1px solid var(--line-2)}
.ruled>div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ruled dt{font-weight:700}
.ruled dd{color:var(--fg-2)}
.showroom__cta{margin-top:32px}
.showroom__photo{position:relative}
.showroom__photo img{width:100%;border-radius:var(--r-sm);object-fit:cover}
.showroom__photo figcaption{margin-top:10px;font-family:var(--data);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.showroom__photo--a{grid-column:6/10}
.showroom__photo--a img{aspect-ratio:3/4}
.showroom__photo--b{grid-column:10/13;margin-top:clamp(80px,14vw,240px)}
.showroom__photo--b img{aspect-ratio:4/5}
@media (max-width:900px){
  .showroom__text{grid-column:1/-1;padding-top:0}
  .showroom__photo--a{grid-column:1/8}
  .showroom__photo--b{grid-column:8/13;margin-top:80px}
}
@media (max-width:520px){
  .showroom__grid{gap:12px}
  .showroom__photo--a{grid-column:1/8}
  .showroom__photo--b{grid-column:8/13;margin-top:56px}
  .ruled>div{grid-template-columns:1fr;gap:2px}
}

/* Galleri-räls */
.gallery__head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap;margin-bottom:36px}
.gallery__head .lede{max-width:44ch}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 20px;scroll-padding-left:var(--gutter);padding-right:var(--gutter);overscroll-behavior-x:contain}
.rail:focus-visible{outline-offset:-2px}
.rail figure{flex:none;width:clamp(280px,44vw,640px);scroll-snap-align:start}
.rail img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm);background:var(--bg-2)}
.rail figcaption{margin-top:10px;font-family:var(--data);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:760px){.rail figure{width:82vw}}

/* Tjänster */
.services{background:var(--bg-2);border-block:1px solid var(--line)}
.services__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.services__intro{position:sticky;top:120px}
.services__intro .lede{margin-top:20px}
.services__intro p:last-child{margin-top:32px}
.service-list{border-top:1px solid var(--line-2)}
.service-list li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--line-2)}
.service-list h3{font-size:1.375rem;letter-spacing:-.015em}
.service-list p{color:var(--fg-2)}
@media (max-width:900px){
  .services__grid{grid-template-columns:1fr}
  .services__intro{position:static}
}
@media (max-width:620px){.service-list li{grid-template-columns:1fr;padding:20px 0}}

/* Jour + RMS */
.jour__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,112px);align-items:start}
.tag--jour{margin-top:12px;transform:rotate(-1.5deg)}
.tag--jour .tag__body{padding:36px 36px 36px 80px}
.jour__q{font-size:1.375rem;font-weight:700;letter-spacing:-.015em}
.jour__phone{display:block;margin-top:6px;font-family:var(--data);font-weight:600;font-size:clamp(3rem,1.6rem + 4vw,5rem);line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--ink);text-decoration:none}
.jour__phone:hover{color:#000;text-decoration:underline;text-decoration-thickness:3px}
.jour__note{margin-top:14px;color:var(--ink-2);max-width:32ch}
.jour__text .lede{margin-top:20px}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;border-block:1px solid var(--line-2)}
.figures>div{padding:18px 16px 18px 0;display:flex;flex-direction:column-reverse;gap:2px}
.figures>div+div{padding-left:16px;border-left:1px solid var(--line)}
.figures dt{color:var(--fg-3);font-size:.9375rem}
.figures dd{font-family:var(--data);font-weight:600;font-size:1.75rem;letter-spacing:.01em;line-height:1.1}
.rms-list{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.rms-list li{color:var(--fg-2);font-size:1rem}
.rms-list b{display:block;color:var(--fg);font-size:1.0625rem;margin-bottom:2px}
.jour__text p:last-child{margin-top:32px}
@media (max-width:900px){.jour__grid{grid-template-columns:1fr}.tag--jour{max-width:560px}}
@media (max-width:560px){
  .tag--jour{transform:none}
  .tag--jour .tag__body{padding:26px 20px 26px 54px}
  .figures{grid-template-columns:1fr 1fr}
  .figures>div:nth-child(3){padding-left:0;border-left:0}
  .figures>div:nth-child(n+3){border-top:1px solid var(--line)}
  .rms-list{grid-template-columns:1fr}
}

/* Om oss */
.about{background:var(--bg-2);border-block:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.about__photo img{width:100%;border-radius:var(--r-sm);aspect-ratio:978/583;object-fit:cover}
.about__text .lede{margin-top:20px}
.checks{margin-top:28px;display:grid;gap:12px}
.checks li{position:relative;padding-left:30px;color:var(--fg-2)}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:10px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg) scale(.8);transform-origin:50% 50%}
@media (max-width:900px){.about__grid{grid-template-columns:1fr}}

/* Instagram */
.insta__head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.insta__feed{min-height:0}
.insta__placeholder{color:var(--fg-3);padding:48px 0;border-block:1px solid var(--line)}
.insta__feed.is-loaded .insta__placeholder{display:none}

/* Kontakt */
.contact{border-top:1px solid var(--line)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact__info .lede{margin-top:20px}
.ruled--contact>div{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}
.ruled--contact dd{color:var(--fg);font-weight:600}
.ruled--contact a{text-decoration:none}
.ruled--contact a:hover{text-decoration:underline}
.contact__form{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,44px)}
.contact__form .h3{margin-bottom:4px}
.form__submit{justify-self:start;min-width:220px}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:520px){.ruled--contact>div{grid-template-columns:1fr}.form__submit{justify-self:stretch}}

/* Sidfot */
.site-footer{border-top:1px solid var(--line);padding-top:72px;background:#110d0a;font-size:.9688rem}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px}
.site-footer__logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.site-footer__logos img:first-child{height:30px;width:auto}
.site-footer__logos img:last-child{height:20px;width:auto;border-radius:2px}
.site-footer p{color:var(--fg-3)}
.site-footer__brand p{max-width:40ch}
.site-footer__h{font-size:.9375rem;font-family:var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:600;margin-bottom:14px}
.site-footer li{padding:4px 0;color:var(--fg-2)}
.site-footer li a{text-decoration:none}
.site-footer li a:hover{text-decoration:underline}
.site-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;padding-bottom:24px;position:relative}
.site-footer__bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}
.site-footer__bottom a{color:var(--fg-2)}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1/-1}}
@media (max-width:460px){.site-footer__grid{grid-template-columns:1fr}}

/* ==== Resultat från regnummer-sökningen ==== */
.results{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--line);background:var(--bg-2)}
.results[hidden]{display:none}
.demo-note{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:28px;padding:12px 16px;border:1px dashed var(--amber);border-radius:var(--r-sm);color:var(--fg-2);font-size:.9375rem}
.demo-note b{font-family:var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-hi);font-weight:600}
.loading-line{display:flex;align-items:center;gap:14px;color:var(--fg-2);padding:24px 0}
.loading-line::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--amber);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.vehicle{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.vehicle .tag{transform-origin:20px 50%}
.vehicle .tag.is-new{animation:tag-drop .9s var(--ease) both}
@keyframes tag-drop{0%{opacity:0;transform:translateY(-18px) rotate(-5deg)}55%{opacity:1;transform:translateY(0) rotate(1.2deg)}100%{transform:rotate(-.6deg)}}
.vehicle .tag{transform:rotate(-.6deg)}
.vehicle .tag__body{padding:30px 32px 30px 76px}
.vehicle__plate{display:inline-flex;align-items:stretch;height:40px;background:var(--plate);border:2px solid #111;border-radius:5px;overflow:hidden;font-family:var(--data);font-weight:600;font-size:1.5rem;letter-spacing:.12em;color:#111}
.vehicle__plate i{width:22px;background:var(--plate-blue)}
.vehicle__plate span{display:flex;align-items:center;padding:0 12px}
.vehicle__name{margin-top:18px;font-size:clamp(1.875rem,1.2rem + 2vw,2.75rem);letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.vehicle__sub{margin-top:6px;color:var(--ink-2);font-size:1.0625rem}
.spec{margin-top:22px;border-top:1px solid rgba(33,23,12,.3)}
.spec>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(33,23,12,.18)}
.spec dt{color:var(--ink-2)}
.spec dd{font-family:var(--data);font-weight:600;font-size:1.1875rem;letter-spacing:.03em;color:var(--ink);text-align:right}
.vehicle__aside h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.03em}
.vehicle__aside p{margin-top:14px;color:var(--fg-2);max-width:42ch}
.vehicle__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.vehicle__again{margin-top:18px;background:none;border:0;padding:0;color:var(--fg-2);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;font-size:.9688rem}
.vehicle__again:hover{color:var(--amber-hi)}
@media (max-width:900px){.vehicle{grid-template-columns:1fr}}
@media (max-width:560px){.vehicle .tag__body{padding:24px 18px 24px 52px}.vehicle__actions .btn{flex:1 1 100%}}

.rims{margin-top:clamp(56px,7vw,88px);scroll-margin-top:96px}
.rims[hidden]{display:none}
.rims__head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.rims__head h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.03em}
.rims__head h2:focus{outline:none}
.rims__note{margin-top:8px;color:var(--fg-2);font-size:.9688rem}
.looks{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.looks legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.looks label{position:relative;cursor:pointer}
.looks input{position:absolute;opacity:0;inset:0;cursor:pointer}
.looks span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--fg-2);transition:all .2s var(--ease)}
.looks input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.looks input:focus-visible+span{outline:2px solid var(--amber-hi);outline-offset:2px}
.looks label:hover span{border-color:var(--fg-2);color:var(--fg)}
.looks input:checked:hover+span{color:var(--bg)}
.legend-line{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 24px;color:var(--fg-3);font-size:.9063rem}
.legend-line b{color:var(--fg-2);font-weight:600}
.rim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:28px}
.rim{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s var(--ease),transform .3s var(--ease)}
.rim:hover{border-color:var(--line-2)}
.rim__img{position:relative;aspect-ratio:1/1;background:#241c15;overflow:hidden}
.rim__img img{width:100%;height:100%;object-fit:cover}
.rim__img.is-missing::before{content:"";position:absolute;inset:18% 18% 26%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23a89a85' stroke-width='2.2'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Ccircle cx='50' cy='50' r='36'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M50 41V15M58.6 47.2l24.7-8M55.3 57.3l15.3 21M44.7 57.3l-15.3 21M41.4 47.2l-24.7-8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.85}
.rim__img.is-missing::after{content:"Bild skickas med offerten";position:absolute;left:0;right:0;bottom:9%;text-align:center;color:var(--fg-3);font-size:.8125rem;letter-spacing:.02em}
.look{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;background:var(--amber);color:var(--ink);font-family:var(--data);font-weight:600;font-size:.9375rem;letter-spacing:.04em;clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px),0 9px);border-radius:0 4px 4px 0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.look::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px #b77b1c}
.rim__body{display:flex;flex-direction:column;gap:4px;padding:18px 18px 20px;flex:1}
.rim__brand{font-family:var(--data);font-weight:600;font-size:.9688rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.rim__name{font-size:1.25rem;letter-spacing:-.015em}
.sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sizes li{font-family:var(--data);font-weight:600;font-size:.9688rem;letter-spacing:.03em;padding:3px 8px;border-radius:4px;background:var(--bg-3);color:var(--fg-2)}
.rim__cta{margin-top:auto;padding-top:18px}
.rim__cta .btn{width:100%}
@media (max-width:560px){.rim__img{aspect-ratio:4/3}}
.rims__empty{padding:32px 0;color:var(--fg-2)}

/* Reservformuläret "Vi tar fram fälgar till din bil" */
.fallback{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.fallback__text h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.03em}
.fallback__text p{margin-top:14px;color:var(--fg-2);max-width:44ch}
.fallback__text .fallback__why{color:var(--fg-3);font-size:.9375rem}
.fallback .tag__body{padding:28px 30px 28px 72px}
@media (max-width:900px){.fallback{grid-template-columns:1fr}}
@media (max-width:560px){.fallback .tag__body{padding:22px 18px 22px 50px}}

/* Offert-modal */
.modal{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:4px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);color:var(--fg);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.modal::backdrop{background:rgba(10,7,5,.72)}
.modal[open]{animation:modal-in .35s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal__inner{gap:0}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal__close{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:transparent;color:var(--fg);cursor:pointer}
.modal__close:hover{border-color:var(--fg-2)}
.modal__body{display:grid;gap:16px;padding:22px}
.offer-sum{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.offer-sum img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);background:var(--bg-3)}
.offer-sum b{display:block;font-size:1.0625rem}
.offer-sum span{display:block;color:var(--fg-2);font-size:.9375rem}
.offer-note{font-size:.9063rem;color:var(--fg-3)}
.modal .btn--amber{width:100%}
.done{display:grid;gap:12px;padding:8px 0}
.done h3{font-size:1.5rem}
.done p{color:var(--fg-2)}