/* ==========================================================================
   Home (E1): plate hero, catalog group shortcuts on the grey band,
   newly arrived parts, specialist facts.
   ========================================================================== */

/* --- Hero: heading, plate and the two brand pills, centred ------------- */
.sp-home-hero {
    display: grid; justify-items: center;
    padding-top: 36px; padding-bottom: 44px;
    scroll-margin-top: 16px;
}
/* The hero sets its own top space, so main's general top padding would double it */
body.sp .site-main:has(> .sp-home-hero) { padding-top: 0; }
.sp-home-title {
    max-width: 22ch; text-align: center;
    font-size: clamp(25px, 6.7vw, 36px); line-height: 1.06; font-weight: 600;
    letter-spacing: var(--sp-track-tight); text-wrap: balance;
}
.sp-home-hero .sp-lookup { width: min(100%, 640px); margin-top: 26px; }

/* The plate and "Hitta delar" are one control with a ring that breathes in and out */
@keyframes sp-home-glow {
    from { box-shadow: 0 0 0 1px var(--sp-t3), 0 0 0 3px rgba(46, 106, 98, .22), 0 6px 18px -10px rgba(20, 40, 38, .25); }
    to   { box-shadow: 0 0 0 1px var(--sp-t3), 0 0 0 10px rgba(46, 106, 98, .13), 0 6px 18px -10px rgba(20, 40, 38, .25); }
}
.sp-lookup--hero .sp-lookup-box {
    position: relative; display: flex; align-items: center; gap: 6px; padding: 0 7px 0 0;
    background: var(--sp-paper); border-radius: var(--sp-r-card);
    animation: sp-home-glow 1.2s ease-in-out infinite alternate;
}
/* The 2px ring straddles the edge, 1px out (the shadow above) and 1px in (this overlay,
   painted over the content), so the anti-aliased corner of the clipped badge never lets
   the white behind it show through as a hairline. The glow sits 1px further in to match. */
.sp-lookup--hero .sp-lookup-box::after {
    content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
    border: 2px solid var(--sp-t3); border-radius: calc(var(--sp-r-card) + 1px);
}
.sp-lookup--hero .sp-plate { flex: 1; height: 78px; border-radius: var(--sp-r-card) 0 0 var(--sp-r-card); }
.sp-lookup--hero .sp-plate input { font-size: 38px; }
.sp-lookup--hero .sp-lookup-go { height: 64px; padding: 0 26px; border-radius: 13px; }
.sp-lookup--hero .sp-lookup-msg { text-align: center; margin-top: 14px; }

.sp-home-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.sp-home-brands .sp-pill { min-height: var(--sp-hit); padding: 0 18px; font-size: var(--sp-fs-lg); gap: 8px; }

/* Mobile: the ring moves to the plate; "Hitta delar" waits until something is typed,
   then slides in as an arrow button inside the plate. */
@media (max-width: 559px) {
    .sp-lookup--hero .sp-lookup-box { display: block; padding: 0; background: none; animation: none; }
    .sp-lookup--hero .sp-lookup-box::after { border-radius: calc(var(--sp-r-tile) + 1px); }
    .sp-lookup--hero .sp-plate {
        height: 78px; border-radius: var(--sp-r-tile);
        animation: sp-home-glow 1.2s ease-in-out infinite alternate;
    }
    .sp-lookup--hero .sp-plate-eu { width: 52px; }
    .sp-lookup--hero .sp-lookup-ph { left: 52px; }
    .sp-lookup--hero .sp-plate input { font-size: 40px; transition: padding .25s var(--sp-ease); }
    .sp-lookup--hero .sp-lookup-plate.has-vin input { padding-left: 8px; font-size: clamp(16px, 4.1vw, 22px); }
    .sp-lookup--hero .sp-lookup-go {
        position: absolute; right: 11px; top: 11px; width: 56px; height: 56px; min-height: 0; padding: 0; gap: 0;
        border-radius: 12px; opacity: 0; transform: translateX(10px) scale(.9); pointer-events: none;
        transition: opacity .2s, transform .3s var(--sp-ease), background var(--sp-fast);
    }
    .sp-lookup--hero .sp-lookup-go svg { width: 24px; height: 24px; }
    .sp-lookup--hero .sp-lookup-go-text {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
    .sp-lookup--hero .sp-lookup-box:has(input:not(:placeholder-shown)) .sp-lookup-go,
    .sp-lookup--hero .sp-lookup-go[aria-busy="true"] { opacity: 1; transform: none; pointer-events: auto; }
    .sp-lookup--hero .sp-lookup-box:has(input:not(:placeholder-shown)) .sp-plate input { padding-right: 72px; }
}
@media (max-width: 359px) {
    .sp-home-brands .sp-pill { padding: 0 14px; font-size: var(--sp-fs-body); }
}
@media (min-width: 900px) {
    .sp-home-hero { padding-top: 56px; padding-bottom: 68px; }
    .sp-home-title { font-size: var(--sp-fs-display); }
}

/* --- Grey band: catalog main groups ------------------------------------- */
.sp-home-band { padding: 36px 0; background: var(--sp-surface); }
.sp-home-band .sp-section-head { margin-bottom: 16px; }
.sp-home-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-home-group {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 8px 8px 14px; border: 0; border-radius: var(--sp-r-tile);
    background: var(--sp-paper); color: var(--sp-ink); text-align: left; text-decoration: none;
    font: inherit; cursor: pointer; transition: background var(--sp-fast);
}
body.sp .sp-home-group:hover { background: var(--sp-t1); color: var(--sp-ink); }
.sp-home-group-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 4px; }
.sp-home-group-img img {
    position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply;
    transition: transform var(--sp-slow) var(--sp-ease);
}
.sp-home-group:hover .sp-home-group-img img { transform: scale(1.04); }
.sp-home-group-name {
    padding: 0 4px; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
    overflow-wrap: anywhere; hyphens: auto;
}
.sp-home-all { display: inline-block; margin-top: 18px; }
@media (min-width: 700px) { .sp-home-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) {
    .sp-home-band { padding: 52px 0 60px; }
    .sp-home-band .sp-section-head { margin-bottom: 22px; }
    .sp-home-groups { gap: 14px; }
    .sp-home-group { border-radius: var(--sp-r-card); padding: 12px 12px 18px; }
    .sp-home-group-name { font-size: var(--sp-fs-h3); }
    .sp-home-all { display: none; }
}
@media (hover: none) { .sp-home-group:hover .sp-home-group-img img { transform: none; } }

/* --- Newly arrived parts ------------------------------------------------ */
.sp-home-fresh { padding-top: 44px; padding-bottom: 8px; }
@media (min-width: 900px) { .sp-home-fresh { padding-top: 64px; } }

/* --- Facts: Speedparts' own claims from their pages --------------------- */
.sp-home-about { display: grid; gap: 22px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sp-line); }
.sp-home-about h2 { max-width: 14ch; }
.sp-home-facts { display: grid; gap: 18px; }
.sp-home-facts b { display: block; margin-bottom: 4px; font-size: var(--sp-fs-lg); font-weight: 600; }
.sp-home-facts span { color: var(--sp-ink-soft); }
@media (min-width: 900px) {
    .sp-home-about { margin-top: 72px; padding-top: 48px; grid-template-columns: 1fr 2.2fr; gap: 48px; }
    .sp-home-facts { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-lookup--hero .sp-lookup-box, .sp-lookup--hero .sp-plate { animation: none; box-shadow: 0 0 0 1px var(--sp-t3); }
}

/* Temporary launch welcome, through November 2026. */

.sp-launch { position: relative; background: var(--sp-surface); color: var(--sp-ink); }
.sp-launch-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.sp-launch-art { flex: 0 0 56px; width: 56px; height: 52px; color: var(--sp-header); overflow: visible; }
.sp-launch-glint { transform-box: fill-box; transform-origin: center; animation: sp-launch-twinkle 2.4s ease-in-out infinite; }
.sp-launch-glint--second { animation-delay: -1.2s; }
@keyframes sp-launch-twinkle {
  0% { opacity: 0; transform: scale(0) rotate(-55deg); }
  10% { opacity: 1; transform: scale(1) rotate(-15deg); }
  24% { opacity: 1; transform: scale(1.1) rotate(35deg); }
  40%, 100% { opacity: 0; transform: scale(0) rotate(110deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-launch-glint { animation: none; opacity: 1; }
}
.sp-launch-copy { min-width: 0; }
.sp-launch h2 { margin: 0; font: 600 var(--sp-fs-h3)/1.25 var(--sp-font); letter-spacing: -.01em; }
.sp-launch p { margin: 5px 0 0; color: var(--sp-ink-soft); font-size: var(--sp-fs-body); line-height: 1.4; }
.sp-launch-close { position: absolute; right: var(--sp-gutter); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--sp-hit); height: var(--sp-hit); border: 0; border-radius: var(--sp-r-sm); background: transparent; color: var(--sp-ink-soft); cursor: pointer; }
.sp-launch-close:hover { background: var(--sp-surface-2); color: var(--sp-ink); }
.sp-launch-close:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; }
.sp-launch-close svg { width: 20px; height: 20px; }
@media (max-width: 599px) {
  .sp-launch-inner { justify-content: flex-start; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .sp-launch-art { flex-basis: 44px; width: 44px; height: 44px; }
  .sp-launch h2 { padding: 0 24px 0 0; font-size: var(--sp-fs-lg); text-wrap: balance; }
  .sp-launch p { padding: 0 16px 0 0; font-size: var(--sp-fs-ui); max-width: 34ch; }
  .sp-launch-close { right: 4px; top: 4px; transform: none; }
}