/* Kortkoden [lacktorget_hitta_farg]. Temats färger: mörk #2f3234, orange #f59e00, Roboto. */
.lthf {
  --lthf-ink: #2f3234; --lthf-text: #3d4143; --lthf-muted: #6b6f72; --lthf-line: #e4e4e1;
  --lthf-ground: #f6f6f4; --lthf-accent: #f59e00; --lthf-link: #b8740a;
  --lthf-ok-bg: #eef6f0; --lthf-ok-line: #cfe3d6; --lthf-ok: #2f6b45;
  --lthf-warn-bg: #fff4e0; --lthf-warn: #7a4a00;
  color: var(--lthf-text); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 28px;
}
.lthf *, .lthf *::before, .lthf *::after { box-sizing: border-box; }
.lthf [hidden] { display: none !important; }
.lthf h2, .lthf h3, .lthf h4, .lthf p { margin: 0; padding: 0; }
.lthf button { font-family: inherit; line-height: 1.3; text-transform: none; letter-spacing: normal; box-shadow: none; }
.lthf :focus-visible { outline: 2px solid var(--lthf-accent); outline-offset: 2px; }

/* Sökdelen */
.lthf__find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; }
.lthf--bara-ruta .lthf__find { grid-template-columns: minmax(0, 480px); justify-content: center; }
@media (max-width: 860px) { .lthf__find { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.lthf__h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; font-weight: 700; color: var(--lthf-ink); text-wrap: balance; margin-bottom: 12px !important; }
.lthf__pitch p { max-width: 46ch; font-size: 17px; }
.lthf__box { background: #fff; border: 1px solid var(--lthf-line); border-radius: 6px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 24px rgba(47, 50, 52, .08); }
.lthf__title { font-size: 20px; font-weight: 700; color: var(--lthf-ink); }
.lthf__tabs, .lthf__kts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #ebebe8; padding: 4px; border-radius: 6px; }
.lthf .lthf__tab, .lthf .lthf__kt { margin: 0; height: auto; min-height: 38px; border: 0; border-radius: 4px; background: transparent; color: var(--lthf-text); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 10px; }
.lthf .lthf__tab[aria-selected="true"], .lthf .lthf__kt[aria-selected="true"] { background: var(--lthf-ink); color: #fff; }
.lthf__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lthf__lbl { font-size: 13px; color: var(--lthf-muted); margin: 0; }
.lthf__plate { display: flex; height: 56px; border: 2px solid var(--lthf-ink); border-radius: 6px; overflow: hidden; background: #fff; }
.lthf__plate:focus-within { outline: 2px solid var(--lthf-accent); outline-offset: 2px; }
.lthf__plate span { width: 32px; flex: none; background: #003399; color: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 13px; font-weight: 700; }
.lthf .lthf__plate input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 14px; font: 600 24px/1 "Roboto Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--lthf-ink); background: transparent; }
.lthf .lthf__plate input:focus { outline: none; }
.lthf .lthf__field { width: 100%; height: 52px; margin: 0; border: 1px solid #c9cbc9; border-radius: 6px; padding: 0 14px; font-size: 17px; color: var(--lthf-ink); background: #fff; box-shadow: none; }
.lthf .lthf__go { width: 100%; height: 50px; margin: 0; border: 0; border-radius: 4px; background: var(--lthf-accent); color: #1f2224; font-weight: 700; font-size: 16px; cursor: pointer; }
.lthf .lthf__go:hover { filter: brightness(.95); }
.lthf__small { font-size: 13px; color: var(--lthf-muted); }
.lthf .lthf__link { display: inline; border: 0; background: none; padding: 0; margin: 0; color: var(--lthf-link); text-decoration: underline; cursor: pointer; font-size: inherit; font-weight: 400; height: auto; }
.lthf__msg { border-radius: 6px; padding: 12px 14px; font-size: 14px; }
.lthf__msg--busy { background: #eef4fb; color: #1d4f86; }
.lthf__msg--warn { background: var(--lthf-warn-bg); color: var(--lthf-warn); }
.lthf__msg--ask { background: var(--lthf-ground); color: var(--lthf-ink); font-weight: 500; }
.lthf__spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: lthf-spin .8s linear infinite; }
@keyframes lthf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lthf__spin { animation: none; } }
.lthf__choices { display: flex; flex-direction: column; border: 1px solid var(--lthf-line); border-radius: 6px; overflow: hidden; }
.lthf .lthf__choice { display: flex; gap: 10px; align-items: center; text-align: left; margin: 0; border: 0; border-bottom: 1px solid var(--lthf-line); border-radius: 0; background: #fff; padding: 10px 12px; min-height: 46px; height: auto; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--lthf-ink); }
.lthf .lthf__choice:last-child { border-bottom: 0; }
.lthf .lthf__choice:hover { background: var(--lthf-ground); }
.lthf__choice small { display: block; font-weight: 400; font-size: 12px; color: var(--lthf-muted); }
.lthf__dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .15); }

/* Träffen */
.lthf__shop { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 90px; }
.lthf__hit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--lthf-ok-bg); border: 1px solid var(--lthf-ok-line); border-radius: 6px; padding: 14px 16px; }
.lthf__sw { width: 44px; height: 44px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .15); background-image: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .5), transparent 55%); }
.lthf__hit > div { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.lthf__car { font-size: 13px; color: var(--lthf-ok); }
.lthf__car:empty { display: none; }
.lthf__code { font-size: 20px; font-weight: 700; color: var(--lthf-ink); overflow-wrap: anywhere; }
.lthf__kind { font-size: 14px; }
.lthf__ks { display: flex; flex-direction: column; gap: 10px; }
.lthf__kts { max-width: 520px; }
.lthf .lthf__kt { font-weight: 400; font-size: 15px; padding: 10px 12px; }
.lthf .lthf__kt b { font-size: 17px; margin-right: 4px; }
.lthf__why { max-width: 65ch; font-size: 15px; }
.lthf__why b { color: var(--lthf-ink); }

/* Produkterna */
.lthf__group { display: flex; flex-direction: column; gap: 10px; }
.lthf__h { font-size: 22px; font-weight: 700; color: var(--lthf-ink); }
.lthf__sub { color: var(--lthf-muted); font-size: 15px; margin-top: -6px !important; }
.lthf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
@media (max-width: 480px) { .lthf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.lthf__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lthf-line); border-radius: 6px; overflow: hidden; }
.lthf__ph { position: relative; display: block; aspect-ratio: 1 / 1; max-width: 100%; background: #fff; border-bottom: 1px solid var(--lthf-line); }
.lthf__ph img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; margin: 0 !important; }
.lthf__badge { position: absolute; top: 8px; left: 8px; background: var(--lthf-ink); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 3px; line-height: 1.3; }
.lthf__bd { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lthf__n { font-size: 16px !important; font-weight: 500 !important; color: var(--lthf-ink); line-height: 1.3 !important; }
.lthf__use { font-size: 13px; color: var(--lthf-muted); }
.lthf__pr { margin-top: auto; padding-top: 8px; font-size: 17px; font-weight: 700; color: var(--lthf-ink); font-variant-numeric: tabular-nums; }
.lthf__pr del, .lthf__lp del { font-size: 13px; font-weight: 400; color: var(--lthf-muted); }
.lthf__pr ins, .lthf__lp ins { text-decoration: none; }
.lthf .lthf__buy { margin: 0 12px 12px; display: block; text-align: center; background: var(--lthf-accent); color: #1f2224; text-decoration: none; border-radius: 4px; padding: 10px; font-size: 15px; font-weight: 700; }
.lthf .lthf__buy:hover { filter: brightness(.95); color: #1f2224; }

.lthf__more { background: #fff; border: 1px solid var(--lthf-line); border-radius: 6px; }
.lthf__more summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--lthf-ink); font-size: 17px; }
.lthf__more summary span { font-weight: 400; color: var(--lthf-muted); font-size: 14px; margin-left: 6px; }
.lthf__more > div { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.lthf__rh { margin-top: 6px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lthf-muted); }
.lthf .lthf__pl { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lthf-line); border-radius: 6px; }
.lthf .lthf__pl li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--lthf-line); list-style: none; }
.lthf .lthf__pl li::before { content: none; }
.lthf .lthf__pl li:last-of-type { border-bottom: 0; }
.lthf__pi img { width: 56px !important; height: 56px !important; object-fit: contain; display: block; margin: 0 !important; }
.lthf__ln { display: block; font-weight: 500; color: var(--lthf-ink); }
.lthf__w { display: block; font-size: 13px; color: var(--lthf-muted); }
.lthf__w b { font-weight: 500; color: var(--lthf-text); }
.lthf__lp { font-weight: 700; color: var(--lthf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lthf .lthf__lb { background: var(--lthf-ink); color: #fff; text-decoration: none; border-radius: 4px; padding: 8px 14px; font-size: 14px; font-weight: 500; text-align: center; }
.lthf .lthf__lb:hover { background: #1f2224; color: #fff; }
@media (max-width: 520px) {
  .lthf .lthf__pl li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .lthf__pi img { width: 48px !important; height: 48px !important; }
  .lthf .lthf__lb { grid-column: 2 / -1; }
}

/* Temat (BeTheme) sätter egna lägen och spärrning — håll våra. */
.lthf { margin-bottom: 32px; }
.lthf h2, .lthf h3, .lthf h4, .lthf summary { letter-spacing: normal !important; text-transform: none !important; }
.lthf .lthf__go:hover, .lthf .lthf__go:focus, .lthf .lthf__go:active { background: var(--lthf-accent) !important; color: #1f2224 !important; }
.lthf .lthf__tab:not([aria-selected="true"]):hover, .lthf .lthf__tab:not([aria-selected="true"]):focus,
.lthf .lthf__kt:not([aria-selected="true"]):hover, .lthf .lthf__kt:not([aria-selected="true"]):focus { background: transparent !important; color: var(--lthf-text) !important; }
.lthf .lthf__tab[aria-selected="true"]:hover, .lthf .lthf__tab[aria-selected="true"]:focus,
.lthf .lthf__kt[aria-selected="true"]:hover, .lthf .lthf__kt[aria-selected="true"]:focus { background: var(--lthf-ink) !important; color: #fff !important; }
.lthf .lthf__link:hover, .lthf .lthf__link:focus { background: none !important; color: var(--lthf-link) !important; }
.lthf .woocommerce-price-suffix { display: block; font-size: 12px; font-weight: 400; color: var(--lthf-muted); }
.lthf__lp .woocommerce-price-suffix { text-align: right; }
/* Sajtens momstext kommer som <br><small>exkl. moms</small>. */
.lthf__pr small, .lthf__lp small { display: block; font-size: 12px; font-weight: 400; color: var(--lthf-muted); }
.lthf__pr br, .lthf__lp br { display: none; }
.lthf__lp { text-align: right; }
/* Mobil: namn och innehåll över hela bredden, pris och Välj på raden under. */
@media (max-width: 520px) {
  .lthf .lthf__pl li { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img txt txt" "img pris knapp"; row-gap: 6px; }
  .lthf__pi { grid-area: img; align-self: start; }
  .lthf .lthf__pl li > div { grid-area: txt; }
  .lthf__lp { grid-area: pris; text-align: left; }
  .lthf .lthf__lb { grid-area: knapp; grid-column: auto; }
}

/* Märkesval: samma utseende som colors ruta på produktsidan. */
.lthf .lthf__choices { display: block; border: 1px solid #e0d6b0; background: #fdf8e6; border-radius: 6px; padding: 12px 14px; font-size: 14px; line-height: 1.45; overflow: visible; }
.lthf__hmsg { margin: 0 0 8px !important; }
.lthf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lthf .lthf__chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; border: 1px solid #c9c2a4; background: #fff; color: #222; border-radius: 20px; padding: 9px 16px; font-size: 14px; font-weight: 400; line-height: 1; min-height: 40px; height: auto; cursor: pointer; }
.lthf .lthf__chip:hover, .lthf .lthf__chip:focus { background: #f0ead2 !important; color: #222 !important; }
.lthf .lthf__chip--more { border-style: dashed; color: #555; }
.lthf__chip .lthf__dot { width: 16px; height: 16px; }
.lthf__or { margin: 0 !important; color: #666; font-size: 13px; }
.lthf__msg--quiet { background: #f7f7f7; color: #555; border: 1px solid #dcdcdc; }

/* Film bakom sökrutan. Raden i sidbyggaren sätts till full bredd. */
.lthf__hero { position: relative; overflow: hidden; background: #1c1e20 center / cover no-repeat; padding: 56px max(24px, calc((100% - 1180px) / 2)); min-height: 520px; display: flex; align-items: center; }
.lthf__still, .lthf__vid { position: absolute; margin: 0 !important; max-width: none !important; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lthf__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 22, 24, .78) 0%, rgba(20, 22, 24, .45) 55%, rgba(20, 22, 24, .25) 100%); }
.lthf__hero .lthf__find { position: relative; width: 100%; }
.lthf--film .lthf__h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.lthf--film .lthf__pitch p { color: #e8e9ea; }
.lthf--film .lthf__box { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border-color: transparent; }
.lthf--film .lthf__shop { padding: 0 max(0px, calc((100% - 1180px) / 2)); }
@media (max-width: 860px) {
  .lthf__hero { padding: 32px 16px; min-height: 0; }
  .lthf__shade { background: rgba(20, 22, 24, .6); }
  .lthf--film .lthf__shop { padding: 0 16px; }
}

/* Personalens VIN (17 tecken) får plats på skylten. */
.lthf .lthf__plate input.lthf__vin { font-size: 16px; letter-spacing: .04em; }

/* Bekräftelsen när färgen är hittad: koden först, stort, med produkterna direkt under. */
.lthf__hit { padding: 16px 18px; gap: 16px; border-width: 2px; }
.lthf__hit:focus { outline: none; }
.lthf__sw { width: 56px; height: 56px; }
.lthf__ok { font-size: 14px; font-weight: 700; color: var(--lthf-ok); }
.lthf__code { font-size: 24px; line-height: 1.2; }
.lthf__car { font-size: 14px; color: var(--lthf-text); }
.lthf__kind { font-size: 14px; color: var(--lthf-muted); }
.lthf__hero { box-sizing: border-box; max-width: none; }
@media (max-width: 520px) { .lthf__code { font-size: 20px; } .lthf__sw { width: 44px; height: 44px; } }

/* 0.9: rutan är regsökets egen (#ltregsok-ruta) — den är kortet, inte vårt omslag. */
.lthf .lthf__box { padding: 0; border: 0; background: none; box-shadow: none; display: block; }
.lthf .lthf__form { margin: 0; }
.lthf #ltregsok-ruta { margin: 0 !important; border-radius: 6px; padding: 22px; box-shadow: 0 8px 24px rgba(47, 50, 52, .08); }
.lthf--film #ltregsok-ruta { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border-color: transparent; }
.lthf .ltregsok-ruta__h { font-size: 20px !important; letter-spacing: normal !important; text-transform: none !important; color: var(--lthf-ink); }
.lthf .ltregsok-ruta__tabs.lthf__tabs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lthf .ltregsok-ruta__tabs button:not([aria-selected="true"]):hover, .lthf .ltregsok-ruta__tabs button:not([aria-selected="true"]):focus { background: transparent !important; color: #3b3f42 !important; }
.lthf .ltregsok-ruta__tabs button[aria-selected="true"]:hover, .lthf .ltregsok-ruta__tabs button[aria-selected="true"]:focus { background: #2f3234 !important; color: #fff !important; }
.lthf .wapf-field-label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.lthf .wapf-input { width: 100%; height: 48px; margin: 0; border: 1px solid #c9cbc9; border-radius: 4px; padding: 0 12px; font-size: 16px; background: #fff; box-shadow: none; }
.lthf .wapf-field-description { margin-top: 6px; font-size: 13px; color: var(--lthf-muted); }
/* RAL/NCS-fliken */
.lthf__ral { display: flex; flex-direction: column; gap: 8px; }
.lthf__quiet { margin: 0 !important; font-size: 14px; color: #555; background: #f7f7f7; border: 1px solid #dcdcdc; border-radius: 6px; padding: 10px 12px; }
.lthf .lthf__ralchip { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 1px solid #d6d7d5; background: #fff; color: #222; border-radius: 6px; padding: 6px 10px 6px 6px; font-size: 13px; font-weight: 400; line-height: 1.2; text-align: left; cursor: pointer; height: auto; min-height: 40px; flex: 1 1 200px; }
.lthf .lthf__ralchip:hover, .lthf .lthf__ralchip:focus { background: #f6f6f4 !important; color: #222 !important; }
.lthf__ralsw { width: 28px; height: 28px; flex: none; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .15); }
.lthf__ralres .lthf__chips { margin: 0; }
.lthf .lthf__ralchip { justify-content: flex-start !important; }

.lthf .lthf__ralown { display: block; width: 100%; margin: 8px 0 0; border: 0; border-radius: 4px; background: var(--lthf-accent); color: #1f2224; font-size: 15px; font-weight: 400; padding: 12px 14px; text-align: left; cursor: pointer; height: auto; }
.lthf .lthf__ralown:hover, .lthf .lthf__ralown:focus { background: var(--lthf-accent) !important; color: #1f2224 !important; filter: brightness(.95); }
.lthf__ralnote { margin: 6px 0 0 !important; font-size: 13px; color: var(--lthf-muted); }

/* RAL/NCS: tillverkarens egen kod → närmaste i NCS 2050; förklaringen som fälls ut. */
.lthf__ralodd { margin-top: 8px; border: 1px solid #e0d6b0; background: #fdf8e6; border-radius: 6px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.lthf__ralodd p { margin: 0 0 8px !important; }
.lthf__ralodd .lthf__chips { margin-bottom: 6px; }
.lthf .lthf__ralanyway { font-size: 13px; }
.lthf__ralhelp { margin-top: 4px; font-size: 13px; color: var(--lthf-muted); }
.lthf__ralhelp summary { cursor: pointer; color: var(--lthf-link); text-decoration: underline; list-style: none; }
.lthf__ralhelp summary::-webkit-details-marker { display: none; }
.lthf__ralhelp p { margin: 6px 0 0 !important; }

/* Kod som rutan inte kunnat bekräfta: neutral ruta, inte grön "hittad". */
.lthf--osaker .lthf__hit { background: #f7f7f5; border-color: var(--lthf-line); }
.lthf--osaker .lthf__ok { color: var(--lthf-muted); }

/* Smala skärmar (320–420 px): rutan får plats, flikarnas text ryms, korten blir
   inte för smala (provat i Chromium, Firefox och WebKit 2026-10-15). */
.lthf .lthf__box, .lthf #ltregsok-ruta { min-width: 0; max-width: 100%; }
@media (max-width: 420px) {
  .lthf #ltregsok-ruta { padding: 16px 14px; }
  .lthf .ltregsok-ruta__tabs button { font-size: 12.5px !important; padding: 0 3px !important; }
  .lthf--film .lthf__shop { padding: 0; }
}
@media (max-width: 359px) {
  .lthf__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .lthf__ph { aspect-ratio: 16 / 9; }
}

/* Platsen för regsökets ruta hålls från början (den byggs av regsok.js strax efter
   att sidan ritats) — annars växer rutan 121 → 292 px och sidan rycker vid laddning.
   Det nakna fältet syns inte under tiden. */
.lthf:not(.lthf--klar) .lthf__box { min-height: 292px; }
.lthf:not(.lthf--klar) .lthf__form { visibility: hidden; }
@media (max-width: 860px) { .lthf:not(.lthf--klar) .lthf__box { min-height: 274px; } }
@media (max-width: 380px) { .lthf:not(.lthf--klar) .lthf__box { min-height: 312px; } }
.lthf__wuse { color: var(--lthf-ok) !important; font-weight: 500; }
.lthf__ralhelp a { color: var(--lthf-link); }